¿Debo usar HTML5 Canvas o CSS3 Sprites para animar objetos para un juego?

Question

Estoy en el proceso de comenzar a construir un juego de estrategia (think warcraft) para la web. He estado investigando en HTML5 Canvas y CSS3 sprites y todavía no puedo decidir qué tecnología usar.

El juego no se completará durante otros 6 meses.

Cualquier consejo sería apreciado.

Answer 1

Como probablemente oye tan a menudo ... "Depende ..." ™

Mi sugerencia sería considerar la sensación de la aplicación que está buscando. Si está tratando de construir una aplicación de imágenes ricas en gran parte, en su mayoría, usaría Canvas. Sin embargo, si intentas animar algunos gráficos, pero la página se mantiene y se comporta más como "Web", mezclada con otro contenido HTML, probaría CSS3.

dos puntos adicionales:

• En la actualidad, la lona es mejor soportada que CSS3 animación/sprites.
• Si utiliza Canvas, implementará su propio bucle de renderizado y su código de animación (o utilizará una tercera biblioteca en parte). Tu código crea animación al componer las distintas capas de cada cuadro, aplicar movimiento y repetir. No puede simplemente decir "mover esta imagen un poco hacia la derecha". Tendrás que hacer eso tú mismo.

Answer 2

La EA de juego en Internet "Lord of Ultima", como sordo como es, es un excelente ejemplo de un supramundo WarCraft de estilo (bueno, es más construcción de la ciudad ya que no existen unidades visibles), con animaciones y todo, construido sobre una base de sprites de HTML puro y CSS. Se ve y funciona bien y creo que la naturaleza del HTML del modelo de caja cuadrada se adapta a ese tipo de diseño basado en mosaico, especialmente porque gran parte del procesamiento de imágenes (incrusta <img> o <div> con un fondo, cambia la posición de fondo para la animación) y el manejo de clic/mouse se realiza para usted en html simple.

Si va el lienzo tiene que administrarlo usted mismo, lo que aumentará en gran medida la complejidad y el tiempo de desarrollo. Tendrás más control de los elementos menores y un mejor rendimiento, pero también perderás (si es que es importante) una mayor compatibilidad hacia atrás con los navegadores más antiguos. Por lo tanto, depende de qué tan complejo sea su diseño y qué tipo de rendimiento necesita.

Answer 3

Existen ventajas y desventajas para ambos. Actualmente, Canvas es mejor soportado que CSS3, pero dijiste que tu juego no se realizaría durante otros 6 meses, para entonces el soporte para CSS3 podría ser mucho mejor. También hay muchas otras variables aquí, como: ¿En qué navegador se verá el juego? ¿Qué tan avanzados son los gráficos que necesita para animar? etc ... Yo diría que el lienzo sería mejor para soportar la generación actual de navegadores y para gráficos de juegos, sin embargo, CSS3 sería más rápido, pero ni siquiera se acercaría al soporte o manejo de gráficos. Pero no parece tener prisa para hacerlo.

Básicamente:

lona: Gráficos, el apoyo actual de usuarios del navegador

CSS3: Velocidad de desarrollo

Éter funcionará. Pero por ahora usaría Canvas. Sin embargo, 6 meses en el mundo de la tecnología es una eternidad, las cosas podrían ser muy diferentes.

Answer 4

Usar lienzo. Si usa sprites de CSS para construir un juego, entonces va a hacer un montón de <div> que realiza operaciones en el DOM, lo que puede ralentizar y también tener un montón de problemas de enfoque y compatibilidad.

Puede valer la pena negociar el tiempo de desarrollo para el rendimiento en <canvas>, suponiendo que "Un código se mantendrá para siempre".

Creo que el sistema sprite de CSS3 tarda más tiempo en desarrollarse, ya que necesita manejar la compatibilidad del navegador.

Los navegadores como IE 8 (8 o 9?) Están utilizando GPU para acelerar los gráficos, lo que le permite obtener el almuerzo gratis de la Ley de Moore.