Skip to content

Phaser Cameras — Viewport Control and Effects

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Phaser Cameras. We cover key concepts, practical examples, and best practices to help you master this topic.

Phaser cameras control the visible viewport of the game world, with support for object following, screen effects, bounds, and multiple camera views.

What You'll Learn

By the end of this guide, you will set camera bounds to limit view, make the camera follow a player, use shake and fade effects, create camera zoom, and set up split-screen with multiple cameras.

Camera Follow

this.cameras.main.setBounds(0, 0, 3200, 600);
this.cameras.main.startFollow(player, true, 0.1, 0.1);

Camera Effects

// Shake the screen
this.cameras.main.shake(300, 0.02);

// Fade in
this.cameras.main.fadeIn(500, 0, 0, 0);

// Flash white
this.cameras.main.flash(200, 255, 255, 255);

// Fade to black on death
this.cameras.main.fadeOut(1000, 0, 0, 0, function(camera) {
    this.scene.start('GameOver');
});

Camera Zoom

this.cameras.main.zoomTo(1.5, 1000, 'Power2');

Split Screen

var cam1 = this.cameras.add(0, 0, 400, 300);
var cam2 = this.cameras.add(400, 0, 400, 300);

cam1.startFollow(player1);
cam2.startFollow(player2);

Common Mistakes

1. Camera Bounds Not Set

Without bounds, the camera shows empty space beyond the game world. Set bounds to the world size.

2. follow Offset Not Configured

When following, the player may be at the edge. Set offset or deadzone for comfortable positioning.

3. Shake Duration Too Long

Shake over 500ms feels disorienting. Use 100-300ms for impacts.

4. Fade Callback Scope

The fade callback this may not refer to the scene. Use arrow functions or bind.

5. Camera Not Following After Respawn

After destroying and recreating a player, call startFollow again.

Practice Questions

Q1: How do you make the camera follow a player? A: Call this.cameras.main.startFollow(player).

Q2: How do you shake the camera? A: Call this.cameras.main.shake(duration, intensity).

Q3: How do you set camera bounds? A: Call this.cameras.main.setBounds(x, y, width, height).

Q4: How do you zoom the camera? A: Call this.cameras.main.zoomTo(factor, duration, ease).

Q5: How do you create a second camera? A: Use this.cameras.add(x, y, width, height).

Challenge: Build a side-scrolling level with camera following the player. Add screen shake when the player hits an obstacle. The camera should zoom out slightly when the player collects a power-up.

FAQ

Can camera follow multiple targets?

No native support. Manually set camera scroll to midpoint between targets.

How do I set camera background color?

Set this.cameras.main.setBackgroundColor('#333').

Can I ignore objects from camera?

Set object.cameraFilter to exclude from specific cameras.

How do I make camera follow with deadzone?

Set deadzone: new Phaser.Geom.Rectangle(100, 100) in startFollow.

Does camera follow work with physics?

Yes. Camera follows the sprite's position, which physics updates.

Try It Yourself

Create a camera following a moving object.

<!DOCTYPE html>
<html>
<head>
    <title>Phaser Cameras</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Camera Follow</h2>
<script>
var config = {
    type: Phaser.AUTO,
    width: 600,
    height: 400,
    backgroundColor: '#1a1a2e',
    scene: {
        create: function() {
            // Draw a large world
            for (var x = 0; x < 1600; x += 50) {
                for (var y = 0; y < 1200; y += 50) {
                    this.add.rectangle(x, y, 48, 48, (x + y) % 100 === 0 ? 0x333333 : 0x2a2a3e);
                }
            }

            // Player
            this.player = this.add.circle(100, 100, 16, 0x4ecdc4);

            // Camera
            this.cameras.main.setBounds(0, 0, 1600, 1200);
            this.cameras.main.startFollow(this.player, true, 0.05, 0.05);

            // Cursors
            this.cursors = this.input.keyboard.createCursorKeys();

            this.add.text(300, 30, 'Arrow keys to move', { fill: '#4ecdc4' }).setOrigin(0.5).setScrollFactor(0);
        },
        update: function() {
            var speed = 3;
            if (this.cursors.left.isDown) this.player.x -= speed;
            if (this.cursors.right.isDown) this.player.x += speed;
            if (this.cursors.up.isDown) this.player.y -= speed;
            if (this.cursors.down.isDown) this.player.y += speed;

            this.player.x = Phaser.Math.Clamp(this.player.x, 0, 1600);
            this.player.y = Phaser.Math.Clamp(this.player.y, 0, 1200);
        }
    }
};

var game = new Phaser.Game(config);
</script>
</body>
</html>

What's Next

Create particle effects.

Particles — Particle effects. WebSockets — Websocket multiplayer.

← Previous Phaser Groups — Managing Multiple Game Objects Next → Phaser Particles — Visual Effects and Emitters

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Phaser