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

HOME

Phaser és un dels frameworks més populars per al desenvolupament de jocs 2D amb JavaScript. Permet crear jocs que funcionen directament al navegador, aprofitant la potència de HTML5 i WebGL. En aquesta secció, coneixeràs què és Phaser, les seves característiques principals, com s’estructura un projecte i per què és una bona elecció per a desenvolupar jocs.

Què és Phaser?

Framework de codi obert per crear jocs 2D amb JavaScript.
Permet desenvolupar jocs que funcionen en navegadors web (HTML5).
Ofereix eines per gestionar gràfics, àudio, física, entrada d’usuari, animacions i molt més.
Té una gran comunitat i una documentació extensa.

Característiques principals de Phaser

Característica	Descripció
Gràfics 2D	Suport per a imatges, sprites, tilemaps, animacions i efectes visuals.
Física	Motors de física integrats (Arcade, Matter.js) per a col·lisions i moviments realistes.
Gestió d’escenes	Permet dividir el joc en diferents escenes (menú, joc, pantalla de puntuació, etc.).
Entrada d’usuari	Suport per a teclat, ratolí, pantalla tàctil i controladors de joc.
Àudio	Reproducció de música i efectes de so.
Optimització	Ràpid i eficient, amb suport per a WebGL i Canvas.
Exportació	Fàcil d’exportar a web, mòbil i escriptori (amb eines addicionals).

Versions de Phaser

Phaser 2 (Phaser CE): Versió clàssica, encara utilitzada en alguns projectes antics.
Phaser 3: Versió actual i recomanada. Més potent, flexible i modular.

Nota: Aquest curs es basa en Phaser 3.

Com s’estructura un projecte amb Phaser?

Un projecte típic de Phaser inclou:

Fitxer HTML: On s’inclou la llibreria Phaser i el teu codi JavaScript.
Fitxer(s) JavaScript: On escrius la lògica del joc.
Actius: Imatges, sons, fonts, etc.

Exemple d’estructura de carpetes:

/el-meu-joc/
│
├── index.html
├── js/
│   └── joc.js
├── assets/
│   ├── imatges/
│   └── sons/

Flux bàsic d’un joc amb Phaser

Configuració: Es defineixen les opcions bàsiques (amplada, alçada, escenes, etc.).
Carrega d’actius: Es carreguen imatges, sons i altres recursos.
Creació: Es creen els objectes del joc (jugador, enemics, fons, etc.).
Actualització: Es gestiona la lògica del joc en cada fotograma (moviment, col·lisions, puntuació, etc.).

Exemple bàsic de codi amb Phaser

A continuació, veuràs un exemple molt senzill d’un joc amb Phaser 3:

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

// js/joc.js
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

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

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

function update() {
    // Aquí anirà la lògica que s’executa en cada fotograma
}

Explicació del codi:

config: Defineix la configuració bàsica del joc (tipus de renderitzat, mida, escenes).
preload(): Carrega els recursos abans de començar el joc.
create(): Crea els objectes del joc (en aquest cas, una imatge centrada).
update(): S’executa contínuament per actualitzar la lògica del joc.

Exercici pràctic

Enunciat:
Crea un projecte bàsic de Phaser que mostri una imatge centrada a la pantalla. Utilitza la plantilla d’exemple anterior i substitueix la imatge per una altra de la teva elecció (pots descarregar una imatge lliure de drets i posar-la a la carpeta assets/imatges/).

Solució:

Descarrega una imatge i desa-la com assets/imatges/estrella.png.
Modifica el codi JavaScript:

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

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

Errors comuns i consells

Error: El joc no mostra la imatge.
- Solució: Comprova que la ruta de la imatge sigui correcta i que el fitxer existeixi.
Error: El navegador bloqueja la càrrega d’arxius locals.
- Solució: Utilitza un servidor local (com Live Server a VSCode) per evitar problemes de seguretat.

Resum

Phaser és un framework potent i flexible per crear jocs 2D amb JavaScript.
Permet gestionar gràfics, àudio, física i entrada d’usuari de manera senzilla.
Un projecte bàsic de Phaser inclou la configuració, la càrrega d’actius, la creació d’objectes i l’actualització de la lògica del joc.
Has creat el teu primer projecte bàsic i has après a mostrar una imatge a la pantalla.

Pròxim pas: Aprendràs a configurar el teu entorn de desenvolupament per treballar còmodament amb Phaser.

Visió general de Phaser

Què és Phaser?

Característiques principals de Phaser

Versions de Phaser

Com s’estructura un projecte amb Phaser?

Flux bàsic d’un joc amb Phaser

Exemple bàsic de codi amb Phaser

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