Consejos de rendimiento para juegos móviles

Así que tienes Construct 2 instalado y funcionando, has creado un juego simple con 5 sprites y un fondo, lo has exportado a Phonegrap o a appMobi y estás en plan: "Funciona a 5 fotogramas por segundo (FPS), ¿qué narices, Construct?". He vivido eso y lo he visto, y como desarrollador exitoso de juegos para móvil, me gustaría arrojar un poo de luz sobre lo que está pasando, y contarte que está pasando y como arreglarlo.

Deja de enfadarte

Construct 2 exporta los juegos como Canvas HTML5. Casi todos los navegadores de ordenador soportan el hardware de aceleración de Canvas, llamado WebGL, el cual en los dispositivos móviles no es tan soportado, de hecho, el único móvil que conozco que soporta WebGL es Xperia. Sí, los navegadores de los móviles como Opera y Firefox parece que soportan WebGL, pero las aplicaciones de Phonegrap no lo usan, usan navegadores nativos que ya están incluidos. Así que como los navegadores nativos no soportan WebGL, los canvas en móvil son renderizados por el software, lo cual ralentiza. A eso añádele el sistema de eventos que usa Construt 2, el cual es exportado en javascript. Los grupos de eventos que creas en Construct 2 corren gracias al procesador del móvil, eso quiere decir que cuantos más eventos incluyes, más lento irá el juego. Todo lo dicho nos lleva a...

¿Qué hacer?

Hay algunos pasos que puedes usar para incrementar el rendimiento de tu aplicación móvil. Antes que nada, es una buena manera de empezar leerse el manual de consejos de rendimiento de Construct 2- Ahí explican que hacer para optimizar tu juego. Entiende que ahí explican la optimización en general. Yo trataré de expandir los consejos un poco, ya que nos centraremos en un ambiente NO acelerado por WebGL.

1) SIEMPRE configura pixel rounding en On, WebGL en On, Sampling en Point, Clear Background en No y todas las capas transparentes en Sí (a no ser que el diseño de tu juego requiera otra configuración)

Como dice en el manual de consejos de rendimiento que he vinculado arriba pixel rounding hará que el procesador evite muchas operaciones. Point sampling hará que la aplicación reescale y rote sprites más rápido (solo en WebGL), clear background hará que las partes vacías del fondo no aparezcan en cada frame.

2) EVITA tener un montón de sprites en pantalla

Un consejo: más de 20 (sí, veinte) sprites seguramente harán que le juego vaya lento. Pasa lo mismo con sprites más grandes.

3) EVITA reescalar los sprites y las rotaciones

Eventos como Set Width/Height/Size/Scale y Set Angle, Rotate son los que más afectan al rendimiento.

**4) EVITA las semitransparencias y los efectos de Sprite

Eventos como set opacity, set effect y Fade behavior harán que us FPS disminuyan drásticamente.

5) NUNCA fuerces una textura a una capa

Cada capa que tiene su propia textura será renderizada de manera separada. Tener dos canvas cuando una ya está trabajando lentamente es malo.

6) NUNCA uses el objeto de texto

Renderizar el texto en el canvas es una operación muy ineficiente. Usa spritefont plugin o la caja de texto. Aunque claro, tendrán algunas limitaciones.

7) Evita usar partículas

Las partículas a veces crean muchos sprites, mira el punto 2.

8) Evita las animaciones rápidas.

Sí, mantén la velocidad de tus animaciones a menos de 10. Además, piensa que en algunos navegadores móvil tienen un límite de imágenes cargadas, así que trata de no usar sprites con muchos frames en sus animaciones. Si todos los sprite de tu layout tienen menos de 100 frames, está perfecto.

9) Evita usar el evento de For each loops

Tener 20 sprites y renderizar cada frame hará que vaya más lento.

10) Scroll to es más rápido que moverlo todo

Es una situación rara, pero me ha pasado. No muevas todos los objetos si puedes hacer que la vista se mueva.

lrn2code

No temas, ¡es divertido!

1) Aprende un poco de HTML, CSS y Javascript

Por lo menos para ser capaz de editar esto en tu archivo exportado de html:

    <style>
    ...
    canvas, canvas * {image-rendering: optimizeSpeed}
    </style>