Capítulo 1 - Introducción a tiledmap
Tiled es un editor para generar mapas de tiles, estos mapas pueden ser cargados en Cocos2d-x y usados para crear niveles de videojuegos. En este tutorial veremos cómo crear un nivel en Tiled que es compatible con cocos. Descarga el código completo del juego "Super alien" juntos con sus recursos aquí y en cada capítulo veremos el funcionamiento del mismo.
1.1 Manos a la obra
Antes de comenzar a examinar el código, veremos cómo usar el editor de Tiled. Comenzamos descargando Tiled aquí y algunos tiles para nuestro juego aquí (o simplemente usa los que encontraras en la carpeta Resources de Super Alien).
Ya tenemos todo listo, tras instalar Tiled, ábrelo, y verás algo como esto:
En Tiled existen 3 tipos de capas, capa de patrones, objetos e imagen. Solo necesitamos la de patrones y objetos. Crea un nuevo mapa y configúralo como en la imagen, nos vale un alto de 7 patrones y ponemos un ancho de 100, luego podremos recortar o agrandar el mapa a nuestro gusto. Observa que de ancho y alto de patrón ponemos 128px esto es porque los tiles de la carpeta Resources de Super alien, tienen esta medida. Si usases otros tiles, debes poner ahí su alto y ancho.
Hemos creado el mapa, falta añadir los tiles para pintarlo. Para ello ve al menú de la imagen y después se abrirá un dialogo.
En el dialogo que veras a continuación, selecciona explorar y carga el sprite sheet con los patrones que quieras. Para que funcione en cocos, el mapa debe estar en la misma ubicación que los Sprite sheet, si tienes duda abre el fichero generado con un editor de texto (el mapa no es más que un XML).
Ya tenemos los patrones así que a pintar. Cocos solo permite un sprite sheet por capa, es decir para cada capa pintada en Tiled solo podemos usar componentes de un sprite sheet. Si queremos usar componentes de otra Sprite Sheet, debemos crear otra capa.
Además de capas de patrones, existen capas de objetos que nos permiten posicionar puntos en el mapa si abres alguno de los niveles de la carpeta Resources de Super Alien verás cómo son usadas estas capas.
Mirando esta imagen se puede apreciar que las capas de objetos se usaran para detectar colisiones, es decir colocas una capa de objetos llamada "ground" por ejemplo y en ella pintas las líneas que serán el suelo de nuestro juego o una capa para pintar las zonas de fin de partida y así sucesivamente, es importante separar en capas las distintas funcionalidades si no, no podremos distinguirlas y mantener la nomenclatura de las capas en todos los niveles de forma que nuestro código sea válido para todos ellos . Otro dato importante a tener en cuenta es que los ejes de coordenadas de Tiled no se corresponden con los de cocos, en Tiled el 0,0 está situado arriba a la izquierda y en cocos está situado abajo a la izquierda. En futuros capítulos veremos cómo lidiar con esto.