Phaser Loading Assets — Managing Game Resources

DodaTech Updated 2026-06-28 3 min read

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

Phaser asset loading manages images, spritesheets, audio, and other game resources through the built-in loader with progress tracking.

What You'll Learn

By the end of this guide, you will load images, spritesheets, and audio, create a loading screen with progress bar, use asset packs for bulk loading, handle load errors, and cache assets for later scenes.

Basic Loading

function preload() {
    this.load.image('player', 'assets/player.png');
    this.load.image('enemy', 'assets/enemy.png');
    this.load.audio('shoot', 'assets/shoot.wav');
}

Loading Screen

function preload() {
    var progressBar = this.add.graphics();
    var progressBox = this.add.graphics();
    progressBox.fillStyle(0x222222, 0.8);
    progressBox.fillRect(240, 270, 320, 50);

    var width = this.cameras.main.width;

    this.load.on('progress', function(value) {
        progressBar.clear();
        progressBar.fillStyle(0x4ecdc4, 1);
        progressBar.fillRect(250, 280, 300 * value, 30);
    });

    this.load.on('complete', function() {
        progressBar.destroy();
        progressBox.destroy();
    });

    this.load.setPath('assets/');
    this.load.image('bg', 'background.png');
    this.load.image('player', 'player.png');
}

Spritesheet

function preload() {
    this.load.spritesheet('player', 'assets/player-sheet.png', {
        frameWidth: 32,
        frameHeight: 48,
        startFrame: 0,
        endFrame: 7
    });
}

Asset Pack

function preload() {
    this.load.pack('level1', 'assets/level1-pack.json');
}

// level1-pack.json
// { "images": [{ "key": "bg", "url": "bg.png" }], "audio": [{ "key": "music", "url": "music.ogg" }] }

Common Mistakes

1. Loading in Wrong Scene

Assets should be loaded in a preload scene. Loading in create causes delays.

2. Not Setting Asset Path

Use setPath() to define the base directory for all assets. Avoid repeating paths.

3. Missing File Extensions

Phaser needs file extensions. 'player' fails, 'player.png' works.

4. Audio Format Compatibility

Use .ogg and .mp3 for cross-browser support. Phaser falls back to the supported format.

5. Cache Key Conflicts

Asset keys must be unique across all types. An image and audio cannot share the same key.

Practice Questions

Q1: What function loads assets? A: The preload() scene method using this.load methods.

Q2: How do you track loading progress? A: Listen to the 'progress' event on this.load.

Q3: How do you load a spritesheet? A: Use this.load.spritesheet(key, url, { frameWidth, frameHeight }).

Q4: How do you show a loading bar? A: Use the load progress event to draw a graphics bar.

Q5: How do you access loaded assets? A: Use this.textures.get('key'), this.cache.audio.get('key'), etc.

Challenge: Build a preloader scene with a rotating logo, progress bar with percentage text, and a fade-out transition when loading completes.

FAQ

Can I load assets after preload?

Yes. Use this.load.start() to restart the loader in any scene.

How do I handle load errors?

Listen to the 'loaderror' event on this.load.

What is the maximum number of assets?

No hard limit. Performance depends on texture memory.

Can I load assets from a URL?

Yes. Use the full URL in the asset path.

How do I unload assets?

Use this.textures.remove('key') or this.cache.audio.remove('key').

Try It Yourself

Build a loading screen with progress bar.

<!DOCTYPE html>
<html>
<head>
    <title>Phaser Loading</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>Loading Demo</h2>
<script>
var BootScene = {
    preload: function() {
        // Progress bar
        var bar = this.add.graphics();
        var box = this.add.graphics();
        box.fillStyle(0x333333);
        box.fillRect(150, 200, 300, 30);

        this.load.on('progress', function(v) {
            bar.clear();
            bar.fillStyle(0x4ecdc4);
            bar.fillRect(155, 205, 290 * v, 20);
        });

        this.load.on('complete', function() {
            this.scene.start('game');
        }, this);

        // Load some assets (use placeholder URL)
        this.load.image('logo', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
    }
};

var GameScene = {
    create: function() {
        this.add.text(300, 300, 'Loaded!', { fontSize: '32px', fill: '#4ecdc4' }).setOrigin(0.5);
    }
};

var config = {
    type: Phaser.AUTO,
    width: 600,
    height: 400,
    backgroundColor: '#1a1a2e',
    scene: [BootScene, GameScene]
};

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

What's Next

Create sprite animations.

Animations — Sprite animation system. Groups — Display groups.

← Previous Phaser Game Configuration — Setting Up the Game Engine Next → Phaser Animations — Sprite and Tween Animation System

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Phaser