¿Qué necesitas saber al convertir un juego flash a HTML5?

 

 

 

  • ¡Registro!
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Cómo mejorar la experiencia de juego HTML5
    2. Por qué omitir HTML y CSS en la interfaz de usuario del juego mejorará el rendimiento del juego
    3. Cómo asegurarse de que se hayan cargado fuentes personalizadas
    4. Cómo facilitar a los usuarios guardar el juego
    5. Cómo aprovechar el reemplazo del sombreador de fragmentos predeterminado
    6. Cómo cambiar el método de teñido con un sombreador predeterminado
    7. Cómo inspeccionar el sobregiro para detectar problemas de tasa de cumplimiento
    8. Por qué los motores de física son tus amigos
    9. Cómo exportar sonidos desde un archivo .fla
    10. Cómo utilizar MP3 en conversiones de Flash a HTML5
    11. Entonces, ¿por qué debería convertir Flash a JavaScript?
    12. ¿Querer aprender más?
      1. Otras lecturas

    Los consejos presentados en este artículo tienen como objetivo ayudar a los desarrolladores de juegos HTML5 a evitar errores comunes al convertir sus juegos Flash a JS y hacer que el proceso sea lo más fluido posible. Hoy, Tomasz Grajewski se centrará principalmente en Phaser v2. Sin embargo, ahora hay disponible una versión más nueva de Phaser y le recomendamos que la consulte, ya que introdujo una gran cantidad de funciones nuevas e interesantes, como múltiples cámaras, escenas, mapas de mosaicos o el motor de física Matter.js.

     

    Con el aumento del uso de HTML5, muchas empresas comienzan a rehacer sus títulos más populares para deshacerse del Flash obsoleto y adaptar sus productos a los últimos estándares de la industria. Este cambio es especialmente visible en las industrias de juegos de azar, casinos y entretenimiento y viene ocurriendo desde hace varios años, por lo que ya se ha convertido una selección decente de títulos.

    Desgraciadamente, al navegar por Internet, a menudo nos topamos con ejemplos de un trabajo aparentemente apresurado, cuyo resultado es la calidad del producto final. Por eso es una buena idea que los desarrolladores de juegos dediquen parte de su tiempo a familiarizarse con el tema de la conversión de Flash a HTML5 y aprender qué errores evitar antes de ponerse manos a la obra.

    Entre las razones para elegir JavaScript en lugar de Flash, además de los problemas técnicos obvios, también está el hecho de que cambiar el diseño de tu juego de SWF a JavaScript puede generar una mejor experiencia de usuario, lo que a su vez le da un aspecto moderno. ¿Pero como hacerlo? ¿Necesita un conversor de juegos JavaScript dedicado para deshacerse de esta tecnología obsoleta? Bueno, la conversión de Flash a HTML5 puede ser muy sencilla: aquí te explicamos cómo hacerlo.

    Lectura recomendada : Principios del diseño de juegos HTML5

    Cómo mejorar la experiencia de 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 que vale la pena considerar:

    • Soporte para dispositivos móviles
      La conversión de Flash a JavaScript permite llegar a una audiencia más amplia (usuarios de dispositivos móviles); Por lo general, también es necesario implementar en el juego la compatibilidad con los controles de la pantalla táctil. Afortunadamente, tanto los dispositivos Android como iOS ahora también son compatibles con WebGL, por lo que normalmente se puede lograr fácilmente una renderización de 30 o 60 FPS. En muchos casos, 60 FPS no causará ningún problema, lo que sólo mejorará con el tiempo, a medida que los dispositivos móviles tengan cada vez más rendimiento.

    • Mejora del rendimiento
      Cuando se trata de comparar ActionScript y JavaScript, este último es más rápido que el primero. Aparte de eso, convertir un juego es una buena ocasión para revisar los algoritmos utilizados en el código del juego. Con el desarrollo de juegos JavaScript puedes optimizarlos o eliminar por completo el código no utilizado que dejan los desarrolladores originales.
    • Corregir errores y realizar mejoras en el juego
      Hacer que nuevos desarrolladores investiguen el código fuente del juego puede ayudar a corregir errores conocidos o descubrir otros nuevos y muy raros. Esto haría que jugar el juego fuera menos irritante para los jugadores, lo que les haría pasar más tiempo en su sitio y les animaría a probar sus otros juegos.
    • Agregar análisis web
      Además de rastrear el tráfico, el análisis web también se puede utilizar para recopilar conocimientos sobre cómo se comportan los jugadores en un juego y dónde se atascan durante el juego.
    • Agregar localización
      Esto aumentaría la audiencia y es importante para los niños de otros países que juegan. ¿O tal vez tu juego no está en inglés y quieres admitir ese idioma?

    Por qué omitir HTML y CSS en la interfaz de usuario del juego mejorará el rendimiento del juego

    Cuando se trata del desarrollo de juegos JavaScript, puede resultar tentador aprovechar HTML y CSS para los botones, widgets y otros elementos de la GUI del juego. Mi consejo es que tengas cuidado aquí. Es contradictorio, pero en realidad aprovechar los elementos DOM tiene menos rendimiento en juegos complejos y esto gana más importancia en dispositivos móviles. Si desea lograr 60 FPS constantes en todas las plataformas, es posible que sea necesario renunciar a HTML y CSS.

     

    Los elementos GUI no interactivos, como barras de salud, barras de munición o contadores de puntuación, se pueden implementar fácilmente en Phaser utilizando imágenes normales (la Phaser.Imageclase), aprovechando la .croppropiedad para recortar y la Phaser.Textclase para etiquetas de texto simples.

    Elementos interactivos como botones y casillas de verificación se pueden implementar utilizando la clase incorporada Phaser.Button. Otros elementos más complejos pueden estar compuestos de diferentes tipos simples, como grupos, imágenes, botones y etiquetas de texto.

    Nota: Cada vez que crea una instancia de un objeto Phaser.Text o PIXI.Text, se crea una nueva textura para representar el texto. Esta textura adicional rompe el agrupamiento de vértices, así que tenga cuidado de no tener demasiados .

    Cómo asegurarse de que se hayan cargado fuentes personalizadas

    Si desea representar texto con una fuente vectorial personalizada (por ejemplo, TTF u OTF), debe asegurarse de que el navegador ya haya cargado la fuente antes de representar cualquier texto. Phaser v2 no proporciona una solución para este propósito, pero se puede utilizar otra biblioteca: Web Font Loader .

    Suponiendo que 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:

    Cree un archivo CSS simple que Web Font Loader cargará (no es necesario que lo incluya en su HTML):

    @font-face { // This name you will use in JS font-family: 'Gunplay'; // URL to the font file, can be relative or absolute src: url('../fonts/gunplay.ttf') format('truetype'); font-weight: 400;}

    Ahora defina una variable global llamada WebFontConfig. Normalmente algo tan sencillo como esto será suficiente:

    var WebFontConfig = { 'classes': false, 'timeout': 0, 'active': function() { // The font has successfully loaded... }, 'custom': { 'families': ['Gunplay'], // URL to the previously mentioned CSS 'urls': ['styles/fonts.css'] }};

    Al final, recuerde poner su código en la devolución de llamada "activa" que se muestra arriba. ¡Y eso es!

     

    Cómo facilitar a los usuarios guardar el juego

    Para almacenar datos locales de forma persistente en ActionScript, utilizaría la clase SharedObject. En JavaScript, el reemplazo simple es localStorage API , que permite almacenar cadenas para recuperarlas más tarde y sobrevivir a las recargas de la página.

    Guardar datos es muy sencillo:

    var progress = 15;localStorage.setItem('myGame.progress', progress);

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

    La carga también es sencilla, pero recuerda que los valores recuperados serán cadenas o nullno existen.

    var progress = parseInt(localStorage.getItem('myGame.progress')) || 0;

    Aquí nos aseguramos de que el valor de retorno sea un número. Si no existe, se asignará 0 a la progressvariable.

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

    var stats = {'goals': 13, 'wins': 7, 'losses': 3, 'draws': 1};localStorage.setItem('myGame.stats', JSON.stringify(stats));…var stats = JSON.parse(localStorage.getItem('myGame.stats')) || {};

    Hay algunos casos en los que el objeto localStorage no estará disponible. Por ejemplo, cuando se utiliza el file://protocolo o cuando se carga una página en una ventana privada. Puede usar la declaración try and catch para asegurarse de que su código continúe funcionando y use valores predeterminados, como se muestra en el siguiente ejemplo:

    try { var progress = localStorage.getItem('myGame.progress');} catch (exception) { // localStorage not available, use default values}

    Otra cosa para recordar es que los datos almacenados se guardan por dominio, no por URL. Entonces, si existe el riesgo de que muchos juegos estén alojados en un solo dominio, entonces es mejor usar un prefijo (espacio de nombres) al guardar. En el ejemplo anterior 'myGame.'hay un prefijo de este tipo y normalmente querrás reemplazarlo con el nombre del juego. Vinos de Granada

    Nota : si tu juego está integrado en un iframe, localStorage no persistirá en iOS. En este caso, necesitará almacenar datos en el iframe principal .

    Cómo aprovechar el reemplazo del sombreador de fragmentos predeterminado

    Cuando Phaser y PixiJS renderizan tus sprites, utilizan un sombreador de fragmentos interno simple. No tiene muchas funciones porque está diseñado para una velocidad. Sin embargo, puedes reemplazar ese sombreador para tus propósitos. Por ejemplo, puede aprovecharlo para inspeccionar el sobregiro o admitir más funciones de renderizado.

    A continuación se muestra un ejemplo de cómo proporcionar su propio sombreador de fragmentos predeterminado a Phaser v2:

    function preload() { this.load.shader('filename.frag', 'shaders/filename.frag');}function create() { var renderer = this.renderer; var batch = renderer.spriteBatch; batch.defaultShader = new PIXI.AbstractFilter(this.cache.getShader('filename.frag')); batch.setContext(renderer.gl);}

    Nota: Es importante recordar que el sombreador predeterminado se usa para TODOS los sprites, así como cuando se renderiza una textura. Además, tenga en cuenta que el uso de sombreadores complejos para todos los sprites del juego reducirá en gran medida el rendimiento de renderizado .

     

    Cómo cambiar el método de teñido con un sombreador predeterminado

    Se puede utilizar un sombreador predeterminado personalizado para reemplazar el método de teñido predeterminado en Phaser y PixiJS.

    El teñido en Phaser y PixiJS funciona multiplicando los píxeles de textura por un color determinado. La multiplicación siempre oscurece los colores, lo que obviamente no es un problema; es simplemente diferente del tinte Flash. Para uno de nuestros juegos, necesitábamos implementar tintes similares a Flash y decidimos que se podía usar un sombreador predeterminado personalizado. A continuación se muestra un ejemplo de dicho sombreador de fragmentos:

    // Specific tint variant, similar to the Flash tinting that adds// to the color and does not multiply. A negative of a color// must be supplied for this shader to work properly, i.e. set// sprite.tint to 0 to turn whole sprite to white.precision lowp float;varying vec2 vTextureCoord;varying vec4 vColor;uniform sampler2D uSampler;void main(void) { vec4 f = texture2D(uSampler, vTextureCoord); float a = clamp(vColor.a, 0.00001, 1.0); gl_FragColor.rgb = f.rgb * vColor.a + clamp(1.0 - vColor.rgb/a, 0.0, 1.0) * vColor.a * f.a; gl_FragColor.a = f.a * vColor.a;}

    Este sombreador aclara los píxeles agregando un color base al tinte. Para que esto funcione, debes proporcionar el negativo del color que deseas. Por lo tanto, para obtener blanco, debes configurar:

    sprite.tint = 0x000000; // This colors the sprite to whiteSprite.tint = 0x00ffff; // This gives red

    El resultado en nuestro juego se ve así (observa cómo los tanques parpadean en blanco cuando son golpeados):

    Cómo inspeccionar el sobregiro para detectar problemas de tasa de cumplimiento

    También se puede aprovechar el reemplazo del sombreador predeterminado para ayudar con la depuración. A continuación, explico cómo se puede detectar el sobregiro con dicho sombreador.

    El sobredibujo ocurre cuando muchos o todos los píxeles de la pantalla se representan varias veces. Por ejemplo, muchos objetos ocupan el mismo lugar y se representan uno sobre otro. La cantidad de píxeles que puede renderizar una GPU por segundo se describe como tasa de llenado. Las GPU de escritorio modernas tienen una tasa de llenado excesiva para los propósitos 2D habituales, pero las móviles son mucho más lentas.

    Existe un método simple para averiguar cuántas veces se escribe cada píxel en la pantalla reemplazando el sombreador de fragmentos global predeterminado en PixiJS y Phaser por este:

    void main(void) { gl_FragColor.rgb += 1.0 / 7.0;}

    Este sombreador aclara los píxeles que se están procesando. El número 7,0 indica cuántas escrituras se necesitan para que el píxel se vuelva blanco; Puedes sintonizar este número a tu gusto. En otras palabras, los píxeles más claros de la pantalla se escribieron varias veces y los píxeles blancos se escribieron al menos 7 veces.

    Este sombreador también ayuda a encontrar tanto objetos "invisibles" que por alguna razón todavía están renderizados como sprites que tienen áreas transparentes excesivas alrededor que deben eliminarse (la GPU aún necesita procesar píxeles transparentes en sus texturas).

     

    Sombreador de sobregiro en acción. ( Vista previa grande )

    La imagen de la izquierda muestra cómo un jugador ve el juego, mientras que la de la derecha muestra el efecto de aplicar el sombreador de sobregiro a la misma escena.

    Por qué los motores de física son tus amigos

    Un motor de física es un middleware que se encarga de simular cuerpos físicos (normalmente dinámica de cuerpos rígidos) 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;
    • calcular respuestas de colisión, es decir, cómo deberían reaccionar dos objetos cuando chocan.

    En Merixstudio, somos grandes admiradores del motor de física Box2D y lo usamos en algunas ocasiones. Existe un complemento Phaser que funciona bien para este propósito. Box2D también se utiliza en el motor de juegos Unity y GameMaker Studio 2.

    Si bien un motor de física acelerará su desarrollo, hay un precio que tendrá que pagar: rendimiento de tiempo de ejecución reducido. Detectar colisiones y calcular respuestas es una tarea que requiere un uso intensivo de la CPU. Es posible que esté limitado a varias docenas de objetos dinámicos en una escena en teléfonos móviles o que enfrente un rendimiento degradado, así como una velocidad de fotogramas reducida por debajo de 60 FPS.

    Superposición de depuración de física de Phaser. ( Vista previa grande )

    La parte izquierda de la imagen es una escena de un juego, mientras que el lado derecho muestra la misma escena con la superposición de depuración de física de Phaser en la parte superior.

    Cómo exportar sonidos desde un archivo .fla

    Si tiene efectos de sonido de un juego Flash dentro de un archivo .fla , no es posible exportarlos desde la GUI (al menos no en Adobe Animate CC 2017) debido a la falta de una opción de menú que sirva para este propósito. Pero hay otra solución: un script dedicado que hace precisamente eso:

    function normalizeFilename(name) { // Converts a camelCase name to snake_case name return name.replace(/([A-Z])/g, '_$1').replace(/^_/, '').toLowerCase();}function displayPath(path) { // Makes the file path more readable return unescape(path).replace('file:///', '').replace('|', ':');}fl.outputPanel.clear();if (fl.getDocumentDOM().library.getSelectedItems().length 0) // Get only selected items var library = fl.getDocumentDOM().library.getSelectedItems();else // Get all items var library = fl.getDocumentDOM().library.items;// Ask user for the export destination directoryvar root = fl.browseForFolderURL('Select a folder.');var errors = 0;for (var i = 0; i library.length; i++) { var item = library[i]; if (item.itemType !== 'sound') continue; var path = root + '/'; if (item.originalCompressionType === 'RAW') path += normalizeFilename(item.name.split('.')[0]) + '.wav'; else path += normalizeFilename(item.name); var success = item.exportToFile(path); if (!success) errors += 1; fl.trace(displayPath(path) + ': ' + (success ? 'OK' : 'Error'));}fl.trace(errors + ' error(s)');

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

     

    1. Guarde el código anterior como un archivo .jsfl en su computadora;
    2. Abra un archivo .fla con Adobe Animate;
    3. Seleccione 'Comandos' → 'Ejecutar comando' en el menú superior y seleccione el script en el diálogo que se abre;
    4. Ahora aparece otro archivo de diálogo para seleccionar el directorio de destino de exportación.

    ¡Y hecho! Ahora debería tener archivos WAV en el directorio especificado. Lo que queda por hacer es convertirlos, por ejemplo, a MP3, OGG o AAC.

    Cómo utilizar MP3 en conversiones de Flash a HTML5

    El viejo formato MP3 ha vuelto, ya que algunas patentes han expirado y ahora todos los navegadores pueden decodificar y reproducir MP3. Esto facilita un poco el desarrollo ya que finalmente no es necesario preparar dos formatos de audio separados. Antes necesitabas, por ejemplo, archivos OGG y AAC, mientras que ahora bastará con MP3.

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

    • Los MP3 deben descodificarse después de cargarse, lo que puede llevar mucho tiempo, especialmente en dispositivos móviles. Si ve una pausa después de que se hayan cargado todos sus recursos, probablemente significa que se están decodificando MP3;
    • reproducir MP3 en bucle sin pausas es un poco problemático. La solución es utilizar mp3loop, sobre el cual puedes leer en el artículo publicado por Compu Phase .

    Entonces, ¿por qué debería convertir Flash a JavaScript?

    Como puede ver, la conversión de Flash a JavaScript no es imposible si sabe qué hacer. Con conocimiento y habilidad, puedes dejar de luchar con Flash y disfrutar de los juegos fluidos y entretenidos creados en JavaScript. No intentes arreglar Flash: ¡deshazte de él antes de que todos se vean obligados a hacerlo!

    ¿Querer aprender más?

    En este artículo, me centré principalmente en Phaser v2. Sin embargo, ahora hay disponible una versión más nueva de Phaser y le recomiendo encarecidamente que la consulte, ya que introdujo una gran cantidad de funciones nuevas e interesantes, como múltiples cámaras, escenas, mapas de mosaicos o el motor de física Matter.js.

    Si eres lo suficientemente valiente y quieres crear cosas realmente extraordinarias en los navegadores, entonces WebGL es lo correcto para aprender desde cero. Es un nivel de abstracción más bajo que varios marcos o herramientas de creación de juegos, pero permite lograr un mayor rendimiento y calidad incluso si trabajas en juegos o demostraciones 2D. Entre muchos sitios web que pueden resultarle útiles a la hora de aprender los conceptos básicos de WebGL se encuentra WebGL Fundamentals (utiliza demostraciones interactivas). Además de eso, para obtener más información sobre las tasas de adopción de funciones WebGL, consulte Estadísticas de WebGL .

    Recuerde siempre que nunca existe demasiado conocimiento, ¡especialmente cuando se trata de desarrollo de juegos!

    Otras lecturas

    • SolidStart: una clase diferente de metamarco
    • Crear un carrito de compras con almacenamiento web HTML5
    • Pasar de Flash a HTML, CSS y JavaScript
    • Cómo crear un juego multiusuario en tiempo real desde cero

    (rb, ra, yk, il, mrn)Explora más en

    • javascript
    • HTML5
    • Destello
    • Juegos





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    ¿Qué necesitas saber al convertir un juego flash a HTML5?

    ¿Qué necesitas saber al convertir un juego flash a HTML5?

    ¡Registro! Implemente rápidamente. Implementar inteligentemente Índice Cómo mejorar la experiencia de

    programar

    es

    https://pseint.es/static/images/programar-que-necesitas-saber-al-convertir-un-juego-flash-a-html5ja-940-0.jpg

    2024-04-04

     

    ¿Qué necesitas saber al convertir un juego flash a HTML5?
    ¿Qué necesitas saber al convertir un juego flash a HTML5?

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20