En aquest tema aprendràs què són els tilemaps, com es creen i s’integren en un projecte Phaser, i com utilitzar-los per construir mons de joc complexos i modulars. Els tilemaps són una eina fonamental per a la creació de nivells en jocs 2D, especialment en plataformes, RPGs i jocs d’aventura.
- Què és un tilemap?
Un tilemap és una estructura de dades que representa un món de joc mitjançant una graella de petites imatges anomenades tiles (rajoles). Cada tile és una peça gràfica reutilitzable que, combinada amb altres, forma escenaris grans i variats.
Conceptes clau
- Tile: Imatge petita (p. ex. 32x32 píxels) que representa una part del món (terra, aigua, mur, etc.).
- Tileset: Col·lecció d’imatges de tiles.
- Tilemap: Graella que indica quins tiles es col·loquen a cada posició del món.
- Capes (layers): Permeten superposar diferents tilemaps (terra, objectes, decoració, etc.).
| Termini | Descripció |
|---|---|
| Tile | Imatge petita reutilitzable |
| Tileset | Conjunt d’imatges de tiles |
| Tilemap | Graella que defineix la disposició dels tiles |
| Capa | Nivell dins el tilemap (terra, objectes, etc.) |
- Preparar els recursos
2.1. Crear o obtenir un tileset
- Pots crear el teu propi tileset amb eines com Aseprite, Piskel o Photoshop.
- També pots descarregar tilesets lliures de llocs com OpenGameArt.
2.2. Crear el tilemap
- Utilitza un editor de tilemaps com Tiled (https://www.mapeditor.org/).
- Exporta el tilemap en format JSON (Phaser suporta JSON i CSV).
- Carregar i mostrar un tilemap a Phaser
3.1. Carregar els recursos
Utilitza el mètode this.load dins del mètode preload() de la teva escena per carregar el tilemap i el tileset.
preload() {
// Carrega el tileset (imatge)
this.load.image('tiles', 'assets/tilesets/tileset.png');
// Carrega el tilemap (JSON)
this.load.tilemapTiledJSON('map', 'assets/tilemaps/level1.json');
}Explicació:
'tiles'és la clau per referenciar el tileset.'map'és la clau per referenciar el tilemap JSON.
3.2. Crear el tilemap i afegir capes
Dins del mètode create() de la teva escena:
create() {
// Crea el tilemap a partir del JSON carregat
const map = this.make.tilemap({ key: 'map' });
// Afegeix el tileset al tilemap
const tileset = map.addTilesetImage('tileset', 'tiles');
// 'tileset' ha de coincidir amb el nom del tileset dins de Tiled
// Crea una capa a partir del tilemap
const groundLayer = map.createLayer('Ground', tileset, 0, 0);
// Opcional: crea més capes si el teu tilemap en té
const objectLayer = map.createLayer('Objects', tileset, 0, 0);
}Explicació:
map.addTilesetImage('tileset', 'tiles'): El primer paràmetre és el nom del tileset dins de Tiled, el segon és la clau de la imatge carregada.map.createLayer('Ground', tileset, 0, 0): Crea la capa anomenada 'Ground' a la posició (0,0).
- Exemple complet
class MyGameScene extends Phaser.Scene {
preload() {
this.load.image('tiles', 'assets/tilesets/tileset.png');
this.load.tilemapTiledJSON('map', 'assets/tilemaps/level1.json');
}
create() {
const map = this.make.tilemap({ key: 'map' });
const tileset = map.addTilesetImage('tileset', 'tiles');
const groundLayer = map.createLayer('Ground', tileset, 0, 0);
const objectLayer = map.createLayer('Objects', tileset, 0, 0);
}
}
- Exercicis pràctics
Exercici 1: Carrega i mostra un tilemap
Enunciat:
Descarrega un tileset i crea un tilemap senzill amb Tiled. Carrega’l en una escena Phaser i mostra la capa de terra.
Solució:
preload() {
this.load.image('tiles', 'assets/tilesets/tileset.png');
this.load.tilemapTiledJSON('map', 'assets/tilemaps/simple_map.json');
}
create() {
const map = this.make.tilemap({ key: 'map' });
const tileset = map.addTilesetImage('tileset', 'tiles');
const groundLayer = map.createLayer('Ground', tileset, 0, 0);
}Consell:
Assegura’t que el nom del tileset a Tiled coincideixi amb el que poses a addTilesetImage.
Exercici 2: Afegeix una segona capa
Enunciat:
Afegeix una segona capa al teu tilemap (per exemple, una capa d’objectes o decoració) i mostra-la a Phaser.
Solució:
create() {
const map = this.make.tilemap({ key: 'map' });
const tileset = map.addTilesetImage('tileset', 'tiles');
const groundLayer = map.createLayer('Ground', tileset, 0, 0);
const decorLayer = map.createLayer('Decor', tileset, 0, 0);
}Error comú:
Si la capa no es mostra, revisa que el nom de la capa a Tiled sigui exactament igual al que poses a createLayer.
- Consells addicionals
- Organitza les capes: Utilitza capes separades per terra, obstacles, decoració, etc. Això facilita la gestió i la col·lisió.
- Optimitza els tilesets: No utilitzis tilesets massa grans si no són necessaris, per evitar un ús excessiu de memòria.
- Reutilitza recursos: Els tiles permeten crear mons grans amb pocs recursos gràfics.
Resum
En aquesta secció has après:
- Què són els tilemaps i per a què serveixen.
- Com crear i exportar tilemaps amb Tiled.
- Com carregar i mostrar tilemaps i capes a Phaser.
- Com estructurar el teu món de joc de manera modular i eficient.
Pròxim pas:
A la següent lliçó aprendràs a controlar la càmera i a fer que el jugador pugui explorar mons més grans que la pantalla.
Phaser - Desenvolupament de jocs amb JavaScript
Mòdul 1: Introducció al desenvolupament de jocs i Phaser
- Què és el desenvolupament de jocs?
- Visió general de Phaser
- Configuració del teu entorn de desenvolupament
- El teu primer projecte amb Phaser
Mòdul 2: Fonaments de Phaser
- Entendre el bucle del joc
- Configuració del joc i escenes
- Carregar i mostrar imatges
- Treballar amb text
- Gestió d’entrada (teclat i ratolí)
Mòdul 3: Sprites i animació
- Què són els sprites?
- Afegir i moure sprites
- Fonaments de l’animació de sprites
- Grups de sprites i gestió
Mòdul 4: Física i interactivitat en el joc
- Introducció a la física a Phaser
- Activar la física en els sprites
- Col·lisions i superposicions
- Objectes interactius i esdeveniments
Mòdul 5: Món del joc i càmera
Mòdul 6: Àudio i interfície d’usuari
Mòdul 7: Arquitectura del joc i gestió d’estats
Mòdul 8: Funcionalitats avançades de joc
- Efectes de partícules
- Tweens i animacions
- Timers i esdeveniments retardats
- IA i comportament dels enemics