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

HOME

El bucle del joc (game loop) és el cor de qualsevol videojoc. És el mecanisme que manté el joc en funcionament, actualitzant l’estat dels objectes i dibuixant-los a la pantalla de manera contínua. Entendre com funciona aquest bucle és fonamental per a qualsevol desenvolupador de jocs, ja que tot el que passa en el teu joc —moviment, col·lisions, animacions, etc.— depèn d’aquest procés.

Conceptes clau del bucle del joc

Actualització (Update): S’encarrega de processar la lògica del joc, com ara el moviment dels personatges, la detecció de col·lisions, la gestió de puntuacions, etc.
Dibuixat (Render): S’encarrega de mostrar a la pantalla l’estat actual del joc, dibuixant els objectes, fons, HUD, etc.
Cicle continu: El bucle del joc s’executa moltes vegades per segon (normalment 60 FPS), assegurant que el joc sigui fluid i reactiu.

Estructura bàsica d’un bucle del joc

Pas	Descripció
Entrada	Es llegeixen les accions de l’usuari (teclat, ratolí, etc.)
Actualització	Es calcula la nova lògica del joc (moviment, col·lisions, IA, etc.)
Dibuixat	Es mostra el nou estat del joc a la pantalla

El bucle del joc a Phaser

Phaser gestiona automàticament el bucle del joc per tu. Només has de definir dues funcions clau dins de les teves escenes:

update(): Aquí poses la lògica que s’ha d’actualitzar cada fotograma.
render(): (Opcional) S’utilitza per dibuixos personalitzats, però normalment Phaser s’encarrega del renderitzat.

Exemple bàsic d’una escena amb bucle del joc

class MyGameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGameScene' });
  }

  preload() {
    // Carrega recursos (imatges, sons, etc.)
    this.load.image('player', 'assets/player.png');
  }

  create() {
    // Inicialitza objectes del joc
    this.player = this.add.sprite(100, 100, 'player');
  }

  update(time, delta) {
    // Aquesta funció s’executa 60 vegades per segon (aprox.)
    // Aquí posem la lògica de moviment, col·lisions, etc.
    this.player.x += 1; // Mou el jugador cap a la dreta
  }
}

Explicació del codi:

preload(): Carrega els recursos abans de començar el joc.
create(): Inicialitza els objectes del joc.
update(time, delta): S’executa contínuament. Aquí, el jugador es mou cap a la dreta cada fotograma.

Exercicis pràctics

Exercici 1: Mou un sprite cap avall

Enunciat:
Modifica la funció update() perquè el sprite es mogui cap avall (incrementant la coordenada y) en lloc de cap a la dreta.

update(time, delta) {
  // TODO: Mou el jugador cap avall
}

Solució:

update(time, delta) {
  this.player.y += 1; // Mou el jugador cap avall
}

Exercici 2: Mou el sprite més ràpid

Enunciat:
Fes que el sprite es mogui dues vegades més ràpid cap a la dreta.

update(time, delta) {
  // TODO: Mou el jugador el doble de ràpid cap a la dreta
}

Solució:

update(time, delta) {
  this.player.x += 2; // Mou el jugador el doble de ràpid
}

Consell:
Si vols que la velocitat sigui independent del rendiment del dispositiu, utilitza el paràmetre delta (el temps en mil·lisegons des de l’últim fotograma):

update(time, delta) {
  this.player.x += 0.1 * delta; // Mou el jugador a una velocitat constant
}

Errors comuns i consells

Oblidar posar la lògica dins d’update(): Si poses la lògica fora d’update(), només s’executarà una vegada.
No tenir en compte el temps (delta): Si la velocitat depèn d’un valor fix, pot variar segons el rendiment del dispositiu. Utilitza delta per a una experiència consistent.
No inicialitzar els objectes abans d’update(): Assegura’t que els objectes existeixen abans de modificar-los a update().

Resum

El bucle del joc és el mecanisme que manté el joc viu, actualitzant la lògica i dibuixant la pantalla contínuament.
A Phaser, la funció update() és on poses la lògica que s’ha d’executar cada fotograma.
Utilitza el paràmetre delta per fer que el moviment sigui consistent a tots els dispositius.
Practica modificant la funció update() per entendre com afecta el comportament del teu joc.

Pròxim pas:
Ara que entens el bucle del joc, aprendrem com configurar el joc i treballar amb escenes a Phaser.

Entendre el bucle del joc

Conceptes clau del bucle del joc

Estructura bàsica d’un bucle del joc

El bucle del joc a Phaser

Exemple bàsic d’una escena amb bucle del joc

Exercicis pràctics

Exercici 1: Mou un sprite cap avall

Exercici 2: Mou el sprite més ràpid

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