Phaser Scaling — Responsive Game Layouts

DodaTech Updated 2026-06-28 3 min read

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

Phaser scaling adapts games to different screen sizes using configurable scale modes, aspect ratio management, and responsive layout techniques.

What You'll Learn

By the end of this guide, you will configure FIT and RESIZE scale modes, set minimum and maximum dimensions, handle orientation changes, build responsive UI elements, and optimize for desktop and mobile.

FIT Mode

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        parent: 'game-container'
    }
};
// Game scales to fill container while maintaining aspect ratio

RESIZE Mode

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.RESIZE,
        parent: 'game-container',
        width: window.innerWidth,
        height: window.innerHeight
    }
};
// Canvas fills the window, game objects must be repositioned

Responsive UI

function create() {
    var title = this.add.text(0, 0, 'Game Title', { fontSize: '32px' });
    title.setOrigin(0.5);
    title.setPosition(this.scale.width / 2, 50);

    this.scale.on('resize', function(gameSize) {
        title.setPosition(gameSize.width / 2, 50);
    });
}

Minimum Dimensions

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        min: {
            width: 400,
            height: 300
        },
        max: {
            width: 1600,
            height: 1200
        }
    }
};

Common Mistakes

1. FIT Mode With No Parent

Without parent, FIT mode sizes to the body. Provide a parent container for control.

2. RESIZE Mode Not Handling Resize

In RESIZE mode, reposition game objects on the 'resize' event. Otherwise elements stay at wrong positions.

3. Aspect Ratio Not Considered

FIT mode maintains aspect ratio with letterboxing. Design for a specific aspect ratio.

4. UI Not Scaled

Text and UI should scale with the canvas or be repositioned on resize.

5. Mobile Not Considered

Test on mobile early. FIT mode + autoCenter works well for most games.

Practice Questions

Q1: What is the difference between FIT and RESIZE? A: FIT maintains aspect ratio with letterboxing. RESIZE fills the screen and scales the canvas.

Q2: How do you center the game canvas? A: Set autoCenter: Phaser.Scale.CENTER_BOTH.

Q3: How do you set minimum game size? A: Set scale.min.width and scale.min.height.

Q4: How do you handle window resize? A: Listen to the 'resize' event on this.scale.

Q5: What scale mode is best for mobile games? A: Phaser.Scale.FIT with a 16:9 or 9:16 aspect ratio.

Challenge: Build a game that works in both portrait and landscape. On orientation change, the UI elements reposition and the game area adjusts.

FAQ

Can I change scale mode at runtime?

No. Scale mode is set in config.

How do I get the current game size?

Use this.scale.width and this.scale.height.

What is the default scale mode?

Phaser.Scale.NONE (no scaling).

Does scaling affect pixel art?

Yes. Use Phaser.Scale.FIT with roundPixels: true for crisp pixel art.

How do I handle ultra-wide screens?

Set max width in scale config or use RESIZE mode.

Try It Yourself

Create a game with FIT scaling.

<!DOCTYPE html>
<html>
<head>
    <title>Phaser Scaling</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222; }
        #game-container { width: 100%; max-width: 800px; }
    </style>
</head>
<body>
<div id="game-container"></div>
<script>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    backgroundColor: '#1a1a2e',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: {
        create: function() {
            // Create a responsive layout
            this.add.rectangle(400, 300, 760, 560, 0x2a2a3e);

            // Center circle
            var circle = this.add.circle(400, 280, 80, 0x4ecdc4);

            // Title
            var title = this.add.text(400, 80, 'Responsive Game', {
                fontSize: '36px',
                fill: '#4ecdc4',
                fontFamily: 'Arial'
            }).setOrigin(0.5);

            // Instructions
            var info = this.add.text(400, 520, 'Resize the browser window', {
                fontSize: '18px',
                fill: '#888888'
            }).setOrigin(0.5);

            // Resize handler
            this.scale.on('resize', function(gameSize) {
                // Reposition elements if needed
                title.setPosition(gameSize.width / 2, 80);
                info.setPosition(gameSize.width / 2, gameSize.height - 80);
                circle.setPosition(gameSize.width / 2, gameSize.height / 2 - 20);
            });

            // Display size text
            var sizeText = this.add.text(400, 200, '800 x 600', {
                fontSize: '14px',
                fill: '#666666'
            }).setOrigin(0.5);

            this.scale.on('resize', function(gs) {
                sizeText.setText(gs.width + ' x ' + gs.height);
                sizeText.setPosition(gs.width / 2, gs.height / 2 + 40);
            });
        }
    }
};

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

What's Next

Build a complete Phaser game.

Project — Complete game project.

← Previous Phaser Matter Physics — Advanced Physics Simulation Next → Phaser Project — Complete 2D Platform Game

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Phaser