Canvas vs SVG para juegos simples

Question

Si quisiera construir un juego simple (serpiente, damas, pacman o lo que sea) ¿cuál sería el mejor enfoque - SVG o Canvas?

cosas que estoy interesado en:

1. Facilidad de aplicación (curva de aprendizaje lienzo vs SVG). Por ejemplo, si SVG tiene significativamente menos tutoriales y apoyo de la comunidad que es crucial para mí.

2. Rendimiento (no críticas para mí, pero sigue siendo importante)

Y también, en el campo de juego, hay juegos específicos que SVG es más adecuado para que la mano (o viceversa?)

Answer 1

Los juegos que requieren mucha interacción con el mouse y poca animación continua (como damas o ajedrez, o cualquier juego de mesa para el caso) son más adecuados para SVG porque trabajas con elementos dom. Considere un simple botón al pasar el mouse, en SVG puede agregar eventos o incluso colocar g.button:hover path {fill: blue;} en su CSS y funcionará. Canvas, por otro lado, requiere hacer un seguimiento del área afectada y dibujar todo en Javascript.

Serpiente y Pacman serían más adecuados para el lienzo, usted controla todo con su teclado y pintar sobre lienzo es menos costoso que mover elementos en SVG. Hay excelentes bibliotecas de juegos para lienzos, impact.js es uno de ellos.

Direccionamiento de sus puntos:

Facilidad de uso: si usted está familiarizado con puro JavaScript DOM SVG manipulación es una brisa. Si está en blanco, diría que el lienzo es más fácil de entender, ya que solo pintas sobre él.

Soporte de la comunidad: para lienzos de juegos gana indiscutiblemente. Hay una gran comunidad de SVG pero no en el área de juegos.

Rendimiento: Mixto. Tanto Canvas como SVG pueden ser lentos si no realizas un par de trucos. Por ejemplo, mover un solo cuadro de izquierda a derecha puede ser desigual en el lienzo si repinta toda la pantalla en cada cuadro. Si acaba de volver a pintar el área que cambió, entonces es suave. SVG manejaría este caso sin problemas. Pero, por otro lado, si desea animar miles de rectángulos a la vez, Canvas lo maneja sin problemas y SVG se atasca si no ajusta las rectas en un grupo y mueve el grupo.

Con todo, si desea explorar los juegos en JavaScript, quizás Canvas es una mejor opción. He hecho tres juegos en SVG, el último es http://color.method.ac, pero he incursionado en el lienzo y creo que es más adecuado para los juegos.