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.
- 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.
- 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ó |
- 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
- Carrega un spritesheet (imatge amb diversos frames).
- Defineix l’animació amb un nom i els frames.
- 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.
- 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.
- 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
- 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