loading-assets

Load images, spritesheets, atlases, audio, and tilemaps with the Phaser Loader plugin.

465|41|Updated Aug 4, 2026
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill loading-assets-autonomous-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: loading-assets
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/loading-assets
Command: npx skills add https://github.com/autonomous-ai/openharness --skill loading-assets-autonomous-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser games need external assets like images, audio, JSON data, and tilemaps fetched and cached before gameplay starts, and managing URLs, load progress, cross-origin settings, and cache keys manually is error-prone. This Skill provides complete guidance for using the Phaser Loader plugin (this.load) to queue, load, and access every supported asset type correctly. ## Core Features & Use Cases - All File Types Covered: Load images, spritesheets, texture atlases (JSON, XML, multi-atlas, Unity, Aseprite), audio with format fallbacks, video, JSON, tilemaps (Tiled, CSV, Impact), bitmap fonts, web fonts, SVG, and pack manifests. - Progress and Event Handling: Build loading screens using loader events like progress, filecomplete, and complete, with the full event lifecycle order documented. - URL and Cache Management: Configure baseURL, path, and prefix for URL resolution, and access loaded assets through global caches like this.cache.json and the Texture Manager. - Use Case: You are building a Phaser 4 game and need a loading screen that loads a sprite atlas, background music in OGG and MP3 formats, and a Tiled tilemap, showing a progress bar while assets download. ## Quick Start Show me how to load a spritesheet, background music, and a Tiled tilemap in my Phaser Scene's 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 assets in a Scene's preload() method using this.load methods like this.load.image('key', 'path.png'), then use them in create(). The Loader starts automatically after preload() and guarantees all queued files are ready when create() runs.

How do I show a loading progress bar in Phaser?

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

What is the difference between spritesheet and atlas in Phaser?

Use this.load.spritesheet() for fixed-size grids of frames referenced by numeric index, specifying frameWidth and frameHeight. Use this.load.atlas() for packed texture atlases with named frames defined in a JSON data file 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 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'], and the Loader picks the first format the browser supports. Providing both OGG and MP3 covers all major browsers.

Why does Phaser ignore my duplicate asset 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 relevant cache first if you need to replace it.