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

HOME

En aquesta secció, crearàs el teu primer projecte amb Phaser. Aprendràs a configurar l’estructura bàsica d’un joc, carregar una imatge i mostrar-la a la pantalla. Aquest és el primer pas per entendre com funciona Phaser i començar a experimentar amb el desenvolupament de jocs.

Estructura bàsica d’un projecte Phaser

Un projecte típic de Phaser necessita:

Un fitxer HTML per carregar el joc.
Un fitxer JavaScript amb el codi del joc.
Una carpeta per als recursos (imatges, sons, etc.).

Estructura recomanada:

el-teu-joc/
│
├── index.html
├── main.js
└── assets/
    └── logo.png

Crear el fitxer HTML

El fitxer index.html serveix per carregar Phaser i el teu codi JavaScript.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>El teu primer joc amb Phaser</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Explicació:

Incloem Phaser des d’un CDN.
Carreguem el fitxer main.js on escriurem el codi del joc.

Crear el fitxer JavaScript bàsic

El fitxer main.js contindrà la configuració i la lògica inicial del joc.

// Configuració bàsica del joc
const config = {
    type: Phaser.AUTO, // Phaser tria automàticament WebGL o Canvas
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

// Crear una nova instància del joc
const game = new Phaser.Game(config);

// Carregar recursos
function preload() {
    this.load.image('logo', 'assets/logo.png');
}

// Crear la escena
function create() {
    this.add.image(400, 300, 'logo');
}

Explicació detallada:

Bloc de codi	Què fa?
`config`	Defineix la mida de la pantalla, el tipus de renderitzat i les funcions de la escena.
`Phaser.Game(config)`	Crea el joc amb la configuració donada.
`preload()`	Carrega la imatge 'logo' des de la carpeta `assets`.
`create()`	Afegeix la imatge 'logo' al centre de la pantalla (400, 300).

Afegir una imatge de prova

Descarrega una imatge (per exemple, el logo de Phaser) i desa-la com a assets/logo.png.
Assegura’t que la ruta sigui correcta respecte al fitxer main.js.

Executar el projecte

Obre la carpeta del projecte amb el teu editor de codi.
Obre el fitxer index.html amb el navegador.
Hauries de veure la imatge centrada a la pantalla.

Exercici pràctic

Prova-ho tu mateix:

Canvia la mida de la finestra del joc a 640x480.
Mou la imatge a la cantonada superior esquerra (coordenades 0, 0).

Solució:

const config = {
    type: Phaser.AUTO,
    width: 640,
    height: 480,
    scene: {
        preload: preload,
        create: create
    }
};

const game = new Phaser.Game(config);

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

function create() {
    this.add.image(0, 0, 'logo').setOrigin(0, 0);
}

Explicació:

Hem canviat width i height a 640 i 480.
Hem afegit .setOrigin(0, 0) per alinear la imatge a la cantonada superior esquerra.

Errors comuns i consells

Error habitual	Solució
La imatge no es carrega	Comprova la ruta i el nom del fitxer. Assegura’t que `assets/logo.png` existeix.
No es veu res a la pantalla	Revisa la consola del navegador per missatges d’error. Comprova que el fitxer JS està ben referenciat.
El joc no s’ajusta a la mida desitjada	Assegura’t que els valors de `width` i `height` són correctes a la configuració.

Resum

Has creat l’estructura bàsica d’un projecte Phaser.
Has carregat i mostrat una imatge a la pantalla.
Has après a modificar la mida del joc i la posició dels elements.

Ara ja tens la base per començar a experimentar amb més funcionalitats de Phaser!
En el següent tema, aprofundirem en el bucle del joc i com Phaser gestiona l’actualització contínua de l’estat del joc.

El teu primer projecte amb Phaser

Estructura bàsica d’un projecte Phaser

Crear el fitxer HTML

Crear el fitxer JavaScript bàsic

Afegir una imatge de prova

Executar el projecte

Exercici pràctic

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