L’animació de sprites és una tècnica fonamental en el desenvolupament de jocs 2D. Consisteix a mostrar una seqüència d’imatges (anomenades “frames” o “quadres”) per crear la il·lusió de moviment. Phaser facilita molt aquest procés mitjançant el seu sistema d’animacions.
Conceptes clau
- Sprite Sheet: Imatge que conté diverses posicions d’un personatge o objecte, organitzades en una graella.
- Frame: Cada imatge individual dins d’un sprite sheet.
- Animació: Seqüència de frames mostrats en ordre per simular moviment.
- Frame Rate: Velocitat a la qual es mostren els frames (normalment en frames per segon, fps).
- Loop: Si l’animació es repeteix automàticament quan arriba al final.
Com funciona l’animació de sprites a Phaser
- Carregar el sprite sheet: S’ha de carregar la imatge que conté tots els frames.
- Definir l’animació: Es crea una animació especificant quins frames s’utilitzaran i a quina velocitat.
- Assignar l’animació al sprite: El sprite pot reproduir l’animació definida.
Taula comparativa: Imatge simple vs Sprite Sheet
Característica | Imatge simple | Sprite Sheet |
---|---|---|
Nombre d’imatges | 1 | Diverses (en una) |
Animació possible | No | Sí |
Ús de memòria | Baix | Pot ser més alt |
Flexibilitat | Baixa | Molt alta |
Exemple pràctic: Animar un personatge caminant
- Carregar el sprite sheet
// Preload: carregar el sprite sheet function preload() { this.load.spritesheet('player', 'assets/player_walk.png', { frameWidth: 32, frameHeight: 48 }); }
Explicació:
'player'
és la clau per referenciar el sprite sheet.'assets/player_walk.png'
és la ruta de la imatge.frameWidth
iframeHeight
indiquen la mida de cada frame dins la imatge.
- Crear l’animació
// Create: definir l’animació function create() { this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }), frameRate: 10, repeat: -1 // -1 significa que l’animació es repeteix infinitament }); // Afegir el sprite al joc this.player = this.add.sprite(100, 100, 'player'); }
Explicació:
key: 'walk'
: Nom de l’animació.frames
: S’utilitzen els frames 0 a 3 del sprite sheet.frameRate: 10
: 10 frames per segon.repeat: -1
: L’animació es repeteix sense parar.
- Reproduir l’animació
// Update: fer que el sprite reprodueixi l’animació function update() { this.player.anims.play('walk', true); }
Explicació:
anims.play('walk', true)
: Reprodueix l’animació 'walk'. El segon paràmetre (true
) fa que només es torni a iniciar si no s’està reproduint ja.
Exercicis pràctics
Exercici 1
Enunciat:
Carrega un sprite sheet anomenat coin.png
(amb frames de 16x16 píxels) i crea una animació anomenada spin
que utilitzi els frames de l’1 al 5, a 12 fps, i que es repeteixi infinitament.
Solució:
// Preload this.load.spritesheet('coin', 'assets/coin.png', { frameWidth: 16, frameHeight: 16 }); // Create this.anims.create({ key: 'spin', frames: this.anims.generateFrameNumbers('coin', { start: 1, end: 5 }), frameRate: 12, repeat: -1 }); let coin = this.add.sprite(200, 200, 'coin'); coin.anims.play('spin', true);
Consell:
Assegura’t que els índexs dels frames coincideixen amb la teva imatge. Si la teva animació no es veu, revisa la ruta i la mida dels frames.
Exercici 2
Enunciat:
Modifica l’animació de caminar del personatge perquè només es reprodueixi quan es prem la tecla de la fletxa dreta.
Solució:
// Create this.cursors = this.input.keyboard.createCursorKeys(); this.player = this.add.sprite(100, 100, 'player'); // Update if (this.cursors.right.isDown) { this.player.anims.play('walk', true); this.player.x += 2; } else { this.player.anims.stop(); }
Error comú:
Oblidar aturar l’animació quan no es prem la tecla, fent que el personatge segueixi animat sense moure’s.
Resum
- Les animacions de sprites es basen en mostrar una seqüència de frames d’un sprite sheet.
- Phaser permet definir animacions fàcilment i assignar-les als teus sprites.
- És important controlar quan i com es reprodueixen les animacions per aconseguir un joc fluid i realista.
Pròxim pas:
Ara que domines els fonaments de l’animació de sprites, aprendràs a gestionar grups de sprites i optimitzar la seva gestió dins del teu joc.
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