El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Consells per a l’optimització del rendiment

Següent ►
►

L’optimització del rendiment és essencial per garantir que el teu joc creat amb Phaser funcioni de manera fluida en la majoria de dispositius i navegadors. En aquesta secció aprendràs tècniques i bones pràctiques per millorar la velocitat, reduir el consum de memòria i evitar bloquejos o alentiments innecessaris.

  1. Conceptes clau d’optimització

  • Rendiment (Performance): Mesura de la rapidesa i eficiència amb què el teu joc s’executa.
  • FPS (Frames per segon): Nombre d’imatges que es mostren per segon. Un valor estable de 60 FPS és l’objectiu habitual.
  • Ús de memòria: Quantitat de memòria RAM utilitzada pel joc.
  • Temps de resposta: Rapidesa amb què el joc respon a les accions de l’usuari.

  1. Bones pràctiques generals

2.1. Minimitza el nombre d’objectes actius

  • Mantingues només els objectes necessaris a l’escena.
  • Destrueix o desactiva els objectes que ja no són visibles o útils.

Exemple:

// Destrueix un sprite quan surt de la pantalla
if (sprite.x > this.sys.game.config.width) {
    sprite.destroy();
}

Explicació: Això allibera memòria i recursos, evitant que el joc es torni lent amb el temps.

2.2. Utilitza grups i pools d’objectes

  • Reutilitza objectes (com bales o enemics) en lloc de crear-ne de nous constantment.
  • Els “object pools” permeten reciclar objectes, millorant el rendiment.

Exemple:

// Crear un grup de bales reutilitzables
this.bullets = this.physics.add.group({
    classType: Bullet,
    maxSize: 20,
    runChildUpdate: true
});

// Obtenir una bala del grup
let bullet = this.bullets.get();
if (bullet) {
    bullet.fire(player.x, player.y);
}

Explicació: Això evita la creació/destrucció constant d’objectes, que pot ser costosa.

2.3. Optimitza les imatges i recursos

  • Utilitza imatges amb la resolució mínima necessària.
  • Comprimeix les imatges i àudios abans de carregar-los.
  • Agrupa petits gràfics en “spritesheets” o “atlases”.

Taula comparativa:

Estratègia Benefici principal Exemple pràctic
Spritesheet Menys peticions HTTP Personatges animats
Imatge comprimida Menys memòria i càrrega Fons de pantalla
Àudio en format OGG Compatibilitat i mida Efectes de so

2.4. Limita la lògica dins el bucle d’actualització

  • Evita càlculs complexos o innecessaris dins del update().
  • Mou la lògica que no cal executar cada frame fora del bucle principal.

Exemple:

// NO recomanat: càlcul complex cada frame
update() {
    for (let i = 0; i < 1000; i++) {
        // càlcul innecessari
    }
}

// Recomanat: calcula només quan cal
if (needToRecalculate) {
    doHeavyCalculation();
}

2.5. Utilitza la física només quan sigui necessari

  • No activis la física per a objectes estàtics o decoratius.
  • Utilitza el motor de física més senzill que cobreixi les teves necessitats (Arcade vs Matter).

Taula de motors de física:

Motor de física Característiques Ús recomanat
Arcade Lleuger, senzill Plataformes, shoot’em up
Matter Avançat, més pesat Simulacions realistes

  1. Optimització de tilemaps i càmera

  • Carrega només les parts del tilemap visibles a la pantalla.
  • Utilitza capes de tilemap eficients i desactiva les que no es veuen.
  • Limita el nombre d’objectes que la càmera ha de renderitzar.

  1. Depuració i mesura del rendiment

  • Utilitza eines com el “Performance Monitor” del navegador per identificar colls d’ampolla.
  • Phaser té eines com this.game.loop.actualFps per monitoritzar els FPS.

Exemple:

console.log('FPS actuals:', this.game.loop.actualFps);

  1. Exercicis pràctics

Exercici 1: Destrueix objectes innecessaris

Enunciat:
Afegeix codi per destruir els enemics que surten de la pantalla per la dreta.

Solució:

if (enemy.x > this.sys.game.config.width) {
    enemy.destroy();
}

Consell:
Assegura’t de no destruir objectes que encara són necessaris per a la lògica del joc.

Exercici 2: Implementa un pool de bales

Enunciat:
Crea un grup de bales reutilitzables i fes que el jugador dispari utilitzant-les.

Solució:

// Creació del grup
this.bullets = this.physics.add.group({
    classType: Bullet,
    maxSize: 10,
    runChildUpdate: true
});

// Disparar una bala
let bullet = this.bullets.get();
if (bullet) {
    bullet.fire(player.x, player.y);
}

Error comú:
Oblidar reinicialitzar la posició i estat de la bala quan es reutilitza.

Exercici 3: Comprimeix i agrupa recursos

Enunciat:
Explica per què és millor utilitzar un spritesheet en comptes de moltes imatges individuals.

Solució:
Un spritesheet redueix el nombre de peticions HTTP i permet animacions més eficients, millorant la càrrega i el rendiment del joc.

  1. Resum i properes passes

En aquesta secció has après:

  • Les principals estratègies per optimitzar el rendiment del teu joc amb Phaser.
  • Com gestionar millor els recursos, objectes i la lògica del joc.
  • La importància de mesurar i depurar el rendiment.

Pròxim pas:
Ara que el teu joc està optimitzat, el següent tema t’ensenyarà a depurar i provar el teu joc per assegurar-te que tot funciona correctament abans de publicar-lo.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats