pixijs-assets

Name: pixijs-assets
Author: pixijs

2.9kinstalls15forks

How to install pixijs-assets?

pixijs/pixijs-skills/pixijs-assets

$npx -y skills add pixijs/pixijs-skills --skill pixijs-assets

Installs into the current project.

Summary

Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load/add/unload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or G

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	await Assets.init({ basePath: "/static/" });
7
8	const texture = await Assets.load("bunny.png");
9	const sprite = new Sprite(texture);
10	app.stage.addChild(sprite);
11
12	const [hero, enemy] = await Assets.load(["hero.png", "enemy.png"]);
13
14	await Assets.load({
15	alias: "logo",
16	src: "logo.webp",
17	});
18
19	const logo = new Sprite(Assets.get("logo"));
20	```
21
22	`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()`.
23
24	## Supported file types
25
26	\| Type \| Extensions \| Parser ID \| Loader \|
27	\| ------------------- \| ---------------------------------------------------------------- \| ----------------------------- \| ------------------------------------------------------------------------------------------------------------------------------- \|
28	\| Textures \| `.png`, `.jpg`, `.jpeg`, `.webp`, `.avif` \| `texture` \| `loadTextures` \|
29	\| SVG \| `.svg` \| `svg` \| `loadSvg` (see `references/svg.md`) \|
30	\| Video textures \| `.mp4`, `.m4v`, `.webm`, `.ogg`, `.ogv`, `.h264`, `.avi`, `.mov` \| `video` \| `loadVideoTextures` (see `references/video.md`) \|
31	\| Sprite sheets \| `.json` (Spritesheet format) \| `spritesheet` \| `spritesheetAsset` (see `references/spritesheet.md`) \|
32	\| Bitmap fonts \| `.fnt`, `.xml` \| `bitmap-font` \| `loadBitmapFont` (loading works by default; rendering `BitmapText` requires `'pixi.js/text-bitmap'`; see `references/fonts.md`) \|
33	\| Web fonts \| `.ttf`, `.otf`, `.woff`, `.woff2` \| `web-font` \| `loadWebFont` (see `references/fonts.md`) \|
34	\| JSON \| `.json` \| `json` \| `loadJson` \|
35	\| Text \| `.txt` \| `text` \| `loadTxt` \|
36	\| Compressed textures \| `.basis`, `.dds`, `.ktx`, `.ktx2` \| `basis`, `dds`, `ktx`, `ktx2` \| See `references/compressed-textures.md` \|
37	\| Animated GIFs \| `.gif` \| `gif` \| Requires `'pixi.js/gif'`; returns `GifSource` (see `references/gif.md`) \|
38
39	The 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.
40
41	## Forcing a parser with `parser`
42
43	By 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)

People who liked this also viewed

6 picks

Type

pixijs-assets

2.9kinstalls15forks

View on GitHub

How to install pixijs-assets?

pixijs/pixijs-skills/pixijs-assets

$npx -y skills add pixijs/pixijs-skills --skill pixijs-assets

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	await Assets.init({ basePath: "/static/" });
7
8	const texture = await Assets.load("bunny.png");
9	const sprite = new Sprite(texture);
10	app.stage.addChild(sprite);
11
12	const [hero, enemy] = await Assets.load(["hero.png", "enemy.png"]);
13
14	await Assets.load({
15	alias: "logo",
16	src: "logo.webp",
17	});
18
19	const logo = new Sprite(Assets.get("logo"));
20	```
21
22	`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()`.
23
24	## Supported file types
25
26	\| Type \| Extensions \| Parser ID \| Loader \|
27	\| ------------------- \| ---------------------------------------------------------------- \| ----------------------------- \| ------------------------------------------------------------------------------------------------------------------------------- \|
28	\| Textures \| `.png`, `.jpg`, `.jpeg`, `.webp`, `.avif` \| `texture` \| `loadTextures` \|
29	\| SVG \| `.svg` \| `svg` \| `loadSvg` (see `references/svg.md`) \|
30	\| Video textures \| `.mp4`, `.m4v`, `.webm`, `.ogg`, `.ogv`, `.h264`, `.avi`, `.mov` \| `video` \| `loadVideoTextures` (see `references/video.md`) \|
31	\| Sprite sheets \| `.json` (Spritesheet format) \| `spritesheet` \| `spritesheetAsset` (see `references/spritesheet.md`) \|
32	\| Bitmap fonts \| `.fnt`, `.xml` \| `bitmap-font` \| `loadBitmapFont` (loading works by default; rendering `BitmapText` requires `'pixi.js/text-bitmap'`; see `references/fonts.md`) \|
33	\| Web fonts \| `.ttf`, `.otf`, `.woff`, `.woff2` \| `web-font` \| `loadWebFont` (see `references/fonts.md`) \|
34	\| JSON \| `.json` \| `json` \| `loadJson` \|
35	\| Text \| `.txt` \| `text` \| `loadTxt` \|
36	\| Compressed textures \| `.basis`, `.dds`, `.ktx`, `.ktx2` \| `basis`, `dds`, `ktx`, `ktx2` \| See `references/compressed-textures.md` \|
37	\| Animated GIFs \| `.gif` \| `gif` \| Requires `'pixi.js/gif'`; returns `GifSource` (see `references/gif.md`) \|
38
39	The 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.
40
41	## Forcing a parser with `parser`
42
43	By 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)

People who liked this also viewed

6 picks

Type