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

HOME

En aquest tema aprendràs com afegir sprites al teu joc amb Phaser i com moure’ls per la pantalla. Els sprites són elements visuals (imatges o animacions) que representen personatges, objectes o qualsevol element interactiu dins del joc.

Què és un sprite?

Un sprite és una imatge o animació que es pot moure, manipular i interactuar dins del món del joc. Són la base visual de la majoria de jocs 2D.

Exemples d’ús de sprites:

Personatges jugables
Enemics
Objectes col·leccionables
Obstacles

Afegir un sprite a Phaser

Passos bàsics

Carregar la imatge del sprite (normalment al mètode preload)
Afegir el sprite a l’escena (al mètode create)

Exemple pràctic

Suposem que tens una imatge anomenada player.png a la carpeta assets.

class MyGame extends Phaser.Scene {
  preload() {
    // Carreguem la imatge del sprite
    this.load.image('player', 'assets/player.png');
  }

  create() {
    // Afegim el sprite a la posició (100, 150)
    this.player = this.add.sprite(100, 150, 'player');
  }
}

Explicació:

this.load.image('player', 'assets/player.png'): Carrega la imatge i li assigna la clau 'player'.
this.add.sprite(100, 150, 'player'): Afegeix el sprite a la posició (x=100, y=150) utilitzant la imatge carregada.

Moure sprites manualment

Pots moure un sprite canviant les seves propietats x i y.

Exemple: Moure el sprite cap a la dreta

update() {
  // Mou el sprite 2 píxels cap a la dreta cada fotograma
  this.player.x += 2;
}

Explicació:

L’update() s’executa contínuament (cada fotograma).
Incrementar x fa que el sprite es desplaci cap a la dreta.

Moure sprites amb el teclat

Phaser permet detectar l’entrada del teclat per moure els sprites de manera interactiva.

Exemple: Controlar el moviment amb les fletxes

create() {
  this.player = this.add.sprite(100, 150, 'player');
  this.cursors = this.input.keyboard.createCursorKeys();
}

update() {
  if (this.cursors.left.isDown) {
    this.player.x -= 2;
  }
  if (this.cursors.right.isDown) {
    this.player.x += 2;
  }
  if (this.cursors.up.isDown) {
    this.player.y -= 2;
  }
  if (this.cursors.down.isDown) {
    this.player.y += 2;
  }
}

Explicació:

this.input.keyboard.createCursorKeys() crea un objecte per detectar les tecles de fletxa.
Comprova si cada tecla està premuda i mou el sprite en la direcció corresponent.

Comparativa: Afegir vs. Moure sprites

Acció	Mètode/Propietat	Exemple de codi
Afegir sprite	`this.add.sprite`	`this.add.sprite(100, 150, 'player')`
Moure sprite manual	`.x`, `.y`	`sprite.x += 2`
Moure amb teclat	`input.keyboard`	`if (cursors.left.isDown) sprite.x -= 2`

Exercicis pràctics

Exercici 1: Afegir un sprite

Enunciat:
Carrega una imatge anomenada star.png i afegeix-la a la posició (200, 100) de l’escena.

Solució

preload() {
  this.load.image('star', 'assets/star.png');
}

create() {
  this.star = this.add.sprite(200, 100, 'star');
}

Exercici 2: Moure un sprite cap avall

Enunciat:
Fes que el sprite star es mogui 3 píxels cap avall cada fotograma.

Solució

update() {
  this.star.y += 3;
}

Exercici 3: Controlar un sprite amb les tecles de fletxa

Enunciat:
Permet que el jugador mogui el sprite star amb les tecles de fletxa.

Solució

create() {
  this.star = this.add.sprite(200, 100, 'star');
  this.cursors = this.input.keyboard.createCursorKeys();
}

update() {
  if (this.cursors.left.isDown) {
    this.star.x -= 2;
  }
  if (this.cursors.right.isDown) {
    this.star.x += 2;
  }
  if (this.cursors.up.isDown) {
    this.star.y -= 2;
  }
  if (this.cursors.down.isDown) {
    this.star.y += 2;
  }
}

Consell:
Assegura’t que el sprite no surti fora dels límits de la pantalla. Pots afegir condicions per limitar-ne la posició.

Errors comuns i consells

Oblidar carregar la imatge: Si no carregues la imatge al preload, Phaser mostrarà un error quan intentis afegir el sprite.
No declarar la variable del sprite: Assegura’t de declarar el sprite com a propietat de la classe (this.sprite) per accedir-hi des de update.
Moviment massa ràpid: Si el valor d’increment és massa alt, el sprite es mourà massa ràpid. Ajusta la velocitat segons el que necessitis.

Resum

Has après a carregar i afegir sprites a una escena de Phaser.
Saps com moure sprites manualment i amb el teclat.
Has practicat amb exercicis i solucions.
Recorda: els sprites són la base visual del teu joc i controlar-ne el moviment és fonamental per a la interactivitat.

Pròxim pas: Aprendràs a animar sprites per donar vida als teus personatges i objectes!

Afegir i moure sprites

Què és un sprite?

Afegir un sprite a Phaser

Passos bàsics

Exemple pràctic

Moure sprites manualment

Exemple: Moure el sprite cap a la dreta

Moure sprites amb el teclat

Exemple: Controlar el moviment amb les fletxes

Comparativa: Afegir vs. Moure sprites

Exercicis pràctics

Exercici 1: Afegir un sprite

Exercici 2: Moure un sprite cap avall

Exercici 3: Controlar un sprite amb les tecles de fletxa

Errors comuns i consells

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