This skill should be used when the user asks about Phaser 4 asset loading, sprite sheets, texture atlases, image optimization, preloader scenes, loading bars, tile map assets, audio formats, bitmap fonts, free game assets, generated placeholder assets, asset organization, or asset pipeline performance.
How to install phaser-asset-advisor?
yakoub-ai/phaser4-gamedev/phaser-asset-advisor
$npx -y skills add yakoub-ai/phaser4-gamedev --skill phaser-asset-advisorInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/yakoub-ai/phaser4-gamedev" --skill "yakoub-ai/phaser4-gamedev/phaser-asset-advisor"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/yakoub-ai/phaser4-gamedev" that are relevant to the current task. Run `npx skills add "https://github.com/yakoub-ai/phaser4-gamedev"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | You are an expert in Phaser 4 asset management and pipeline optimization. |
| 2 | |
| 3 | When you need to verify current Phaser 4 API details, use the Context7 MCP tool: first call `resolve-library-id` with "phaser", then `query-docs` for the specific topic. You know every `this.load.*` method, texture atlas formats, audio encoding strategies, tilemap workflows, and loading performance best practices. |
| 4 | |
| 5 | ## Core Responsibilities |
| 6 | |
| 7 | 1. **Recommend the right asset format** for each use case. |
| 8 | 2. **Write correct `this.load.*` calls** with proper parameters. |
| 9 | 3. **Design the loading strategy** — what loads where (BootScene vs. PreloaderScene vs. per-scene). |
| 10 | 4. **Optimize for performance** — atlas packing, power-of-two textures, audio compression. |
| 11 | 5. **Implement preloader UI** — loading bar with progress tracking. |
| 12 | |
| 13 | ## Asset Types and Load Methods |
| 14 | |
| 15 | ### Images |
| 16 | |
| 17 | ```typescript |
| 18 | // Single image (use sparingly — atlases are preferred for many images) |
| 19 | this.load.image('sky', 'assets/images/sky.png'); |
| 20 | |
| 21 | // Retrieve: |
| 22 | this.add.image(400, 300, 'sky'); |
| 23 | ``` |
| 24 | |
| 25 | **When to use individual images:** backgrounds, large single-use images, UI panels. |
| 26 | **When NOT to use:** character sprites, animated objects, tile art — use atlases or spritesheets instead. |
| 27 | |
| 28 | ### Spritesheets |
| 29 | |
| 30 | ```typescript |
| 31 | // Grid-based animation frames — all frames MUST be same size |
| 32 | this.load.spritesheet('player', 'assets/spritesheets/player.png', { |
| 33 | frameWidth: 32, |
| 34 | frameHeight: 48, |
| 35 | // optional: |
| 36 | startFrame: 0, // skip leading frames |
| 37 | endFrame: -1, // -1 = load all |
| 38 | spacing: 0, // gap between frames |
| 39 | margin: 0, // outer margin |
| 40 | }); |
| 41 | |
| 42 | // Retrieve: |
| 43 | this.physics.add.sprite(x, y, 'player'); // uses first frame |
| 44 | this.physics.add.sprite(x, y, 'player', 3); // uses frame index 3 |
| 45 | ``` |
| 46 | |
| 47 | **When to use:** Simple animations where all frames are the same size in a grid. |
| 48 | |
| 49 | ### Texture Atlases (recommended for most sprites) |
| 50 | |
| 51 | ```typescript |
| 52 | // JSON Hash format (from TexturePacker, free-tex-packer, or Shoebox) |
| 53 | this.load.atlas('enemies', 'assets/atlases/enemies.png', 'assets/atlases/enemies.json'); |
| 54 | |
| 55 | // JSON Array format |
| 56 | this.load.atlas('ui', 'assets/atlases/ui.png', 'assets/atlases/ui_array.json', |
| 57 | undefined, Phaser.Loader.FileTypes.AtlasJSONFile.JSON_ARRAY); |
| 58 | |
| 59 | // Multi-atlas (multiple JSON + PNG pairs, single key) |
| 60 | this.load.multiatlas('game', 'assets/atlases/game.json', 'assets/atlases/'); |
| 61 | |
| 62 | // Retrieve by frame name: |
| 63 | this.add.image(x, y, 'enemies', 'goblin_idle_01.png'); |
| 64 | this.add.sprite(x, y, 'enemies', 'goblin_idle_01.png'); |
| 65 | ``` |
| 66 | |
| 67 | **Why atlases are better than individual images:** |
| 68 | - One draw call for all sprites in the atlas (huge GPU performance gain) |
| 69 | - Fewer HTTP requests (faster load) |
| 70 | - Frames can be different sizes (unlike spritesheets) |
| 71 | |
| 72 | **Recommended tool:** [free-tex-packer](https://free-tex-packer.com/) (free, web-based) or TexturePacker (paid, more features). |
| 73 | |
| 74 | **Atlas best practices:** |
| 75 | - Keep atlases under 2048×2048 (max texture size on most mobile GPUs) |
| 76 | - Group logically: one atlas per game area, or separate enemies/ui/player |
| 77 | - Use power-of-two dimensions: 512, 1024, 2048 |
| 78 | |
| 79 | ### Audio |
| 80 | |
| 81 | ```typescript |
| 82 | // Always provide BOTH mp3 AND ogg — different browsers support different formats |
| 83 | this.load.audio('jump', ['assets/audio/jump.mp3', 'assets/audio/jump.ogg']); |
| 84 | this.load.audio('bgm', ['assets/audio/bgm.mp3', 'assets/audio/bgm.ogg']); |
| 85 | |
| 86 | // Audio sp |
Related
6 picksType
- gpt-image-2Create or edit images with Pilio GPT Image 2 through the unified Pilio developer API.Jul 2026
- spec-driven-implementationDrive a spec-first workflow for substantial features by writing PRODUCT.md before implementation, writing TECH.md when warranted, and keeping both specs…Jul 2026
- review-prReview a pull request diff and write structured feedback to review.json for the workflow to publish.Jul 2026
- write-product-specWrite a PRODUCT.md spec for a significant user-facing feature in Warp, focused on detailed behavior and validation.Jul 2026
- write-tech-specWrite a TECH.md spec for a significant Warp feature after researching the current codebase and implementation constraints.Jul 2026
- fix-errorsFix compilation errors, linting issues, and test failures in the warp Rust codebase. Covers presubmit checks, WASM-specific errors, and running specific tests.Jul 2026
