Migrate from PixiJS v6 to v8 #896

MarkH817 · 2026-02-09T19:28:34Z

Summary

Updated pixi.js from v6 to v8.16 and related PixiJS dependencies
Removed PixiJS filters that have merged under pixi-filters or pixi.js
Replacing pixi-tagged-text with ~~pixi-tagged-text / pixi-glyphs~~ Text with tagStyles from pixi.js v8.16
Replaced @pixi-essentials/gradients with FillGradient from pixi.js
Refactoring around deprecated / breaking changes between migrations to v7 and to v8
- Drawing method for Graphics updated
- DisplayObject was removed entirely and replaced with Container
- Sprite and Graphics can no longer use addChild()
  - Either replaced with Container or added a wrapping Container to maintain layout
- container.getLocalBounds() does not take any out parameters anymore and returns a cached Bounds instance
  - Used bounds.clone() in DisplayUtil.ts to avoid mutating the cached Bound
- Added isWorldVisible() to DisplayUtil since it was removed in PixiJS v8 with no replacement
Removed Array/String prototype mutations in utils.coffee
- Necessary because the Array methods added were enumerable and crashed initialization in pixi.js v8
- Utils.clone_object() was updated to handle cloning arrays with array.map()
Added patch-package for modifying pixi.js's behavior for returning stale bounds if modified in the same frame
- Necessary until fix: Graphics getLocalBounds stale between ops pixijs/pixijs#11886 is released

- Add text utility to use `TaggedText`'s `textContainer` dimensions - Adjust Jest config to use pixi-tagged-text's CommonJS build, since their package doesn't use `type: "module"`

- 'pixi-tagged-text' requires `--legacy-peer-deps` for PixiJS v7 - It is still compatible for v7 - Can later be replaced by 'pixi-glyphs' in PixiJS v8 - Swap `interaction` boolean with `eventMode` enum (true = 'static', false = 'auto') - Set line height to 1 for the constraints' styled text - Change the RGBA hex number to string of same color (RGB hex is fine as is) - Import available filters from 'pixi.js' instead of individual packages - ColorMatrixFilter - FXAAFilter - BlurFilter - Import DropShadowFilter from 'pixi-filters' - Use `Ticker.targetFPMS` instead of `settings.Target_FPMS`

- Restores the ability to track the globalMouse position

- Set anchor to center for rotating texture renders - Render the wrapper Container to avoid clipping - Change reference from DisplayObject to Container - DisplayObjects are removed in Pixi.js v8 and recommended to use Container

- `pixi.js` re-exports the `@pixi/events` package - In PixiJS v8, the events sub-package will not exist

- Update logic to handle `Bounds` type returned from `display.getBounds()` - Swap `DisplayObject` with `Container` - Change `Container.name` to `Container.label` for debugger - Add `DisplayUtil.isWorldVisible()` since it was removed from PixiJS v8 - Update `Text` constructor params to object - Update `TextureUtil` to use `Assets.load()` - Scale SVG resolutions by 2 on initial load, rather than on Sprite creation - Update `index.html.tmpl` to handle `app.run()` changing to async - Update `Ticker.add()` signature to handle `Ticker` parameter - Change `pixi.view` to `pixi.canvas` - Add `LegacyPatchUtil` to handle modified native prototypes - Prevent custom prototypes from breaking PixiJS initialization - Update `Graphics` methods from deprecated to newer methods - Add `fill()` and `stroke()` after paths are defined to draw the graphics - Swap `GradientFactory.createLinearGradient()` with `FillGradient` from `pixi.js` - Despite `@pixi-essentials/gradients` having an updated package for PixiJS v8, it has an issue trying to make the base texture

- `Sprite` and `Graphics` calls to `addChild()` method has been deprecated - Replacing with `Container` where possible - Adding `Container` wrapper when replacement isn't possible - Replace `@override` JSDoc comments with TypeScript's `override` keyword - Change `HighlightBox` to extend `ContainerObject` instead of `GraphicsObject` - Change `ConstraintBar` to use `ContainerObject` with a `Graphics` added instead of using `GraphicsObject`

- Fixes changed behavior around getting content dimensions, since masks are included in the calculations

