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.

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

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


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

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

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

  1. Configura el sistema de física Arcade.
  2. Afegeix una imatge de pilota com a sprite amb física.
  3. 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.

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