Convertir juegos flash a HTML5

Sep 16, 2025

Cómo

[dieciséis]

Flash está siendo abandonado lentamente por Adobe a favor de HTML5 y JavaScript; Su funcionario final de la vida se establece para el año 2020. Y ahí es donde este artículo será útil.

Reconstruir un sitio web de 2004 Flash para 2018

Los consejos descritos a continuación tienen como objetivo ayudar a los desarrolladores de juegos HTML5 Evitar errores comunes al convertir los juegos flash a JavaScript, además de hacer que todo el proceso de desarrollo sea lo más fácil posible. Todo lo que necesita es el conocimiento básico de JavaScript, WebGL y el marco de Phaser.

Cambiar su diseño de juego de SWF a Javascript puede producir un mejor experiencia de usuario , que a su vez le da un aspecto moderno. ¿Pero como hacerlo? ¿Necesita un convertidor de juego de JavaScript dedicado para deshacerse de esta tecnología obsoleta? Bueno, Flash to HTML5 La conversión puede ser un pedazo de pastel, esto es lo que un desarrollador experimentado de juegos JavaScript tiene que decir sobre el asunto.

¿Me gusta mantener su proceso de diseño simple? A Creador de sitios web y el derecho Alojamiento web El proveedor puede mantenerlo así.

01. Mejorar la experiencia del juego HTML5

Convertir un juego a otra plataforma es una excelente oportunidad para mejorarlo, solucionar sus problemas y aumentar la audiencia. A continuación se muestran algunas cosas que se pueden hacer fácilmente y vale la pena considerar:

Apoyo a los dispositivos móviles
Convertir desde Flash a JavaScript permite llegar a una audiencia más amplia: los usuarios de dispositivos móviles son compatibles con los controles de pantalla táctil, generalmente deben implementarse en el juego. Afortunadamente, los dispositivos Android e IOS ahora también admiten WebGL, por lo que se puede lograr fácilmente 30 o 60 FPS que se pueden lograr fácilmente. En muchos casos, 60 FPS no causarán ningún problema, lo que solo mejorará con el tiempo, ya que los dispositivos móviles se vuelven más activos.
Mejorando el desempeño
Cuando se trata de comparar ActionScript y JavaScript, este último es más rápido. Aparte de eso, convertir un juego es una buena ocasión para revisar algoritmos utilizados en el código de juego. Con el desarrollo de juegos de Javascript, puede optimizarlos o eliminar completamente el código no utilizado que queda por los desarrolladores originales.
Fijación de errores y haciendo mejoras al juego.
Tener nuevos desarrolladores que analizan el código fuente del juego pueden ayudar a solucionar errores conocidos o descubrir nuevos y muy raros. Esto haría jugar al juego menos irritante para los jugadores, lo que los haría pasar más tiempo en tu sitio y animarlos a probar tus otros juegos.
Añadiendo analítica web
Además de rastrear el tráfico, la análisis web también se puede usar para recopilar conocimientos sobre cómo se comportan los jugadores en un juego y donde se atascan durante el juego.
Añadiendo localización
Esto aumentaría la audiencia y es importante para los niños de otros países jugando su juego. ¿O tal vez su juego no está en inglés y quiere apoyar ese idioma?

02. Lograr 60 FPS

Cuando se trata del desarrollo de juegos de JavaScript, puede ser tentador aprovechar HTML y CSS para botones, widgets y otros elementos de GUI. Nuestro consejo es tener cuidado aquí. Es contraintuitivo, pero en realidad aprovechando los elementos DOM es menos actuador en juegos complejos y esto gana más importancia en el móvil. Si desea lograr constantes 60 FPS en todas las plataformas, es posible que se requiera renunciar a HTML y CSS.

Los elementos de GUI no interactivos, como las barras de salud, las barras de munición o los contadores de puntajes se pueden implementar fácilmente en Phaser utilizando imágenes regulares (la clase 'Phaser.Image'), aprovechando la propiedad '.crop' para recortar y el 'Phaser. Clase de texto para etiquetas de texto simples.

Los elementos interactivos, como los botones y las casillas de verificación se pueden implementar utilizando la clase 'PHASER.BUTTON' incorporada. Otros elementos más complejos pueden componerse de diferentes tipos simples, como grupos, imágenes, botones y etiquetas de texto.

03. Cargando fuentes personalizadas

Si desea prestar texto con una fuente de vectores personalizada (por ejemplo, TTF u OTF), debe asegurarse de que la fuente ya haya sido cargada por el navegador antes de representar cualquier texto. Phaser V2.6 no proporciona una solución para este propósito, pero se puede usar otra biblioteca. Cargador de fuentes web .

