Desarrollando juegos con Phaser

phaser

Hace un par de años que comencé a desarrollar casi exclusivamente en HTML 5 Canvas, tanto para los requerimientos de clientes como para mis proyectos personales.
Luego de mis varios años de experincia en Actionscript 3 (Flash), javascript me resultaba incómodo y Canvas requería mucho trabajo manual para cuestiones que en Actionscript estaban resueltas por defecto.
Comencé a investigar algunos frameworks para agilizar el trabajo y luego de deambular por unos cuantos (ImpactJs, CreateJs, etc) llegué hasta Phaser.
Phaser es un framework pensado para el desarrollo de juegos en HTML 5 para desktop y móviles, desarrollado por PhotonStorm, basado en PIXI.
Phaser permite implementar de manera secilla cuestiones que son incomodas de hacer en Canvas a mano. Por ejemplo la carga de assets, animaciones, aplicar física, reproducir audios, tilemaps, tweens, creación de textos, sistema de partículas y un gran etcétera.
En las siguientes entradas comenzaré a explicar cómo implementar lo básico de Phaser mediante ejemplos sencillos.

Introducción a HTML5 Canvas

En este post intentaré hacer una introducción muy sencilla a HTML5 Canvas.

HTML5_Logo_512

¿Qué es?
Canvas en un elemento de html, introducido a partir de la versión 5.
El elemento <canvas> es un contenedor vacío que permite dibujar gráficos utilizando javascript.
Canvas cuenta con una API para dibujar líneas, rectángulos, círculos, textos, agregar imágenes, entre otras funcionalidades.

¿Cómo funciona?
En un archivo html convencional, se debe crear el elemento <canvas> para luego acceder a él mediante javascript.

El siguiente paso es crear un script en javascript para poder interactuar con el elemento.

Para poder acceder a los métodos de dibujo de canvas es necesario hacerlo a traves del context. El context es un objeto con propiedades y métodos que permite dibujar gráficos dentro del canvas. El context puede ser 2d ó webgl (3d) y se accede mediante el método getContext().

¿Qué se puede hacer?
HTML Canvas puede dibujar textos.
Canvas puede dibujar textos coloridos con o sin animación.

HTML Canvas puede dibujar gráficos.
Canvas tiene muchos recursos para la representación gráfica de datos, carga de imágenes, etc.

HTML Canvas es animado.
Los objetos dentro de canvas se pueden mover. Desde una animación simple como el rebote de una pelota, hasta complejas animaciones sincronizadas.

HTML Canvas es interactivo.
Canvas responde a todos los eventos de javascript. Los elementos dentro del canvas pueden responder a cualquier acción del usuario (teclas presionadas, click del mouse, etc).

HTML Canvas es ideal para juegos.
Las posibilidades que ofrece canvas son ideales para aplicaciones interactivas y juegos. Carga de imágenes externas, acceso a la API de dibujo, reproducción de audio, eventos de teclado y mouse, animaciones, etc.

HTML5 Canvas Cheat Sheet.
Resumen completo de la API HTML5 Canvas para el contexto 2D, basado en las especificaciones de W3C HTML5 Canvas. Enlace.

Principales ventajas
Multiplataforma.
HTML5 es accesible desde cualquier browser moderno, ya sea desde una pc (windows, linux, mac), un smartphone ó tablet (ios, android, windows phone).
Además de ser accesible desde la web mediante un browser, HTML5 puede ser compilado en aplicaciones nativas fácilmente, utilizando herramientas como PhoneGap, Titanium o CocoonJs.

Lenguaje de programación.
Para programar en HTML5 Canvas sólo es necesario saber programar en javascript, un lenguaje con varios años de rodaje, fácil de aprender y con extensa documentación accesible en la web.

Frameworks.
Hay muchos framework para HTML5 Canvas que facilitan el trabajo manual y proveen al desarrollador con muchas herramientas para gestionar la carga de assets, animaciones, efectos visuales y de sonido, interacción con mouse y teclado, entre otras.
Dentro de los frameworks más conocidos se encuentran Phaser, ImpactJs, CreateJs, Panda, ThreeJs, PlayCanvas, etc.

En las siguientes entregas detallaré cómo dibujar, animar y cargar imágenes en HTML5 Canvas.

Tutoriales en camino

Esta entrada es simplemente para presentar nueva serie de tutoriales que comencé a escribir y que iré posteando en el blog con el fin de poner a disposición de quienes lo crean útil, puedan usarlo como base para sus juegos, como inspiración ó para aprender cómo realizar juegos de matching en HTML5 Canvas.

La idea es crear, en varios pasos, 3 gameplays ligeramente diferentes sobre un mismo código base. En la primer entrega, haré el código base para todos los juegos que seguirán. Luego iré haciendo de a un juego por vez. Tengo en mente desarrollar prototipos similares a los siguientes juegos:

– Pet Rescue Saga (Video)
– Candy Crush Saga (Video)
– Juice Cubes (Video)