En esta sección aprenderás qué son los tilemaps, cómo crearlos y cargarlos en Phaser, y cómo utilizarlos para construir mundos de juego complejos y eficientes. Los tilemaps son una herramienta fundamental en el desarrollo de juegos 2D, especialmente para plataformas, RPGs y aventuras.
¿Qué es un Tilemap?
Un tilemap es una cuadrícula compuesta por pequeñas imágenes llamadas tiles (baldosas). Cada tile representa una parte del mundo del juego, como suelo, paredes, agua, etc. Al combinar muchos tiles, puedes crear mapas grandes y detallados de manera eficiente.
Ventajas de los Tilemaps
- Eficiencia: Permiten construir mundos grandes reutilizando imágenes pequeñas.
- Flexibilidad: Puedes modificar el mapa fácilmente cambiando la disposición de los tiles.
- Rendimiento: Phaser optimiza la renderización de tilemaps para juegos 2D.
Tipos de Tilemaps en Phaser
| Tipo de Tilemap | Descripción | Formato de Archivo |
|---|---|---|
| Orthogonal | Cuadrícula regular, como un tablero de ajedrez. | .json (Tiled), .csv |
| Isométrico | Perspectiva en ángulo, útil para juegos de simulación. | .json (Tiled) |
| Hexagonal | Celdas en forma de hexágono, menos común. | .json (Tiled) |
En este curso nos centraremos en los tilemaps ortogonales, los más usados y fáciles de implementar.
Herramientas para Crear Tilemaps
- Tiled Map Editor: Herramienta gratuita y popular para crear tilemaps y exportarlos en formato
.json. - Aseprite, Pyxel Edit, Photoshop: Para crear tus propios tilesets (las imágenes de los tiles).
Estructura de un Tilemap
Un tilemap generalmente consta de:
- Tileset: Imagen que contiene todos los tiles.
- Mapa: Archivo (JSON o CSV) que indica la posición de cada tile en la cuadrícula.
- Capas: Permiten separar el fondo, objetos, colisiones, etc.
Cargando un Tilemap en Phaser
- Preparar los Archivos
- Un archivo
.jsonexportado desde Tiled. - Una imagen de tileset (por ejemplo,
tiles.png).
- Cargar los Recursos
Utiliza el método this.load en la función preload de tu escena.
preload() {
// Cargar el tilemap en formato JSON
this.load.tilemapTiledJSON('mapa', 'assets/mapa.json');
// Cargar el tileset
this.load.image('tiles', 'assets/tiles.png');
}Explicación:
'mapa'es la clave para referenciar el tilemap.'tiles'es la clave para el tileset.
- Crear el Tilemap y las Capas
En el método create de tu escena:
create() {
// Crear el tilemap a partir del JSON cargado
const map = this.make.tilemap({ key: 'mapa' });
// Añadir el tileset al mapa
const tileset = map.addTilesetImage('nombreEnTiled', 'tiles');
// Crear una capa a partir del tilemap
const capaFondo = map.createLayer('Fondo', tileset, 0, 0);
}Explicación:
'nombreEnTiled'debe coincidir con el nombre del tileset en Tiled.'Fondo'es el nombre de la capa en Tiled.0, 0son las coordenadas donde se dibuja la capa.
Ejemplo Completo
Supón que tienes estos archivos:
assets/mapa.json(exportado desde Tiled)assets/tiles.png(tu tileset)- En Tiled, el tileset se llama
tileset_juegoy la capa se llamaFondo.
class MundoJuego extends Phaser.Scene {
preload() {
this.load.tilemapTiledJSON('mapa', 'assets/mapa.json');
this.load.image('tiles', 'assets/tiles.png');
}
create() {
const map = this.make.tilemap({ key: 'mapa' });
const tileset = map.addTilesetImage('tileset_juego', 'tiles');
const fondo = map.createLayer('Fondo', tileset, 0, 0);
}
}Ejercicio Práctico
Objetivo: Cargar y mostrar un tilemap simple en Phaser.
Instrucciones
- Descarga un tileset y crea un mapa sencillo en Tiled (puedes usar un tileset gratuito de OpenGameArt).
- Exporta el mapa como
mapa.jsony guarda el tileset comotiles.pngen la carpetaassets. - Crea una escena en Phaser que cargue y muestre el tilemap.
Solución
class MiEscena extends Phaser.Scene {
preload() {
this.load.tilemapTiledJSON('mapa', 'assets/mapa.json');
this.load.image('tiles', 'assets/tiles.png');
}
create() {
const map = this.make.tilemap({ key: 'mapa' });
const tileset = map.addTilesetImage('nombreDelTilesetEnTiled', 'tiles');
const capa = map.createLayer('NombreDeLaCapaEnTiled', tileset, 0, 0);
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: MiEscena
};
const game = new Phaser.Game(config);Nota: Cambia 'nombreDelTilesetEnTiled' y 'NombreDeLaCapaEnTiled' por los nombres reales usados en Tiled.
Errores Comunes y Consejos
| Error Común | Causa | Solución |
|---|---|---|
| El mapa no se muestra | El nombre del tileset o la capa no coincide con Tiled | Verifica los nombres en Tiled y en el código |
| Tiles desalineados | Tamaño de tile incorrecto | Asegúrate de que el tamaño del tile en Tiled y Phaser coincidan |
| Archivos no encontrados | Rutas incorrectas | Verifica la ruta de los archivos en tu proyecto |
Consejo: Siempre revisa la consola del navegador para mensajes de error. Te ayudarán a identificar problemas de carga o nombres incorrectos.
Resumen
- Los tilemaps permiten crear mundos de juego grandes y eficientes usando pequeñas imágenes reutilizables.
- Utiliza herramientas como Tiled para diseñar tus mapas y exportarlos en formato JSON.
- En Phaser, carga el tilemap y el tileset en
preload, y crea las capas encreate. - Presta atención a los nombres de tileset y capas: deben coincidir entre Tiled y tu código.
- Practica creando y cargando tus propios mapas para dominar este proceso.
¡Ahora estás listo para construir mundos de juego complejos y visualmente atractivos en Phaser! En la siguiente sección aprenderás a controlar la cámara y el desplazamiento para explorar estos mundos.
Phaser - Desarrollo de Juegos con JavaScript
Módulo 1: Introducción al Desarrollo de Juegos y Phaser
- ¿Qué es el Desarrollo de Juegos?
- Descripción general de Phaser
- Configurando tu Entorno de Desarrollo
- Tu Primer Proyecto con Phaser
Módulo 2: Fundamentos de Phaser
- Entendiendo el Bucle de Juego
- Configuración del Juego y Escenas
- Cargando y Mostrando Imágenes
- Trabajando con Texto
- Manejo de Entrada (Teclado y Ratón)
Módulo 3: Sprites y Animación
- ¿Qué son los Sprites?
- Añadiendo y Moviendo Sprites
- Fundamentos de Animación de Sprites
- Grupos de Sprites y Gestión
Módulo 4: Física e Interactividad en el Juego
- Introducción a la Física en Phaser
- Habilitando Física en Sprites
- Colisiones y Superposiciones
- Objetos Interactivos y Eventos
Módulo 5: Mundo del Juego y Cámara
- Creando Tilemaps y Mundos de Juego
- Desplazamiento y Control de Cámara
- Capas y Gestión de Profundidad
Módulo 6: Audio e Interfaz de Usuario
Módulo 7: Arquitectura del Juego y Gestión de Estados
- Organizando el Código del Juego
- Gestionando Múltiples Escenas
- Guardando y Cargando el Estado del Juego
Módulo 8: Características Avanzadas de Jugabilidad
- Efectos de Partículas
- Tweens y Animaciones
- Temporizadores y Eventos Retardados
- IA y Comportamiento de Enemigos