El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En los juegos 2D, especialmente aquellos con mundos más grandes que la pantalla, el desplazamiento de cámara es fundamental para ofrecer una experiencia inmersiva. Phaser proporciona un sistema de cámaras flexible que te permite seguir personajes, explorar mapas y crear efectos visuales dinámicos.

En esta lección aprenderás:

Qué es una cámara en Phaser y por qué es importante.
Cómo mover la cámara manualmente y cómo hacer que siga a un objeto.
Cómo limitar el movimiento de la cámara.
Ejemplos prácticos y ejercicios para dominar el control de cámara.

¿Qué es una Cámara en Phaser?

En Phaser, la cámara es la "ventana" a través de la cual el jugador ve el mundo del juego. Aunque el mundo puede ser mucho más grande que la pantalla, la cámara determina qué parte se muestra en cada momento.

Conceptos clave:

Cámara principal (this.cameras.main): Es la cámara por defecto en cada escena.
Viewport: El área visible del mundo del juego.
Scroll: El desplazamiento de la cámara sobre el mundo.

Concepto	Descripción
Cámara principal	La cámara por defecto en cada escena de Phaser.
Viewport	El área visible del mundo del juego en la pantalla.
Scroll	El desplazamiento de la cámara sobre el mundo, cambiando la vista del jugador.

Moviendo la Cámara Manualmente

Puedes mover la cámara cambiando sus propiedades de scroll (scrollX y scrollY).

Ejemplo Básico

// Mover la cámara 100 píxeles a la derecha y 50 hacia abajo
this.cameras.main.scrollX = 100;
this.cameras.main.scrollY = 50;

Explicación:

scrollX y scrollY determinan la posición superior izquierda de la cámara en el mundo del juego.
Cambiando estos valores, puedes desplazar la vista.

Haciendo que la Cámara Siga a un Objeto

Una de las características más útiles es hacer que la cámara siga automáticamente a un sprite (por ejemplo, el jugador).

Ejemplo: Seguir al Jugador

// Supón que 'player' es tu sprite principal
this.cameras.main.startFollow(player);

Explicación:

startFollow(objeto) hace que la cámara siga el objeto especificado.
La cámara se moverá automáticamente para mantener el objeto en el centro (o según la configuración).

Opciones de Seguimiento

Puedes personalizar el seguimiento con opciones adicionales:

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

El tercer y cuarto parámetro (0.08, 0.08) son los factores de suavizado (lerp) en X e Y.
Valores más bajos hacen que la cámara siga al objeto de manera más suave y retardada.

Limitar el Movimiento de la Cámara

Para evitar que la cámara muestre áreas fuera del mundo del juego, puedes establecer límites:

// Limita la cámara al tamaño del mundo (por ejemplo, 2000x1000 píxeles)
this.cameras.main.setBounds(0, 0, 2000, 1000);

Explicación:

setBounds(x, y, width, height) define el área máxima por la que la cámara puede desplazarse.

Zoom y Efectos de Cámara

La cámara también puede hacer zoom y aplicar efectos visuales.

Zoom

// Acerca la cámara al doble de su tamaño normal
this.cameras.main.setZoom(2);

Efectos (Opcional)

Phaser permite efectos como parpadeo, sacudida, etc. Ejemplo de sacudida:

// Sacude la cámara durante 500 ms con una intensidad de 0.02
this.cameras.main.shake(500, 0.02);

Ejemplo Completo: Mundo Desplazable con Cámara que Sigue al Jugador

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

  create() {
    // Crea un mundo más grande que la pantalla
    this.add.image(1000, 500, 'background').setDisplaySize(2000, 1000);

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

    // Habilita los límites del mundo
    this.physics.world.setBounds(0, 0, 2000, 1000);
    this.player.setCollideWorldBounds(true);

    // Configura la cámara
    this.cameras.main.setBounds(0, 0, 2000, 1000);
    this.cameras.main.startFollow(this.player, true, 0.1, 0.1);
    this.cameras.main.setZoom(1.2);

    // Controles básicos
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    // Movimiento del jugador
    this.player.setVelocity(0);

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

    if (this.cursors.up.isDown) {
      this.player.setVelocityY(-200);
    } else if (this.cursors.down.isDown) {
      this.player.setVelocityY(200);
    }
  }
}

Explicación:

El mundo es de 2000x1000 píxeles, más grande que la pantalla.
El jugador puede moverse libremente y la cámara lo sigue suavemente.
La cámara no puede salir de los límites del mundo.

Ejercicios Prácticos

Ejercicio 1: Desplazamiento Manual de Cámara

Instrucciones:
Crea una escena donde puedas mover la cámara usando las teclas de flecha, sin mover ningún sprite.

Pista:
Utiliza this.cameras.main.scrollX y scrollY en el método update().

Solución

class CameraScrollScene extends Phaser.Scene {
  create() {
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.cameras.main.scrollX -= 5;
    } else if (this.cursors.right.isDown) {
      this.cameras.main.scrollX += 5;
    }

    if (this.cursors.up.isDown) {
      this.cameras.main.scrollY -= 5;
    } else if (this.cursors.down.isDown) {
      this.cameras.main.scrollY += 5;
    }
  }
}

Consejo:
Asegúrate de establecer límites con setBounds para evitar que la cámara muestre áreas vacías.

Ejercicio 2: Limitar la Cámara a un Área Específica

Instrucciones:
Configura la cámara para que no pueda salir de un área de 1500x800 píxeles, aunque el mundo sea más grande.

Solución

// En el método create()
this.cameras.main.setBounds(0, 0, 1500, 800);

Error común:
Olvidar que los límites de la cámara deben ser menores o iguales al tamaño del mundo.

Ejercicio 3: Zoom Dinámico

Instrucciones:
Permite que el jugador acerque o aleje la cámara usando las teclas "+" y "-".

Solución

create() {
  this.input.keyboard.on('keydown-PLUS', () => {
    this.cameras.main.setZoom(this.cameras.main.zoom + 0.1);
  });
  this.input.keyboard.on('keydown-MINUS', () => {
    this.cameras.main.setZoom(this.cameras.main.zoom - 0.1);
  });
}

Consejo:
Limita el zoom mínimo y máximo para evitar valores extremos.

Resumen

En esta lección aprendiste:

Qué es la cámara en Phaser y cómo controla la vista del jugador.
Cómo desplazar la cámara manualmente y cómo hacer que siga a un objeto.
Cómo limitar el movimiento de la cámara y aplicar zoom.
Ejercicios prácticos para afianzar el control de la cámara.

¡Ahora puedes crear mundos de juego más grandes y dinámicos, y controlar exactamente lo que el jugador ve!
En la próxima lección aprenderás sobre capas y gestión de profundidad, para organizar visualmente los elementos de tu juego.

Desplazamiento y Control de Cámara

¿Qué es una Cámara en Phaser?

Moviendo la Cámara Manualmente

Ejemplo Básico

Haciendo que la Cámara Siga a un Objeto

Ejemplo: Seguir al Jugador

Opciones de Seguimiento

Limitar el Movimiento de la Cámara

Zoom y Efectos de Cámara

Zoom

Efectos (Opcional)

Ejemplo Completo: Mundo Desplazable con Cámara que Sigue al Jugador

Ejercicios Prácticos

Ejercicio 1: Desplazamiento Manual de Cámara

Ejercicio 2: Limitar la Cámara a un Área Específica

Ejercicio 3: Zoom Dinámico

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final