web-games

Skill zawiera praktyczne wytyczne do tworzenia gier w przeglądarce. Dowiesz się, jak wybrać odpowiedni framework (Phaser, PixiJS, Three.js, Babylon.js) w zależności od typu gry, kiedy stosować WebGPU zamiast WebGL, oraz jak optymalizować wydajność poprzez kompresję zasobów, lazy loading i batching draw callów. Materiał obejmuje również strategie obsługi ograniczeń przeglądarki, formaty kompresji dla tekstur i modeli 3D, oraz implementację Progressive Web App.

1. Zainstaluj skill web-games w swoim środowisku Claude lub Codex. Skill udostępnia narzędzia do czytania, edycji i przeszukiwania plików (Read, Write, Edit, Glob, Grep), które będą potrzebne do pracy z kodem gry.

2. Zapoznaj się z tabelą wyboru frameworka na podstawie typu gry: dla gier 2D z pełnym zestawem funkcji wybierz Phaser 4, dla renderowania i interfejsu użytkownika – PixiJS 8, dla gier 3D z wizualizacjami – Three.js, dla pełnego silnika z obsługą XR – Babylon.js 7.

3. Zdecyduj o strategii renderowania: jeśli tworzysz nowy projekt, zaplanuj WebGPU z fallbackiem na WebGL (wspierane w ~73% przeglądarek na świecie od 2025 roku). Dla starszych projektów zacznij od WebGL i sprawdzaj dostępność WebGPU za pomocą navigator.gpu.

4. Zastosuj optymalizacje wydajności w kolejności priorytetów: kompresja zasobów (KTX2, Draco, WebP dla tekstur; WebM/Opus dla audio), lazy loading zasobów na żądanie, object pooling aby uniknąć garbage collection, batching draw callów, oraz Web Workers do przesunięcia ciężkich obliczeń.

5. Uwzględnij ograniczenia przeglądarki: pakuj zasoby i korzystaj z CDN (brak dostępu do plików lokalnych), wstrzymuj grę gdy karta jest ukryta, kompresuj zasoby dla urządzeń mobilnych, wymagaj interakcji użytkownika przed odtworzeniem dźwięku.

6. Dla gier 3D wybierz odpowiedni format: modele w formacie glTF z kompresją Draco lub Meshopt, tekstury w KTX2 z Basis Universal, audio w WebM/Opus z fallbackiem na MP3.