El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

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 i frameHeight 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.

Fonaments de l’animació de sprites

Conceptes clau

Com funciona l’animació de sprites a Phaser

Taula comparativa: Imatge simple vs Sprite Sheet

Exemple pràctic: Animar un personatge caminant

Carregar el sprite sheet

Crear l’animació

Reproduir l’animació

Exercicis pràctics

Exercici 1

Exercici 2

Resum

Phaser - Desenvolupament de jocs amb JavaScript

Mòdul 1: Introducció al desenvolupament de jocs i Phaser

Mòdul 2: Fonaments de Phaser

Mòdul 3: Sprites i animació

Mòdul 4: Física i interactivitat en el joc

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

Mòdul 9: Desplegament i optimització

Mòdul 10: Projecte final