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

HOME

En aquest tema aprendràs com carregar i mostrar imatges en un joc creat amb Phaser. Les imatges són la base visual de qualsevol joc: personatges, fons, objectes, etc. Saber com gestionar-les és fonamental per avançar en el desenvolupament.

Conceptes clau

Asset: Qualsevol recurs multimèdia utilitzat en el joc (imatges, sons, etc.).
Preload: Fase on es carreguen els assets abans d’iniciar el joc.
Key: Nom únic que identifica cada asset carregat.
Sprite: Imatge o animació que es pot moure i manipular dins el joc.

Procés de càrrega i visualització d’imatges

El procés bàsic per utilitzar imatges a Phaser és:

Carregar la imatge durant la fase de preload.
Afegir la imatge a l’escena per mostrar-la.

Taula resum del procés

Pas	Mètode Phaser	Explicació breu
Carregar	`this.load.image`	Carrega la imatge i li assigna una clau
Mostrar	`this.add.image`	Afegeix la imatge a l’escena a una posició X,Y

Exemple pràctic: Carregar i mostrar una imatge

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

Codi complet

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

  create() {
    // Afegim la imatge a la posició (400, 300)
    this.add.image(400, 300, 'player');
  }
}

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

const game = new Phaser.Game(config);

Explicació detallada

preload(): Aquesta funció es crida abans de començar l’escena. Aquí carreguem la imatge amb this.load.image('player', 'assets/player.png').
- 'player' és la clau que utilitzarem per referenciar la imatge.
- 'assets/player.png' és la ruta on es troba la imatge.
create(): Aquesta funció s’executa després de carregar tots els assets.
- this.add.image(400, 300, 'player') afegeix la imatge al joc, centrada a la posició (400, 300) (coordenades X, Y).
config: Configuració bàsica del joc (mida, tipus de renderitzat, escena principal).

Exercicis pràctics

Exercici 1

Enunciat:
Carrega una imatge anomenada background.png i mostra-la al centre de la pantalla (800x600).

Solució:

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

  create() {
    this.add.image(400, 300, 'background');
  }
}

Consell:
Assegura’t que la ruta de la imatge sigui correcta i que la imatge existeixi a la carpeta assets/.

Exercici 2

Enunciat:
Carrega dues imatges: star.png i enemy.png. Mostra la primera a (100, 100) i la segona a (700, 500).

Solució:

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

  create() {
    this.add.image(100, 100, 'star');
    this.add.image(700, 500, 'enemy');
  }
}

Error comú:
Si utilitzes una clau que no has carregat prèviament, Phaser mostrarà un error i la imatge no apareixerà.

Consells addicionals

Noms de les claus: Utilitza noms descriptius i únics per evitar confusions.
Optimització: Carrega només les imatges que necessites per a cada escena per reduir el temps de càrrega.
Resolució d’imatges: Utilitza imatges amb una resolució adequada per evitar que es vegin pixelades o massa grans.

Resum

Has après a carregar imatges amb this.load.image i a mostrar-les amb this.add.image.
Les imatges es carreguen a la fase de preload i es mostren a la fase de create.
És important utilitzar claus úniques i rutes correctes.
Practica carregant i mostrant diferents imatges per familiaritzar-te amb el procés.

Pròxim pas:
En el següent tema aprendràs a treballar amb text dins del teu joc, afegint informació visual i missatges per als jugadors.

Carregar i mostrar imatges

Conceptes clau

Procés de càrrega i visualització d’imatges

Taula resum del procés

Exemple pràctic: Carregar i mostrar una imatge

Codi complet

Explicació detallada

Exercicis pràctics

Exercici 1

Exercici 2

Consells addicionals

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