El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Capas y Gestión de Profundidad

Siguiente ►
►

En esta lección aprenderás cómo organizar los elementos visuales de tu juego en Phaser utilizando capas y cómo controlar el orden de renderizado (profundidad) para que los objetos se muestren correctamente unos sobre otros. Este conocimiento es esencial para crear juegos visualmente claros y organizados, donde los elementos importantes siempre estén visibles y el fondo no tape a los personajes o la interfaz.

  1. ¿Qué son las Capas y la Profundidad en Phaser?

  • Capas: Son agrupaciones lógicas de objetos (sprites, imágenes, texto, etc.) que permiten organizarlos y manipularlos juntos.
  • Profundidad (Depth): Es el valor que determina el orden en que los objetos se dibujan en pantalla. Un objeto con mayor profundidad se dibuja encima de los que tienen menor profundidad.

Ejemplo Visual

Profundidad Elemento Se ve...
0 Fondo Detrás de todo
1 Personaje Encima del fondo
2 HUD/Puntuación Encima de todos

  1. Métodos para Gestionar Capas y Profundidad

Phaser ofrece varias formas de organizar y controlar el orden de los objetos:

a) Usando el método setDepth()

Permite asignar un valor de profundidad a cualquier objeto visual.

// Crear fondo, personaje y HUD
let fondo = this.add.image(400, 300, 'fondo');
let personaje = this.add.sprite(400, 300, 'personaje');
let hud = this.add.text(16, 16, 'Puntos: 0', { fontSize: '32px', fill: '#fff' });

// Asignar profundidad
fondo.setDepth(0);      // Detrás de todo
personaje.setDepth(1);  // Encima del fondo
hud.setDepth(2);        // Encima de todo

Explicación:

  • Los objetos con mayor profundidad se dibujan encima de los de menor profundidad.
  • Si dos objetos tienen la misma profundidad, se dibujan en el orden en que fueron creados.

b) Usando Contenedores (Container)

Un Container agrupa varios objetos para moverlos, escalarlos o rotarlos juntos, y también puede tener su propia profundidad.

let container = this.add.container(0, 0);
let sprite1 = this.add.sprite(100, 100, 'objeto1');
let sprite2 = this.add.sprite(150, 100, 'objeto2');

container.add([sprite1, sprite2]);
container.setDepth(1);

Ventaja:

  • Todos los objetos dentro del contenedor comparten la profundidad del contenedor.

c) Usando Capas de Tilemap (Tilemap Layers)

Cuando trabajas con mapas de tiles, cada capa puede tener su propia profundidad.

let mapa = this.make.tilemap({ key: 'nivel1' });
let tileset = mapa.addTilesetImage('tiles', 'tileset');
let capaFondo = mapa.createLayer('Fondo', tileset, 0, 0);
let capaObjetos = mapa.createLayer('Objetos', tileset, 0, 0);

capaFondo.setDepth(0);
capaObjetos.setDepth(1);

  1. Ejemplo Práctico: Ordenando Elementos en una Escena

Supón que tienes un fondo, un personaje y un marcador de puntuación. El objetivo es que el fondo esté detrás, el personaje en el medio y el marcador siempre visible encima.

class MiEscena extends Phaser.Scene {
  preload() {
    this.load.image('fondo', 'assets/fondo.png');
    this.load.image('personaje', 'assets/personaje.png');
  }

  create() {
    // Fondo
    let fondo = this.add.image(400, 300, 'fondo').setDepth(0);

    // Personaje
    let personaje = this.add.sprite(400, 300, 'personaje').setDepth(1);

    // HUD
    let marcador = this.add.text(16, 16, 'Puntos: 0', { fontSize: '32px', fill: '#fff' }).setDepth(2);
  }
}

Explicación paso a paso:

  • El fondo se dibuja primero (profundidad 0).
  • El personaje se dibuja encima del fondo (profundidad 1).
  • El marcador se dibuja encima de todo (profundidad 2).

  1. Comparación: Métodos de Organización

Método Uso Principal Ventajas Limitaciones
setDepth() Ordenar objetos individuales Simple y directo No agrupa objetos
Container Agrupar y manipular varios objetos Mover/rotar/escalar en conjunto Todos comparten profundidad
Tilemap Layer Capas de mapas de tiles Organización de mapas complejos Solo para tilemaps

  1. Ejercicios Prácticos

Ejercicio 1: Ordena los Elementos

Instrucción:
Crea una escena con tres imágenes: 'cielo', 'árbol' y 'pájaro'. Haz que el cielo esté al fondo, el árbol en el medio y el pájaro encima de todo.

Solución:

let cielo = this.add.image(400, 300, 'cielo').setDepth(0);
let arbol = this.add.image(400, 400, 'arbol').setDepth(1);
let pajaro = this.add.image(450, 250, 'pajaro').setDepth(2);

Consejo:
Si ves que el pájaro queda detrás del árbol, revisa los valores de profundidad.

Ejercicio 2: Usa un Contenedor

Instrucción:
Agrupa dos sprites ('caja' y 'moneda') en un contenedor y colócalo encima de un fondo ('suelo').

Solución:

let suelo = this.add.image(400, 500, 'suelo').setDepth(0);
let caja = this.add.sprite(400, 450, 'caja');
let moneda = this.add.sprite(420, 430, 'moneda');

let contenedor = this.add.container(0, 0, [caja, moneda]);
contenedor.setDepth(1);

Error común:
Olvidar asignar la profundidad al contenedor, lo que puede hacer que los objetos agrupados queden detrás del fondo.

  1. Consejos y Errores Comunes

  • No mezcles setDepth y bringToTop/popToTop sin entender su efecto:
    Métodos como bringToTop pueden cambiar el orden de renderizado, pero no el valor de profundidad.
  • Revisa el orden de creación:
    Si dos objetos tienen la misma profundidad, el que se creó después se dibuja encima.
  • Agrupa objetos relacionados:
    Usa contenedores para manejar fácilmente HUDs, grupos de enemigos, etc.

  1. Resumen

  • Las capas y la profundidad te permiten controlar el orden en que se dibujan los objetos en Phaser.
  • Usa setDepth() para controlar la superposición de objetos.
  • Los contenedores agrupan objetos y comparten profundidad.
  • Las capas de tilemap son útiles para organizar mapas complejos.
  • Practica organizando tus elementos para evitar que partes importantes de tu juego queden ocultas.

¡Ahora estás listo para crear escenas visualmente organizadas y profesionales en tus juegos con Phaser!
En la próxima lección aprenderás cómo añadir efectos de sonido y música para dar vida a tu juego.

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados