En aquest tema aprendràs a utilitzar els tweens i les animacions a Phaser per donar vida als teus jocs. Els tweens permeten animar propietats d’objectes (com la posició, l’escala o l’opacitat) de manera suau i controlada, mentre que les animacions de sprites permeten mostrar seqüències d’imatges per simular moviment.


  1. Què són els tweens?

Un tween (de “in-between”) és una interpolació automàtica entre dos valors al llarg del temps. S’utilitza per animar propietats d’objectes, com moure un sprite d’un punt a un altre, canviar la seva mida, rotació, opacitat, etc.

Conceptes clau dels tweens

  • Objectiu: L’objecte o propietat que vols animar.
  • Propietats: Les propietats de l’objecte que vols modificar (x, y, alpha, scale, angle...).
  • Durada: El temps que dura l’animació (en mil·lisegons).
  • Easing: La corba d’acceleració/deceleració de l’animació.
  • Callbacks: Funcions que s’executen en certs punts (inici, final, repetició...).

Exemple bàsic de tween

// Moure un sprite de la posició actual a x=400 en 1 segon
this.tweens.add({
    targets: sprite,      // L’objecte a animar
    x: 400,               // Nova posició X
    duration: 1000,       // Durada en mil·lisegons (1 segon)
    ease: 'Power2',       // Tipus d’easing
    onComplete: () => {   // Callback quan acaba
        console.log('Tween completat!');
    }
});

Explicació:

  • targets: l’objecte o array d’objectes a animar.
  • x: 400: la propietat a modificar i el seu valor final.
  • duration: quant de temps dura l’animació.
  • ease: com es fa la transició (pots provar diferents tipus).
  • onComplete: funció que s’executa quan el tween acaba.

  1. Propietats i opcions dels tweens

A continuació tens una taula amb les opcions més habituals:

Propietat Descripció Exemple de valor
targets Objecte(s) a animar sprite, [sprite1, sprite2]
x, y, scale, alpha, angle Propietats a animar x: 500, alpha: 0.5
duration Durada de l’animació (ms) 1000
ease Tipus d’easing 'Linear', 'Bounce'
delay Retard abans de començar (ms) 500
repeat Quantes vegades repetir l’animació 2, -1 (infinit)
yoyo Torna enrere després d’arribar al final true/false
onStart Callback quan comença funció
onUpdate Callback en cada frame funció
onComplete Callback quan acaba funció

  1. Animacions de sprites

Les animacions de sprites consisteixen en mostrar una seqüència d’imatges (frames) per simular moviment, com caminar, saltar, etc.

Passos per crear una animació de sprite

  1. Carrega un spritesheet (imatge amb diversos frames).
  2. Defineix l’animació amb un nom i els frames.
  3. Reprodueix l’animació sobre el sprite.

Exemple pràctic

Suposem que tens un spritesheet anomenat player.png amb 4 frames.

// 1. Carregar el spritesheet (a preload)
this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 32,
    frameHeight: 48
});

// 2. Crear l’animació (a create)
this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1 // infinit
});

// 3. Afegir el sprite i reproduir l’animació
let player = this.add.sprite(100, 100, 'player');
player.anims.play('walk');

Explicació:

  • this.load.spritesheet: carrega la imatge i defineix la mida de cada frame.
  • this.anims.create: defineix una animació amb un nom (key), frames, velocitat (frameRate) i repetició.
  • player.anims.play('walk'): reprodueix l’animació sobre el sprite.

  1. Exercicis pràctics

Exercici 1: Mou un sprite amb un tween

Enunciat:
Crea un sprite i fes que es mogui de la posició x=100 a x=400 en 2 segons, utilitzant un tween amb easing ‘Bounce’.

Solució:

let sprite = this.add.sprite(100, 200, 'player');
this.tweens.add({
    targets: sprite,
    x: 400,
    duration: 2000,
    ease: 'Bounce'
});

Consell:
Si el sprite no es mou, comprova que la imatge ‘player’ està carregada correctament.


Exercici 2: Crea i reprodueix una animació de sprite

Enunciat:
Carrega un spritesheet de 4 frames i crea una animació anomenada ‘run’ que es reprodueixi infinitament a 8 fps.

Solució:

// Preload
this.load.spritesheet('hero', 'assets/hero.png', { frameWidth: 32, frameHeight: 32 });

// Create
this.anims.create({
    key: 'run',
    frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 3 }),
    frameRate: 8,
    repeat: -1
});
let hero = this.add.sprite(50, 50, 'hero');
hero.anims.play('run');

Error comú:
Si l’animació no es veu, assegura’t que el nom del spritesheet i la mida dels frames són correctes.


  1. Resum

  • Els tweens permeten animar propietats d’objectes de manera suau i controlada.
  • Pots personalitzar la durada, l’easing, la repetició i callbacks dels tweens.
  • Les animacions de sprites mostren seqüències d’imatges per simular moviment.
  • Per crear una animació de sprite: carrega el spritesheet, defineix l’animació i reprodueix-la sobre el sprite.
  • Practica amb tweens i animacions per fer els teus jocs més atractius i dinàmics.

Pròxim pas:
A la següent lliçó aprendràs a utilitzar timers i esdeveniments retardats per controlar el temps i la seqüència d’accions dins el 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