html5 canvas - raton - Canvas 2d context o WebGL para juegos 2D
javascript para juegos (2)
Estoy planeando escribir un juego, que usará muchos sprites e imágenes. Al principio probé con EaselJS, pero jugando a otros juegos basados en lienzos me di cuenta de que no es tan rápido. Y cuando vi BananaBread de Mozilla, pensé "si WebGL puede hacer 3D tan rápido, entonces puede hacerlo 2D aún más rápido". Así que me moví a three.js (usando planos y texturas transparentes, desplazamiento de texturas para sprites).
La pregunta es: ¿es mejor? ¿Más rápido? La mayoría de los juegos de WebGL son en 3D, ¿debo usar el contexto 2D del lienzo para 2D y WebGL para 3D? También he notado que no hay bibliotecas para WebGL en 2D (excepto WebGL-2d, pero es un nivel bastante bajo).
Tenga en cuenta que la compatibilidad no es mi mayor preocupación, ya que no planeo lanzar nada pronto.
La respuesta corta es sí. WebGL puede ser un poco más eficiente si lo usas bien. Una implementación ingenua no producirá ningún beneficio o tendrá un peor rendimiento, por lo que si no está familiarizado con la API de OpenGL, es posible que desee seguir con el lienzo por el momento.
Algunas notas más detalladas: WebGL puede dibujar cuádruples texturizados (sprites) muy muy rápido, pero si necesita características de dibujo 2D más avanzadas, como el trazado de ruta, querrá adherirse a un lienzo 2D al implementar esos tipos de algoritmos en WebGL no trivial La naturaleza de tu juego también hace una diferencia en tu elección. Si solo tiene algunos elementos en movimiento en la pantalla a la vez, el Canvas será bastante rápido y bastante simple. Sin embargo, si está redibujando la escena completa en cada fotograma, WebGL se adapta mejor a ese tipo de bucle de renderizado.
¿Mi recomendación? Si solo estás aprendiendo ambos, comienza con Canvas2D y haz que tu juego funcione con eso. Resuma su dibujo de una manera simple, como tener una función DrawPlayer lugar de ctx.drawImage(playerSprite, ....) , y cuando llegue a un punto en el que el juego esté funcionando y desee que se ejecute más rápido o el juego el diseño dicta que DEBE utilizar un método de dibujo más rápido, cree un backend de representación alterado para todas esas funciones abstractas con WebGL. Esto le brinda las ventajas de no quedar atrapado en la tecnología de renderización anteriormente (¡lo que SIEMPRE es un error!), Le permite concentrarse en el juego y, si termina implementando ambos métodos, tendrá un gran respaldo para los navegadores que no son WebGL como Internet. Explorador. Lo más probable es que no necesites la velocidad aumentada por un tiempo de todos modos.
WebGL puede ser mucho más rápido que el lienzo 2D. Ver http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html como un ejemplo.
Dicho esto, creo que ahora estás mayormente solo. No conozco ninguna biblioteca 2d para WebGL, excepto quizás PlayN http://code.google.com/p/playn/ aunque está en Java y utiliza el Kit de herramientas web de Google para convertirse a JavaScript. También estoy bastante seguro de que no usa las técnicas mencionadas en la publicación del blog anterior, aunque si tu juego no usa mosaicos, tal vez esa técnica no sea útil para ti.
three.js es posiblemente la biblioteca que desea si está planeando en 2d.