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