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

14

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?

Letharion
fuente

Respuestas:

13

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.

jhocking
fuente
3
Para ser honesto trabajando en juegos HTML5 durante el último año como un trabajo diario, diría que el navegador que no admite Canvas no es lo suficientemente rápido para ningún juego decente, pero, de nuevo, nada más lento que WebKit en teléfonos Android ... :(
Ivo Wetzel
Gracias :) No me importa mucho el "soporte del navegador", para cuando haya aprendido lo suficiente como para que eso importe, espero que el problema se haya resuelto. Esto es principalmente para divertirse y aprender.
Letharion
También estoy haciendo eso: el juego en sí mismo se dibuja en el lienzo, mientras que la GUI consta de elementos DOM parcialmente transparentes en la parte superior.
Philipp
@IvoWetzel Siento lo mismo ... también trabajamos en juegos en plataformas móviles y Android es prácticamente imposible de jugar ...
Vaughan Hilts
12

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.

aaaaaaaaaaaa
fuente
2
No pensé en mencionarlo position:absolute, ese es un buen punto.
jhocking
¿No está acelerada la GPU de lienzo en algún nivel donde no está el DOM?
Thomas
1
@Thomas El único lugar donde puedes estar seguro de que hay aceleración de GPU es webGL. (Técnicamente podría implementarse sin, pero eso no es probable que suceda). Las primeras implementaciones 2D de lienzo fueron estrictamente CPU, algunas de las funcionalidades se han movido en algunos navegadores a GPU, no en todos los casos con ganancias de rendimiento significativas. En cuanto a la aceleración de la GPU DOM, están trabajando en ello, y no veo ninguna razón en particular para que no ocurra. En cualquier caso, lo que importa en última instancia no es cómo lo hace el navegador, pero si funciona lo suficientemente bien para su necesidad, la GPU no siempre significa más rápido.
aaaaaaaaaaaa
¿Qué quieres decir con GPU no siempre es más rápido? En una PC, esto podría ser cierto, pero en las plataformas móviles, prefiero que la GPU haga más renderizado para que la CPU tenga más 'ciclos' para gastar en ejecutar la lógica del juego como AI, etc. De esta manera, el juego podría ser más complejo .
Thomas
1
@Thomas Depende de la plataforma, el trabajo y muchas otras cosas. El 2D de la vieja escuela es principalmente operaciones de memoria, mantener recursos en la memoria principal y usar la CPU para esas operaciones funcionará bastante bien, también en un teléfono móvil, pero tratar de realizar operaciones en los datos ubicados en la memoria del otro procesador es un asesino de rendimiento, así que si combina operaciones que la GPU no puede hacer con las operaciones de GPU, terminará enviando el búfer de un lado a otro dependiendo de la operación o hará que uno de los procesadores escriba en la memoria de los otros procesadores.
aaaaaaaaaaaa
6

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.

Ivo Wetzel
fuente
Con respecto a la velocidad, basada en una presentación en video del Motor Aves , cuando tenía miles de elementos, DOM era realmente más rápido de manejar que el lienzo. ¿No estas de acuerdo? ¿Ha cambiado esto? Desearía poder encontrar ese video nuevamente ...
Letharion
1
: D trabajo Zynga, con el tipo que hizo Aves. Las cosas han cambiado en el último año, confía en mí :)
Ivo Wetzel
-1, he intentado tener ~ 100000 elementos dom para una aplicación que no sea de juego, que prácticamente no funcionó. Pero unos pocos miles de elementos no son problemáticos. Tampoco es que el lienzo vaya a ser rápido si dibujas miles de imágenes en cada actualización.
aaaaaaaaaaaa
@eBusiness A continuación, siga adelante e introduzca ordenamientos Z complejos y transformaciones 3D. Buena suerte con eso :)
Ivo Wetzel
44
@IvoWetzel Si quieres hacer 3D, el lienzo es la opción. Pero eso no es lo que dice su respuesta, entonces, ¿cuál es su punto?
aaaaaaaaaaaa
2

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!

Zoyt
fuente
2

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).

Por Quested Aronsson
fuente
2

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.

d13
fuente
1

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.

Copiar
fuente
¿Desde cuándo DOM tiene un bajo rendimiento? Simplemente no es acelerado por hardware, esa es la única diferencia. Y una tabla de 500x500 en colores de fondo en la celda no es una implementación DOM eficiente
Raynos
1
@Raynos Noté que no es una implementación eficiente de DOM. No hay ninguno si desea manipular píxeles.
copia el
1
-1, las mesas grandes son un asesino de rendimiento. Definitivamente, Canvas es la mejor herramienta si desea manipular píxeles individuales, aunque configurarlo con una implementación DOM tan pobre realmente hace que su ejemplo no tenga sentido. Fuera de la cadera, mi mejor oportunidad para una implementación DOM sería 50000 div 5x1 con 32 imágenes de fondo diferentes intercambiadas según sea necesario.
aaaaaaaaaaaa
@eBusiness sí, la gente ya me lo dijo. Lástima que no lo resolví por mí mismo en ese momento: - /
copia el
@Raynos, DOM nunca fue rápido. De hecho, una de las principales razones para el lienzo es porque el DOM es lento. Relacionado: stackoverflow.com/q/6817093/632951
Pacerier