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?
fuente
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:absolute
para 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 configuradosdisplay: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.
fuente
position:absolute
, ese es un buen punto.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.
fuente
Si está creando un juego HTML5, el lienzo es mucho mejor. Este es el por qué:
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!
fuente
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).
fuente
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.
fuente
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.
fuente