martes, 31 de mayo de 2016

Tutorial de Tiled - Capas y atributos

Continuamos el tutorial de Tiled donde lo dejamos. Seguro que has dibujado un bonito mapa con ese tileset, puedes enseñarnos la foto en los comentarios y la pondré. Ahora avanzamos a las capas. Si has trabajado con alguno programa de diseño (Photoshop, GIMP, AutoCAD,...), seguro que ya conoces lo básico de las capas.

Las capas son submapas que comparten el mismo espacio que el mapa final y que al superponerse forman el mapa final. Por ejemplo, una capa pueden ser Paredes y otra Ventanas. En la capa de las paredes tenemos las paredes de un edificio solo eso. Encima de esa capa ponemos otra, solo con ventanas. Cuando combinemos ambas capas veremos como las ventanas se dibujan encima de las paredes ya dibujadas. Además las capas pueden estar desactivadas, eso significa que sus datos están pero ya no forman parte del mapa final. Luego vía programación las podemos activar/desactivar a nuestro gusto. En Tiled además cada capa puede tener atributos distintos.

Por defecto en Tiled tenemos ya una capa. Vamos a borrarla para empezar de cero. Las capas se encuentran arriba a la derecha.

En Tiled hay tres tipos de capas.
  • Capa de Imagen. Es usada para poner una imagen de fondo. En juego de plataformas es una muy buena opción.
  • Capa de Objetos. Los objetos son figuras geométricas ajenas a las celdas. No las vamos a usar de momento.
  • Capa de Patrones. Estas son las básicas. Permiten poner elementos del tileset dentro de la rejilla.
Vamos a crear dos capas de patrones. Una se va a llamar Paredes y la otra será Suelo. El orden de las capas es importante. Las que están más arriba se aplican más tarde. En este caso Paredes debe ir por encima de suelo, aunque en este ejemplo no afectará mucho lo contrario. Con la capa Suelo seleccionada, cogemos la cubeta y pintamos el suelo. Ahora nos cambiamos a Paredes y dibujamos algunas paredes. Como ves, se pintan por encima del suelo. Si tratas de borrar el suelo verás que es imposible, tienes que cambiar antes a la capa Suelo.

Añadiendo atributos a las capas en Tiled

Imagina ahora un juego. Normalmente serás capaz de caminar por el suelo pero serás bloqueado por las paredes. ¿Cómo indicamos a Tiled que una capa tiene propiedad distinta que otra? Con atributos. Podemos especificar que en una capa el personaje no puede caminar (porque es una pared, por ejemplo) o que sí pueda hacerlo. Los detalles de la implementación se programarán en Phaser pero podemos indicar los datos con las propiedades de cada capa. En la parte izquierda está la pestaña Atributos personalizados. Le damos al botón + abajo. Nos pedriá un nombre del atributo y un tipo. Nombre puede ser pasable y el tipo será bool. Es decir, solo puede ser verdadero o falso. Hacemos lo mismo con la otra capa y en la capa Suelo marcamos la opción como verdadera.

Con esto ya tenemos suficiente para crear mapas impresionantes. En el próximo tutorial veremos la integración con Phaser.

domingo, 29 de mayo de 2016

Tiled, el editor de mapas 2D compatible con Phaser.js

Tiled es quizá el programa editor de mapas más famoso que existe. Con Tiled podemos crear mapas en 2D y 2.5D que podrán ser usados por una gran cantidad de motores, entre ellos Phaser. Para diseñar los mapas necesitamos previamente un tileset, es decir un conjunto de gráficos que puedan ser usados en múltiples casillas para formar algo más complejo. Piensa en ello como bloques de Lego (¡o de Minecraft!). Tiled es gratuito, software libre, usa las librerías Qt y está disponible para Windows, Mac OS X y Linux.


Instalando Tiled

Visita la página oficial de Tiled
Y sigue los pasos para tu sistema operativo. También lo encontrarás en Itch.io, donde podrás donar al autor si lo consideras conveniente.

