¿Doble búfer en el juego HTML5 Canvas?

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!

— Petteri Hietavirta
fuente

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 petteri@momentumracer.com para obtener más comentarios o ideas para que esto no se convierta en un tablero de chat :-).

— Petteri Hietavirta

Respuestas:

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

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

No hay necesidad de duplicar los juegos html5 de búfer. El navegador ya maneja esto por usted solo actualizando el objeto de lienzo después de que se haya ejecutado su script. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

— G1i1ch
fuente

Noté que usando hacer doble buffer como este:

dibujar todo un lienzo invisible
copiar lienzo invisible al lienzo real

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

— Luna plateada
fuente