¿Al lienzo, o no al lienzo, al construir juegos basados ​​en navegador?

Antecedentes: Tengo un amplio historial de desarrollo, pero la última vez que codifiqué un juego fue hace muchos años. Mis habilidades de Javascript son bastante limitadas, y tengo la intención de mejorarlas construyendo un juego simple: Tetris, Pac-man o algo de ese nivel de complejidad.

Pregunta: Me parece que una elección fundamental que debo hacer es si debo renderizar en un <canvas>elemento o no.

Con un lienzo, además de eso, tengo herramientas básicas para representar puntos, líneas y cosas más complejas. Presumiblemente hay, o habrá, también varios marcos para ayudar con esto.

Sin un lienzo, podría mantener mis objetos en el árbol DOM, como una página web normal, solo bastante compleja, con muchos elementos superpuestos.

¿Es un enfoque mejor que el otro? ¿Son mutuamente excluyentes? ¿Cómo sé cuál elegir?

Canvas y DOM no son mutuamente excluyentes, aunque están bastante separados. Un buen enfoque sería representar el área principal del juego (por ejemplo, las piezas que caen en Tetris) usando Canvas, y hacer toda la IU (por ejemplo, visualización de puntaje) con elementos DOM que se superponen al elemento del lienzo.

Dicho esto, este enfoque no es realmente necesario para un juego primitivo como Tetris. Canvas es útil para efectos gráficos más avanzados, pero si no son necesarios, entonces seguir con DOM le dará una compatibilidad más amplia; No todos los navegadores son compatibles con HTML5 Canvas.

Acerca de DOM
DOM funciona bastante bien para la 2D de la vieja escuela, lo que significa no usar rotación ni escala de imágenes. En realidad, existen herramientas para estos dos trabajos, pero no puede contar con que funcionen bien.

Para un juego, debe confiar en el motor de diseño del navegador lo menos posible, eso significa usarlo position:absolutepara colocar objetos. Intente, en la medida de lo posible, no crear y destruir objetos DOM todo el tiempo; si necesita un número muy variable de objetos, es posible que desee un conjunto de elementos DOM inactivos configurados display:none, listos para revivir cuando sea necesario.

DOM vs lienzo
Con la cuota de mercado de IE8, la reducción del lienzo se está convirtiendo en una opción cada vez más atractiva, para la mayoría de los juegos es probablemente una buena opción. Pero para algunos trabajos DOM es la herramienta más fácil de usar, puede usar algo de flujo de documentos si es necesario, puede captar clics directamente por el objeto renderizado, es fácil integrar barras de desplazamiento.

Es difícil cubrir la diferencia de rendimiento, depende del trabajo y variará enormemente de un navegador a otro.

Depende completamente del tipo de juego, aunque el lienzo se ajusta a "la mayoría" de ellos.

La gestión del DOM se vuelve horrible en cierto punto, cuantos más elementos tengas, más lento, más elementos te moverás.

La gestión del orden de carga de activos con elementos IMG es ... no trival (errores de intercepción en protocolos rotos a propósito en las etiquetas de imagen: D).

Sin embargo, para los juegos con imágenes estáticas en su mayoría y bajo conteo de efectos, todavía iría con DOM. Todo lo demás, el lienzo es la primera opción (señalar y hacer clic, aunque los mapas de hit son una historia diferente).

Canvas es tan rápido en estos días (incluso en iPhone) que casi no hay razón para no usarlo.

Si está creando un juego HTML5, el lienzo es mucho mejor. Este es el por qué:

