¿Cómo se optimiza una aplicación web HTML5 Canvas y JavaScript para Mobile Safari?
17
Creé un juego HTML5 Canvas y JS que funciona muy bien en una computadora de escritorio o portátil en Chrome (30 fps), pero en Safari móvil solo obtengo alrededor de 8 fps. ¿Hay algún consejo o truco simple para aumentar la velocidad de fotogramas?
Lamentablemente, la respuesta es dibujar menos. He descubierto que el cuello de botella con aplicaciones basadas en lienzo (en cualquier plataforma, realmente) es el tiempo que lleva dibujar píxeles.
Aquí hay algunas cosas para probar:
Usa varias capas de lienzo. Dibuje su fondo en una capa mientras dibuja sus objetos en otra capa (absolutamente colocado en la parte superior de la capa de fondo). (Nota: no he probado esto en el safari móvil, pero puede ayudar en otras plataformas)
Solo redibuja los sprites que han cambiado. Esto es complicado pero definitivamente aumenta el rendimiento. La idea es almacenar si un sprite necesita ser redibujado o no y redibujar solo los sprites que lo necesitan junto con el fondo detrás de ellos. (Esto también necesita conectarse en cascada con otros objetos que podrían superponerse).
Lo que sucede con el desarrollo en Chrome es que a) su motor de JavaScript (V8) es rápido como el infierno yb) las versiones más nuevas (7,8,9) tienen cierta aceleración de GPU cuando se trata de renderizado de lienzos. Eso, junto con el hecho de que el hardware móvil no es tan potente como su computadora de escritorio / portátil, significa que será realmente difícil llegar a tener el mismo rendimiento en un safari móvil.
Creo que, por el momento, el mejor enfoque podría ser apuntar a su juego en un safari móvil desde el principio e intentar y construir un juego que no sea tan intensivo de rediseño.
+1 Dibujar menos es definitivamente y desafortunadamente el camino a seguir aquí, aunque con un segundo lienzo para la capa de fondo y un enfoque marcado sucio, puede obtener hasta un 50% más de rendimiento en algunos casos.
Ivo Wetzel el
4
Esto es un poco arriesgado, pero ¿puede su juego funcionar con sprites DIV con transformaciones CSS? Digo esto porque estoy obteniendo un rendimiento maravilloso al mover cosas en dispositivos iOS con transformaciones y transiciones CSS.
Estos parecen estar correctamente acelerados por hardware, con la extraña advertencia de que debe usar la forma 3D para las transformaciones (es decir, translate3D, en lugar de traducir) para que la aceleración se active. Es realmente muy suave, y la implementación del navegador iOS admite formulario donde simplemente establece una matriz flotante de 16 elementos directamente, lo cual es muy conveniente para mí.
Estoy tan impresionado con lo suave que termina siendo, que he tenido la intención de probar un proyecto de juego simple escrito de esta manera.
Odiaría agregar una respuesta a un hilo antiguo, pero me sorprende que nadie haya mencionado esto.
Cuando escribas tus primeros juegos, solo escríbelos como esperarías que funcionen de manera inteligente. Las técnicas anteriores son buenos puntos de partida para mantener un alto rendimiento, pero el verdadero truco es el perfilador. Si perfila su aplicación en Chrome o Firefox (sugerencia: use muchos métodos para que pueda ver cuellos de botella exactos; para que no tenga que mover cosas más tarde, debería hacerlo de todos modos), obtendrá el beneficio adicional de ver Resultados exactos de tiempo. En mi caso, vi que volver a dibujar constantemente el fondo tomó el 80% del tiempo del navegador. Después de sacar eso del camino, vi que otras llamadas ocupaban un 40% y más, respectivamente. Después de una o dos horas, vi una ganancia sustancial de FPS.
También me gustaría saber de sus resultados. He estado tratando de hacer lo mismo. Descubrí que hacer muchas matemáticas está bien, pero tan pronto como pones un lienzo allí, se vuelve mental y las tasas de cuadros caen.
Tenía una superposición de primer plano que mostraba efectos. Era una imagen de muy alta calidad, pero el material alfa la ralentizó tanto que la solté por completo a cambio de más cuadros por segundo.
Otra cosa que hice fue usar PHP para resolver algunas de las matemáticas pesadas. Tenía grandes conjuntos de datos, pero en lugar de hacer que JavaScript calcule y muestre los datos, decidí dejar que PHP haga el trabajo y que JavaScript muestre resultados. Esto no ahorró mucho tiempo porque JavaScript es "sehr gut" con las matemáticas.
Supongo que todo su sitio está en HTML5, así que intente jugar con el trabajador en segundo plano.
Espero haber ayudado y por favor comparta sus resultados.
Esto es un poco arriesgado, pero ¿puede su juego funcionar con sprites DIV con transformaciones CSS? Digo esto porque estoy obteniendo un rendimiento maravilloso al mover cosas en dispositivos iOS con transformaciones y transiciones CSS.
Estos parecen estar correctamente acelerados por hardware, con la extraña advertencia de que debe usar la forma 3D para las transformaciones (es decir, translate3D, en lugar de traducir) para que la aceleración se active. Es realmente muy suave, y la implementación del navegador iOS admite formulario donde simplemente establece una matriz flotante de 16 elementos directamente, lo cual es muy conveniente para mí.
Estoy tan impresionado con lo suave que termina siendo, que he tenido la intención de probar un proyecto de juego simple escrito de esta manera.
fuente
En caso de dibujo lineal, combine tantos comandos lineTo antes de llamar a stroke.
Este y algunos otros consejos: http://dt.deviantart.com/blog/38471599/
fuente
todo @Gosub dijo más:
mira cualquier matemática que estés haciendo, mira si hay alguna manera de usar algoritmos más eficientes.
Usa imágenes más pequeñas. intenta hacer las dimensiones de las potencias de imagen de 2
vea si puede deshacerse de la mezcla alfa en el lienzo o no usar la propiedad de opacidad CSS.
por favor publique sus resultados. Sería interesante saber qué cosas ayudaron más.
fuente
Odiaría agregar una respuesta a un hilo antiguo, pero me sorprende que nadie haya mencionado esto.
Cuando escribas tus primeros juegos, solo escríbelos como esperarías que funcionen de manera inteligente. Las técnicas anteriores son buenos puntos de partida para mantener un alto rendimiento, pero el verdadero truco es el perfilador. Si perfila su aplicación en Chrome o Firefox (sugerencia: use muchos métodos para que pueda ver cuellos de botella exactos; para que no tenga que mover cosas más tarde, debería hacerlo de todos modos), obtendrá el beneficio adicional de ver Resultados exactos de tiempo. En mi caso, vi que volver a dibujar constantemente el fondo tomó el 80% del tiempo del navegador. Después de sacar eso del camino, vi que otras llamadas ocupaban un 40% y más, respectivamente. Después de una o dos horas, vi una ganancia sustancial de FPS.
fuente
También me gustaría saber de sus resultados. He estado tratando de hacer lo mismo. Descubrí que hacer muchas matemáticas está bien, pero tan pronto como pones un lienzo allí, se vuelve mental y las tasas de cuadros caen.
Tenía una superposición de primer plano que mostraba efectos. Era una imagen de muy alta calidad, pero el material alfa la ralentizó tanto que la solté por completo a cambio de más cuadros por segundo.
Otra cosa que hice fue usar PHP para resolver algunas de las matemáticas pesadas. Tenía grandes conjuntos de datos, pero en lugar de hacer que JavaScript calcule y muestre los datos, decidí dejar que PHP haga el trabajo y que JavaScript muestre resultados. Esto no ahorró mucho tiempo porque JavaScript es "sehr gut" con las matemáticas.
Supongo que todo su sitio está en HTML5, así que intente jugar con el trabajador en segundo plano.
Espero haber ayudado y por favor comparta sus resultados.
fuente