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

HOME

En aquest tema aprendràs com utilitzar la càmera a Phaser per crear mons de joc més grans que la pantalla i permetre el desplaçament (scrolling). El control de la càmera és essencial per a jocs de plataformes, aventures o qualsevol joc on el jugador es mogui per un món ampli.

Conceptes clau

Càmera: És la "finestra" a través de la qual el jugador veu el món del joc.
Desplaçament (scrolling): Moviment de la càmera per mostrar diferents parts del món del joc.
Seguiment d’objectes: La càmera pot seguir un sprite (normalment el jugador).
Zoom i límits: Controlar el nivell d’ampliació i fins on pot moure’s la càmera.

Introducció a la càmera a Phaser

Phaser permet gestionar la càmera principal de l’escena a través de this.cameras.main. Aquesta càmera es pot moure, fer zoom, seguir objectes i limitar el seu moviment.

Funcions bàsiques de la càmera

Funció	Descripció
`setBounds(x, y, width, height)`	Defineix els límits de moviment de la càmera
`startFollow(sprite)`	Fa que la càmera segueixi un sprite
`setZoom(zoom)`	Estableix el nivell de zoom de la càmera
`scrollX`, `scrollY`	Posició actual de la càmera dins del món
`centerOn(x, y)`	Centra la càmera en una posició específica

Exemple pràctic: Món més gran que la pantalla

Suposem que tens un món de 2000x600 píxels, però la pantalla del joc és de 800x600.

2.1. Configuració bàsica

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    this.load.image('player', 'assets/player.png');
    this.load.image('background', 'assets/background.png');
}

function create() {
    // Afegim un fons gran
    this.add.image(1000, 300, 'background').setDisplaySize(2000, 600);

    // Afegim el jugador
    this.player = this.physics.add.sprite(100, 300, 'player');

    // Limitem la càmera als límits del món
    this.cameras.main.setBounds(0, 0, 2000, 600);

    // Limitem el moviment del jugador dins del món
    this.physics.world.setBounds(0, 0, 2000, 600);

    // La càmera segueix el jugador
    this.cameras.main.startFollow(this.player);
}

function update() {
    // Control simple per moure el jugador
    const cursors = this.input.keyboard.createCursorKeys();
    if (cursors.left.isDown) {
        this.player.setVelocityX(-200);
    } else if (cursors.right.isDown) {
        this.player.setVelocityX(200);
    } else {
        this.player.setVelocityX(0);
    }
}

Explicació del codi

setBounds: Limita la càmera perquè no surti fora del món.
startFollow: Fa que la càmera segueixi el jugador automàticament.
setBounds de la física: Evita que el jugador surti del món.
Control del jugador: Permet moure el jugador amb les fletxes.

Control avançat de la càmera

3.1. Zoom

Pots fer zoom a la càmera per mostrar més o menys àrea del món:

this.cameras.main.setZoom(1.5); // Amplia la vista

3.2. Centrar la càmera manualment

Si vols centrar la càmera en una posició específica:

this.cameras.main.centerOn(500, 300);

3.3. Seguir amb suavitat (lerp)

Pots fer que la càmera segueixi el jugador de manera suau:

this.cameras.main.startFollow(this.player, true, 0.08, 0.08);

Els dos últims paràmetres són la velocitat de seguiment horitzontal i vertical (valors entre 0 i 1).

Exercicis pràctics

Exercici 1

Enunciat:
Crea un món de 1600x600 píxels amb un sprite de jugador que es pugui moure a esquerra i dreta. Fes que la càmera segueixi el jugador i no surti dels límits del món.

Solució:

function create() {
    this.add.rectangle(800, 300, 1600, 600, 0x87ceeb); // Fons blau
    this.player = this.physics.add.sprite(100, 300, 'player');
    this.cameras.main.setBounds(0, 0, 1600, 600);
    this.physics.world.setBounds(0, 0, 1600, 600);
    this.cameras.main.startFollow(this.player);
}

Consell:
Assegura’t que el sprite del jugador no pugui sortir dels límits del món. Utilitza setCollideWorldBounds(true) si cal.

Exercici 2

Enunciat:
Afegeix un botó que, en fer clic, faci zoom a la càmera (per exemple, a 2x).

Solució:

function create() {
    // ... (codi anterior)
    const zoomButton = this.add.text(700, 20, 'Zoom', { fill: '#fff', backgroundColor: '#000' })
        .setInteractive()
        .setScrollFactor(0) // El botó no es mou amb la càmera
        .on('pointerdown', () => {
            this.cameras.main.setZoom(2);
        });
}

Consell:
Utilitza setScrollFactor(0) perquè la UI no es desplaci amb la càmera.

Errors comuns i consells

Error comú	Solució/Consell
La càmera mostra àrees buides fora del món	Assegura’t d’utilitzar `setBounds` correctament
El jugador surt del món però la càmera el segueix	Limita el moviment del jugador amb `setCollideWorldBounds`
La UI es mou amb la càmera	Aplica `setScrollFactor(0)` als elements d’interfície
El zoom fa que la càmera mostri àrees buides	Ajusta els límits de la càmera segons el nivell de zoom

Resum

La càmera a Phaser permet mostrar només una part del món del joc i es pot moure, fer zoom i seguir objectes.
Utilitza setBounds per limitar la càmera, startFollow per seguir un sprite i setZoom per controlar l’ampliació.
Recorda gestionar correctament la UI perquè no es desplaci amb la càmera.
El control de la càmera és fonamental per a jocs amb mons grans i desplaçament.

Pròxim pas:
En el següent tema aprendràs a gestionar capes i profunditat per organitzar millor els elements visuals del teu joc.

Desplaçament i control de la càmera

Conceptes clau

Introducció a la càmera a Phaser

Funcions bàsiques de la càmera

Exemple pràctic: Món més gran que la pantalla

2.1. Configuració bàsica

Explicació del codi

Control avançat de la càmera

3.1. Zoom

3.2. Centrar la càmera manualment

3.3. Seguir amb suavitat (lerp)

Exercicis pràctics

Exercici 1

Exercici 2

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