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

  1. Carregar el sprite sheet: S’ha de carregar la imatge que conté tots els frames.
  2. Definir l’animació: Es crea una animació especificant quins frames s’utilitzaran i a quina velocitat.
  3. 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 de memòria Baix Pot ser més alt
Flexibilitat Baixa Molt alta

Exemple pràctic: Animar un personatge caminant

  1. 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.

  1. 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.

  1. 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

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

© Copyright 2024. Tots els drets reservats