Publicidad
Publicidad

RSS canvas

Diseña juegos HTML5 con Box2dWeb

Comentar
Diseña juegos HTML5 con Box2dWeb

En Genbeta Dev ya empezamos a ver cómo usar Box2dWeb de forma básica, teniendo en cuenta que el motor de física solo representa un debug. Ahora veremos cómo interpretar los datos de nuestro escenario de Box2dWeb y representarlo de forma visual a través de un Canvas (aunque podemos hacerlo de cualquier otra forma o simplemente usar los datos para otros fines).

En el siguiente ejemplo vemos el escenario recreando la simulación en tiempo real que creamos anteriormente pero sumándole dos visualizaciones más: una en blanco y negro y otra con imágenes (asemejándose a una máquina de hacer palomitas "hiper-realista"). Pulsando se generan nuevas bolas o palomitas.

Leer más »
Publicidad

Empieza a desarrollar juegos en HTML5 con Box2dWeb

8 Comentarios
Empieza a desarrollar juegos en HTML5 con Box2dWeb

Box2D es una librería que implementa un motor de física, escrita inicialmente para C++ pero que dispone de versiones para varios lenguajes como Flash o JavaScript, que es en esta última en la que nos vamos a centrar. Box2dWeb, que es la versión para JavaScript, en principio opera a través de Canvas (de HTML5) y nos proporciona un entorno completo con leyes físicas muy potente.

Tampoco es la primera vez que hablamos del tema, ya que en Genbeta Dev ya hablamos de Box2D integrado con SFML.

Leer más »

Animando sprites en canvas con EaselJS

Comentar
Animando sprites en canvas con EaselJS

EaselJS es una librería que sirve para manipular y trabajar el elemento canvas de nuestro buen amigo HTML5. Aunque está actualmente en versión alpha tiene un rendimiento espectacular y su API es sencilla e intuitiva, y funciona en los principales navegadores (excepto en Firefox 5 e inferiores debido a que su implementación del canvas es imperfecta y está llena de bugs). Tiene licencia MIT y se puede usar incluso en proyectos comerciales sin problema.

Usando esta librería David Rousset, bloguero de MSDN Blogs y poseedor de una de las mejores cabeceras de web que he visto jamás, nos trae un tutorial de animación de sprites usando dos ficheros PNG que contienen todos los fotogramas en la misma imagen. El código está muy bien montado para hacernos comprender el funcionamiento de EaselJS, pero lo más interesante es la documentación que enlaza desde el propio ejemplo, donde están todos los objetos y la documentación de las clases del framework. Nos encontramos desde utilidades para manipulación de matrices hasta un completo kit para manejo de gráficos y animaciones, y también un sitio en producción (un juego) que demuestra las posibilidades que tenemos al alcance de la mano: http://www.pirateslovedaisies.com/ , donde aconsejan el uso de IE9 para hacer uso de efectos avanzados.

Más información | Sitio de EaselJS Via | HTML5 Gaming: animating sprites in Canvas with EaselJS

Leer más »
Publicidad
Inicio
Inicio

Ver más artículos