Gra Pixi.js, w którą możesz zagrać

Pisałem już, kiedy wybrałbym Pixi.js powyżej Three.js i dlaczego canvas na firmowym adresie URL to rachunek, a nie dekoracja. Następnie wysłałem obiekt 3D, który można orbitować. Ta strona to inna powierzchnia: scena 2D, która podczas gry musi utrzymać 60 klatek na sekundę. Gra powyżej tego akapitu to wzór, który wysłałbym na zrzut startowy, stoisko lub pętlę lojalnościową – wyspa, leniwa, jednorazowa. Zdanie, które czytasz, nadal znajduje się w dokumencie.

Przesuń kosz. Złap jabłka, gruszki, plasterki. Unikaj zgniłych. Spokój, arkada, burza. To jest zadanie komercyjne: kilkadziesiąt duszków, ticker, cząstki, które umierają, kiedy powinny. Brak możliwości pobrania atlasu sprite'ów. Brak stosu scen Phaser. Grafika proceduralna, HUD w HTML, pętla, która ustępuje po opuszczeniu rzutni.

1. Na co właściwie patrzysz

Pixi.js to renderer 2D. Lista wyświetlania, elementy podstawowe grafiki, znacznik. Jabłka, gruszki i plasterki nie są plikami PNG. Są to wielokąty rysowane na GPU, grupowane i obracane w pętli. Sad za nimi to jeden obiekt graficzny – niebo, wzgórza, drzewa – plus kilka dryfujących chmur. Złap owoc, pojawi się garść iskier, a następnie zgiń. To jest zadanie, w którym Pixi jest dobry: wiele tanich obiektów 2D, każda klatka, bez węzła DOM na duszka.

Nie ma silnika fizycznego. Grawitacja to liczba, którą dodaję do vy. Kolizja to pudełko wokół kolektora. Combo to timer w tym samym ticku. Phaser zapewni ci sceny, fizykę zręcznościową i dźwięk. Ten produkt nie potrzebował tego rachunku. Potrzebny był gorący etap w artykule Next.js. Ograniczam urządzeniePixelRatio. Upuszczam liczbę gwiazdek, gdy współbieżność sprzętu jest niska. Storm to więcej duszków, a nie cięższy shader. Na tym polega różnica między minigrą, która przetrwa laptopa rekrutera, a tą, która gotuje w metrze Androida średniej klasy.

2. Wyspa, a nie strona główna

Na serwerze nie ma WebGL. Ta strona jest eksportem statycznym. Artykuł HTML jest w pierwszej fazie malowania. Scena to wyspa klienta: IntersectionObserver z marginesem głównym, następnie dynamiczny import pixi.js, a następnie Application.init. Jeśli nigdy tutaj nie przewiniesz, nigdy nie pobierzesz modułu renderującego. Jeśli opuścisz, ticker pominie klatkę. Po odmontowaniu niszczę aplikację, płótno i kontekst GPU. Jeśli opuścisz tę aplikację, następny artykuł nie odziedziczy aktywnej sesji WebGL.

Nie umieściłem tego na stronie głównej. Zapalony bohater płócienny walczy z LCP, a następnie kradnie INP. Rekruterzy mogą poczekać jeden zwój. Klient znajdujący się pod adresem startowym może poczekać na grę, w którą przyszedł zagrać. Nie mogą się doczekać etapu, który zablokował kurs. Partytura, życia i „zagraj ponownie” znajdują się w formacie HTML obok płótna – nie są namalowane na teksturze. Zredukowany ruch spowalnia pasek i obcina iskry; scena nadal gra, bo to jest wybór, a nie animacja.

• Kopiuj, zapisuj nuty i nagłówki w serwerze HTML. Płótno nie jest powierzchnią pełzającą.
• Rozruch na skrzyżowaniu, a nie na obciążeniu trasy.
• Zniszcz po odmontowaniu. Pomiń znaczniki poza ekranem. Honor woli ograniczony ruch.

3. Tutaj surowy plik Pixi.js. @pixi/react w aplikacji produktu

Sam podłączyłem moduł renderujący na tej stronie, więc wyspa pozostaje jedną częścią, a pętla jest oczywista: init, zaznacz, zniszcz. W aplikacji Next.js, w której scena musi rozmawiać z wózkiem, flagą kampanii lub portfelem, użyłbym @pixi/react. To samo GPU, lista wyświetlania znajdująca się w drzewie React, mniej pistoletów do odmontowania. Błędem jest przyjęcie opakowania do kręcenia kołem lub unikanie go, gdy dwadzieścia duszków musi pozostać zsynchronizowanych z Redux. Wybierz opakowanie, gdy produkt już myśli w kategoriach komponentów.

4. Kiedy miałbym to wysłać do klienta

Markowa minigra na zrzucie produktu. Budka, która musi działać na tanim laptopie. Tablica dla dzieci, haczyk lojalnościowy, szpula monet, których CSS nie może pomieścić. Miniaplikacja Telegram, która jest już przeglądarką internetową i nie powinna rozwijać drugiego silnika. Nie jest to marketingowa strona główna, która musiała „czuć się premium” – to wytyczne to nadal CSS i GSAP. To nie jest biżuteryjna jednostka SKU, którą orbitujesz: czyli Three.js. To nie platformówka z poziomami i światem fizyki: zacznij od Phasera lub prawdziwego silnika gry. Jeśli WebGL nie zostanie zainicjowany, strona nadal zawiera reguły w formacie HTML. Płótno jest najlepszą drogą do spektaklu, nigdy jedyną.

Wniosek: zagraj na GPU, zachowaj dokument

Zespoły wynajmują Pixi.js, gdy klient zostaje, ponieważ scena jest płynna, a nie dlatego, że nagłówek jest sprytny. Powinni nadal wypożyczać dokument: tytuł, zasady, partyturę, zdanie zastępcze. Dostarczam ten podział jako starszy inżynier sieciowy – Next.js wysp, ograniczony budżet GPU, GSAP, gdzie strona jest nadal stroną. Jeśli Twój brief to scena 2D, która musi utrzymać 60 kl./s na firmowym adresie URL, wpisz w formularzu liczbę duszków, czy jest to prawdziwa gra, czy pętla z marką i czy ten sam adres URL musi mieć ranking. Nie zaczniemy od upuszczenia płótna na stronę główną „aby portfolio zagrało”.