[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CSNTJ5YMS50C7PWDF88086":3,"skill-same:01M7CSNTJ5YMS50C7PWDF88086":52},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M7CSNTJ5YMS50C7PWDF88086","pixijs-assets",null,"Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load\u002Fadd\u002Funload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.","om-scogo\u002Fskillsh-scraper","om-scogo","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160466840?v=4","01M79AWB6DFVCQ7RK70CS34B96","Om Achrekar","01M79AWB6ZM9SKR8KDH1WSSM22",0,"MIT","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-assets\u002FSkill.md",[],[],"2026-11-15 14:19:17",false,"---\nname: pixijs-assets\ndescription: \"Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load\u002Fadd\u002Funload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.\"\nlicense: MIT\n---\n\nThe `Assets` API is PixiJS's asset loader, resolver, and cache in one singleton. Use it to load textures, video, spritesheets, fonts, JSON, and other resources with format detection, resolution switching, bundle grouping, progress tracking, and GPU cleanup.\n\n## Quick Start\n\n```ts\nawait Assets.init({ basePath: \"\u002Fstatic\u002F\" });\n\nconst texture = await Assets.load(\"bunny.png\");\nconst sprite = new Sprite(texture);\napp.stage.addChild(sprite);\n\nconst [hero, enemy] = await Assets.load([\"hero.png\", \"enemy.png\"]);\n\nawait Assets.load({\n alias: \"logo\",\n src: \"logo.webp\",\n});\n\nconst logo = new Sprite(Assets.get(\"logo\"));\n```\n\n`Assets.init()` is optional but recommended for setting `basePath`, `texturePreference`, or a manifest. After init, call `Assets.load()` with a URL, alias, array, or `UnresolvedAsset`; resolved assets are cached and re-resolved by `Assets.get()`.\n\n## Supported file types\n\n| Type | Extensions | Parser ID | Loader |\n| ------------------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| Textures | `.png`, `.jpg`, `.jpeg`, `.webp`, `.avif` | `texture` | `loadTextures` |\n| SVG | `.svg` | `svg` | `loadSvg` (see `references\u002Fsvg.md`) |\n| Video textures | `.mp4`, `.m4v`, `.webm`, `.ogg`, `.ogv`, `.h264`, `.avi`, `.mov` | `video` | `loadVideoTextures` (see `references\u002Fvideo.md`) |\n| Sprite sheets | `.json` (Spritesheet format) | `spritesheet` | `spritesheetAsset` (see `references\u002Fspritesheet.md`) |\n| Bitmap fonts | `.fnt`, `.xml` | `bitmap-font` | `loadBitmapFont` (loading works by default; rendering `BitmapText` requires `'pixi.js\u002Ftext-bitmap'`; see `references\u002Ffonts.md`) |\n| Web fonts | `.ttf`, `.otf`, `.woff`, `.woff2` | `web-font` | `loadWebFont` (see `references\u002Ffonts.md`) |\n| JSON | `.json` | `json` | `loadJson` |\n| Text | `.txt` | `text` | `loadTxt` |\n| Compressed textures | `.basis`, `.dds`, `.ktx`, `.ktx2` | `basis`, `dds`, `ktx`, `ktx2` | See `references\u002Fcompressed-textures.md` |\n| Animated GIFs | `.gif` | `gif` | Requires `'pixi.js\u002Fgif'`; returns `GifSource` (see `references\u002Fgif.md`) |\n\nThe **Parser ID** column is the value you pass to the top-level `parser` field on an asset descriptor to force a specific loader. See \"Forcing a parser\" below.\n\n## Forcing a parser with `parser`\n\nBy default, PixiJS picks a loader by matching the file extension or MIME type. When your URL lacks an extension (CDN signed URLs, blob URLs, API endpoints, content-hashed paths), the resolver can't tell the loader what to do. Set the top-level `parser` field on the asset descriptor to force a specific loader:\n\n```ts\n\u002F\u002F Signed CDN URL with no extension\nconst texture = await Assets.load({\n src: \"https:\u002F\u002Fcdn.example.com\u002Fsigned\u002Fabc123?token=xyz\",\n parser: \"texture\",\n});\n\n\u002F\u002F API endpoint that returns JSON\nconst data = await Assets.load({\n alias: \"config\",\n src: \"https:\u002F\u002Fapi.example.com\u002Fv1\u002Fconfig\",\n parser: \"json\",\n});\n\n\u002F\u002F Extension-less font URL with explicit family\nawait Assets.load({\n src: \"https:\u002F\u002Fcdn.example.com\u002Ffonts\u002Fhero-v2\",\n parser: \"web-font\",\n data: { family: \"Hero\", weights: [\"400\", \"700\"] },\n});\n\n\u002F\u002F Video stream without a file extension\nconst clipTexture = await Assets.load({\n src: \"https:\u002F\u002Fcdn.example.com\u002Fstream\u002Fxyz\",\n parser: \"video\",\n data: { mime: \"video\u002Fmp4\", muted: true, playsinline: true },\n});\n```\n\nThe `parser` field goes at the top level of the asset descriptor (alongside `src` and `data`), not inside `data`. It takes any parser ID from the \"Supported file types\" table above:\n\n- `'texture'`, `'svg'`, `'video'`: image, SVG, and video textures\n- `'json'`, `'text'`: JSON and plain text\n- `'web-font'`, `'bitmap-font'`: web and bitmap fonts\n- `'spritesheet'`: texture atlas JSON\n- `'gif'`: animated GIFs (requires `'pixi.js\u002Fgif'`)\n- `'basis'`, `'dds'`, `'ktx'`, `'ktx2'`: compressed textures (each requires its side-effect import)\n\n### When you need it\n\n- **Signed CDN URLs**: `https:\u002F\u002Fcdn.example.com\u002Fget?id=abc123` has no extension the loader can test against.\n- **Blob or ObjectURL**: `URL.createObjectURL(blob)` produces `blob:...` URLs with no extension.\n- **Custom routing**: `\u002Fapi\u002Fassets\u002Fhero-v2` where the server decides the content type.\n- **Content-hashed paths without suffix**: some build pipelines produce names like `\u002Fstatic\u002Fabc123def` instead of `\u002Fstatic\u002Fabc123def.png`.\n\nIf the URL _does_ have an extension, you don't need `parser`; let auto-detection do its job. Only set `parser` when detection can't work.\n\n### `loadParser` is deprecated\n\nThe v7 `loadParser` field still works but emits a deprecation warning. Use `parser` for new code.\n\n```ts\n\u002F\u002F Old (deprecated)\nawait Assets.load({ src: \"...\", loadParser: \"loadTextures\" });\n\n\u002F\u002F New\nawait Assets.load({ src: \"...\", parser: \"texture\" });\n```\n\n## Topics\n\nEvery asset workflow is covered in a reference file. Pick the one that matches the question:\n\n| Topic | Reference | When |\n| ------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------- |\n| Texture atlases and animations | [references\u002Fspritesheet.md](references\u002Fspritesheet.md) | Loading sprite sheets with `AnimatedSprite` |\n| Video textures | [references\u002Fvideo.md](references\u002Fvideo.md) | `.mp4`, `.webm`, autoplay, looping, mobile |\n| Web and bitmap fonts | [references\u002Ffonts.md](references\u002Ffonts.md) | `.woff2`, `.fnt`, font families, SDF fonts |\n| Animated GIFs | [references\u002Fgif.md](references\u002Fgif.md) | `.gif`, `GifSprite`, playback control |\n| Grouping assets by feature | [references\u002Fbundles.md](references\u002Fbundles.md) | `addBundle`, `loadBundle`, `unloadBundle` |\n| Declaring everything upfront | [references\u002Fmanifests.md](references\u002Fmanifests.md) | `Assets.init({ manifest })` workflows |\n| Cache lookups and cleanup | [references\u002Fcaching.md](references\u002Fcaching.md) | `Assets.get`, `Assets.unload`, `Cache` |\n| Priming future assets | [references\u002Fbackground.md](references\u002Fbackground.md) | `backgroundLoad`, `backgroundLoadBundle` |\n| Loading screens | [references\u002Fprogress.md](references\u002Fprogress.md) | `onProgress`, LoadOptions progress |\n| GPU-compressed formats | [references\u002Fcompressed-textures.md](references\u002Fcompressed-textures.md) | `.ktx2`, `.basis`, `.dds`, `.ktx` |\n| Vector vs raster SVG | [references\u002Fsvg.md](references\u002Fsvg.md) | `parseAsGraphicsContext`, texture mode |\n| Retina + format detection | [references\u002Fresolution.md](references\u002Fresolution.md) | `@{1,2}x`, `format` preferences |\n\n## Decision guide\n\n- **Need to load a single image?** Use `Assets.load(url)`. No setup required.\n- **Loading many assets grouped by level\u002Fscene?** Use a bundle. See `references\u002Fbundles.md`.\n- **Know all assets at build time?** Use a manifest in `Assets.init`. See `references\u002Fmanifests.md`.\n- **Need a loading bar?** Pass a progress callback to `Assets.load`. See `references\u002Fprogress.md`.\n- **Smooth transitions between levels?** Background-load the next level. See `references\u002Fbackground.md`.\n- **Memory budget matters?** Use compressed textures and `Assets.unload` between screens. See `references\u002Fcompressed-textures.md` and `references\u002Fcaching.md`.\n- **Need crisp SVG icons at any size?** Load as Graphics, not texture. See `references\u002Fsvg.md`.\n- **Retina + WebP\u002FAVIF?** Configure `texturePreference` and use format patterns. See `references\u002Fresolution.md`.\n\n## Load options and error handling\n\nThere are two separate \"options\" concepts when loading assets:\n\n1. **`LoadOptions`**: the second argument to `Assets.load`\u002F`loadBundle`. Controls error recovery, retries, progress, and completion callbacks across a whole load.\n2. **`data`**: a field on each asset descriptor. Forwards parser-specific options (scale mode, resolution, font family, autoplay flags, etc.) to the specific loader for that asset.\n\n### LoadOptions (per call)\n\n```ts\nawait Assets.load([\"hero.png\", \"enemy.png\"], {\n onProgress: (p) => updateBar(p),\n onError: (err, url) => {\n const src = typeof url === \"string\" ? url : url.src;\n console.warn(\"failed:\", src, err);\n },\n strategy: \"retry\",\n retryCount: 3,\n retryDelay: 250,\n});\n```\n\n- `onProgress(progress)`: `[0, 1]` as assets in the call complete.\n- `onError(error, url)`: `url` is `string | ResolvedAsset`. Guard before reading `.src`; when `url` is a string, `.src` is undefined.\n- `strategy: 'throw' | 'skip' | 'retry'` — default `'throw'`. `'skip'` resolves with any successful assets; `'retry'` reattempts the failed ones.\n- `retryCount` — default `3`, retries per asset when `strategy` is `'retry'`.\n- `retryDelay` — default `250` ms between retries.\n\nGlobal defaults live on `Loader.defaultOptions`, or pass `loadOptions` to `Assets.init()`.\n\n### `data` options (per asset)\n\nEach loader parser reads its own options from the `data` field on the asset descriptor. Use the table below to pick the right options for each asset type:\n\n| Asset type | `data` shape | Key options | Reference |\n| ------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |\n| Texture (image) | `TextureSourceOptions` | `resolution`, `scaleMode`, `alphaMode`, `autoGenerateMipmaps`, `antialias`, `addressMode` | `references\u002Fresolution.md` |\n| SVG | `{ parseAsGraphicsContext?, resolution? }` | `parseAsGraphicsContext` for Graphics mode; `resolution` for sharper raster | `references\u002Fsvg.md` |\n| Video | `VideoSourceOptions` | `autoPlay`, `loop`, `muted`, `playsinline`, `preload`, `updateFPS`, `crossorigin`, `mime` | `references\u002Fvideo.md` |\n| Web font | `LoadFontData` | `family`, `weights`, `style`, `display`, `unicodeRange`, `featureSettings` | `references\u002Ffonts.md` |\n| Bitmap font | (none; auto-configured) | Distance-field detection sets scale mode and mipmaps | `references\u002Ffonts.md` |\n| Spritesheet | `{ texture?, imageFilename?, ignoreMultiPack?, textureOptions?, cachePrefix? }` | `textureOptions` forwards `TextureSourceOptions` (e.g. `scaleMode`) to the atlas image; `texture` to skip image load; `imageFilename` to override the referenced image; `ignoreMultiPack` to skip multi-pack follow-ups; `cachePrefix` to namespace frames | `references\u002Fspritesheet.md` |\n| GIF | `GifBufferOptions` | `fps`, `scaleMode`, `resolution`, `autoGenerateMipmaps` | `references\u002Fgif.md` |\n| Compressed texture | `TextureSourceOptions` | `scaleMode`, `addressMode`, `autoGenerateMipmaps` | `references\u002Fcompressed-textures.md` |\n| JSON \u002F Text | (none) | Returned as-is | — |\n\nExample combining `LoadOptions` and `data`:\n\n```ts\nawait Assets.load(\n {\n alias: \"hero\",\n src: \"hero.png\",\n data: { scaleMode: \"nearest\", resolution: 2 },\n },\n { strategy: \"retry\", retryCount: 3 },\n);\n```\n\nInside a manifest or bundle, every entry can carry its own `data`:\n\n```ts\nawait Assets.init({\n manifest: {\n bundles: [\n {\n name: \"level1\",\n assets: [\n { alias: \"tiles\", src: \"tiles.png\", data: { scaleMode: \"nearest\" } },\n { alias: \"font\", src: \"hero.woff2\", data: { family: \"Hero\" } },\n {\n alias: \"clip\",\n src: \"intro.mp4\",\n data: { autoPlay: false, muted: true },\n },\n ],\n },\n ],\n },\n});\n```\n\n## Runtime configuration\n\n`Assets.init(options)` accepts, alongside `basePath` and `manifest`:\n\n- `defaultSearchParams` — string or `Record\u003Cstring, any>` appended to every resolved URL. Useful for cache busting.\n- `skipDetections: boolean` — bypass browser format detection for faster init. Requires explicit `texturePreference.format`.\n- `bundleIdentifier: BundleIdentifierOptions` — customize how bundle keys resolve so the same alias can live in multiple bundles.\n- `loadOptions: Partial\u003CLoadOptions>` — set the default `strategy`, `retryCount`, `retryDelay`, and callbacks for every subsequent `Assets.load` call.\n- `preferences: Partial\u003CAssetsPreferences>` — `crossOrigin`, `preferWorkers`, `preferCreateImageBitmap`, `parseAsGraphicsContext`.\n\nAfter init, preferences can still be tuned:\n\n```ts\nAssets.setPreferences({\n crossOrigin: \"anonymous\",\n preferCreateImageBitmap: false,\n});\n\nfor (const detection of Assets.detections) {\n console.log(detection.extension);\n}\n\nAssets.reset();\n```\n\n- `Assets.setPreferences(preferences)` — push new preferences to every parser that supports them.\n- `Assets.detections` — getter exposing the registered `FormatDetectionParser` list; use when inspecting what formats the current environment advertises.\n- `Assets.reset()` — internal full reset (resolver + loader + cache). Intended for tests so a fresh `Assets.init` can run.\n\n## Common Mistakes\n\n### [CRITICAL] Using `Texture.from(url)` to load\n\nWrong:\n\n```ts\nconst texture = Texture.from(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\nCorrect:\n\n```ts\nconst texture = await Assets.load(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\nIn v8, `Texture.from()` only reads the cache. It does not fetch from a URL. Use `Assets.load()` first; the return value is the texture itself.\n\n\n### [HIGH] Using positional `Assets.add` signature\n\nWrong:\n\n```ts\nAssets.add(\"bunny\", \"bunny.png\");\n```\n\nCorrect:\n\n```ts\nAssets.add({ alias: \"bunny\", src: \"bunny.png\" });\n```\n\nThe positional `Assets.add(key, url)` form was removed in v8. Use the options object with `alias` and `src` properties.\n\n\n### [HIGH] Not unloading textures between levels\n\n`Assets.load()` caches textures indefinitely. For level-based games or screens with distinct asset sets, call `Assets.unloadBundle()` when transitioning to release GPU memory.\n\n\n## API Reference\n\n- [Assets](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Assets.html.md)\n- [Loader](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Loader.html.md)\n- [Resolver](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Resolver.html.md)\n- [Cache](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Cache.html.md)\n- [LoadOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.LoadOptions.html.md)\n- [AssetInitOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.AssetInitOptions.html.md)\n- [AssetsManifest](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.AssetsManifest.html.md)\n- [AssetsBundle](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.AssetsBundle.html.md)\n- [BackgroundLoader](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.BackgroundLoader.html.md)\n- [Spritesheet](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Spritesheet.html.md)\n","The `Assets` API is PixiJS's asset loader, resolver, and cache in one singleton. Use it to load textures, video, spritesheets, fonts, JSON, and other resources with format detection, resolution switching, bundle grouping, progress tracking, and GPU cleanup.\n\n## Quick Start\n\n```ts\nawait Assets.init({ basePath: \"\u002Fstatic\u002F\" });\n\nconst texture = await Assets.load(\"bunny.png\");\nconst sprite = new Sprite(texture);\napp.stage.addChild(sprite);\n\nconst [hero, enemy] = await Assets.load([\"hero.png\", \"enemy.png\"]);\n\nawait Assets.load({\n alias: \"logo\",\n src: \"logo.webp\",\n});\n\nconst logo = new Sprite(Assets.get(\"logo\"));\n```\n\n`Assets.init()` is optional but recommended for setting `basePath`, `texturePreference`, or a manifest. After init, call `Assets.load()` with a URL, alias, array, or `UnresolvedAsset`; resolved assets are cached and re-resolved by `Assets.get()`.\n\n## Supported file types\n\n| Type | Extensions | Parser ID | Loader |\n| ------------------- | ---------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| Textures | `.png`, `.jpg`, `.jpeg`, `.webp`, `.avif` | `texture` | `loadTextures` |\n| SVG | `.svg` | `svg` | `loadSvg` (see `references\u002Fsvg.md`) |\n| Video textures | `.mp4`, `.m4v`, `.webm`, `.ogg`, `.ogv`, `.h264`, `.avi`, `.mov` | `video` | `loadVideoTextures` (see `references\u002Fvideo.md`) |\n| Sprite sheets | `.json` (Spritesheet format) | `spritesheet` | `spritesheetAsset` (see `references\u002Fspritesheet.md`) |\n| Bitmap fonts | `.fnt`, `.xml` | `bitmap-font` | `loadBitmapFont` (loading works by default; rendering `BitmapText` requires `'pixi.js\u002Ftext-bitmap'`; see `references\u002Ffonts.md`) |\n| Web fonts | `.ttf`, `.otf`, `.woff`, `.woff2` | `web-font` | `loadWebFont` (see `references\u002Ffonts.md`) |\n| JSON | `.json` | `json` | `loadJson` |\n| Text | `.txt` | `text` | `loadTxt` |\n| Compressed textures | `.basis`, `.dds`, `.ktx`, `.ktx2` | `basis`, `dds`, `ktx`, `ktx2` | See `references\u002Fcompressed-textures.md` |\n| Animated GIFs | `.gif` | `gif` | Requires `'pixi.js\u002Fgif'`; returns `GifSource` (see `references\u002Fgif.md`) |\n\nThe **Parser ID** column is the value you pass to the top-level `parser` field on an asset descriptor to force a specific loader. See \"Forcing a parser\" below.\n\n## Forcing a parser with `parser`\n\nBy default, PixiJS picks a loader by matching the file extension or MIME type. When your URL lacks an extension (CDN signed URLs, blob URLs, API endpoints, content-hashed paths), the resolver can't tell the loader what to do. Set the top-level `parser` field on the asset descriptor to force a specific loader:\n\n```ts\n\u002F\u002F Signed CDN URL with no extension\nconst texture = await Assets.load({\n src: \"https:\u002F\u002Fcdn.example.com\u002Fsigned\u002Fabc123?token=xyz\",\n parser: \"texture\",\n});\n\n\u002F\u002F API endpoint that returns JSON\nconst data = await Assets.load({\n alias: \"config\",\n src: \"https:\u002F\u002Fapi.example.com\u002Fv1\u002Fconfig\",\n parser: \"json\",\n});\n\n\u002F\u002F Extension-less font URL with explicit family\nawait Assets.load({\n src: \"https:\u002F\u002Fcdn.example.com\u002Ffonts\u002Fhero-v2\",\n parser: \"web-font\",\n data: { family: \"Hero\", weights: [\"400\", \"700\"] },\n});\n\n\u002F\u002F Video stream without a file extension\nconst clipTexture = await Assets.load({\n src: \"https:\u002F\u002Fcdn.example.com\u002Fstream\u002Fxyz\",\n parser: \"video\",\n data: { mime: \"video\u002Fmp4\", muted: true, playsinline: true },\n});\n```\n\nThe `parser` field goes at the top level of the asset descriptor (alongside `src` and `data`), not inside `data`. It takes any parser ID from the \"Supported file types\" table above:\n\n- `'texture'`, `'svg'`, `'video'`: image, SVG, and video textures\n- `'json'`, `'text'`: JSON and plain text\n- `'web-font'`, `'bitmap-font'`: web and bitmap fonts\n- `'spritesheet'`: texture atlas JSON\n- `'gif'`: animated GIFs (requires `'pixi.js\u002Fgif'`)\n- `'basis'`, `'dds'`, `'ktx'`, `'ktx2'`: compressed textures (each requires its side-effect import)\n\n### When you need it\n\n- **Signed CDN URLs**: `https:\u002F\u002Fcdn.example.com\u002Fget?id=abc123` has no extension the loader can test against.\n- **Blob or ObjectURL**: `URL.createObjectURL(blob)` produces `blob:...` URLs with no extension.\n- **Custom routing**: `\u002Fapi\u002Fassets\u002Fhero-v2` where the server decides the content type.\n- **Content-hashed paths without suffix**: some build pipelines produce names like `\u002Fstatic\u002Fabc123def` instead of `\u002Fstatic\u002Fabc123def.png`.\n\nIf the URL _does_ have an extension, you don't need `parser`; let auto-detection do its job. Only set `parser` when detection can't work.\n\n### `loadParser` is deprecated\n\nThe v7 `loadParser` field still works but emits a deprecation warning. Use `parser` for new code.\n\n```ts\n\u002F\u002F Old (deprecated)\nawait Assets.load({ src: \"...\", loadParser: \"loadTextures\" });\n\n\u002F\u002F New\nawait Assets.load({ src: \"...\", parser: \"texture\" });\n```\n\n## Topics\n\nEvery asset workflow is covered in a reference file. Pick the one that matches the question:\n\n| Topic | Reference | When |\n| ------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------- |\n| Texture atlases and animations | [references\u002Fspritesheet.md](references\u002Fspritesheet.md) | Loading sprite sheets with `AnimatedSprite` |\n| Video textures | [references\u002Fvideo.md](references\u002Fvideo.md) | `.mp4`, `.webm`, autoplay, looping, mobile |\n| Web and bitmap fonts | [references\u002Ffonts.md](references\u002Ffonts.md) | `.woff2`, `.fnt`, font families, SDF fonts |\n| Animated GIFs | [references\u002Fgif.md](references\u002Fgif.md) | `.gif`, `GifSprite`, playback control |\n| Grouping assets by feature | [references\u002Fbundles.md](references\u002Fbundles.md) | `addBundle`, `loadBundle`, `unloadBundle` |\n| Declaring everything upfront | [references\u002Fmanifests.md](references\u002Fmanifests.md) | `Assets.init({ manifest })` workflows |\n| Cache lookups and cleanup | [references\u002Fcaching.md](references\u002Fcaching.md) | `Assets.get`, `Assets.unload`, `Cache` |\n| Priming future assets | [references\u002Fbackground.md](references\u002Fbackground.md) | `backgroundLoad`, `backgroundLoadBundle` |\n| Loading screens | [references\u002Fprogress.md](references\u002Fprogress.md) | `onProgress`, LoadOptions progress |\n| GPU-compressed formats | [references\u002Fcompressed-textures.md](references\u002Fcompressed-textures.md) | `.ktx2`, `.basis`, `.dds`, `.ktx` |\n| Vector vs raster SVG | [references\u002Fsvg.md](references\u002Fsvg.md) | `parseAsGraphicsContext`, texture mode |\n| Retina + format detection | [references\u002Fresolution.md](references\u002Fresolution.md) | `@{1,2}x`, `format` preferences |\n\n## Decision guide\n\n- **Need to load a single image?** Use `Assets.load(url)`. No setup required.\n- **Loading many assets grouped by level\u002Fscene?** Use a bundle. See `references\u002Fbundles.md`.\n- **Know all assets at build time?** Use a manifest in `Assets.init`. See `references\u002Fmanifests.md`.\n- **Need a loading bar?** Pass a progress callback to `Assets.load`. See `references\u002Fprogress.md`.\n- **Smooth transitions between levels?** Background-load the next level. See `references\u002Fbackground.md`.\n- **Memory budget matters?** Use compressed textures and `Assets.unload` between screens. See `references\u002Fcompressed-textures.md` and `references\u002Fcaching.md`.\n- **Need crisp SVG icons at any size?** Load as Graphics, not texture. See `references\u002Fsvg.md`.\n- **Retina + WebP\u002FAVIF?** Configure `texturePreference` and use format patterns. See `references\u002Fresolution.md`.\n\n## Load options and error handling\n\nThere are two separate \"options\" concepts when loading assets:\n\n1. **`LoadOptions`**: the second argument to `Assets.load`\u002F`loadBundle`. Controls error recovery, retries, progress, and completion callbacks across a whole load.\n2. **`data`**: a field on each asset descriptor. Forwards parser-specific options (scale mode, resolution, font family, autoplay flags, etc.) to the specific loader for that asset.\n\n### LoadOptions (per call)\n\n```ts\nawait Assets.load([\"hero.png\", \"enemy.png\"], {\n onProgress: (p) => updateBar(p),\n onError: (err, url) => {\n const src = typeof url === \"string\" ? url : url.src;\n console.warn(\"failed:\", src, err);\n },\n strategy: \"retry\",\n retryCount: 3,\n retryDelay: 250,\n});\n```\n\n- `onProgress(progress)`: `[0, 1]` as assets in the call complete.\n- `onError(error, url)`: `url` is `string | ResolvedAsset`. Guard before reading `.src`; when `url` is a string, `.src` is undefined.\n- `strategy: 'throw' | 'skip' | 'retry'` — default `'throw'`. `'skip'` resolves with any successful assets; `'retry'` reattempts the failed ones.\n- `retryCount` — default `3`, retries per asset when `strategy` is `'retry'`.\n- `retryDelay` — default `250` ms between retries.\n\nGlobal defaults live on `Loader.defaultOptions`, or pass `loadOptions` to `Assets.init()`.\n\n### `data` options (per asset)\n\nEach loader parser reads its own options from the `data` field on the asset descriptor. Use the table below to pick the right options for each asset type:\n\n| Asset type | `data` shape | Key options | Reference |\n| ------------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |\n| Texture (image) | `TextureSourceOptions` | `resolution`, `scaleMode`, `alphaMode`, `autoGenerateMipmaps`, `antialias`, `addressMode` | `references\u002Fresolution.md` |\n| SVG | `{ parseAsGraphicsContext?, resolution? }` | `parseAsGraphicsContext` for Graphics mode; `resolution` for sharper raster | `references\u002Fsvg.md` |\n| Video | `VideoSourceOptions` | `autoPlay`, `loop`, `muted`, `playsinline`, `preload`, `updateFPS`, `crossorigin`, `mime` | `references\u002Fvideo.md` |\n| Web font | `LoadFontData` | `family`, `weights`, `style`, `display`, `unicodeRange`, `featureSettings` | `references\u002Ffonts.md` |\n| Bitmap font | (none; auto-configured) | Distance-field detection sets scale mode and mipmaps | `references\u002Ffonts.md` |\n| Spritesheet | `{ texture?, imageFilename?, ignoreMultiPack?, textureOptions?, cachePrefix? }` | `textureOptions` forwards `TextureSourceOptions` (e.g. `scaleMode`) to the atlas image; `texture` to skip image load; `imageFilename` to override the referenced image; `ignoreMultiPack` to skip multi-pack follow-ups; `cachePrefix` to namespace frames | `references\u002Fspritesheet.md` |\n| GIF | `GifBufferOptions` | `fps`, `scaleMode`, `resolution`, `autoGenerateMipmaps` | `references\u002Fgif.md` |\n| Compressed texture | `TextureSourceOptions` | `scaleMode`, `addressMode`, `autoGenerateMipmaps` | `references\u002Fcompressed-textures.md` |\n| JSON \u002F Text | (none) | Returned as-is | — |\n\nExample combining `LoadOptions` and `data`:\n\n```ts\nawait Assets.load(\n {\n alias: \"hero\",\n src: \"hero.png\",\n data: { scaleMode: \"nearest\", resolution: 2 },\n },\n { strategy: \"retry\", retryCount: 3 },\n);\n```\n\nInside a manifest or bundle, every entry can carry its own `data`:\n\n```ts\nawait Assets.init({\n manifest: {\n bundles: [\n {\n name: \"level1\",\n assets: [\n { alias: \"tiles\", src: \"tiles.png\", data: { scaleMode: \"nearest\" } },\n { alias: \"font\", src: \"hero.woff2\", data: { family: \"Hero\" } },\n {\n alias: \"clip\",\n src: \"intro.mp4\",\n data: { autoPlay: false, muted: true },\n },\n ],\n },\n ],\n },\n});\n```\n\n## Runtime configuration\n\n`Assets.init(options)` accepts, alongside `basePath` and `manifest`:\n\n- `defaultSearchParams` — string or `Record\u003Cstring, any>` appended to every resolved URL. Useful for cache busting.\n- `skipDetections: boolean` — bypass browser format detection for faster init. Requires explicit `texturePreference.format`.\n- `bundleIdentifier: BundleIdentifierOptions` — customize how bundle keys resolve so the same alias can live in multiple bundles.\n- `loadOptions: Partial\u003CLoadOptions>` — set the default `strategy`, `retryCount`, `retryDelay`, and callbacks for every subsequent `Assets.load` call.\n- `preferences: Partial\u003CAssetsPreferences>` — `crossOrigin`, `preferWorkers`, `preferCreateImageBitmap`, `parseAsGraphicsContext`.\n\nAfter init, preferences can still be tuned:\n\n```ts\nAssets.setPreferences({\n crossOrigin: \"anonymous\",\n preferCreateImageBitmap: false,\n});\n\nfor (const detection of Assets.detections) {\n console.log(detection.extension);\n}\n\nAssets.reset();\n```\n\n- `Assets.setPreferences(preferences)` — push new preferences to every parser that supports them.\n- `Assets.detections` — getter exposing the registered `FormatDetectionParser` list; use when inspecting what formats the current environment advertises.\n- `Assets.reset()` — internal full reset (resolver + loader + cache). Intended for tests so a fresh `Assets.init` can run.\n\n## Common Mistakes\n\n### [CRITICAL] Using `Texture.from(url)` to load\n\nWrong:\n\n```ts\nconst texture = Texture.from(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\nCorrect:\n\n```ts\nconst texture = await Assets.load(\"https:\u002F\u002Fexample.com\u002Fimage.png\");\n```\n\nIn v8, `Texture.from()` only reads the cache. It does not fetch from a URL. Use `Assets.load()` first; the return value is the texture itself.\n\n\n### [HIGH] Using positional `Assets.add` signature\n\nWrong:\n\n```ts\nAssets.add(\"bunny\", \"bunny.png\");\n```\n\nCorrect:\n\n```ts\nAssets.add({ alias: \"bunny\", src: \"bunny.png\" });\n```\n\nThe positional `Assets.add(key, url)` form was removed in v8. Use the options object with `alias` and `src` properties.\n\n\n### [HIGH] Not unloading textures between levels\n\n`Assets.load()` caches textures indefinitely. For level-based games or screens with distinct asset sets, call `Assets.unloadBundle()` when transitioning to release GPU memory.\n\n\n## API Reference\n\n- [Assets](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Assets.html.md)\n- [Loader](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Loader.html.md)\n- [Resolver](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Resolver.html.md)\n- [Cache](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Cache.html.md)\n- [LoadOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.LoadOptions.html.md)\n- [AssetInitOptions](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.AssetInitOptions.html.md)\n- [AssetsManifest](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.AssetsManifest.html.md)\n- [AssetsBundle](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.AssetsBundle.html.md)\n- [BackgroundLoader](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.BackgroundLoader.html.md)\n- [Spritesheet](https:\u002F\u002Fpixijs.download\u002Frelease\u002Fdocs\u002Fassets.Spritesheet.html.md)\n",{"name":5,"license":15,"description":7},"main","8859218955d9504cd18b59e7892100718039d3b4","data\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-assets",1,"https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper","https:\u002F\u002Fgithub.com\u002Fom-scogo","SDE-1 @ Scogo ","2026-07-18 12:22:46",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-assets",{"tool":38,"command":39},"bunx","bunx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-assets",{"tool":41,"command":42},"pnpm","pnpm dlx skills add om-scogo\u002Fskillsh-scraper --skill pixijs-assets","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-assets\u002FSkill.md",true,[46],{"path":47,"resourceType":48,"resourceTypeDesc":49,"sizeBytes":50,"sourceHtmlUrl":51},"metadata.json","REFERENCE","参考文档",437,"https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fpixijs-pixijs-skills\u002Fpixijs-assets\u002Fmetadata.json",[53,60,65,72,77,84],{"skillNo":54,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":59,"publishedAt":19},"01M7D6MC9FAAEV4CMNYX8W7JTG","arxiv-search","Search arXiv physics, math, and computer science preprints using natural language queries. Powered by Valyu semantic search.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002Fskills\u002Farxiv-search\u002FSKILL.md",[],[],{"skillNo":61,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":19},"01M7D6M85CKKN87TA98VCQV4H7","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fyorkeccak-scientific-skills\u002Farxiv-search\u002FSkill.md",[],[],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M7D4ZTCS4DR3CE4JY06X84T2","working-with-legacy-code","Safely change and test untested codebases using Feathers' \"Working Effectively with Legacy Code\". Use when the user mentions \"legacy code\", \"no tests\", \"untested codebase\", \"how do I test this\", \"seams\", \"characterization tests\", \"golden master\", \"sprout method\", \"afraid to change this code\", \"monster method\", \"dependency breaking\", or \"inherited a messy codebase\". Also trigger when changing code without tests safely, getting a class under test when constructors, statics, or singletons block it, adding features to tangled modules, or planning incremental test coverage for an old codebase. Covers the legacy-code change algorithm, seams, characterization tests, sprout\u002Fwrap, and dependency-breaking techniques. For refactoring code that already has tests, see refactoring-patterns. For day-to-day code quality, see clean-code.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002Fworking-with-legacy-code\u002FSKILL.md",[],[],{"skillNo":73,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":19},"01M7D4ZHZKJD2RSNGAF63V14P4","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fworking-with-legacy-code\u002FSkill.md",[],[],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":19},"01M7D4ZB4CJBFW5JE67CPH2QRV","web-typography","Select, pair, and implement typefaces for web projects. Use when the user mentions \"font pairing\", \"which typeface\", \"line height\", \"responsive typography\", \"web font loading\", \"type hierarchy\", \"variable fonts\", \"FOUT\u002FFOIT\", \"typographic scale\", or \"the text is hard to read\". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002Fweb-typography\u002FSKILL.md",[],[],{"skillNo":85,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M7D4Z4MVYVY3NMJ18BNV6WNA","https:\u002F\u002Fgithub.com\u002Fom-scogo\u002Fskillsh-scraper\u002Fblob\u002Fmain\u002Fdata\u002Fskills\u002Fwondelai-skills\u002Fweb-typography\u002FSkill.md",[],[]]