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

HOME

Els sprites són un concepte fonamental en el desenvolupament de jocs 2D. Són imatges o animacions que es mouen, interactuen i canvien dins del món del joc. En Phaser, els sprites són objectes que representen personatges, objectes, projectils, efectes visuals i molt més.

Conceptes clau

Sprite: Imatge o animació que es pot moure i manipular dins del joc.
Full de sprites (spritesheet): Imatge que conté diverses subimatges (frames) utilitzades per animar un sprite.
Animació de sprites: Seqüència de frames d’un spritesheet mostrats ràpidament per crear moviment.
Propietats del sprite: Posició, escala, rotació, opacitat, etc.

Per què són importants els sprites?

Els sprites permeten:

Representar visualment els elements del joc (personatges, enemics, objectes, etc.).
Gestionar col·lisions i interaccions.
Crear animacions i efectes visuals dinàmics.

Diferència entre imatge i sprite

Imatge simple	Sprite
Element estàtic	Pot ser dinàmic (moure’s, animar-se)
No té física ni interacció	Pot tenir física, col·lisions i interacció
No pot animar-se	Pot animar-se amb spritesheets

Exemple pràctic: Crear un sprite a Phaser

A continuació, veiem com afegir un sprite bàsic a una escena de Phaser.

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');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyGame
};

const game = new Phaser.Game(config);

Explicació del codi

preload(): Carrega la imatge del sprite abans de començar el joc.
create(): Afegeix el sprite a l’escena a la posició (100, 150).
this.add.sprite(x, y, 'clau'): Crea un sprite a la posició especificada utilitzant la imatge carregada amb la clau 'player'.

Exercici pràctic

Enunciat:
Carrega una imatge anomenada star.png i afegeix-la com a sprite a la posició (200, 300) dins d’una escena de Phaser.

Solució

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('star', 'assets/star.png');
  }

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

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyGame
};

const game = new Phaser.Game(config);

Consells i errors comuns

Error comú: No carregar la imatge abans d’afegir el sprite. Assegura’t que la funció this.load.image estigui dins de preload().
Consell: El nom de la clau ('star' en aquest cas) ha de coincidir exactament entre la càrrega i l’ús del sprite.

Resum

Un sprite és una imatge o animació que es pot moure i manipular dins del joc.
Són essencials per representar elements dinàmics i interactius.
En Phaser, es creen carregant una imatge i afegint-la a l’escena amb this.add.sprite.
Els sprites són la base per a la majoria de la interacció visual en jocs 2D.

Pròxim pas: Aprendrem com afegir i moure sprites dins del món del 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