skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

loading-assets

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

Updated May 7, 2021
Search Tags:#game development#asset loading#preload#spritesheet#phaser#tilemap#loader plugin
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill loading-assets-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: loading-assets
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/loading-assets
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill loading-assets-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser games need external assets like images, spritesheets, audio, JSON data, tilemaps, and fonts fetched and cached before gameplay begins. Managing load queues, URL resolution, progress tracking, and cache access manually is error-prone, and mistakes like forgetting to start the Loader outside preload cause silent failures. ## Core Features & Use Cases - Full File Type Coverage: Load images, spritesheets, texture atlases (JSON, XML, multiatlas, Unity, Aseprite), audio with format fallbacks, video, JSON, XML, text, binary, GLSL shaders, bitmap fonts, web fonts, and Tiled/CSV/Impact tilemaps via this.load methods. - Load Lifecycle Events: Track progress with progress, fileprogress, filecomplete, loaderror, and complete events to build loading screens and progress bars. - URL and Cache Management: Control baseURL, path, and prefix for URL resolution, and access loaded assets through global caches like this.cache.json and the Texture Manager. - Use Case: Build a BootScene that loads a progress bar image via a scene payload pack, then display a real-time progress bar in preload() while queueing all level assets including a Tiled tilemap, sprite atlas, and background music with OGG/MP3 fallbacks. ## Quick Start Show me how to load a spritesheet, an atlas, and background audio 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 in a Scene's preload() method using this.load methods like this.load.image(), this.load.spritesheet(), and this.load.audio(). 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 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 JSON or XML, loaded with this.load.atlas() or this.load.atlasXML().

Why is my Phaser asset not loading outside preload?▼

The Loader only auto-starts during the preload phase. When calling 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 all major browsers.

Why does Phaser ignore my duplicate asset key?▼

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 asset from the Texture Manager or cache first if you need to replace it.

Related Skills

Explore More Software Engineering Skills→
fiandofiando
1

dev-phaser-fundamentals

Configures Phaser 3 games with scenes, physics, and lifecycle management patterns.

Community
Intermediate
WanderTheWeebWanderTheWeeb
1

loading-assets

Load external game assets into Phaser 4 global caches.

Community
Intermediate
phaserjsphaserjs
40.1k

scenes

Organize Phaser 4 Scene lifecycles, transitions, and cross-scene communication.

Official
Advanced
Raphe-devRaphe-dev

graphics-and-shapes

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

Community
Advanced