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:
- 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
iheight
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.
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