Hra Pixi.js, kterou můžete hrát

Už jsem psal, kdy bych si vybral Pixi.js nad Three.js, a proč je plátno na firemní URL účtenka, ne dekorace. Pak jsem poslal 3D objekt, který můžete obíhat. Tato stránka je druhým povrchem: 2D scéna, která musí mít při hraní rychlost 60 snímků za sekundu. Hra nad tímto odstavcem je vzor, ​​který bych poslal pro start drop, stánek nebo věrnostní smyčku – ostrov, líný, na jedno použití. Věta, kterou čtete, je stále v dokumentu.

Přesuňte koš. Chytat jablka, hrušky, plátky. Vyhýbejte se shnilým. Klid, pasáž, bouře. To je komerční práce: několik desítek skřítků, ticker, částice, které zemřou, když mají. Žádný atlas sprite ke stažení. Žádný zásobník scén Phaser. Procedurální grafika, HUD v HTML, smyčka, která ustoupí, když opustíte výřez.

1. Na co se vlastně díváte

Pixi.js je 2D renderer. Seznam zobrazení, grafická primitiva, ticker. Jablka, hrušky a plátky nejsou PNG. Jsou to polygony nakreslené na GPU, dávkové, otočené ve smyčce. Sad za nimi je jeden grafický objekt – obloha, kopce, stromy – plus pár mraků, které se unášejí. Chyť ovoce a hrst jisker se objeví a pak zemři. To je práce, ve které je Pixi dobré: mnoho levných 2D objektů, každý snímek, bez uzlu DOM na sprite.

Neexistuje žádný fyzikální engine. Gravitace je číslo, které přidávám do vy. Kolize je krabice kolem kolektoru. Combo je časovač ve stejném tick. Phaser by vám poskytl scény, arkádovou fyziku, zvuk. Tento produkt nepotřeboval tento účet. Potřebovalo to horkou scénu uvnitř Next.js článku. I cap devicePixelRatio. Klesám počet hvězdiček, když je hardwareConcurrency nízký. Storm je více skřítků, ne těžší shader. To je rozdíl mezi minihrou, která přežije notebook náboráře, a tou, která vaří Android střední třídy v metru.

2. Ostrov, ne domovská stránka

Na serveru není WebGL. Tato stránka je statický export. HTML článku je v první malbě. Fáze je klientský ostrov: IntersectionObserver s kořenovým okrajem, poté dynamický import souboru pixi.js a poté Application.init. Pokud se zde nikdy neposouváte, nikdy si nestáhnete renderer. Pokud odejdete, ukazatel přeskočí snímek. Při odpojení zničím aplikaci, plátno a kontext GPU. Přejděte v této aplikaci a další článek nezdědí živou WebGL relaci.

Na úvodní stránku jsem to nedal. Nedočkavý plátěný hrdina bojuje s LCP a poté ukradne INP. Náboráři mohou čekat jeden svitek. Zákazník na spouštěcí URL může čekat na hru, kterou si přišel zahrát. Nemohou čekat na fázi, která zablokovala kurz. Partitura, životy, „hrát znovu“ jsou umístěny v HTML vedle plátna – nejsou namalovány do textury. Snížený pohyb zpomaluje ticker a přerušuje jiskry; scéna stále hraje, protože to je volba, ne animace.

• Kopírování, skóre a záhlaví v HTML serveru. Canvas není prolézací povrch.
• Start na křižovatce, ne na zatížení trasy.
• Zničit při odpojení. Přeskakování klíšťat mimo obrazovku. Honor preferuje-redukovaný-pohyb.

3. Raw Pixi.js zde. @pixi/react v aplikaci produktu

Sám jsem na této stránce připojil vykreslovací modul, takže ostrov zůstane jeden kus a smyčka je zřejmá: init, tik, zničit. V aplikaci Next.js, kde jeviště musí mluvit s vozíkem, vlajkou kampaně nebo peněženkou, bych použil @pixi/react. Stejný GPU, seznam zobrazení, který žije ve stromě React, méně footgunů kolem unmount. Chyba je v tom, že použijete obal k roztočení kruhu nebo se mu vyhnete, když dvacet skřítků musí zůstat synchronizovaných s Reduxem. Vyberte obal, když produkt již obsahuje komponenty.

4. Kdy bych to poslal klientovi

Značková minihra na pokles produktu. Stánek, který musí běžet na levném notebooku. Dětská nástěnka, věrnostní úlovek, cívka mincí, kterou CSS neudrží. Miniaplikace Telegram, která je již webovým zobrazením a neměla by vyrůstat jako druhý motor. Nejedná se o marketingovou domovskou stránku, která by potřebovala „pocit prémie“ – tím briefem je stále CSS a GSAP. Nejedná se o SKU šperků, které obíháte: to je Three.js. Není to plošinovka s úrovněmi a fyzikálním světem: začněte s Phaserem nebo skutečným herním enginem. Pokud se nepodaří inicializovat WebGL, stránka má stále pravidla v HTML. Plátno je nejlepší cesta ke hře, nikdy není jediná.

Závěr: hrát na GPU, dokument si uschovat

Týmy najímají Pixi.js, když zákazník zůstane, protože fáze je hladká, ne proto, že nadpis je chytrý. Stále by si měli najmout dokument: název, pravidla, skóre, záložní větu. Toto rozdělení odesílám jako hlavní webový inženýr – Next.js ostrovů, omezený rozpočet GPU, GSAP kde je stránka stále stránkou. Pokud je váš brief 2D stage, která musí mít 60 snímků za sekundu na obchodní URL, napište do formuláře počet spriteů, zda se jedná o skutečnou hru nebo značkovou smyčku a zda musí mít stejné URL hodnocení. Nezačneme tím, že na domovskou stránku pustíme plátno, „aby se portfolio hrálo“.