Primeros pasos con Tiled, un mapa ortogonal y un tileset gratuito


Para este tutorial vamos a usar un tileset gratuito, a mi modo de ver muy completo.
DawnLike - 16x16 Universal Rogue-like tileset v1.81 de DragonDePlatino. Lo encuentras en OpenGameArt bajo la licencia Creative Commons 3.0 Attribution-ShareAlike. Descárgatelo y descomprime el fichero ZIP.

Ahora abre Tiled y verás algo como esto.
Selecciona Archivo -> Nuevo
En el diálogo asegúrate de elegir ortogonal (nuestro tileset es ortogonal) y formato de capa de patrones escoge CSV. Ahora en el tamaño del mapa elige la dimensión del mapa, lo que te guste, yo elegí 20 y 20. Lo importante viene a la derecha, en el tamaño del patrón. Tenemos que indicar cuanto ocupa una casilla, una celda en nuestro tileset. El nuestro es de 16x16 así que pon 16 y 16.
Ahora abajo a la derecha busca la pestaña Conjunto de patrones. Dentro selecciona la hoja blanca que significa Nuevo conjunto de patrones. Selecciona un archivo cualquiera del tileset. Yo he elegido la imagen Walls.png que estaba dentro de Objects.
 
Ahora tendrás disponibles si todo va bien las piezas para montar el mapa.
Con esto ya puedes hacer click en la pieza e ir dibujando tu mapa. Usa el estampador para poner elementos de uno en uno, la cubeta para pintar todos los elementos que antes eran iguales con el mismo tile y usa la goma para borrar. Puedes añadir más imágenes del tileset añadiendo más Conjuntos de patrones.
En el siguiente tutorial de Tiled veremos más herramientas y utilidades de Tiled como las capas y los atributos.


domingo, 22 de mayo de 2016

¿Por qué elegir Phaser.js para tu próximo juego HTML5?

Phaser se ha convertido en el motor de juegos HTML5 más popular y lo va a seguir siendo. Creado por Photon Storm, rápidamente se hizo un hueco y ahora mismo es la solución más usada. ¿Qué características lo han llevado hasta donde esta?
  • Excelente rendimiento. Usa Pixi.js como motor de renderizado. Pixi.js usa WebGL o Canvas dependiendo del dispositivo para asegurar la máxima velocidad.
  • Carga los recursos por adelantado. En el mundo de la web donde todo es asíncrono tener esto supone reducir la complejidad del código.
  • Tres motores de física integrados. Arcade Physics, AABB y Ninja Physics. Con un plugin de pago es posible tener Box2D
  • Sprites
  • Grupos. Gestiona sprites de la escena de manera grupal.
  • Animación. Phaser soporta animación con Spritesheet, archivos de Texture Packer y Flash CS6/CC y archivos XML de Starling.
  • Partículas
  • Cámara. Una poderosa cámara que permite realizar casi todo.
  • Sistema de entrada. No es necesario que te preocupes de si tu jugador usa ratón o pantalla táctil. Phaser simplifica el control por ti.
  • Sonido. Phaser soporta las APIs de WebAudio y HTML5 Audio.
  • Tilemaps. Crea tus mapas con un programa como Tiled y Phaser lo leerá.
  • Escalado. Tus juegos se verán bien siempre, sea cual sea la resolución de tu dispositivo. Phaser adapta tu juego a todas las pantallas posibles de una manera sencilla.
  • Plugins. Phaser cuenta con un poderoso sistema de plugins. Podrás añadir anuncios, otros sistemas de audio, etc
  • Pensado para móviles. Phaser se diseñó pensando en móviles por lo que tus juegos se ejecutarán perfectamente. Sin embargo también es fantástico para el escritorio.
  • Muy probado. Phaser ha sido usado en cientos de juegos ya, Phaser es una roca sólida.
¿Y tú? ¿Cuáles son tus razones para usar Phaser? ¿Todavía no has comenzado a usar Phaser, a qué esperas?