skills.rest
russellmorgan
russellmorganCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

loading-assets

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

Updated Jul 13, 2026
Search Tags:#game development#asset loading#Atlas#preload#spritesheet#phaser#loader
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill loading-assets-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: loading-assets
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/loading-assets
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill loading-assets-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Loading external assets in Phaser 4 involves many file types, cache systems, URL resolution rules, and loader events, and mistakes like forgetting this.load.start() outside preload() or misusing spritesheets versus atlases cause silent failures. ## Core Features & Use Cases - Full file type coverage: Load images, spritesheets, atlases, audio, video, JSON, tilemaps, bitmap fonts, web fonts, SVG, GLSL, and pack manifests with correct parameters. - Progress and event handling: Build loading screens using progress, filecomplete, and complete events in the documented lifecycle order. - Cache and URL management: Resolve URLs with baseURL/path/prefix, access global caches like this.cache.json and this.textures, and avoid duplicate-key pitfalls. - Use Case: You are building a Phaser game scene and need to preload a texture atlas, background music with OGG/MP3 fallbacks, and a Tiled tilemap while showing a progress bar. ## Quick Start Ask the AI to show how to preload a spritesheet, an audio file with format fallbacks, and a 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.

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

Use this.load.spritesheet() for fixed-size grids of frames referenced by index, providing frameWidth and frameHeight. Use this.load.atlas() for packed texture atlases with named frames, which requires a separate JSON or XML data file.

How do I 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.

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 audio format fallbacks for browsers?▼

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

Why does Phaser warn about duplicate asset keys?▼

Keys must be unique per asset type, and loading a second file with an existing key logs a warning and skips it. Remove the old texture from the Texture Manager with this.textures.remove(key) before reloading.

Related Skills

Explore More Software Engineering Skills→
Joshua-AllenJoshua-Allen

game-setup-and-config

Automate Phaser 4 game instance creation and configuration.

Community
Intermediate
Dominik-SteinwegDominik-Steinweg

sprites-and-images

Create and configure Phaser 4 Sprite and Image game objects.

Community
Intermediate
rensjaspersrensjaspers

optimize-assets

Compress images to WebP and convert WAV audio to MP3.

Community
Intermediate
GiantCroissant-LunarGiantCroissant-Lunar

graphics-and-shapes

Draw dynamic shapes and graphics in Phaser 4 using Graphics and Shape objects.

Official
Intermediate