The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Layers and Depth Management

Next ►
►

In this section, you’ll learn how to organize and control the visual stacking order of game objects in Phaser using layers and depth. Proper management of layers and depth is essential for creating visually coherent games, ensuring that objects appear in front of or behind others as intended.

  1. Key Concepts

Let’s break down the main ideas:

  • Layer: A container that groups multiple game objects, allowing you to manage them collectively (e.g., move, hide, or change depth together).
  • Depth (z-index): A numeric value that determines the rendering order of game objects. Higher depth values are drawn on top of lower ones.
  • Display List: Phaser’s internal structure that keeps track of all objects to be rendered, in order.

  1. Why Use Layers and Depth?

  • Organize Game Objects: Group related objects (e.g., background, player, UI) for easier management.
  • Control Rendering Order: Ensure that important objects (like the player or UI) are always visible above backgrounds or other elements.
  • Efficient Updates: Move or modify entire groups of objects at once.

  1. Managing Depth in Phaser

Setting Depth on Game Objects

You can set the depth of any display object using the .setDepth() method.

// Example: Placing the player above the background
const background = this.add.image(400, 300, 'background');
const player = this.add.sprite(400, 300, 'player');

// Set depths
background.setDepth(0); // Drawn first (at the back)
player.setDepth(1);     // Drawn after background (on top)

Explanation:

  • Objects with higher depth values are rendered above those with lower values.
  • The default depth is 0 if not set.

Comparing Depth Values

Object Depth Value Rendered Above?
Background 0 No
Player 1 Yes
UI Panel 10 Yes (topmost)

  1. Using Layers (Containers and Layer Class)

Containers

A Container groups multiple objects so you can move, scale, or set depth for all at once.

// Create a container for the UI
const scoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '32px', fill: '#fff' });
const healthBar = this.add.rectangle(10, 50, 100, 20, 0xff0000);

const uiContainer = this.add.container(0, 0, [scoreText, healthBar]);
uiContainer.setDepth(10); // UI always on top

Explanation:

  • All objects in the container inherit the container’s depth.
  • You can move or hide the entire UI by acting on the container.

Layer Class

Phaser also provides a Layer class for advanced display list management, but for most games, containers and depth are sufficient.

  1. Practical Example: Layering a Simple Scene

Let’s create a scene with a background, player, enemy, and UI, each on different layers.

function create() {
  // Background
  const bg = this.add.image(400, 300, 'background').setDepth(0);

  // Player and Enemy
  const player = this.add.sprite(300, 300, 'player').setDepth(2);
  const enemy = this.add.sprite(500, 300, 'enemy').setDepth(2);

  // UI Layer
  const scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#fff' });
  const uiContainer = this.add.container(0, 0, [scoreText]).setDepth(10);
}

Explanation:

  • Background at depth 0 (back).
  • Player and enemy at depth 2 (middle).
  • UI at depth 10 (front/top).

  1. Exercises

Exercise 1: Adjusting Depth

Task:
Given three objects: a background, a player, and a coin, set their depths so that:

  • The background is at the back.
  • The player is in the middle.
  • The coin is always on top.

Starter Code:

const background = this.add.image(400, 300, 'background');
const player = this.add.sprite(400, 300, 'player');
const coin = this.add.sprite(450, 300, 'coin');

// Set depths here

Solution:

background.setDepth(0);
player.setDepth(1);
coin.setDepth(2);

Tip:
If two objects have the same depth, the one created later is drawn on top.

Exercise 2: Using a Container for UI

Task:
Group a score text and a health bar into a container and ensure it always appears above all other game objects.

Starter Code:

const scoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '32px', fill: '#fff' });
const healthBar = this.add.rectangle(10, 50, 100, 20, 0xff0000);

// Create a container and set its depth

Solution:

const uiContainer = this.add.container(0, 0, [scoreText, healthBar]);
uiContainer.setDepth(100); // High value to ensure it's on top

Common Mistake:
Forgetting to set the container’s depth can result in the UI being hidden behind other objects.

  1. Summary

  • Depth controls the rendering order of game objects; higher values are drawn on top.
  • Containers group objects for collective management and can have their own depth.
  • Use depth and containers to organize your game’s visual layers (background, gameplay, UI).
  • Proper layer and depth management ensures a clear, visually correct game scene.

Next: You’ll learn how to add sound effects and music to your game, enhancing the player’s experience!

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved