skills.rest
mudman1986
mudman1986COMMUNITY
Explore all skills by this author →
GitHub

loading-assets

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

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

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 duplicate keys, or progress bars that never update. ## Core Features & Use Cases - Full file type coverage: Load images, spritesheets, atlases, audio, video, JSON, tilemaps, bitmap fonts, web fonts, SVG, and pack manifests via this.load methods. - Load lifecycle events: Track progress, filecomplete, loaderror, and complete events to build progress bars and handle failures. - URL and cache management: Control baseURL, path, prefixes, cross-origin settings, and access global caches like this.cache.json and the Texture Manager. - Use Case: You are building a Phaser game scene and need to preload a sprite atlas, background music with OGG/MP3 fallbacks, and a Tiled JSON tilemap while showing a loading progress bar before create() runs. ## Quick Start Show me how to preload a spritesheet, an audio file with format fallbacks, and a Tiled tilemap in a Phaser 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?▼

Queue files with this.load methods inside a scene's preload() method, such as this.load.image('key', 'assets/img.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 emits a value from 0 to 1, and redraw a graphics rectangle scaled by that value. Destroy the bar on the 'complete' event once 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 JSON or XML, loaded with this.load.atlas().

Why is my Phaser asset not loading outside preload?▼

The Loader only auto-starts during preload(). 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']. The Loader picks the first format the browser supports, so providing OGG plus MP3 covers all major browsers.

Why does Phaser ignore my second load with the same key?▼

Asset keys must be unique per type; a duplicate key is silently skipped if it already exists in the cache. Remove the old asset first with this.textures.remove(key) or the relevant cache's remove method.

Related Skills

Explore More Software Engineering Skills→
onemankingonemanking

game-setup-and-config

Configures Phaser 4 game instances with GameConfig options for renderer, scaling, pixel art, and FPS.

Community
Intermediate
WanderTheWeebWanderTheWeeb
1

loading-assets

Load external game assets into Phaser 4 global caches.

Community
Intermediate
smilebank7smilebank7
2

Organize

Organize processed audio recordings into structured vault directories with metadata files.

Community
Advanced
Raphe-devRaphe-dev

graphics-and-shapes

Draw shape primitives and graphics in Phaser 4 using Graphics and Shape objects.

Community
Advanced