¿Doble búfer en el juego HTML5 Canvas?

23

Mi simple juego de lienzo parece funcionar bien en Chrome y FF en Mac / Linux. Todavía no he tenido la oportunidad de probarlo en teléfonos inteligentes o entornos Windows. No utiliza doble búfer, pero he visto algunos ejemplos de JS Canvas utilizándolo.

¿Cuándo se recomienda el uso del doble buffer? ¿Hace alguna diferencia solo para navegadores específicos? ¿Hay un impacto significativo en el rendimiento?

¡Gracias!

javascript html5 html-canvas double-buffering Petteri Hietavirta
fuente
2
OT: este juego gobierna, es muy prometedor, buen trabajo (ofc tienes que trabajar mucho más en la interfaz, algunas cosas no están claras, etc.)
o0 '.
De hecho es bastante dulce. Sin embargo, la recomendación: cambiar el nivel del mapa a algo diferente al espacio. Es un poco molesto que la ventana de mi navegador se desplace cada vez.
michael.bartnett
tampoco use las teclas de flecha para dirigir ... Actualmente estoy en modo seguro y en una pantalla pequeña se sigue desplazando por todo el lugar ... para su información: p
Tor Valamo
Creo que es posible capturar claves para que la ventana del navegador no actúe sobre ellas.
AttackingHobo
¡Gracias! A, W, D y volver a trabajar ahora también. Envíe un tweet a momentumracer o envíe un correo electrónico a [email protected] para obtener más comentarios o ideas para que esto no se convierta en un tablero de chat :-).
Petteri Hietavirta

Respuestas:

15

El doble buffering de un juego basado en el lienzo será sin duda un éxito en el rendimiento. Dibujaría una cantidad adicional de píxeles igual al tamaño de su lienzo en cada fotograma. En los juegos basados ​​en lienzo, dibujar en un lienzo es el mayor cuello de botella en la mayoría de los casos y desea limitarlo tanto como sea posible, especialmente en dispositivos móviles.

Chrome tiene aceleración de GPU (a partir de las últimas versiones), así como un motor de JavaScript rápido y malvado (V8) que no verá emparejado en un entorno móvil. Incluso en Chrome verá una desaceleración mediante la implementación de doble almacenamiento en búfer.

En pocas palabras, el beneficio del doble almacenamiento en búfer (lidiar con el "desgarro") no vale la pena el golpe de rendimiento que probablemente tomará.

Geoff
fuente
1
Sin embargo, cuando observe parpadeo o algo similar, un doble buffer probablemente lo arregle. Para responder a su pregunta: Si nota parpadeo, sugiero utilizar un doble buffer. De lo contrario, tampoco hay razón. Tenga en cuenta que un búfer doble es fácil de implementar o eliminar (en caso de que note que la pérdida de rendimiento supera el parpadeo).
user8363
1

Noté que usando hacer doble buffer como este:

  1. dibujar todo un lienzo invisible
  2. copiar lienzo invisible al lienzo real

en realidad ralentiza el renderizado (fps más bajos), en lugar de acelerarlo

Luna plateada
fuente