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