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

Scrolling and Camera Control

Next ►
►

In this section, you’ll learn how to create larger game worlds and use the camera in Phaser to follow the action, scroll through levels, and create dynamic gameplay experiences. Mastering camera control is essential for platformers, adventure games, and any game where the world is bigger than the visible screen.

  1. What is Camera Control in Phaser?

Key Concepts:

  • Game World vs. Viewport: The game world is the entire area where your game takes place. The viewport (camera) is the visible portion of the world shown to the player.
  • Camera: In Phaser, the camera determines what part of the game world is currently visible on the screen.
  • Scrolling: Moving the camera to follow a player or to reveal new areas of the game world.

Why is it important?

  • Allows for larger, more immersive game worlds.
  • Keeps the player or important objects in view.
  • Enables effects like shaking, zooming, and panning.

  1. Basic Camera Properties and Methods

Phaser provides a powerful camera system with many features. Here are some of the most important properties and methods:

Property/Method Description Example Usage
cameras.main Access the main camera in the scene this.cameras.main
startFollow(target) Makes the camera follow a game object camera.startFollow(player)
setBounds(x, y, w, h) Sets the camera’s movement limits camera.setBounds(0,0,800,600)
scrollX, scrollY Camera’s current position in the world camera.scrollX
setZoom(zoom) Sets the camera’s zoom level camera.setZoom(2)
shake(duration, intensity) Shakes the camera for effects camera.shake(500, 0.01)

  1. Making the Camera Follow a Player

Let’s see how to make the camera follow a player sprite as it moves through a larger world.

Example: Camera Following a Player

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

  create() {
    // Create a large background
    this.add.image(400, 300, 'background').setScale(2);

    // Create the player sprite
    this.player = this.physics.add.sprite(100, 100, 'player');

    // Set world bounds (e.g., 1600x1200)
    this.physics.world.setBounds(0, 0, 1600, 1200);

    // Set camera bounds to match world
    this.cameras.main.setBounds(0, 0, 1600, 1200);

    // Make the camera follow the player
    this.cameras.main.startFollow(this.player);

    // Optional: Set camera zoom
    this.cameras.main.setZoom(1.2);
  }

  update() {
    // Simple player movement (arrow keys)
    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);
    }

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

Explanation:

  • The world and camera bounds are set to 1600x1200, larger than the default viewport.
  • The camera follows the player as they move.
  • The player can move with arrow keys, and the camera will scroll to keep them in view.

  1. Camera Effects: Shake, Flash, and Fade

Phaser cameras can create dynamic effects to enhance gameplay.

Example: Camera Shake on Event

// Shake the camera for 500ms with a small intensity
this.cameras.main.shake(500, 0.01);

Example: Camera Flash

// Flash the camera with white for 300ms
this.cameras.main.flash(300, 255, 255, 255);

Example: Camera Fade

// Fade out to black over 1 second
this.cameras.main.fade(1000, 0, 0, 0);

When to use these effects:

  • Shake: When the player takes damage or an explosion occurs.
  • Flash: When collecting an item or scoring.
  • Fade: When transitioning between scenes or levels.

  1. Multiple Cameras and Split-Screen

Phaser supports multiple cameras for advanced scenarios like split-screen multiplayer.

Example: Adding a Second Camera

// Add a second camera to the right half of the screen
const cam2 = this.cameras.add(400, 0, 400, 600);
cam2.setBackgroundColor(0x000000);
cam2.startFollow(otherPlayer);

Note: Each camera can have its own bounds, follow different objects, and display different parts of the world.

  1. Practical Exercise

Exercise:
Create a scene with a player sprite and a world larger than the viewport. Make the camera follow the player as they move with the arrow keys. Add a button that, when clicked, shakes the camera.

Starter Code

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

  create() {
    // TODO: Add a large background and player sprite
    // TODO: Set world and camera bounds
    // TODO: Make camera follow player
    // TODO: Add a button that shakes the camera when clicked
  }

  update() {
    // TODO: Add player movement with arrow keys
  }
}

Solution

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

  create() {
    // Add a large background
    this.add.image(800, 600, 'bg').setScale(2);

    // Create the player sprite
    this.player = this.physics.add.sprite(100, 100, 'player');

    // Set world and camera bounds
    this.physics.world.setBounds(0, 0, 1600, 1200);
    this.cameras.main.setBounds(0, 0, 1600, 1200);

    // Make camera follow player
    this.cameras.main.startFollow(this.player);

    // Add a button in the top-left corner
    const button = this.add.image(50, 50, 'button').setInteractive();
    button.setScrollFactor(0); // Keep button fixed on screen

    button.on('pointerdown', () => {
      this.cameras.main.shake(500, 0.02);
    });

    // Store cursors for movement
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    // Player movement
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-200);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(200);
    } else {
      this.player.setVelocityX(0);
    }

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

Common Mistakes & Tips:

  • Forgetting to set camera/world bounds: If you don’t set bounds, the camera may show empty space.
  • Not using setScrollFactor(0) for UI elements: UI elements like buttons should not scroll with the camera.
  • Camera not following the correct object: Double-check you’re passing the right sprite to startFollow().

  1. Summary

  • The camera in Phaser lets you control what part of the game world is visible.
  • Use setBounds() to limit camera movement to the game world.
  • startFollow() makes the camera track a sprite, usually the player.
  • Camera effects like shake, flash, and fade add polish to your game.
  • Use multiple cameras for advanced layouts like split-screen.
  • Always keep UI elements fixed with setScrollFactor(0).

Next: In the following section, you’ll learn about Layers and Depth Management to control the rendering order of game objects and create visually rich scenes.

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