Dicas de performance para games para mobiles

Nota do tradutor: Esse tutorial (original de 26 de abril de 2012) apresenta alguns métodos antigos ou que não estão tão indicados para criação de games para smartphones hoje, principalmente depois da implementação da exportação pelo Cordova no Construct 2 e publicação pelo Intel Xdk. Ainda assim, vi algumas boas dicas para desempenho para mobiles mais antigos, aumentando o alcance do seu jogo, e se você utiliza o PhoneGap é bem útil. Enfim, façam bom uso.]

Já passamos por isso

Então, você já tem o Construct 2 instalado e rodando, cria um jogo simples de 5 sprites com background, exporta para o PhoneGap ou appMobi e fica tipo "tá rodando a 5 frames por segundo, WTF Construct?!". Eu já passei por isso, já vi isso, e como um, digamos, desenvolvedor de games de sucesso para mobiles através do C2, eu gostaria de esclarecer o que está acontecendo, porque está acontecendo e como fazer funcionar.

Vamos com calma

Construct 2 exporta jogos como HTML5 Canvas. Quase todo navegador de desktop suporta a aceleração por hardware no Canvas chamada WebGL, a qual ao contrário, nos mobiles não é suportada tão amplamente. Sim, os navegadores mobiles como Opera e Firefox parecem suportar o WebGL, mas as aplicações do PhoneGap NÃO o utilizam, elas usam seu próprio navegador nativo. Então enquanto os navegadores mobiles não suportam nativamente o WebGL, o Canvas nos smatphones vai ser renderizado por software, o que é extremamente lento. E ainda adicione a isso ao sistema de eventos do jogo que o C2 usa, o qual é exportado para javascript. As Event Sheets que você cria no C2 são executadas pelo processador no mobile tantas vezes por segundo quanto ele pode, logo quanto mais eventos maior a necessidade de processamento, mais devagar vai ficar seu aplicativo. Tendo ainda todo o papo de renderização dito acima...

O que fazer?

Você pode seguir alguns passos para aumentar a performance do seu aplicativo. Primeiro de tudo, um bom começo, seria ler os manuais do Construct 2, principalmente o Performance Tips. Lá ele te mostra o que fazer para otimizar basicamente seu jogo. Tenha em mente que o foco é otimização de um modo geral. Aqui eu vou tentar expandir isso um pouco, pois estaremos tentando alcançar os ambientes que NÃO têm aceleração WebGL.

1) SEMPRE marque as opções:

Pixel Rounding e WebGL como ON, Sampling como POINT, Clear Background como NO e todas as layers do layout com a opção de transparência em YES (exceto claro, para aquelas layers que precisem de um design especial, não abordadas nesse tutorial).

Como dito no link do Performance Tips, o Pixel Rounding vai evitar que o processador execute as operações de floating point mais pesadas. Marcando o Sampling como Point fará com que o aplicativo redimensione e gire os sprites de forma mais rápida (funciona apenas no WebGL, portanto essa opção vai ser importante para o desempenho no futuro). Marcando NO no Clear Background será desligado o preenchimento automático (o fundo branco) de todo o layout, o que ocorreria a cada frame.

2) EVITE ter muitos sprites na tela

Mais de 20 (sim, apenas 20) sprites provavelmente já causarão lentidão. Além disso sprites de grandes dimensões também fazem a execução mais lenta.

3) EVITE o redimensionamento e a rotação dos sprites

Eventos como Set Width, Set Height, Set Size, Set Scale, Set Angle, Rotate (que também existe como o behavior Rotate) acabam com a performance.

4) EVITE a semitransparência e os efeitos nos sprites

Eventos como Set opacity, Set Effect (o mesmo para a opção Effects dos sprites), os behaviors Fade e Sine (usando transparência), irão reduzir drasticamente o seu fps.

5) NUNCA use Force Own textures nas layers

Cada layer teria sua renderização forçada em processos separados. Havendo dois Canvas rodando, quando um já funciona lentamente seria péssimo.

6) NUNCA use o objeto Text

Por enquanto renderizar texto no canvas é uma operação muito ineficiente. No caso prefira usar o Spritefont ou o Textbox. Entretanto, existem limitações dependendo do caso.

7) EVITE usar o objeto Particles

O objeto Particles tende a criar grande quantidade de sprites, lembre-se do que foi dito no ponto 2.

8) EVITE animações rápidas

Ajuste as animações dos seus sprites para velocidades menores que 10. Tenha em mente ainda, que alguns navegadores mobile têm um limite no carregamento de imagens, logo evite sprites com muitos frames nas animações. Se seu layout todo tem menos que 100 frames já está de bom tamanho.

9) EVITE o evento For each loops

Tendo, por exemplo, 20 sprites no layout rodando o evento For each, já irá causar lentidão.

10) O Scroll to é mais rápido do que mover tudo

Em raras situações ocorreu comigo. Se você puder use o Scroll to para a posição do layout que deseja em vez de mover os sprites.

lrn2code

Em uma tradução livre seria, 'Aprenda para Programar'. Ou seja, estude!

E não tenha medo, é bem divertido

1) Aprenda um pouco de HTML, CSS e JavaScript

Pelo menos o suficiente para as alterações abaixo no seu arquivo html exportado:

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