1. Velocidad: piense en el lienzo como una imagen. Dibujas a la imagen, y luego olvida lo que dibujaste. Eso aumenta drásticamente el rendimiento, en comparación con DOM o SVG. Lo que hacen las aplicaciones DOM y SVG es hacer un seguimiento de cada objeto que colocas en la pantalla. Eso significa que si tiene un gran nivel con muchos objetos en la pantalla, especialmente fuera de la pantalla u ocultos, estos se dibujan y siguen de todos modos.
2. Características de dibujo: si bien los elementos DOM tienen poderosas transformaciones CSS3, eso no es nada en comparación con las características del lienzo. El lienzo puede dibujar cualquier objeto, tiene un potente soporte de degradado, complementos para mostrar objetos en 3D, filtros, etc.
3. Soporte: cuando use DOM, cuando quiera usar características experimentales como transformaciones o animaciones, debe usar los prefijos -moz-, -webkit-, -o- y -ms- en CSS. En el lienzo, no necesita preocuparse por eso. Solo dibuja con una función, y listo. Otra ventaja relacionada con el soporte del lienzo es cómo se muestra su aplicación. Como desarrollador de sitios web, la falta de estandarización DOM entre navegadores me vuelve loco. Los fondos, gradientes, transformaciones, etc. se muestran de manera diferente entre los navegadores, a pesar de las especificaciones detalladas del W3C. En el lienzo, solo me he encontrado con una cosa que podría ser diferente: los fondos. Cuando se muestra un fondo en mosaico, algunos navegadores tomarán "tile-x" como centro del mosaico a 0px en el eje x, y otros lo tomarán como mosaico del mosaico hacia abajo.
4. Bibliotecas y documentación: hay TONELADAS de grandes bibliotecas en documentaciones para hacer juegos con el lienzo. Algunas bibliotecas: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs, etc. Podría enumerar un montón más, pero no tiene sentido.

Desventaja - Animación - Si bien hay muchas bibliotecas excelentes para la animación, me encantan las animaciones CSS3. Es tan fácil de crear, manipular y activar. Hay varios trucos para que las animaciones CSS3 funcionen con objetos con el lienzo, pero sospecho que la mayoría de las personas prefieren no usar ese método.

¡Buena suerte con tu juego, y espero ver lo que haces!

Si considera apuntar a navegadores móviles, en particular Android, y el juego contiene gráficos en movimiento, evite la animación DOM. El navegador de stock en Android es inútil, aunque es un kit web. Consulte este hilo de problemas de Android antes de comenzar: "Representación terrible de las animaciones CSS3 y Javascript en el navegador y WebView" .

El lienzo en sí mismo podría no ser más rápido, pero existen marcos para invocar la aceleración de hardware para las animaciones del lienzo, por ejemplo CocoonJS . Hay un enlace a un video en el sitio, que muestra las mejoras de rendimiento que puede lograr mediante el uso del marco (pero por alguna razón no puedo publicar más de dos enlaces).

Respuesta simple: WebGL con respaldo de lienzo.

Respuesta matizada: si tu juego tiene mucho texto, superpone una capa de texto HTML. Pixi.js es un marco de visualización reforzado para la batalla con algunos extras útiles que funcionan bien para esto.

Recuerde DOM significa modelo de objeto de documento . Querrás usarlo para hacer juegos solo en situaciones muy raras y preferirás el lienzo en la mayoría de los casos.

Incluso si tu juego tiene pequeños requisitos gráficos, hacerlo en DOM tendrá un mal rendimiento; cualquier cosa más que Tetris probablemente funcionará mal.

Tengo un ejemplo del mundo real: cuando creé una implementación del Juego de la vida de Conway, comencé con una tabla de 500x500, cambiando el color de fondo de las celdas. En esta versión, un planeador no estaba funcionando a más de 30 fps, los patrones más grandes resultaron en apenas más de 1. En mi versión de lienzo de este juego, ahora es posible ejecutar patrones mucho más grandes (población de 1000 y más) sin problemas en ~ 30 fps.

Además, este también debería ser el caso para SVG ( Vector escalable Gráficos ), aunque nunca lo intenté en la práctica.

Editar : Tengo que admitir que mi ejemplo no es muy bueno (porque tablas = malo). Pero el punto principal sigue siendo cierto: la manipulación DOM es para documentos. El navegador tiene que buscar CSS y asignar más memoria cuando trabaja en elementos. Realmente no tiene sentido ser más rápido que el lienzo.