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.


  1. 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

  1. 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.

  1. 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).

  1. 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.

  1. Executar el projecte

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

  1. 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.

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

© Copyright 2024. Tots els drets reservats