loading-assets

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

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/onemanking/the-operator --skill loading-assets-onemanking
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: loading-assets
Source: https://github.com/onemanking/the-operator/tree/main/.github/skills/loading-assets
Command: npx skills add https://github.com/onemanking/the-operator --skill loading-assets-onemanking

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser games need external assets like images, spritesheets, audio, and tilemaps fetched and cached before scenes can use them, and mishandling the Loader leads to missing textures, silent failures, or broken progress screens. This Skill provides the correct patterns for queuing, loading, and caching every asset type in Phaser. ## Core Features & Use Cases - Full File Type Coverage: Load images, spritesheets, atlases (JSON, XML, multiatlas, Aseprite), audio with format fallbacks, video, JSON, tilemaps, bitmap fonts, web fonts, SVG, and pack manifests. - Loader Events and Progress: Track load progress with events like progress, filecomplete, loaderror, and complete to build loading screens and progress bars. - URL and Cache Management: Control baseURL, path, and prefix resolution, and access loaded data through global caches like this.cache.json and the Texture Manager. - Use Case: You are building a Phaser game scene and need to load a sprite atlas, background music in OGG and MP3 formats, and a Tiled JSON tilemap with a progress bar. This Skill gives you the exact preload() code and event wiring to do it correctly. ## Quick Start Ask the AI to show how to load a spritesheet, an audio file with format fallbacks, and a Tiled tilemap in a Phaser Scene preload method 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?

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

How do I show a loading progress bar in Phaser?

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

What is the difference between spritesheet and atlas in Phaser?

A spritesheet is a fixed-size grid of frames referenced by numeric index, loaded with this.load.spritesheet(). An atlas is a packed texture with named frames defined in a JSON or XML data file, loaded with this.load.atlas().

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 manually call this.load.start() and listen for the complete event before using the assets.

Does Phaser support multiple audio formats for browser compatibility?

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 and MP3 covers cross-browser playback.

Why does Phaser skip loading a file with a duplicate key?

Asset keys must be unique per type, and loading a second file with an existing key logs a warning and skips it. Remove the old asset from the Texture Manager or cache first if you need to replace it.