loading-assets

Loads images, audio, atlases, fonts, and tilemaps through the Phaser 4 Loader plugin.

Updated Sep 20, 2026
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill loading-assets-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: loading-assets
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/loading-assets
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill loading-assets-amirossanloo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser games need external assets fetched, decoded, and cached before scenes can use them, and the Loader plugin's many file types, URL resolution rules, and event lifecycle are easy to misuse. This Skill provides the correct patterns for queuing assets in preload(), tracking progress, and avoiding common pitfalls like duplicate keys or forgetting to start the Loader manually. ## Core Features & Use Cases - All File Types: Covers every this.load method including image, spritesheet, atlas, multiatlas, audio, audioSprite, video, JSON, tilemaps, bitmap fonts, web fonts, SVG, and pack manifests. - Load Events & Progress: Documents the full event lifecycle (start, progress, filecomplete, complete, loaderror) for building progress bars and loading screens. - URL Resolution & Caching: Explains baseURL, path, prefix, cross-origin settings, and the global cache system (this.cache.json, this.textures) shared across scenes. - Use Case: You are building a Phaser 4 game scene and need to load a sprite atlas, background music with OGG/MP3 fallbacks, and a Tiled tilemap while showing a progress bar. This Skill gives you the exact preload() code and event wiring. ## Quick Start Ask the AI to show how to load a spritesheet, an audio file with format fallbacks, and a Tiled JSON tilemap in a Phaser 4 scene with a progress bar.

Frequently Asked Questions about loading-assets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load assets in Phaser 4?▼

Queue files with this.load methods inside a Scene's preload() method, such as this.load.image('key', 'assets/file.png'). The Loader starts automatically after preload() and all assets are ready when create() runs.

How to show a loading progress bar in Phaser?▼

Listen to the Loader's 'progress' event, which reports a value from 0 to 1, and redraw a graphics rectangle scaled by that value. Destroy the bar on the 'complete' event when all queued files finish.

What is the difference between spritesheet and atlas in Phaser?▼

Use this.load.spritesheet() for fixed-size grids of frames referenced by numeric index. Use this.load.atlas() for packed texture atlases with named frames, typically exported from tools like TexturePacker.

Why is my Phaser asset not loading outside preload?▼

The Loader only auto-starts during the preload phase. If you call this.load methods in create() or later, you must call this.load.start() manually and listen for the 'complete' event before using the asset.

Does Phaser support multiple audio formats for cross-browser playback?▼

Yes, pass an array of URLs to this.load.audio(), such as ['music.ogg', 'music.mp3']. The Loader picks the first format the browser supports, so providing OGG plus MP3 covers all major browsers.

Why does loading a duplicate asset key fail silently in Phaser?▼

Keys must be unique per asset type; a second load with an existing key logs a warning and is skipped. Remove the old entry from the Texture Manager or relevant cache before reloading with the same key.