Suponiendo que usted tiene un archivo de fuente e incluye el cargador de fuentes web en su página, a continuación se muestra un ejemplo simple de cómo cargar una fuente. Haga un archivo CSS simple que se cargue mediante cargador de fuentes web (no necesita incluirlo en su HTML):

 @ Fuente-cara {
  // este nombre que usarás en js
  Fuente-familia: 'Guaplay';
  // URL al archivo de fuente, puede ser relativo o absoluto
  SRC: Formato de url ('/ fonts / gunplay.ttf ') (' truetype ');
  Peso de fuente: 400;
}

Ahora define una variable global llamada WebFontconfig. Algo tan simple como esto suele ser suficiente:

 var webfontconfig = {
  'Clases': Falso,
  'Tiempo de espera': 0,
  'Activo': función () {
  // la fuente ha cargado con éxito ...
  },
  'personalizado': {
  'Familias': ['Guaplay'],
  // URL a la CSS mencionada anteriormente
  'URLS': ['Styles / Fonts.CSS']
  }
};

Recuerde poner su código en la devolución de llamada 'activa' que se muestra arriba. ¡Y eso es!

04. SALVE EL JUEGO

Ahora estamos en el punto medio de nuestro flash a la conversión de JavaScript, es hora de cuidar de los sombreadores. Para almacenar persistentemente los datos locales en ActionScript, usaría la clase 'ShareDOBJECT'. En JavaScript, el reemplazo simple es el LocalStorage API , que permite almacenar cadenas para la recuperación posterior, las recargas de la página sobrevivientes.

El ahorro de datos es muy simple:

 Var Progreso = 15;
LocalStorage.SetItem ('MyGame.Progress', progreso);

Tenga en cuenta que en el ejemplo anterior, la variable 'Progreso', que es un número, se convertirá a una cadena.

La carga es simple también, pero recuerde que los valores recuperados serán cadenas o nulos si no existen.

 VAR Progress = Parsint (localStorage.GetItem ('MyGame.Progress')) || 0;

Aquí estamos asegurando que el valor de retorno sea un número. Si no existe, entonces se asignarán 0 a la variable 'Progreso'.

También puede almacenar y recuperar estructuras más complejas, por ejemplo, JSON:

 Estadísticas VAR = {'Objetivos': 13, 'WINS': 7, 'Pérdidas': 3, 'Dibujos': 1
};
LocalStorage.SetItem ('MyGame.Stats', JSON.Stringify (estadísticas));
...
var stats = json.parse (localstorage.getitem ('mygame.stats')) || {};

Hay algunos casos en que el objeto'Storage 'local' no estará disponible. Por ejemplo, cuando se utiliza el archivo: // Protocolo o cuando una página está cargada en una ventana privada. Puede usar la declaración 'Intentar y captura' para asegurarse de que su código continúe trabajando y use valores predeterminados, que se muestra en el siguiente ejemplo:

 prueba {
    var progrescion = localstorage.getitem ('mygame.progress');
} catch (excepción) {
  //Storage local no disponible, use valores predeterminados
}

Otra cosa a recordar es que los datos almacenados se guardan por dominio, no por URL. Entonces, si hay un riesgo de que muchos juegos sean alojados en un solo dominio, entonces es mejor usar un prefijo (espacio de nombres) al guardar. En el ejemplo anterior, 'MyGame'. Es un prefijo y, por lo general, quieres reemplazarlo con el nombre del juego.

Si su juego está incrustado en un iframe, entonces LocalStorage no persistirá en iOS. En este caso, deberías almacenar datos en el padre iframe en su lugar.

05. Sombreador de fragmento predeterminado

Convert Flash games to HTML5: Custom default shader

Cuando Phaser y Pixijs representan sus sprites, usan un simple sombreador de fragmentos internos. No tiene muchas características porque se adapta a la velocidad. Sin embargo, puede reemplazar ese sombreador para sus propósitos. Por ejemplo, puede aprovecharlo para inspeccionar la sobrecarga o admitir más funciones para la representación. A continuación se muestra un ejemplo de cómo suministrar su propio sombreador de fragmento predeterminado a Phaser V2.

 Función precarga () {
  esto.load.shader ('filename.frag', 'shaders / filename.frag');
}
función crea () {
  Var Renderer = esto.Renderer;
  var batch = renderer.spritebatch;
  batch.defaultshader =
  nuevo pixi.abstractfilter (esto.cache.getshader ('filename.frag'));
  batch.setcontext (renderer.gl);
}

