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

HOME

La física és una part fonamental en el desenvolupament de jocs, ja que permet simular moviments, col·lisions i interaccions realistes entre objectes. Phaser ofereix diversos sistemes de física integrats que faciliten la creació de jocs dinàmics i interactius sense necessitat de programar totes les regles físiques des de zero.

En aquesta secció aprendràs:

Què és un motor de física i per què és important en els jocs.
Quins sistemes de física ofereix Phaser.
Com activar i configurar la física bàsica en un projecte Phaser.
Exemples pràctics per començar a utilitzar la física.

Què és un motor de física?

Un motor de física és una biblioteca o component que simula lleis físiques com la gravetat, la fricció, les col·lisions i el moviment. Això permet que els objectes del joc es comportin d’una manera més natural i previsible.

Funcions principals d’un motor de física:

Simular la gravetat (objectes que cauen).
Detectar i gestionar col·lisions entre objectes.
Aplicar forces i velocitats.
Gestionar la resposta a les col·lisions (rebot, aturada, etc.).

Sistemes de física a Phaser

Phaser inclou diversos sistemes de física. Els més utilitzats són:

Sistema de física	Característiques principals	Ús recomanat
Arcade Physics	Lleuger, fàcil d’utilitzar, ideal per a jocs 2D senzills.	Plataformes, jocs d’acció simples.
Matter.js	Motor de física avançat, suporta formes complexes, cadenes, articulacions, etc.	Jocs amb física realista o objectes complexos.
Impact Physics	Inspirat en el motor ImpactJS, menys utilitzat.	Projectes específics o migració d’ImpactJS.

Nota: En aquest curs ens centrarem principalment en Arcade Physics, ja que és el més senzill i suficient per a la majoria de jocs 2D.

Activar la física a Phaser

Per utilitzar la física, cal activar el sistema de física quan es configura el joc. Això es fa a la configuració principal de Phaser.

Exemple bàsic de configuració amb Arcade Physics

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 }, // Aplica gravetat vertical
            debug: true          // Mostra informació de depuració
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

Explicació:

physics.default: 'arcade': Indica que utilitzarem el sistema Arcade Physics.
arcade.gravity.y: 300: Aplica una gravetat cap avall (en píxels per segon quadrat).
arcade.debug: true: Mostra visualment les àrees de col·lisió i altres dades útils per depurar.

Afegir física a un objecte

Un cop tens la física activada, pots afegir-la als objectes del joc (com sprites).

Exemple: Crear un sprite amb física

function create() {
    // Afegeix una imatge i activa la física
    const player = this.physics.add.sprite(100, 450, 'player');

    // Configura propietats físiques
    player.setBounce(0.2);      // Fa que el sprite reboti una mica
    player.setCollideWorldBounds(true); // No deixa que surti de la pantalla
}

Explicació:

this.physics.add.sprite(...): Crea un sprite amb física activada.
setBounce(0.2): El sprite rebotarà un 20% de la seva velocitat quan toqui una superfície.
setCollideWorldBounds(true): El sprite no podrà sortir dels límits de la pantalla.

Exercici pràctic

Enunciat:
Crea un projecte bàsic de Phaser on aparegui una pilota que cau per efecte de la gravetat i rebota quan toca el terra.

Pasos a seguir:

Configura el sistema de física Arcade.
Afegeix una imatge de pilota com a sprite amb física.
Fes que la pilota reboti quan toqui el terra.

Solució

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 500 },
            debug: true
        }
    },
    scene: {
        preload: preload,
        create: create
    }
};

let ball;

function preload() {
    this.load.image('ball', 'assets/ball.png'); // Assegura't de tenir la imatge a la ruta correcta
}

function create() {
    // Afegeix la pilota amb física
    ball = this.physics.add.sprite(400, 100, 'ball');
    ball.setBounce(0.8); // Rebotarà un 80% de la seva velocitat
    ball.setCollideWorldBounds(true); // No sortirà de la pantalla
}

const game = new Phaser.Game(config);

Explicació:

La pilota cau per la gravetat (gravity: { y: 500 }).
Quan toca el terra (límit inferior de la pantalla), rebota gràcies a setBounce(0.8).
setCollideWorldBounds(true) evita que la pilota surti de la pantalla.

Errors comuns i consells

Error comú	Solució
La imatge no es carrega	Comprova la ruta i el nom del fitxer a `this.load.image`.
El sprite no cau	Assegura’t que la física està activada i que el sprite s’ha creat amb `this.physics.add.sprite`.
El sprite no rebota	Revisa que has aplicat `setBounce` i que `setCollideWorldBounds` està a `true`.

Consell:
Utilitza debug: true mentre desenvolupes per veure les àrees de col·lisió i detectar problemes fàcilment.

Resum

La física permet simular moviments i col·lisions realistes als jocs.
Phaser ofereix diversos sistemes de física, sent Arcade Physics el més senzill i utilitzat.
Cal activar la física a la configuració del joc i afegir-la als objectes que la necessiten.
Has practicat creant una pilota que cau i rebota, aplicant els conceptes bàsics de física.

Pròxim pas:
A la següent secció aprendràs com activar la física en diferents tipus d’objectes i com gestionar col·lisions entre ells.

Introducció a la física a Phaser

Què és un motor de física?

Sistemes de física a Phaser

Activar la física a Phaser

Exemple bàsic de configuració amb Arcade Physics

Afegir física a un objecte

Exemple: Crear un sprite amb física

Exercici pràctic

Pasos a seguir:

Solució

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