Migrating Pixi.js v7 → v8: typical mistakes

PixiJSsenior

A colleague is migrating a game from Pixi.js v7 to v8. They sent a PR that should replace Application, Loader, Graphics, and Ticker with the new API. It launches, but: TypeErrors in the console, crashes in production, and some functionality doesn't work at all. Walk through the files in the left sidebar and find every place where v7 API is still present or v8 API is used incorrectly. It's 5 files — switch between them via the sidebar.

src/game/initApp.ts +11 −02 проблем

1-// initApp.ts — pending v8 migration

1+import { Application } from 'pixi.js'

2+

3+const app = new Application({

4+ width: 1024,

5+ height: 768,

6+ backgroundColor: 0x1099bb,

7+ antialias: true,

8+})

9+

10+document.body.appendChild(app.view as HTMLCanvasElement)

11+

12+export { app }

Шаг 1 из 13

Pixi v8 — what changed

Pixi v8 landed in 2024 and brought the biggest set of breaking changes in the library's history. Main areas: 1. **Application — async init**. The constructor no longer takes options. 2. **Loader removed**. Assets is the only way to load resources. 3. **Graphics API rewritten**. beginFill/drawRect/endFill → rect/fill. 4. **Ticker callback signature**. delta: number → ticker: Ticker. 5. **interactive/buttonMode deprecated**. eventMode + cursor. 6. **app.view → app.canvas**. Now you'll walk through a migration PR across 5 files. Use the left sidebar to switch between files. Start with `initApp.ts`.

ArchCase

ArchCase

Migrating Pixi.js v7 → v8: typical mistakes

Pixi v8 — what changed