06. Cambiar el método de tintura.

Se puede usar un shader predeterminado personalizado para reemplazar los métodos de tinte predeterminados en PHASER y PIXIJS. Tinting en Phaser y Pixijs funciona multiplicando píxeles de textura por un color dado. La multiplicación siempre oscurece los colores, lo que obviamente no es un problema; Es simplemente diferente de la teñida del flash. Para uno de nuestros juegos, necesitábamos implementar el teñido similar a Flash y decidimos que se podría usar un shader predeterminado personalizado. A continuación se muestra un ejemplo de tal sombreador de fragmento:

// Variante de tinte específico, similar al Tinte Flash que agrega
// al color y no se multiplica. Un negativo de un color
// debe suministrarse para que este sombreador funcione correctamente, es decir, se establece
// Sprite.Tinta a 0 para convertir el sprite entero a blanco.
Precision Lowp Float;
Vary VEC2 VTEXTURECOORD;
Vary Vec4 VCOLOR;
Sampler2D uniforme USAMPLER;
Nuez PRINCIPAL (VOID) {
  Vec4 F = Texture2D (USAMPLER, VTEXTRECOORD);
  flotando a = pinza (vcolor.a, 0.00001, 1.0);
  GL_FRAGCOLOR.RGB = F.RGB * VCOLOR.A + PINZA (1.0 - VCOLOR.RGB / A, 0.0, 1.0) * VCOLOR.A * F.A;
  gl_fragcolor.a = f.A * vcolor.a;
}

Este sombreado aclara píxeles agregando un color base al tinte uno. Para que esto funcione, debe proporcionar negativos del color que desee. Por lo tanto, para obtener blanco, necesita configurar:

 Sprite.Tint = 0x000000; // estos colores el sprite a blanco
Sprite.tint = 0x00ffff; // esto da rojo

07. Inspeccione la sobrecubierta

Convert Flash games to HTML5: Overdraw shader

Reemplazar un shader predeterminado también puede aprovecharse para ayudar con la depuración. A continuación, hemos explicado cómo se puede detectar sobrelaw con un sombreador de este tipo.

La sobrecarga ocurre cuando muchos o todos los píxeles en la pantalla se prestan varias veces. Por ejemplo, muchos objetos que toman el mismo lugar y se hacen uno sobre otro. ¿Cuántos píxeles se puede representar una GPU por segundo se describe como tasa de llenado? Las GPU de escritorio modernas tienen una tasa de llenado excesiva para propósitos habituales de 2D, pero los móviles son mucho más lentos.

Existe un método simple para descubrir cuántas veces se escribe cada pixel en la pantalla reemplazando el sombreador de fragmento global predeterminado en Pixijs y Phaser con este:

 Nuez PRINCIPAL (VOID) {
  gl_fragcolor.rgb + = 1.0 / 7.0;
}

Este sombreado aclara píxeles que se están procesando. El número 7.0 indica cuántas escrituras se necesitan para convertir los píxeles blancos; Puedes ajustar este número a tu gusto. En otras palabras, se escribieron píxeles más ligeros en la pantalla varias veces, y los píxeles blancos se escribieron al menos siete veces.

Este sombreador también ayuda a encontrar objetos "invisibles" que, por alguna razón, se estén prestados, y los sprites que tengan áreas transparentes excesivas alrededor de eso deben ser eliminadas (la GPU todavía necesita procesar píxeles transparentes en sus texturas).

08. ¿Por qué los motores de la física son tus amigos?

Convert Flash games to HTML5: Phaser physics debug

Un motor de física es un middleware que es responsable de simular los organismos de física (generalmente dinámica corporal rígida) y sus colisiones. Los motores de física simulan espacios 2D o 3D, pero no ambos. Un motor de física típico proporcionará:

Movimiento de objetos estableciendo velocidades, aceleraciones, articulaciones y motores;
Detectar colisiones entre varios tipos de formas;
Cálculo de las respuestas de colisión, es decir, cómo se deben reaccionar dos objetos cuando chocan.

Hay un complemento de faser que funciona bien para este propósito. Box2D también se usa en el motor de juegos de Unity y en Gamemaker Studio 2.

Si bien un motor físico acelerará su desarrollo, hay un precio que tendrá que pagar: Reducción de rendimiento de tiempo de ejecución. Detectar colisiones y calcular las respuestas es una tarea de CPU intensiva. Puede limitarse a varias docenas de objetos dinámicos en una escena en los teléfonos móviles o el rendimiento degradado de la cara, así como la velocidad de fotogramas reducidas por debajo de 60 fps.

09. Exportar sonidos

