Como otimizar um aplicativo da web HTML5 Canvas e JavaScript para o Mobile Safari?
17
Eu criei um jogo HTML5 Canvas e JS que funciona muito bem em um desktop ou laptop no Chrome (30fps), mas no Safari para dispositivos móveis eu consigo apenas 8 fps. Existem dicas ou truques simples para aumentar a taxa de quadros?
Infelizmente, a resposta é desenhar menos. Descobri que o gargalo com aplicativos baseados em tela (em qualquer plataforma, na verdade) é o tempo necessário para desenhar pixels.
Aqui estão algumas coisas para tentar:
Use várias camadas de tela. Desenhe seu plano de fundo em uma camada enquanto desenha seus objetos em outra camada (absolutamente posicionada na parte superior da camada de plano de fundo). (Nota: eu não tentei isso no safari para celular, mas ele pode ajudar em outras plataformas)
Redesenhar apenas sprites que foram alterados. Isso é complicado, mas definitivamente aumenta o desempenho. A idéia é armazenar se um sprite precisa ou não ser redesenhado e redesenhar apenas sprites que precisam, juntamente com o plano de fundo por trás deles. (Isso também precisa cascatear com outros objetos que possam estar sobrepostos por sprite.)
A coisa com o desenvolvimento no Chrome é que: a) seu mecanismo JavaScript (V8) é rápido como o inferno eb) as versões mais recentes (7,8,9) têm aceleração de GPU no que diz respeito à renderização de tela. Isso, associado ao fato de que o hardware móvel não é tão poderoso quanto o seu desktop / laptop, significa que será realmente difícil chegar perto do mesmo desempenho no safari móvel.
Acho que, por enquanto, a melhor abordagem pode ser direcionar seu jogo ao safari móvel desde o início e tentar criar um jogo que não seja tão intensivo em redesenhos.
+1 Desenhar menos é definitivamente e infelizmente o caminho a seguir, embora com uma segunda tela para a camada de segundo plano e uma abordagem sinalizada suja, você possa obter até 50% mais desempenho em alguns casos.
Ivo Wetzel
4
Isso é um tiro no escuro, mas seu jogo pode operar em sprites DIV com transformações CSS? Digo isso porque estou obtendo um desempenho maravilhoso ao mover coisas em dispositivos iOS com transformações e transições CSS.
Eles parecem estar adequadamente acelerados por hardware, com a ressalva bizarra de que você deve usar o formulário 3D para as transformações (por exemplo, translate3D, em vez de traduzir) para que a aceleração inicie. É realmente muito suave e a implementação do navegador iOS suporta o onde você acabou de definir diretamente uma matriz flutuante de 16 elementos, o que é muito conveniente para mim.
Estou tão impressionado com o quão suave acaba sendo, que pretendo experimentar um simples projeto de jogo escrito dessa maneira.
Detestaria adicionar uma resposta a um tópico antigo - mas estou surpreso que ninguém tenha mencionado isso.
Ao escrever seus primeiros jogos, escreva-os como você esperaria que eles funcionassem de maneira inteligente. As técnicas acima são bons pontos de partida para manter o desempenho alto - mas o verdadeiro truque é o criador de perfil. Se você criar um perfil de seu aplicativo no Chrome ou Firefox (dica: use muitos métodos para ver gargalos exatos; para não precisar mover as coisas mais tarde - você deve fazer isso de qualquer maneira). resultados exatos do tempo. No meu caso, eu vi que o redesenho constante do plano de fundo consumia 80% do tempo do navegador. Depois que eu mudei isso, vi outras chamadas atendendo 40% e mais, respectivamente. Depois de uma ou duas horas, vi um ganho substancial de FPS.
Eu também gostaria de ouvir seus resultados. Eu tenho tentado fazer a mesma coisa. Eu descobri que fazer muita matemática é bom, mas assim que você coloca uma tela lá, fica mental e as taxas de quadros caem.
Eu tinha uma sobreposição em primeiro plano que exibia efeitos. Era uma imagem de qualidade muito alta, mas o material alfa diminuiu a velocidade tanto que eu a soltei completamente em troca de mais quadros por segundo.
Outra coisa que fiz foi usar o PHP para elaborar algumas das matemáticas pesadas. Eu tinha grandes conjuntos de dados, mas em vez de obter o JavaScript para calcular e mostrar os dados, decidi deixar o PHP fazer o trabalho e permitir que o JavaScript mostrasse resultados. Isso não economizou muito tempo, porque o JavaScript é "sehr gut" com matemática.
Presumo que todo o site esteja em HTML5, então tente brincar com o trabalhador em segundo plano.
Isso é um tiro no escuro, mas seu jogo pode operar em sprites DIV com transformações CSS? Digo isso porque estou obtendo um desempenho maravilhoso ao mover coisas em dispositivos iOS com transformações e transições CSS.
Eles parecem estar adequadamente acelerados por hardware, com a ressalva bizarra de que você deve usar o formulário 3D para as transformações (por exemplo, translate3D, em vez de traduzir) para que a aceleração inicie. É realmente muito suave e a implementação do navegador iOS suporta o onde você acabou de definir diretamente uma matriz flutuante de 16 elementos, o que é muito conveniente para mim.
Estou tão impressionado com o quão suave acaba sendo, que pretendo experimentar um simples projeto de jogo escrito dessa maneira.
fonte
No caso de desenho de linha, combine tantos comandos lineTo antes de chamar o traço.
Esta e outras dicas: http://dt.deviantart.com/blog/38471599/
fonte
tudo o que o @Gosub disse mais:
olhe para qualquer matemática que você esteja fazendo, veja se há alguma maneira de usar algoritmos mais eficientes.
use imagens menores. tente fazer as dimensões dos poderes de imagem de 2
veja se você pode se livrar da mistura alfa na tela ou não use a propriedade de opacidade CSS.
envie seus resultados de volta. seria interessante saber o que as coisas mais ajudaram.
fonte
Detestaria adicionar uma resposta a um tópico antigo - mas estou surpreso que ninguém tenha mencionado isso.
Ao escrever seus primeiros jogos, escreva-os como você esperaria que eles funcionassem de maneira inteligente. As técnicas acima são bons pontos de partida para manter o desempenho alto - mas o verdadeiro truque é o criador de perfil. Se você criar um perfil de seu aplicativo no Chrome ou Firefox (dica: use muitos métodos para ver gargalos exatos; para não precisar mover as coisas mais tarde - você deve fazer isso de qualquer maneira). resultados exatos do tempo. No meu caso, eu vi que o redesenho constante do plano de fundo consumia 80% do tempo do navegador. Depois que eu mudei isso, vi outras chamadas atendendo 40% e mais, respectivamente. Depois de uma ou duas horas, vi um ganho substancial de FPS.
fonte
Eu também gostaria de ouvir seus resultados. Eu tenho tentado fazer a mesma coisa. Eu descobri que fazer muita matemática é bom, mas assim que você coloca uma tela lá, fica mental e as taxas de quadros caem.
Eu tinha uma sobreposição em primeiro plano que exibia efeitos. Era uma imagem de qualidade muito alta, mas o material alfa diminuiu a velocidade tanto que eu a soltei completamente em troca de mais quadros por segundo.
Outra coisa que fiz foi usar o PHP para elaborar algumas das matemáticas pesadas. Eu tinha grandes conjuntos de dados, mas em vez de obter o JavaScript para calcular e mostrar os dados, decidi deixar o PHP fazer o trabalho e permitir que o JavaScript mostrasse resultados. Isso não economizou muito tempo, porque o JavaScript é "sehr gut" com matemática.
Presumo que todo o site esteja em HTML5, então tente brincar com o trabalhador em segundo plano.
Espero ter ajudado e compartilhe seus resultados.
fonte