Oynayabileceğiniz bir Pixi.js oyunu

Pixi.js’i Three.js yerine ne zaman seçeceğimi ve iş URL’sindeki canvas’ın süs değil fatura olduğunu zaten yazdım. Sonra yörüngeye alınabilen 3D nesneyi teslim ettim. Bu sayfa diğer yüzey: oynarken 60 fps tutması gereken bir 2D sahne. Bu paragrafın üstündeki oyun, lansman drop’u, stant veya sadakat döngüsü için teslim edeceğim kalıp: ada, tembel, yok edilebilir. Okuduğunuz cümle belgede kalır.

Sepeti hareket ettirin. Elma, armut, dilim yakalayın. Çürüklerden kaçın. Sakin, arcade, fırtına. Ticari iş budur: birkaç düzine sprite, bir ticker, zamanı gelince ölen parçacıklar. Atlas indirmesi yok. Phaser sahne yığını yok. Yordamsal grafik, HTML’de HUD, görünüm alanını bırakınca duran bir döngü.

1. Aslında neye bakıyorsunuz

Pixi.js bir 2D renderer’dır. Display list, Graphics primitifleri, ticker. Elmalar, armutlar ve dilimler PNG değildir. GPU’da çizilen, batch’lenen, döngüde döndürülen çokgenlerdir. Arkalarındaki bahçe tek bir Graphics nesnesidir — gökyüzü, tepeler, ağaçlar — artı süzülen birkaç bulut. Bir meyve yakalayın — bir avuç kıvılcım doğar ve ölür. Pixi’nin güçlü olduğu iş budur: her karede birçok ucuz 2D nesne, sprite başına DOM düğümü olmadan.

Fizik motoru yoktur. Yerçekimi vy’ye eklediğim bir sayıdır. Çarpışma toplayıcının etrafındaki bir kutudur. Kombo aynı tick’teki bir zamanlayıcıdır. Phaser sahneler, arcade fizik, ses verirdi. Bu ürünün o faturaya ihtiyacı yoktu. Next.js yazısının içinde sıcak bir sahneye ihtiyacı vardı. devicePixelRatio’yu sınırlarım. hardwareConcurrency düşükse yıldız sayısını keserim. Fırtına daha ağır bir shader değil, daha çok sprite’dır. Recruiter dizüstünde hayatta kalan mini oyun ile metroda orta segment Android’i pişiren oyun arasındaki fark budur.

2. Ada, anasayfa değil

Sunucuda WebGL yoktur. Bu sayfa static export. Yazının HTML’i first paint’tedir. Sahne bir istemci adasıdır: root margin’li IntersectionObserver, sonra pixi.js’in dinamik import’u, sonra Application.init. Buraya hiç kaydırmazsanız renderer’ı indirmezsiniz. Giderseniz ticker kareyi atlar. Unmount’ta application’ı, canvas’ı ve GPU bağlamını yok ederim. Bu uygulamada başka yazıya geçin — sonraki yazı canlı bir WebGL oturumu devralmaz.

Bunu anasayfaya koymadım. Hevesli bir canvas hero LCP ile kavga eder, sonra INP’yi çalar. Recruiter bir kaydırma bekleyebilir. Lansman URL’sindeki müşteri oynamaya geldiği oyunu bekleyebilir. Başlığı kilitleyen bir sahneyi bekleyemez. Skor, canlar, «yeniden» canvas’ın yanındaki HTML’dedir — bir dokuya boyanmaz. Reduced motion ticker’ı yavaşlatır ve kıvılcımları keser; sahne yine oynanır, çünkü bu animasyon değil seçimdir.

• Metin, skor ve başlık sunucu HTML’inde. Canvas crawler yüzeyi değildir.
• Rota yükünde değil, intersection’da açılış.
• Unmount’ta destroy. Ekran dışındayken tick atla. prefers-reduced-motion’a uy.

3. Burada ham Pixi.js. Ürün uygulamasında @pixi/react

Bu sayfada renderer’ı kendim bağladım ki ada tek chunk kalsın ve döngü açık olsun: init, tick, destroy. Sahnenin sepet, kampanya bayrağı veya cüzdanla konuşması gereken bir Next.js uygulamasında @pixi/react alırdım. Aynı GPU, React ağacında bir display list, unmount’ta daha az tuzak. Hata, bir daire döndürmek için sarmalayıcıyı almak — veya yirmi sprite’ın Redux ile senkron kalması gerekirken ondan kaçınmak. Ürün zaten bileşenlerle düşünüyorsa sarmalayıcıyı alın.

4. Bunu bir müşteriye ne zaman teslim ederdim

Ürün drop’unda markalı bir mini oyun. Ucuz bir dizüstünde çalışması gereken bir stant. Çocuk tahtası, sadakat yakalama oyunu, CSS’in tutamayacağı bir jeton makarası. Zaten bir webview olan ve ikinci motor büyütmemesi gereken bir Telegram mini app. «Premium hissettirsin» denmiş bir pazarlama anasayfası değil — o brief hâlâ CSS ve GSAP. Yörüngeye alınan mücevher SKU’su değil: o Three.js. Seviyeleri ve fizik dünyası olan bir platformer değil: Phaser veya gerçek bir oyun motoruyla başlayın. WebGL başlamazsa sayfada hâlâ HTML’deki kurallar vardır. Canvas oyuna giden en iyi yoldur, asla tek yol değil.

Sonuç: GPU’da oynayın, belgeyi koruyun

Ekipler müşteri başlık zekice olduğu için değil sahne akıcı olduğu için kaldığında Pixi.js’i işe alır. Yine de bir belge işe almalıdır: başlık, kurallar, skor, yedek cümle. Bu ayrımı senior web engineer olarak teslim ederim — Next.js adaları, tavanlı GPU bütçesi, sayfa hâlâ sayfayken GSAP. Brief, iş URL’sinde 60 fps tutması gereken bir 2D sahneyse formdan sprite sayısını, gerçek oyun mu markalı döngü mü olduğunu ve aynı URL’nin sıralanıp sıralanmayacağını yazın. «Portföy oynasın diye» anasayfaya canvas atarak başlamayacağız.