pixijs-scene-gif

Name: pixijs-scene-gif
Author: pixijs

2.8kinstalls15forks

How to install pixijs-scene-gif?

pixijs/pixijs-skills/pixijs-scene-gif

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-gif

Installs into the current project.

Summary

Use this skill when displaying animated GIFs in PixiJS v8. Covers the pixi.js/gif side-effect import, Assets.load returning a GifSource, GifSprite playback (play/stop/currentFrame/animationSpeed), autoPlay/loop options, onComplete/onLoop/onFrameChange callbacks, GifSource sharing

Files · 1

View on GitHub

SKILL.md

1	`GifSprite` plays an animated GIF as a display object. `Assets.load('animation.gif')` returns a `GifSource` (not a `Texture`), and you wrap that in a `GifSprite`. Requires a side-effect `import 'pixi.js/gif'` to register the loader extension.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. `GifSprite` extends `Sprite`, so it is a leaf: do not nest children inside it. Wrap multiple `GifSprite` instances in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	import "pixi.js/gif";
9	import { GifSprite } from "pixi.js/gif";
10
11	const source = await Assets.load("animation.gif");
12
13	const gif = new GifSprite({
14	source,
15	autoPlay: true,
16	loop: true,
17	animationSpeed: 1,
18	});
19
20	gif.anchor.set(0.5);
21	gif.x = app.screen.width / 2;
22	gif.y = app.screen.height / 2;
23
24	app.stage.addChild(gif);
25	```
26
27	> [!NOTE]
28	> GIFs decode every frame into a separate canvas texture. For performance-critical animations with many frames, prefer a spritesheet with `AnimatedSprite` — it uses a single atlas texture and batches better on the GPU.
29
30	Related skills: `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-sprite` (`AnimatedSprite` for spritesheet-based animation), `pixijs-assets` (`Assets.load`, caching, unloading), `pixijs-ticker` (frame timing), `pixijs-performance` (texture memory).
31
32	## Constructor options
33
34	`GifSpriteOptions` extends `Omit<SpriteOptions, 'texture'>`; `texture` is managed internally (set from `source.textures[0]` and swapped per frame). All other `Sprite` options (`anchor`, `scale`, `tint`, `roundPixels`, etc.) are valid, and all `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
35
36	Leaf-specific options added by `GifSpriteOptions`:
37
38	\| Option \| Type \| Default \| Description \|
39	\| ---------------- \| --------------------------------- \| ---------- \| -------------------------------------------------------------------------------------------------------------------------- \|
40	\| `source` \| `GifSource` \| — \| Required. The parsed GIF data returned by `Assets.load('file.gif')`. Can be shared across multiple `GifSprite` instances. \|
41	\| `autoPlay` \| `boolean` \| `true` \| Start playback immediately on construction. If `false`, you must call `gif.play()` to begin. \|
42	\| `loop` \| `boolean` \| `true` \| Repeat the animation on reaching the last frame. When `false`, the sprite stops at the final frame and fires `onComplete`. \|
43	\| `animationSpeed` \| `number` \| `1` \| Multiplier on the GIF's native frame timing. `2` runs at double speed; `0.5` runs at half. \|
44	\| `autoUpdate` \| `boolean` \| `true` \| Connect playback to `Ticker.shared`. Set to `false` to drive updates yourself via `gif.update(ticker)`. \|
45	\| `fps` \| `number` \| `30` \| Fallback frame rate for GIFs that do not specify per-frame delays. \|
46	\| `onComplete` \| `() => void \\| null` \| `null` \| Called when a non-looping animation reaches the last frame. \|
47	\| `onLoop` \| `() => void \\| null` \| `null` \| Called each time a looping animation wraps around. \|
48	\| `onFrameChange` \| `(frame: number) => void \\| null` \| `null` \| Called every time the displayed frame index changes. \|
49	\| `scaleMode` \| `SCALE_MODE` \| `'linear'` \| Deprecated since 8.13.0 — pass `scaleMode` via `Assets.load(..., { data: { scaleMode } })` instead. \|
50
51	The constructor also accepts a bare `GifSource` as its sole argument (`new GifSprite(source)`), which is shorthand for `new GifSprite({ source })` using the defaults above.
52
53	## Core Patterns
54
55	### Setup and the side-effect import
56
57	```ts
58	import "pixi.js/gif";
59	import { Assets } from "pixi.js";
60	import { GifSprite } from "pixi.js/gif";
61
62	const source = a

People who liked this also viewed

6 picks

Type

pixijs-scene-gif

2.8kinstalls15forks

View on GitHub

How to install pixijs-scene-gif?

pixijs/pixijs-skills/pixijs-scene-gif

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-gif

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	`GifSprite` plays an animated GIF as a display object. `Assets.load('animation.gif')` returns a `GifSource` (not a `Texture`), and you wrap that in a `GifSprite`. Requires a side-effect `import 'pixi.js/gif'` to register the loader extension.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. `GifSprite` extends `Sprite`, so it is a leaf: do not nest children inside it. Wrap multiple `GifSprite` instances in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	import "pixi.js/gif";
9	import { GifSprite } from "pixi.js/gif";
10
11	const source = await Assets.load("animation.gif");
12
13	const gif = new GifSprite({
14	source,
15	autoPlay: true,
16	loop: true,
17	animationSpeed: 1,
18	});
19
20	gif.anchor.set(0.5);
21	gif.x = app.screen.width / 2;
22	gif.y = app.screen.height / 2;
23
24	app.stage.addChild(gif);
25	```
26
27	> [!NOTE]
28	> GIFs decode every frame into a separate canvas texture. For performance-critical animations with many frames, prefer a spritesheet with `AnimatedSprite` — it uses a single atlas texture and batches better on the GPU.
29
30	Related skills: `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-sprite` (`AnimatedSprite` for spritesheet-based animation), `pixijs-assets` (`Assets.load`, caching, unloading), `pixijs-ticker` (frame timing), `pixijs-performance` (texture memory).
31
32	## Constructor options
33
34	`GifSpriteOptions` extends `Omit<SpriteOptions, 'texture'>`; `texture` is managed internally (set from `source.textures[0]` and swapped per frame). All other `Sprite` options (`anchor`, `scale`, `tint`, `roundPixels`, etc.) are valid, and all `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
35
36	Leaf-specific options added by `GifSpriteOptions`:
37
38	\| Option \| Type \| Default \| Description \|
39	\| ---------------- \| --------------------------------- \| ---------- \| -------------------------------------------------------------------------------------------------------------------------- \|
40	\| `source` \| `GifSource` \| — \| Required. The parsed GIF data returned by `Assets.load('file.gif')`. Can be shared across multiple `GifSprite` instances. \|
41	\| `autoPlay` \| `boolean` \| `true` \| Start playback immediately on construction. If `false`, you must call `gif.play()` to begin. \|
42	\| `loop` \| `boolean` \| `true` \| Repeat the animation on reaching the last frame. When `false`, the sprite stops at the final frame and fires `onComplete`. \|
43	\| `animationSpeed` \| `number` \| `1` \| Multiplier on the GIF's native frame timing. `2` runs at double speed; `0.5` runs at half. \|
44	\| `autoUpdate` \| `boolean` \| `true` \| Connect playback to `Ticker.shared`. Set to `false` to drive updates yourself via `gif.update(ticker)`. \|
45	\| `fps` \| `number` \| `30` \| Fallback frame rate for GIFs that do not specify per-frame delays. \|
46	\| `onComplete` \| `() => void \\| null` \| `null` \| Called when a non-looping animation reaches the last frame. \|
47	\| `onLoop` \| `() => void \\| null` \| `null` \| Called each time a looping animation wraps around. \|
48	\| `onFrameChange` \| `(frame: number) => void \\| null` \| `null` \| Called every time the displayed frame index changes. \|
49	\| `scaleMode` \| `SCALE_MODE` \| `'linear'` \| Deprecated since 8.13.0 — pass `scaleMode` via `Assets.load(..., { data: { scaleMode } })` instead. \|
50
51	The constructor also accepts a bare `GifSource` as its sole argument (`new GifSprite(source)`), which is shorthand for `new GifSprite({ source })` using the defaults above.
52
53	## Core Patterns
54
55	### Setup and the side-effect import
56
57	```ts
58	import "pixi.js/gif";
59	import { Assets } from "pixi.js";
60	import { GifSprite } from "pixi.js/gif";
61
62	const source = a

People who liked this also viewed

6 picks

Type