Melonjs Loading Assets
Use this skill for loading and managing game assets in melonJS, the resource...
Install
npx skills add melonjs/melonJS --skill melonjs-loading-assets -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Engineering
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use this skill for loading and managing game assets in melonJS, the resource descriptor format, the full asset type list, preload versus load, retrieving loaded assets, base URLs and cross-origin settings, and the loading screen. Triggers on: loader, loader.preload, loader.load, resources, getImage, getJSON, getTMX, getGLTF, getVideo, getFont, setBaseURL, setOptions, crossOrigin, withCredentials, credentials, cookies, authenticated assets, CORS, asset, preload, LOADER_COMPLETE, loading screen, unload, setParser, custom asset type, generated texture, procedural texture.
Loading assets
The resource descriptor
Every asset is { name, type, src } plus type-specific extras:
import { loader } from "melonjs";
loader.setOptions({ crossOrigin: "anonymous" }); // needed for remote assets
await loader.preload([
{ name: "tiles", type: "image", src: "data/img/tiles.png" },
{ name: "map1", type: "tmx", src: "data/map/map1.tmx" },
{ name: "tileset", type: "tsx", src: "data/map/tileset.tsx" },
{ name: "sfx", type: "audio", src: "data/sfx/" },
{ name: "font", type: "fontface", src: "data/font/PressStart2P.ttf" },
{ name: "atlas", type: "json", src: "data/img/atlas.json" },
]);
preload() has been awaitable since 19.8. The callback form still works and
takes a third argument to suppress the built-in loading screen:
loader.preload(resources, onLoaded, /* switchToLoadState */ false);
The type list
The type strings are melonJS-specific, this is not a generic loader:
| type | for |
|---|---|
"image" | textures, sprite sheets, normal maps |
"json" | data, texture-atlas descriptors, collision shapes from a shape editor |
"tmx" / "tsx" | Tiled maps and external tilesets |
"audio" | sound, src is a directory, see below |
"video" | video textures |
"binary" | raw data, bitmap font .fnt descriptors |
"fontface" | web fonts (.ttf, .woff) |
"aseprite" | Aseprite JSON + image |
"shader" | GLSL/WGSL shader sources, src or inline via data |
"obj" / "mtl" | Wavefront models and materials |
"gltf" / "glb" | glTF scenes |
"js" | scripts |
| any type you register | your own formats, and things you generate rather than download, see Custom asset types |
What belongs in the manifest, and what cannot
Preloading is not only for things with a URL. Three tiers, and the middle one is the one people miss.
