Un joc Pixi.js pe care îl puteți juca

Am scris deja când aș alege Pixi.js peste Three.js și de ce o pânză pe adresa URL a unei afaceri este o factură, nu o decorație. Apoi am expediat obiectul 3D pe care îl puteți orbita. Această pagină este cealaltă suprafață: o scenă 2D care trebuie să aibă 60 fps în timp ce joci. Jocul de deasupra acestui paragraf este modelul pe care l-aș trimite pentru o lansare, un stand sau o buclă de loialitate – o insulă, leneș, de unică folosință. Propoziția pe care o citiți este încă în document.

Mutați coșul. Prinde mere, pere, felii. Evita-i pe cei putrezi. Calm, arcade, furtună. Aceasta este treaba comercială: câteva zeci de sprites, un ticker, particule care mor când ar trebui. Fără descărcare de atlas de sprite. Fără stivă de scene Phaser. Grafică de procedură, un HUD în HTML, o buclă care cedează când părăsiți fereastra.

1. La ce te uiți de fapt

Pixi.js este un redator 2D. O listă de afișare, primitive grafice, un ticker. Merele, perele și feliile nu sunt PNG-uri. Sunt poligoane desenate pe GPU, grupate, rotite în buclă. Livada din spatele lor este un obiect Graphics – cer, dealuri, copaci – plus câțiva nori care plutesc. Prinde un fruct și o mână de scântei apar, apoi mori. Aceasta este treaba la care se pricepe Pixi: multe obiecte 2D ieftine, fiecare cadru, fără un nod DOM per sprite.

Nu există motor de fizică. Gravitația este un număr pe care îl adaug la vy. Coliziunea este o cutie în jurul colectorului. Combo este un cronometru în același tick. Phaser ți-ar oferi scene, fizică arcade, audio. Acest produs nu avea nevoie de acea factură. Avea nevoie de o etapă fierbinte în interiorul unui articol Next.js. Limitez dispozitivulPixelRatio. Renunț la numărul de stele atunci când hardwareConcurrency este scăzut. Storm este mai mult sprite, nu un shader mai greu. Aceasta este diferența dintre un minijoc care supraviețuiește laptopului unui recrutor și unul care gătește un Android de gamă medie în metrou.

2. Insula, nu pagina de pornire

Nu există WebGL pe server. Această pagină este un export static. Articolul HTML este în prima vopsea. Scena este o insulă client: IntersectionObserver cu o marjă rădăcină, apoi un import dinamic de pixi.js, apoi Application.init. Dacă nu derulați niciodată aici, nu descărcați niciodată redarea. Dacă pleci, tickerul omite cadrul. La demontare, distrug aplicația, pânza și contextul GPU. Navigați în această aplicație și următorul articol nu moștenește o sesiune live WebGL.

Nu am pus asta pe pagina de start. Un erou de pânză dornic luptă cu LCP și apoi fură INP. Recruitorii pot aștepta un pergament. Un client pe o adresă URL de lansare poate aștepta jocul pe care a venit să-l joace. Ei abia așteaptă o etapă care a blocat capul. Partitura, viețile, „play again” stau în HTML lângă pânză – nu pictate într-o textură. Mișcarea redusă încetinește tickerul și reduce scânteile; scena încă joacă, pentru că asta este o alegere, nu o animație.

• Copiați, punctați și titlul în serverul HTML. Pânza nu este o suprafață cu șenile.
• Porniți la intersecție, nu la încărcarea rutei.
• Distruge la demontare. Omiteți bifurile de pe ecran. Onoarea preferă-mișcare redusă.

3. Raw Pixi.js aici. @pixi/react într-o aplicație de produs

Am conectat personalul de redare pe această pagină, astfel încât insula să rămână o bucată și bucla este evidentă: init, tick, destroy. Într-o aplicație Next.js în care scena trebuie să vorbească cu un cărucior, un steag de campanie sau un portofel, aș folosi @pixi/react. Același GPU, o listă de afișare care trăiește în arborele React, mai puține arme de picior în jurul demontării. Greșeala este adoptarea wrapper-ului pentru a învârti un cerc sau evitarea acestuia atunci când douăzeci de sprite-uri trebuie să rămână sincronizate cu Redux. Alegeți ambalajul atunci când produsul se gândește deja la componente.

4. Când aș expedia asta pentru un client

Un minijoc de marcă pe o pisă de produs. Un stand care trebuie să ruleze pe un laptop ieftin. O tablă pentru copii, o captură de loialitate, o bobină de monede pe care CSS nu le poate ține. O mini-aplicație Telegram care este deja o vizualizare web și nu ar trebui să crească un al doilea motor. Nu o pagină de pornire de marketing care avea nevoie de „să se simtă premium” – acel brief este încă CSS și GSAP. Nu este un SKU de bijuterii pe care îl orbitezi: adică Three.js. Nu un joc de platforme cu niveluri și o lume fizică: începe cu Phaser sau cu un motor de joc real. Dacă WebGL nu se inițiază, pagina are încă regulile în HTML. Pânza este cea mai bună cale către piesă, niciodată singura.

Concluzie: jucați pe GPU, păstrați documentul

Echipele angajează Pixi.js atunci când un client rămâne pentru că scena este netedă, nu pentru că titlul este inteligent. Ar trebui să angajeze în continuare un document: titlu, reguli, scor, o propoziție alternativă. Trimit această diviziune ca inginer web senior – Next.js insule, un buget limitat de GPU, GSAP unde pagina este încă o pagină. Dacă brief-ul tău este o etapă 2D care trebuie să conțină 60 de fps pe o adresă URL de afaceri, scrie prin formularul cu numărul de sprite, dacă este un joc real sau o buclă de marcă și dacă aceeași adresă URL trebuie să se claseze. Nu vom începe prin a arunca o pânză pe pagina de pornire „deci portofoliul să joace”.