loading-assets

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

2|10|Updated Jul 28, 2026
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill loading-assets-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: loading-assets
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/loading-assets
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill loading-assets-kodingvibes

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 gameplay starts, and doing this incorrectly causes missing textures, broken audio, or stalled loading screens. This Skill provides the correct patterns for queuing, loading, and tracking all asset types through the Phaser Loader. ## Core Features & Use Cases - Full File Type Coverage: Load images, spritesheets, texture atlases, audio, video, JSON, tilemaps, bitmap fonts, web fonts, SVGs, and pack manifests with the correct this.load methods. - Progress Tracking: Build loading screens and progress bars using Loader events like progress, filecomplete, and complete. - Cache Management: Access and manage loaded assets through global caches (this.cache.json, this.textures) shared across all Scenes. - Use Case: You are building a Phaser game with a Tiled map, character spritesheets, and background music. Use this Skill to queue everything in preload(), show a progress bar, and handle cross-browser audio format fallbacks. ## Quick Start Ask the AI to show how to preload a spritesheet, a Tiled tilemap, and audio with a progress bar in a Phaser Scene.

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 to 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 queued files finish loading.

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

A spritesheet is a fixed-size grid of frames referenced by 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 in create()?▼

Load methods called outside preload() do not start automatically, so you must call this.load.start() manually and wait for the complete event. Also verify the cache key matches, since keys are case-sensitive and include any set prefix.

Does Phaser support multiple audio formats 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.