Loading Assets

Everything you need to get assets into Phaser 4. This covers the full Loader plugin API: images, spritesheets, atlases (JSON, XML, Unity, Aseprite), audio with fallback formats, tilemaps from Tiled or CSV, bitmap fonts, video, web fonts, and JSON data. The preload pattern is solid here, assets load in parallel and cache globally across scenes, and you get proper progress tracking with events. The URL resolution section (baseURL, path, prefix) is genuinely useful for organizing large projects or working with CDNs. Also shows how to load assets outside preload if you need runtime loading. If you're moving assets around or building loading screens, the events and pack file examples will save you time.

skills.sh installs: 1K
GitHub stars: 40.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add phaserjs/phaser --skill loading-assets --agent claude-code

Installs into .claude/skills of the current project.

Files

Loading Assets

The Phaser Loader (this.load) handles fetching all external content: images, audio, JSON, tilemaps, atlases, fonts, scripts, and more. Assets are queued in preload(), loaded in parallel, and placed into global caches accessible by every Scene.

Key source paths: src/loader/LoaderPlugin.js, src/loader/File.js, src/loader/filetypes/, src/loader/events/ Related skills: ../game-setup-and-config/SKILL.md, ../scenes/SKILL.md, ../sprites-and-images/SKILL.md

Quick Start

class GameScene extends Phaser.Scene {
    preload() {
        this.load.image('logo', 'assets/logo.png');
    }

    create() {
        this.add.image(400, 300, 'logo');
    }
}

Assets loaded in preload() are guaranteed to be ready when create() runs. The Loader starts automatically during the preload phase.

Core Concepts

The Preload Pattern

Every Scene can define a preload() method. The Loader automatically starts when preload() completes and waits for all queued files to finish before calling create().

SKILL.md on GitHub