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

Gestió de capes i profunditat

Següent ►
►

En aquest tema aprendràs com gestionar les capes i la profunditat dels objectes dins del teu joc amb Phaser. Aquest concepte és fonamental per controlar l’ordre en què es mostren els elements a la pantalla, assegurant que, per exemple, el jugador no quedi ocult darrere del fons o que els efectes especials apareguin per sobre dels personatges.

Conceptes clau

  • Capes (Layers): Són agrupacions d’objectes que es poden manipular conjuntament, útils per organitzar el contingut del joc (fons, personatges, HUD, etc.).
  • Profunditat (Depth): Determina l’ordre de renderització dels objectes. Un objecte amb més profunditat es dibuixa per sobre d’un amb menys.
  • Z-Index: En Phaser, la profunditat funciona de manera similar al z-index en CSS.

  1. Per què utilitzar capes i profunditat?

  • Organització: Permet separar lògica i visuals (fons, jugadors, enemics, efectes, HUD).
  • Control visual: Assegura que els elements importants siguin visibles en tot moment.
  • Facilitat de gestió: Pots moure, ocultar o modificar grups d’objectes fàcilment.

  1. Gestió de la profunditat amb setDepth()

Phaser permet establir la profunditat de qualsevol objecte visual amb el mètode .setDepth(valor).

Exemple bàsic

// Afegim dos sprites: un fons i un jugador
const background = this.add.image(400, 300, 'background');
const player = this.add.sprite(400, 300, 'player');

// Assegurem que el jugador aparegui per sobre del fons
background.setDepth(0); // Profunditat més baixa
player.setDepth(1);     // Profunditat més alta

Explicació:

  • El fons té profunditat 0, el jugador 1. El jugador es dibuixa per sobre del fons.

  1. Ús de capes amb Container i Layer

Phaser ofereix dues formes d’agrupació:

Estructura Descripció Ús principal
Container Agrupa objectes per moure’ls, escalar-los o girar-los junts Personatges, objectes units
Layer Agrupa objectes per controlar la profunditat i l’ordre de renderització Fons, efectes, HUD

Exemple amb Layer

// Creem una capa per al HUD
const hudLayer = this.add.layer();

// Afegim un text a la capa HUD
const scoreText = this.add.text(16, 16, 'Punts: 0', { fontSize: '32px', fill: '#fff' });
hudLayer.add(scoreText);

// Assegurem que el HUD estigui sempre al davant
hudLayer.setDepth(10);

Explicació:

  • Tot el que afegeixis a hudLayer tindrà la profunditat de la capa, apareixent per sobre d’altres elements.

  1. Ordre de renderització i canvis dinàmics

Pots canviar la profunditat d’un objecte en qualsevol moment del joc.

// Suposem que el jugador agafa un power-up i volem que el power-up aparegui per sobre
powerUp.setDepth(player.depth + 1);

Consell:

  • Utilitza valors de profunditat clars i consistents (per exemple: 0=fons, 1=personatges, 10=HUD).

  1. Exercicis pràctics

Exercici 1: Ordena els elements

Enunciat:
Crea tres imatges: fons, jugador i núvol. Fes que el núvol aparegui entre el fons i el jugador.

Solució:

const background = this.add.image(400, 300, 'background').setDepth(0);
const cloud = this.add.image(400, 200, 'cloud').setDepth(1);
const player = this.add.sprite(400, 300, 'player').setDepth(2);

Retroalimentació:

  • Un error comú és no establir la profunditat, fent que l’ordre depengui de l’ordre d’afegit. Sempre especifica la profunditat per evitar confusions visuals.

Exercici 2: Capa de HUD persistent

Enunciat:
Crea una capa per al HUD i afegeix-hi un marcador de puntuació. Assegura’t que el HUD sempre sigui visible per sobre de la resta d’elements.

Solució:

const hudLayer = this.add.layer();
const scoreText = this.add.text(16, 16, 'Punts: 0', { fontSize: '32px', fill: '#fff' });
hudLayer.add(scoreText);
hudLayer.setDepth(10);

Consell:

  • Si afegeixes més elements al HUD, afegeix-los sempre a la mateixa capa per mantenir l’ordre.

  1. Taula resum de profunditat

Profunditat Element típic Exemple de valor
0 Fons (background) 0
1-5 Personatges, enemics 1, 2, 3...
10+ HUD, menús 10, 20

Resum

  • La gestió de capes i profunditat és essencial per controlar l’ordre visual dels elements del joc.
  • Utilitza .setDepth() per establir la profunditat dels objectes.
  • Agrupa elements relacionats amb Layer o Container per facilitar la gestió.
  • Mantingues una convenció clara de valors de profunditat per evitar errors visuals.
  • Practica amb exercicis per consolidar aquests conceptes.

Pròxim pas:
Ara que domines la gestió de capes i profunditat, estàs preparat per afegir àudio i crear una interfície d’usuari atractiva al teu joc!

◄ 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