pixijs-migration-v8

Name: pixijs-migration-v8
Author: pixijs

2.6kinstalls15forks

How to install pixijs-migration-v8?

pixijs/pixijs-skills/pixijs-migration-v8

$npx -y skills add pixijs/pixijs-skills --skill pixijs-migration-v8

Installs into the current project.

Summary

Use this skill when upgrading to PixiJS v8 from v7 or diagnosing broken v7 code after an upgrade. Covers async app.init, single pixi.js package (deprecated @pixi/* sub-packages), Graphics shape-then-fill, BaseTexture → TextureSource, shader/uniform rework, ParticleContainer+Parti

Files · 1

View on GitHub

SKILL.md

1	This skill is a breaking-change checklist for bringing a v7 codebase up to v8. Work top-down through the categories; the list maps each v7 pattern to its v8 replacement.
2
3	## Quick Start
4
5	Install the single package, then port in this order: imports → Application init → Graphics → Text → events → shaders/filters → cleanup.
6
7	```ts
8	const app = new Application();
9	await app.init({ width: 800, height: 600 });
10	document.body.appendChild(app.canvas);
11
12	const g = new Graphics()
13	.rect(0, 0, 100, 100)
14	.fill({ color: 0xff0000 })
15	.stroke({ width: 2, color: 0x000000 });
16	app.stage.addChild(g);
17	```
18
19	Related skills: `pixijs-application` (async init), `pixijs-scene-graphics` (new fill/stroke API), `pixijs-custom-rendering` (shader rework), `pixijs-scene-text` (Text constructor changes), `pixijs-performance` (destroy patterns).
20
21	## Migration Checklist: v7 to v8
22
23	Work through each category. Each item shows the expected v8 pattern and the v7 pattern that must be replaced.
24
25	### Initialization
26
27	Async app.init() -- Expected:
28
29	```ts
30	const app = new Application();
31	await app.init({ width: 800, height: 600 });
32	document.body.appendChild(app.canvas);
33	```
34
35	Fail: passing options to `new Application({...})` and using synchronously.
36
37	app.canvas replaces app.view -- `app.view` emits a deprecation warning.
38
39	Application type parameter -- Expected: `new Application<Renderer<HTMLCanvasElement>>()`. Fail: `new Application<HTMLCanvasElement>()`.
40
41	### Imports
42
43	Single package -- Expected:
44
45	```ts
46	import { Sprite, Application, Assets, Graphics } from "pixi.js";
47	```
48
49	Fail: importing from any of the deprecated v7 core `@pixi/*` sub-packages (see list below). Supplemental packages like `@pixi/sound` are still valid and should continue to be used.
50
51	Deprecated `@pixi/*` packages (never use, any version):
52	`@pixi/accessibility`, `@pixi/app`, `@pixi/assets`, `@pixi/compressed-textures`, `@pixi/core`, `@pixi/display`, `@pixi/events`, `@pixi/extensions`, `@pixi/extract`, `@pixi/filter-alpha`, `@pixi/filter-blur`, `@pixi/filter-color-matrix`, `@pixi/filter-displacement`, `@pixi/filter-fxaa`, `@pixi/filter-noise`, `@pixi/graphics`, `@pixi/mesh`, `@pixi/mesh-extras`, `@pixi/mixin-cache-as-bitmap`, `@pixi/mixin-get-child-by-name`, `@pixi/mixin-get-global-position`, `@pixi/particle-container`, `@pixi/prepare`, `@pixi/sprite`, `@pixi/sprite-animated`, `@pixi/sprite-tiling`, `@pixi/spritesheet`, `@pixi/text`, `@pixi/text-bitmap`, `@pixi/text-html`.
53
54	Custom builds -- Set `skipExtensionImports: true` and import only needed extensions:
55
56	```ts
57	import "pixi.js/graphics";
58	import "pixi.js/text";
59	import "pixi.js/events";
60	import { Application } from "pixi.js";
61	await app.init({ skipExtensionImports: true });
62	```
63
64	Note: `manageImports: false` is still accepted but `@deprecated since 8.1.6`; prefer `skipExtensionImports: true`.
65
66	Extensions not auto-imported (require explicit import even with default auto-imports enabled):
67	`pixi.js/advanced-blend-modes`, `pixi.js/unsafe-eval`, `pixi.js/prepare`, `pixi.js/math-extras`, `pixi.js/dds`, `pixi.js/ktx`, `pixi.js/ktx2`, `pixi.js/basis`.
68
69	Community filters -- Expected: `import { AdjustmentFilter } from 'pixi-filters/adjustment'`. Fail: `@pixi/filter-adjustment`.
70
71	### Graphics API
72
73	Shape-then-fill -- Expected:
74
75	```ts
76	const g = new Graphics().rect(50, 50, 100, 100).fill(0xff0000);
77	```
78
79	Fail: `beginFill(0xff0000).drawRect(50, 50, 100, 100).endFill()`.
80
81	Renamed shape methods:
82
83	\| v7 \| v8 \|
84	\| -------------------- \| ------------- \|
85	\| `drawRect` \| `rect` \|
86	\| `drawCircle` \| `circle` \|
87	\| `drawEllipse` \| `ellipse` \|
88	\| `drawPolygon` \| `poly` \|
89	\| `drawRoundedRect` \| `roundRect` \|
90	\| `drawStar` \| `star` \|
91	\| `drawRegularPolygon` \| `regularPoly` \|
92	\| `drawRoundedPolygon` \| `roundPoly` \|
93	\| `drawRoundedShape` \| `roundShape` \|
94	\| `drawChamferRect` \| `chamferRect` \|
95	\| `drawFilletRect` \| `filletRect` \|
96
97	Fill replaces beginFill/beginTextureFill -- Expected:
98
99	```ts
100	graphics
101	.rect(0, 0, 100, 100)
102	.fill({ texture: Texture.WHITE, alpha: 0.5, color: 0xff0000 });
103	```
104
105	Fail: `beginFill(color, alpha)` or `beginTextureFill({ texture, alpha, color })`.
106
107	Stroke replaces lineStyle -- Expected:
108
109	```ts
110	graphics.rect(0, 0, 100, 100).fill("blue").stroke({ width: 2, color: "white" });
111	```
112
113	Fail: `lineStyle(2, 'white')` or `lin

People who liked this also viewed

6 picks

Type

pixijs-migration-v8

2.6kinstalls15forks

View on GitHub

How to install pixijs-migration-v8?

pixijs/pixijs-skills/pixijs-migration-v8

$npx -y skills add pixijs/pixijs-skills --skill pixijs-migration-v8

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	This skill is a breaking-change checklist for bringing a v7 codebase up to v8. Work top-down through the categories; the list maps each v7 pattern to its v8 replacement.
2
3	## Quick Start
4
5	Install the single package, then port in this order: imports → Application init → Graphics → Text → events → shaders/filters → cleanup.
6
7	```ts
8	const app = new Application();
9	await app.init({ width: 800, height: 600 });
10	document.body.appendChild(app.canvas);
11
12	const g = new Graphics()
13	.rect(0, 0, 100, 100)
14	.fill({ color: 0xff0000 })
15	.stroke({ width: 2, color: 0x000000 });
16	app.stage.addChild(g);
17	```
18
19	Related skills: `pixijs-application` (async init), `pixijs-scene-graphics` (new fill/stroke API), `pixijs-custom-rendering` (shader rework), `pixijs-scene-text` (Text constructor changes), `pixijs-performance` (destroy patterns).
20
21	## Migration Checklist: v7 to v8
22
23	Work through each category. Each item shows the expected v8 pattern and the v7 pattern that must be replaced.
24
25	### Initialization
26
27	Async app.init() -- Expected:
28
29	```ts
30	const app = new Application();
31	await app.init({ width: 800, height: 600 });
32	document.body.appendChild(app.canvas);
33	```
34
35	Fail: passing options to `new Application({...})` and using synchronously.
36
37	app.canvas replaces app.view -- `app.view` emits a deprecation warning.
38
39	Application type parameter -- Expected: `new Application<Renderer<HTMLCanvasElement>>()`. Fail: `new Application<HTMLCanvasElement>()`.
40
41	### Imports
42
43	Single package -- Expected:
44
45	```ts
46	import { Sprite, Application, Assets, Graphics } from "pixi.js";
47	```
48
49	Fail: importing from any of the deprecated v7 core `@pixi/*` sub-packages (see list below). Supplemental packages like `@pixi/sound` are still valid and should continue to be used.
50
51	Deprecated `@pixi/*` packages (never use, any version):
52	`@pixi/accessibility`, `@pixi/app`, `@pixi/assets`, `@pixi/compressed-textures`, `@pixi/core`, `@pixi/display`, `@pixi/events`, `@pixi/extensions`, `@pixi/extract`, `@pixi/filter-alpha`, `@pixi/filter-blur`, `@pixi/filter-color-matrix`, `@pixi/filter-displacement`, `@pixi/filter-fxaa`, `@pixi/filter-noise`, `@pixi/graphics`, `@pixi/mesh`, `@pixi/mesh-extras`, `@pixi/mixin-cache-as-bitmap`, `@pixi/mixin-get-child-by-name`, `@pixi/mixin-get-global-position`, `@pixi/particle-container`, `@pixi/prepare`, `@pixi/sprite`, `@pixi/sprite-animated`, `@pixi/sprite-tiling`, `@pixi/spritesheet`, `@pixi/text`, `@pixi/text-bitmap`, `@pixi/text-html`.
53
54	Custom builds -- Set `skipExtensionImports: true` and import only needed extensions:
55
56	```ts
57	import "pixi.js/graphics";
58	import "pixi.js/text";
59	import "pixi.js/events";
60	import { Application } from "pixi.js";
61	await app.init({ skipExtensionImports: true });
62	```
63
64	Note: `manageImports: false` is still accepted but `@deprecated since 8.1.6`; prefer `skipExtensionImports: true`.
65
66	Extensions not auto-imported (require explicit import even with default auto-imports enabled):
67	`pixi.js/advanced-blend-modes`, `pixi.js/unsafe-eval`, `pixi.js/prepare`, `pixi.js/math-extras`, `pixi.js/dds`, `pixi.js/ktx`, `pixi.js/ktx2`, `pixi.js/basis`.
68
69	Community filters -- Expected: `import { AdjustmentFilter } from 'pixi-filters/adjustment'`. Fail: `@pixi/filter-adjustment`.
70
71	### Graphics API
72
73	Shape-then-fill -- Expected:
74
75	```ts
76	const g = new Graphics().rect(50, 50, 100, 100).fill(0xff0000);
77	```
78
79	Fail: `beginFill(0xff0000).drawRect(50, 50, 100, 100).endFill()`.
80
81	Renamed shape methods:
82
83	\| v7 \| v8 \|
84	\| -------------------- \| ------------- \|
85	\| `drawRect` \| `rect` \|
86	\| `drawCircle` \| `circle` \|
87	\| `drawEllipse` \| `ellipse` \|
88	\| `drawPolygon` \| `poly` \|
89	\| `drawRoundedRect` \| `roundRect` \|
90	\| `drawStar` \| `star` \|
91	\| `drawRegularPolygon` \| `regularPoly` \|
92	\| `drawRoundedPolygon` \| `roundPoly` \|
93	\| `drawRoundedShape` \| `roundShape` \|
94	\| `drawChamferRect` \| `chamferRect` \|
95	\| `drawFilletRect` \| `filletRect` \|
96
97	Fill replaces beginFill/beginTextureFill -- Expected:
98
99	```ts
100	graphics
101	.rect(0, 0, 100, 100)
102	.fill({ texture: Texture.WHITE, alpha: 0.5, color: 0xff0000 });
103	```
104
105	Fail: `beginFill(color, alpha)` or `beginTextureFill({ texture, alpha, color })`.
106
107	Stroke replaces lineStyle -- Expected:
108
109	```ts
110	graphics.rect(0, 0, 100, 100).fill("blue").stroke({ width: 2, color: "white" });
111	```
112
113	Fail: `lineStyle(2, 'white')` or `lin

People who liked this also viewed

6 picks

Type