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

HOME

La física és una part fonamental en molts jocs, ja que permet simular moviments realistes, col·lisions i interaccions entre objectes. Phaser facilita la integració de sistemes físics, fent que els teus sprites puguin moure’s, caure, rebotar i interactuar amb el món del joc.

En aquesta secció aprendràs:

Quins sistemes físics ofereix Phaser.
Com activar la física en un sprite.
Com configurar propietats físiques bàsiques (velocitat, gravetat, rebot...).
Exemples pràctics i exercicis per practicar.

Sistemes físics a Phaser

Phaser 3 inclou diversos motors físics. Els més utilitzats són:

Motor físic	Característiques principals	Ús recomanat
Arcade	Lleuger, fàcil d’utilitzar, ideal per a la majoria de jocs 2D.	Plataformes, shoot’em ups...
Matter.js	Més avançat, suporta formes complexes i física realista.	Jocs amb física avançada
Impact	Opcional, similar a Arcade però amb algunes diferències.	Jocs que venen d’ImpactJS

En aquest curs ens centrarem en Arcade Physics, ja que és el més senzill i suficient per a la majoria de projectes.

Activar la física Arcade en un sprite

Passos bàsics

Activar la física a l’escena
Phaser activa Arcade Physics per defecte, però cal afegir els objectes físics explícitament.
Afegir un sprite amb física
Utilitza this.physics.add.sprite() en comptes de this.add.sprite().

Exemple bàsic

class MyGameScene extends Phaser.Scene {
  preload() {
    this.load.image('player', 'assets/player.png');
  }

  create() {
    // Afegim el sprite amb física Arcade
    this.player = this.physics.add.sprite(100, 200, 'player');
  }
}

Explicació:

this.physics.add.sprite(x, y, clau) crea un sprite amb física Arcade activada.
Ara el sprite pot moure’s, caure i interactuar amb altres objectes físics.

Propietats físiques bàsiques

Un cop tens el sprite amb física, pots modificar diverses propietats:

Propietat	Descripció	Exemple d’ús
`velocity`	Velocitat de moviment (x, y)	`sprite.body.velocity.x = 100`
`gravity`	Gravetat aplicada només a aquest sprite	`sprite.body.gravity.y = 300`
`bounce`	Factor de rebot (0 = no rebota, 1 = rebot total)	`sprite.setBounce(0.8)`
`collideWorldBounds`	Si el sprite col·lisiona amb els límits del món	`sprite.setCollideWorldBounds(true)`

Exemple pràctic

create() {
  this.player = this.physics.add.sprite(100, 200, 'player');

  // Afegim gravetat només al sprite
  this.player.body.gravity.y = 300;

  // Fem que reboti una mica quan toca el terra
  this.player.setBounce(0.5);

  // No permetem que surti de la pantalla
  this.player.setCollideWorldBounds(true);

  // Donem una velocitat inicial cap a la dreta
  this.player.body.velocity.x = 150;
}

Explicació detallada:

body.gravity.y = 300: Aplica gravetat vertical només a aquest sprite.
setBounce(0.5): El sprite rebotarà la meitat de l’energia quan col·lisioni.
setCollideWorldBounds(true): El sprite no podrà sortir dels límits del món.
body.velocity.x = 150: El sprite es mourà cap a la dreta automàticament.

Exercicis pràctics

Exercici 1: Crea un sprite que caigui i reboti

Enunciat:
Crea un sprite amb física Arcade que caigui des de la part superior de la pantalla, rebotant quan toca el terra, i que no pugui sortir dels límits del món.

Solució:

create() {
  this.ball = this.physics.add.sprite(400, 50, 'ball');
  this.ball.setBounce(0.8);
  this.ball.setCollideWorldBounds(true);
  this.ball.body.gravity.y = 500;
}

Consell:
Si el sprite no rebota, assegura’t que setBounce estigui configurat i que setCollideWorldBounds(true) estigui activat.

Exercici 2: Mou un sprite amb les fletxes i aplica gravetat

Enunciat:
Crea un sprite que puguis moure a esquerra i dreta amb les fletxes del teclat, i que caigui per la gravetat.

Solució:

create() {
  this.player = this.physics.add.sprite(100, 100, 'player');
  this.player.setCollideWorldBounds(true);
  this.player.body.gravity.y = 400;

  this.cursors = this.input.keyboard.createCursorKeys();
}

update() {
  if (this.cursors.left.isDown) {
    this.player.setVelocityX(-160);
  } else if (this.cursors.right.isDown) {
    this.player.setVelocityX(160);
  } else {
    this.player.setVelocityX(0);
  }
}

Error comú:
Oblidar posar la gravetat (body.gravity.y) farà que el sprite no caigui. Si el sprite no es mou, revisa que estiguis utilitzant setVelocityX dins de la funció update().

Resum

Phaser permet afegir física als sprites de manera senzilla amb Arcade Physics.
Utilitza this.physics.add.sprite() per crear sprites amb física.
Pots configurar propietats com la gravetat, el rebot, la velocitat i la col·lisió amb els límits del món.
La física fa que els teus jocs siguin més realistes i interactius.

Pròxim pas:
Ara que saps com activar i configurar la física en els teus sprites, aprendràs a gestionar col·lisions i superposicions entre objectes al següent tema.

Activar la física en els sprites

Sistemes físics a Phaser

Activar la física Arcade en un sprite

Passos bàsics

Exemple bàsic

Propietats físiques bàsiques

Exemple pràctic

Exercicis pràctics

Exercici 1: Crea un sprite que caigui i reboti

Exercici 2: Mou un sprite amb les fletxes i aplica gravetat

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