- Add patch-package to apply PixiJS patch

- Fix thumbnail from floating away by grouping the image goal background and the thumbnail into a container - Center the thumbnail on that container only when changing the thumbnail rather than on each resize event

- Removed extra `fill()` call on lock background - Previous implementation had an extra `beginFill()` call that was ignored in PixiJS <7 but was painting over the whole graphic in v8.

- Text dimension utility function was previously meant for pixi-tagged-text, but the dimension calculation was fixed for the pixi-glyphs package

- RankScroll was previously including the height of top/bottom RankBoards despite being masked but only on creation - On window resize the position is fixed - Call `onResize()` in MissionClearedPanel once on `lateUpdate` to fix the position

- Added `"type": "module"` to accurately reflect the compiled file type - patch-package needed the --exclude "^$" parameter to modify package.json

- Add `texture.source.update()` call for NGL sprite

- Check if borderColor and bgColor parameters are defined before drawing

- Updates `clone_object` to not use `array.clone()`

- Adjusts brightness to better match former visual

luxaritas

Thank you for all the work on this - really glad to see this (nontrivial) upgrade happen and some bonus cleanups to boot! And it looks like you've done a great job on QA.

Something that definitely needs to be looked at before merging is that it looks like screenshots are broken (see for example https://eternadev.org/sites/default/files/chat_screens/48290_1770939079.png).

One additional subtle issue is the specbox (hotkey S) now has a scrollbar when initially opened even though the content shouldnt be overflowing the window - I assume some measurement something has changed slightly, maybe text? If this isn't a quick fix it's so minor I'm happy for this to be just a filed issue for someone to address later.

luxaritas · 2026-02-12T22:48:48Z

patches/pixi.js+8.16.0.patch

+@@ -37,9 +37,9 @@ const measureMixin = {
+     const localBoundsCacheData = this._localBoundsCacheData;
+     localBoundsCacheData.index = 1;
+     localBoundsCacheData.didChange = false;
+-    if (localBoundsCacheData.data[0] !== this._didViewChangeTick) {
+    if (localBoundsCacheData.data[0] !== ((this._didViewChangeTick & 0xffff) << 16) | (this._didContainerChangeTick & 0xffff)) {
+       localBoundsCacheData.didChange = true;
+-      localBoundsCacheData.data[0] = this._didViewChangeTick;
+      localBoundsCacheData.data[0] = ((this._didViewChangeTick & 0xffff) << 16) | (this._didContainerChangeTick & 0xffff);
+     }
+     checkChildrenDidChange(this, localBoundsCacheData);
+     if (localBoundsCacheData.didChange) {


Per a comment I made in Slack, I believe we can remove this part of the patch since the issue was actually due to bounds mutation

luxaritas · 2026-02-12T23:04:35Z

src/eterna/constraints/ConstraintBox.ts

            this._icon.removeChildren();
-            this._icon.texture = Texture.EMPTY;
+
+            const iconYOffset = this._forMissionScreen ? 2.5 : 5;


Out of curiosity, do you know why this is now necessary?

luxaritas · 2026-02-12T23:16:53Z

src/eterna/constraints/ConstraintBox.ts

                fontSize: 11,
                fill: 0xC0DCE7,
-                letterSpacing: -0.5,
-                align: 'center'


This is still desirable - see eg puzzle 13145953 on dev, where I've adjusted the min energy constraint to be multiline with two different line lengths

luxaritas · 2026-02-12T23:45:07Z

src/eterna/EternaApp.ts

-            resolution: devicePixelRatio
+            resolution: devicePixelRatio,
+            // Maintain renderer type from pixi.js before v8
+            preference: 'webgl'


What's the rationale for this - isn't the default already webgl (and if the default changed to webgpu, wouldn't we want to allow that)?

luxaritas · 2026-02-12T23:54:53Z

src/flashbang/util/TextUtil.ts

+    /**
+     * Returns the height/width of a text sprite.
+     */
+    public static getTextDimensions(text: Text): {height:number, width: number} {


Why create a util for this as opposed to just calling getLocalBounds directly?

MarkH817 added 30 commits January 16, 2026 14:53

Install pixi-tagged-text and replace MultiStyleText

a0f5be7

- Add text utility to use `TaggedText`'s `textContainer` dimensions - Adjust Jest config to use pixi-tagged-text's CommonJS build, since their package doesn't use `type: "module"`

Uninstall pixi-multistyle-text

bc38600

Set eventMode to dynamic for pixi.stage

9426495

- Restores the ability to track the globalMouse position

Fix renderToTexture for satellite textures

2ef3822

- Set anchor to center for rotating texture renders - Render the wrapper Container to avoid clipping - Change reference from DisplayObject to Container - DisplayObjects are removed in Pixi.js v8 and recommended to use Container

Remove filter dependencies that are re-exported by other packages

bb48f6e

Swap '@pixi/events' references to 'pixi.js'

4d850a6

- `pixi.js` re-exports the `@pixi/events` package - In PixiJS v8, the events sub-package will not exist

Update PixiJS packages for v8

b8c82bf

Replace pixi-tagged-text with pixi-glyphs

ce78cb1

Update filter parameters for Blur, Antialias, and Color Replace

a5dc244

Fix missing fill/stroke for multi-shape Graphics

24360c2

Move ScrollBox mask from content to display

4645d2f

- Fixes changed behavior around getting content dimensions, since masks are included in the calculations

Apply PixiJS patch to fix layout calculations

f693d4f

- Add patch-package to apply PixiJS patch

Fix Mission Intro Panel thumbnail positioning

039ed18

- Fix thumbnail from floating away by grouping the image goal background and the thumbnail into a container - Center the thumbnail on that container only when changing the thumbnail rather than on each resize event

Fix lock background graphic

3dd595c

- Removed extra `fill()` call on lock background - Previous implementation had an extra `beginFill()` call that was ignored in PixiJS <7 but was painting over the whole graphic in v8.

Simplify text dimension workaround for Glyphs

177ff6e

- Text dimension utility function was previously meant for pixi-tagged-text, but the dimension calculation was fixed for the pixi-glyphs package

Merge branch 'dev' into feature/update-to-pixijs-8

e8439d8

Update to PixiJS v8.16

885758a

Fix scrollbar appearing early for GameDropdown

805ff5f

Patch pixi-glyphs package.json to fix Jest

407c8c2

- Added `"type": "module"` to accurately reflect the compiled file type - patch-package needed the --exclude "^$" parameter to modify package.json

Remove pixi.js v8.15 patch

ae39947

Fix 3D model render

944f9f9

- Add `texture.source.update()` call for NGL sprite

Fix NGL Sprite scaling by adding wrapper Container

5d4902f

Remove size setting on NGL Sprite

bc24f8e

Remove other deprecated addChild call

0ec0d07

Fix FileInputObject graphic drawn

7c084db

- Check if borderColor and bgColor parameters are defined before drawing

Remove modifications to Array/String prototypes

69343e7

- Updates `clone_object` to not use `array.clone()`

MarkH817 added 4 commits February 10, 2026 20:47

Swap pixi-glyphs for pixi.js's Text

7fd7208

Remove packages replaced by PixiJS v8 features

9789859

Fix icon position in ConstraintBox

8294b8b

Adjust Nucleotide Palette graphics brightness

e35e1db

- Adjusts brightness to better match former visual

MarkH817 marked this pull request as ready for review February 11, 2026 23:50

luxaritas reviewed Feb 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate from PixiJS v6 to v8 #896

Migrate from PixiJS v6 to v8 #896

MarkH817 commented Feb 9, 2026 •

edited

Loading

Uh oh!

luxaritas left a comment

Uh oh!

luxaritas Feb 12, 2026

Uh oh!

luxaritas Feb 12, 2026

Uh oh!

luxaritas Feb 12, 2026

Uh oh!

luxaritas Feb 12, 2026

Uh oh!

luxaritas Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Migrate from PixiJS v6 to v8 #896

Are you sure you want to change the base?

Migrate from PixiJS v6 to v8 #896

Conversation

MarkH817 commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

luxaritas left a comment

Choose a reason for hiding this comment

Uh oh!

luxaritas Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

luxaritas Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

luxaritas Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

luxaritas Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

luxaritas Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MarkH817 commented Feb 9, 2026 •

edited

Loading