Ein Pixi.js-Spiel, das Sie spielen können

Ich habe schon geschrieben, wann ich Pixi.js statt Three.js nehmen würde, und warum ein Canvas auf einer Business-URL eine Rechnung ist, keine Deko. Dann habe ich das 3D-Objekt geliefert, das man umkreisen kann. Diese Seite ist die andere Fläche: eine 2D-Bühne, die 60 fps halten muss, während Sie spielen. Das Spiel über diesem Absatz ist das Muster, das ich für einen Launch-Drop, einen Stand oder eine Loyalty-Schleife liefern würde — eine Insel, faul, entsorgbar. Der Satz, den Sie lesen, bleibt im Dokument.

Bewegen Sie den Korb. Fangen Sie Äpfel, Birnen, Scheiben. Weichen Sie den faulen Stücken aus. Ruhig, Arcade, Sturm. Das ist der kommerzielle Job: ein paar Dutzend Sprites, ein Ticker, Partikel, die sterben, wenn sie sollen. Kein Atlas-Download. Kein Phaser-Szenenstapel. Prozedurale Grafik, ein HUD im HTML, eine Schleife, die nachgibt, sobald Sie den Viewport verlassen.

1. Was Sie wirklich sehen

Pixi.js ist ein 2D-Renderer. Eine Display-Liste, Graphics-Primitive, ein Ticker. Die Äpfel, Birnen und Scheiben sind keine PNGs. Es sind Polygone auf der GPU, gebatched, im Loop gedreht. Der Obstgarten dahinter ist ein Graphics-Objekt — Himmel, Hügel, Bäume — plus ein paar Wolken, die treiben. Fangen Sie eine Frucht — eine Handvoll Funken entsteht und stirbt. Das ist der Job, in dem Pixi stark ist: viele billige 2D-Objekte, jeden Frame, ohne DOM-Knoten pro Sprite.

Es gibt keine Physik-Engine. Gravitation ist eine Zahl, die ich auf vy addiere. Kollision ist eine Box um den Kollektor. Combo ist ein Timer im selben Tick. Phaser gäbe Szenen, Arcade-Physik, Audio. Dieses Produkt brauchte diese Rechnung nicht. Es brauchte eine heiße Bühne in einem Next.js-Artikel. Ich deckle devicePixelRatio. Ich senke die Sternenzahl, wenn hardwareConcurrency niedrig ist. Sturm sind mehr Sprites, kein schwererer Shader. Das ist der Unterschied zwischen einem Minigame, das auf dem Recruiter-Laptop überlebt, und einem, das ein Mittelklasse-Android in der Bahn kocht.

2. Die Insel, nicht die Homepage

Auf dem Server gibt es kein WebGL. Diese Seite ist ein Static Export. Das Artikel-HTML ist im First Paint. Die Bühne ist eine Client-Insel: IntersectionObserver mit Root Margin, dann ein Dynamic Import von pixi.js, dann Application.init. Scrollen Sie nie hierher, laden Sie den Renderer nie. Gehen Sie weg, überspringt der Ticker den Frame. Beim Unmount zerstöre ich Application, Canvas und GPU-Kontext. Navigieren Sie in dieser App weg — der nächste Artikel erbt keine lebendige WebGL-Session.

Ich habe das nicht auf die Homepage gesetzt. Ein eifriger Canvas-Hero kämpft mit LCP und stiehlt dann INP. Recruiter können einen Scroll warten. Kunden auf einer Launch-URL können auf das Spiel warten, das sie spielen wollten. Sie können nicht auf eine Bühne warten, die die Überschrift blockiert hat. Punktestand, Leben, „Nochmal“ sitzen im HTML neben dem Canvas — nicht in eine Textur gemalt. Reduced motion verlangsamt den Ticker und kürzt die Funken; die Bühne spielt trotzdem, weil das eine Wahl ist, keine Animation.

• Text, Punktestand und Überschrift im Server-HTML. Canvas ist keine Crawler-Fläche.
• Start bei Intersection, nicht beim Route-Load.
• Destroy beim Unmount. Ticks außerhalb des Screens überspringen. prefers-reduced-motion achten.

3. Hier rohes Pixi.js. In der Produkt-App @pixi/react

Auf dieser Seite habe ich den Renderer selbst verdrahtet, damit die Insel ein Chunk bleibt und die Schleife klar ist: init, tick, destroy. In einer Next.js-App, in der die Bühne mit Warenkorb, Kampagnen-Flag oder Wallet sprechen muss, würde ich @pixi/react nehmen. Dieselbe GPU, eine Display-Liste im React-Tree, weniger Fußangeln beim Unmount. Der Fehler ist, den Wrapper für einen Kreis zu holen — oder ihn zu meiden, wenn zwanzig Sprites mit Redux synchron bleiben müssen. Den Wrapper nehmen, wenn das Produkt schon in Komponenten denkt.

4. Wann ich das für einen Kunden liefern würde

Ein Branded Minigame auf einem Produkt-Drop. Ein Stand, der auf einem billigen Laptop laufen muss. Ein Kinderboard, ein Loyalty-Fangspiel, eine Münzwalze, die CSS nicht hält. Eine Telegram-Mini-App, die schon eine Webview ist und keine zweite Engine züchten soll. Keine Marketing-Homepage, die sich „premium anfühlen“ sollte — der Brief ist weiter CSS und GSAP. Keine Schmuck-SKU zum Umkreisen: das ist Three.js. Kein Platformer mit Leveln und einer Physikwelt: starten Sie mit Phaser oder einer echten Game-Engine. Startet WebGL nicht, hat die Seite weiter die Regeln im HTML. Das Canvas ist der beste Weg zum Spiel, nie der einzige.

Fazit: spielen Sie auf der GPU, behalten Sie das Dokument

Teams holen Pixi.js, wenn der Kunde bleibt, weil die Bühne glatt ist, nicht weil die Überschrift klug ist. Sie sollten trotzdem ein Dokument holen: Titel, Regeln, Punktestand, ein Fallback-Satz. Ich liefere diese Trennung als Senior Web Engineer — Next.js-Inseln, gedeckeltes GPU-Budget, GSAP dort, wo die Seite noch eine Seite ist. Ist der Brief eine 2D-Bühne, die auf einer Business-URL 60 fps halten muss, schreiben Sie über das Formular die Sprite-Anzahl, ob es ein echtes Spiel oder eine Branded-Schleife ist, und ob dieselbe URL ranken muss. Wir fangen nicht damit an, ein Canvas auf die Homepage zu werfen, „damit das Portfolio spielt.“