Si tiene un juego de flash, efectos de sonido dentro de un archivo .fla, entonces no es posible exportarlos de la GUI (al menos no en Adobe Animate CC 2017) debido a la falta de opciones de menú que atienden a este propósito. Pero hay otra solución: un guión dedicado que hace solo eso:

 Función NormalizeFileName (nombre) {
  // convierte un nombre de camello a Snake_case Name
  devolver nombre.replace (/ ([a-z]) / g, '_ $ 1'). Reemplace (/ ^ _ /, '' ') .tolowercase ();
}
Pantalla de función (ruta) {
  // hace que la ruta del archivo sea más legible
  Devuelva el insensape (ruta) .RePlace ('Archivo: ///', '' ') .RePlace (' | ',': ');
}
fl.OutputPanel.Clear ();
if (fl.getDocumentdom (). biblioteca.getelecteditems (). Longitud y GT; 0)
  // obtener solo elementos seleccionados
  Var Library = fl.getDocumentDom (). biblioteca.getelectectemems ();
demás
  // obtener todos los artículos
  var library = fl.getdocumentdom (). Biblioteca.
// Preguntar al usuario para el directorio de destino de exportación
var root = fl.browseforfolderurl ('Seleccione una carpeta');
Var errores = 0;
para (var i = 0; i & lt; biblioteca.length; i ++) {
  vario item = biblioteca [i];
  Si (item.itemtype! == 'sonido')
  Seguir;
  var ruta = raíz + '/';
  if (item.originalCompressionType === 'RAW')
  Ruta + = NormalizeFileName (item.name.split (''. ') ) +' .wav ';
  demás
  PATH + = NormalizeFileName (item.Name);
  var éxito = item.exporttofile (ruta);
  Si (! éxito)
  Errores + = 1;
  FL.TRACE (Pantalla (Ruta) + ':' + (éxito? 'Ok': 'error'));
}
FL.TRACE (ERRORS + 'error (s)');

Cómo usar el script para exportar archivos de sonido:

Guarde el código anterior como un archivo .jsfl en su computadora.
Abra un archivo .fla con Adobe Animate.
Seleccionar comandos & gt; Ejecute Comando desde el menú superior y seleccione el script en el diálogo que se abre.
Ahora aparece otro archivo de diálogo para seleccionar el directorio de destino de exportación.

¡Está hecho! Ahora debería tener archivos WAV en el directorio especificado. Lo que queda por hacer es convertirlos, por ejemplo, MP3, OGG o AAC. (Si tiene archivos de juego para mantenerse seguros, actualice a Decent almacenamiento en la nube .)

10. Cómo usar MP3s

El buen formato MP3 Viejo está de vuelta, ya que algunas patentes han caducado y ahora todos los navegadores pueden decodificar y reproducir MP3. Esto hace que el desarrollo sea un poco más fácil, ya que finalmente no hay necesidad de preparar dos formatos de audio separados. Anteriormente, necesitaba, por ejemplo, archivos OGG y AAC, mientras que ahora se bastará MP3.

No obstante, hay dos cosas importantes que necesita recordar sobre MP3:

Las MP3 necesitan decodificar después de la carga, lo que puede llevar mucho tiempo, especialmente en dispositivos móviles. Si ve una pausa después de que todos sus activos se han cargado, entonces probablemente significa que los MP3 están siendo decodificados
Jugar sin brocha MP3 en bucle es un poco problemático. La solución es usar MP3LOP, Leer más en este artículo. Publicado por Compu Fase.

Este artículo se publicó originalmente en número 277 de Creative Web Design Magazine Web Designer. Comprar emisión 277 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

5 juegos casuales para diseñadores
Construye tu propio juego de física webgl
Entiende la tubería de importación de activos de Unity

Convertir juegos flash a HTML5

01. Mejorar la experiencia del juego HTML5

02. Lograr 60 FPS

03. Cargando fuentes personalizadas

04. SALVE EL JUEGO

05. Sombreador de fragmento predeterminado

06. Cambiar el método de tintura.

07. Inspeccione la sobrecubierta

08. ¿Por qué los motores de la física son tus amigos?

09. Exportar sonidos

10. Cómo usar MP3s

Cómo - Artículos más populares

Crea un efecto de fondo de paralaje controlado por ratón

Cómo dibujar un lobo

21 maneras de mejorar la productividad con NPM

Comienza con el lienzo HTML

Pinte una tarjeta de tarot original

Cómo diseñar la cubierta de libro perfecta

Construye un reproductor de música simple con reaccionar

Crea copias digitales de calidad de tu arte

Categorías