Update PixiJS 7.x -> 8.x

app/package.json

@@ -27,6 +27,6 @@
     "@gg/core": "0.x",
     "js-yaml": "4.x",
     "pako": "2.x",
-    "pixi.js": "7.x"
+    "pixi.js": "8.x"
   }
 }

app/src/index.ts

@@ -334,7 +334,6 @@ document
     setGridVisible(false);
     state.flowPlayer?.hide();
 
-    // @ts-ignore
     const dataUri = await app.renderer.extract.image(viewport);
 
     const link = document.createElement("a");

app/src/renderer/assets.ts

@@ -11,12 +11,12 @@ await Assets.load({
 
 import spritesheetData from "../assets/spritesheet.png?base64";
 
-await Assets.load({
+const imageData = await Assets.load({
   name: "spritesheet",
   src: `data:image/png;base64,${spritesheetData}`,
 });
 
-export const spritesheet = new Spritesheet(Assets.get("spritesheet"), {
+export const spritesheet = new Spritesheet(imageData, {
   frames: {
     systemATopLeft: {
       frame: { x: 0, y: 0, w: 8, h: 8 },
@@ -178,3 +178,7 @@ export const spritesheet = new Spritesheet(Assets.get("spritesheet"), {
 });
 
 await spritesheet.parse();
+
+spritesheet.textureSource.autoGenerateMipmaps = true;
+spritesheet.textureSource.scaleMode = "nearest";
+spritesheet.textureSource.addressMode = "clamp-to-edge";

app/src/renderer/grid.ts

@@ -1,4 +1,4 @@
-import { Graphics, SCALE_MODES, TilingSprite } from "pixi.js";
+import { Graphics, TilingSprite } from "pixi.js";
 import { BlockSize } from "../helpers.js";
 import { app } from "./pixi.js";
 import viewport from "./viewport.js";
@@ -8,28 +8,28 @@ let grid: TilingSprite;
 const canvasContainer = document.getElementById("canvas") as HTMLDivElement;
 
 const gridGraphic = new Graphics()
-  .beginFill(0xcccccc)
-  .drawRect(0, 0, BlockSize, BlockSize)
-  .endFill()
-  .beginFill(0xdddddd)
-  .drawRect(1, 1, BlockSize - 1, BlockSize - 1)
-  .endFill();
+  .rect(0, 0, BlockSize, BlockSize)
+  .fill(0xcccccc)
+  .rect(1, 1, BlockSize - 1, BlockSize - 1)
+  .fill(0xdddddd);
 
 const gridTexture = app.renderer.generateTexture(gridGraphic);
 
-gridTexture.baseTexture.scaleMode = SCALE_MODES.LINEAR;
+gridTexture.source.antialias = true;
+gridTexture.source.autoGenerateMipmaps = true;
+gridTexture.source.scaleMode = "linear";
+gridTexture.source.addressMode = "clamp-to-edge";
 
-grid = new TilingSprite(
-  gridTexture,
-  canvasContainer.clientWidth,
-  canvasContainer.clientHeight,
-);
+grid = new TilingSprite({
+  texture: gridTexture,
+  width: canvasContainer.clientWidth,
+  height: canvasContainer.clientHeight,
+});
 
 grid.x = viewport.left;
 grid.y = viewport.top;
 grid.zIndex = -1;
 
-// @ts-ignore
 viewport.addChild(grid);
 
 export function redrawGrid(): void {

app/src/renderer/pixi.ts

@@ -1,17 +1,7 @@
-import {
-  Application,
-  BaseTexture,
-  MIPMAP_MODES,
-  SCALE_MODES,
-  WRAP_MODES,
-  settings,
-} from "pixi.js";
+import { Application, AbstractRenderer } from "pixi.js";
 
-BaseTexture.defaultOptions.mipmap = MIPMAP_MODES.ON;
-BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;
-BaseTexture.defaultOptions.wrapMode = WRAP_MODES.REPEAT;
-
-settings.ROUND_PIXELS = true;
+AbstractRenderer.defaultOptions.roundPixels = true;
+AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat = false;
 
 const canvasContainer = document.getElementById("canvas") as HTMLDivElement;
 
@@ -21,12 +11,17 @@ canvasContainer.addEventListener("contextmenu", event => {
   event.stopPropagation();
 });
 
-export const app = new Application({
+export const app = new Application();
+
+await app.init({
   backgroundAlpha: 0,
-  resizeTo: canvasContainer,
-  autoDensity: true,
   resolution: window.devicePixelRatio,
+  width: canvasContainer.clientWidth,
+  height: canvasContainer.clientHeight,
+  autoDensity: true,
   antialias: false,
+  autoStart: false,
+  sharedTicker: false,
   eventMode: "none",
   eventFeatures: {
     move: true,
@@ -46,4 +41,4 @@ export function tick() {
 }
 
 // Add PixiJS to the DOM.
-canvasContainer.replaceChildren(app.view as unknown as Node);
+canvasContainer.replaceChildren(app.canvas as unknown as Node);

app/src/renderer/systemLinker.ts

@@ -12,14 +12,13 @@ export default class SystemLinker extends Container {
 
     this.line = new Graphics();
 
-    // @ts-ignore
     this.addChild(this.line);
   }
 
   setPosition(x1: number, y1: number, x2: number, y2: number): void {
     this.line.clear();
-    this.line.lineStyle(BlockSize / 4, 0xffffff);
     this.line.moveTo(x1 * BlockSize, y1 * BlockSize);
     this.line.lineTo(x2 * BlockSize, y2 * BlockSize);
+    this.line.stroke({ width: BlockSize / 4, color: "0xffffff" });
   }
 }

app/src/renderer/systemSelector.ts

@@ -20,23 +20,20 @@ export default class SystemSelector extends Container {
     this.topLeft.width = BlockSize;
     this.topLeft.height = BlockSize;
 
-    // @ts-ignore
     this.addChild(this.topLeft);
 
     this.topRight = new Sprite(spritesheet.textures.systemSelectorTopRight);
 
     this.topRight.width = BlockSize;
     this.topRight.height = BlockSize;
 
-    // @ts-ignore
     this.addChild(this.topRight);
 
     this.bottomLeft = new Sprite(spritesheet.textures.systemSelectorBottomLeft);
 
     this.bottomLeft.width = BlockSize;
     this.bottomLeft.height = BlockSize;
 
-    // @ts-ignore
     this.addChild(this.bottomLeft);
 
     this.bottomRight = new Sprite(
@@ -46,7 +43,6 @@ export default class SystemSelector extends Container {
     this.bottomRight.width = BlockSize;
     this.bottomRight.height = BlockSize;
 
-    // @ts-ignore
     this.addChild(this.bottomRight);
   }
 

app/src/renderer/viewport.ts

@@ -246,7 +246,6 @@ const viewport = new Viewport(
 
 viewport.sortableChildren = true;
 
-// @ts-ignore
 app.stage.addChild(viewport);
 
 export default viewport;

app/src/simulator/api.ts

@@ -7,7 +7,7 @@ import {
   SimulatorLink,
   SimulatorSystemDirectionType,
 } from "@gg/core";
-import { Sprite, Text, SCALE_MODES, Container } from "pixi.js";
+import { Sprite, Text, Container } from "pixi.js";
 import { spritesheet } from "../renderer/assets.js";
 import { BlockSize } from "../helpers.js";
 import { app, tick } from "../renderer/pixi.js";
@@ -46,7 +46,6 @@ export async function loadSimulation(json: string): Promise<void> {
             container.removeChildren();
 
             for (const objectToRender of getObjectsToRender()) {
-              // @ts-ignore
               container.addChild(objectToRender);
             }
 
@@ -58,7 +57,6 @@ export async function loadSimulation(json: string): Promise<void> {
               );
 
               for (const objectToRender of state.flowPlayer.getObjectsToRender()) {
-                // @ts-ignore
                 container.addChild(objectToRender);
               }
             }
@@ -94,14 +92,13 @@ const container = new Container();
 
 container.zIndex = 0;
 
-// @ts-ignore
 viewport.addChild(container);
 
 // Ticker to execute a step of the simulation.
-app.ticker.add<void>(deltaTime => {
+app.ticker.add<void>(t => {
   if (state.flowPlayer) {
     if (state.flowPlay) {
-      state.flowPlayer.update(deltaTime, state.flowPlayMode, state.flowSpeed);
+      state.flowPlayer.update(t.deltaTime, state.flowPlayMode, state.flowSpeed);
       state.flowKeyframe = Math.max(0, state.flowPlayer.getKeyframe());
     }
 
@@ -236,17 +233,20 @@ function getObjectsToRender(): (Sprite | Text)[] {
         } else if (obj.type === SimulatorObjectType.SystemTitle) {
           const { blackbox } = obj as SimulatorSubsystem;
 
-          const title = new Text((obj as SimulatorSystemTitle).chars, {
-            fontFamily: "ibm",
-            fontSize: BlockSize,
+          const title = new Text({
+            text: (obj as SimulatorSystemTitle).chars,
+            style: {
+              fontFamily: "ibm",
+              fontSize: BlockSize,
+            },
+            resolution: 2,
+            roundPixels: false,
           });
 
           title.x = (i - boundaries.translateX) * BlockSize;
           title.y = (j - boundaries.translateY) * BlockSize;
 
           title.style.fill = blackbox ? "ffffff" : "000000";
-          title.resolution = 2;
-          title.texture.baseTexture.scaleMode = SCALE_MODES.LINEAR;
 
           toDraw.push(title);
         }