Gra Szalony Kapelusznik to gra przeglądarkowa dostępna na komputery osobiste i urządzenia mobilne
polegająca na zbieraniu spadających filiżanek. Do stworzenia gry wykorzystałem Three.js, bibliotekę
JavaScript, będącą swoistym interfejsem do tworzenia i wyświetlania grafiki 3D w przeglądarce z użyciem
WebGL.
Wszystkie wykorzystywane przez grę modele 3D wykonałem w oprogramowaniu do tworzenia grafiki Blender.
Tekstury dla modeli w grze stworzone są z użyciem techniki bakingu, która polega na przygotowaniu
ogromnego obrazu będącego teksturą dla wszystkich modeli, ze sztucznie naniesionymi światłami i cieniami
bardzo wysokiej jakości.
Dzięki tej technice nie tracimy mocy obliczeniowej podczas samego grania, zachowując wygląd który z uwagi
na wydajność jest wręcz niedostępny przy skorzystaniu z gotowego oświetlenia dostarczanego w bibliotece
three.js. Baking cechuje jednak specyficzna wada - technika sprawdzi się w środowisku gry, które może
pozostać statyczne, a nie używać dynamicznych cieni i świateł.
Szczególnym wyzwaniem przy tworzeniu gier i aplikacji 3D w przeglądarce jest zachowanie responsywności
takiego oprogramowania, czyli w uproszczeniu poprawnego wyświetlania na każdym urządzeniu. Innym problemem
jest dostęp do bardzo ograniczonych zasobów. Najlepiej jest, gdy nie przekraczamy wagi kilkunastu
megabajtów dla całej gry, na którą składa się kod, pliki z muzyką, modelami, teksturami i obrazami. Aby to
osiągnąć, trzeba skorzystać z wielu technik optymalizacji i kompresji. Przykładowo, modele 3D dla tej gry
ważą około 600 KB, przy czym 450 KB to model kapelusznika z jego skomplikowanymi włosami i trzema
wbudowanymi w plik GLTF animacjami - smutkiem, radością z zebranej przez gracza filiżanki i tańcem po
zakończeniu gry.
Gra po raz pierwszy dostępna była dla obecnych na konferencji Devoxx, na której można było wygrać nagrody
za zajęcie miejsca na podium w rankingu zebranych filiżanek. Obecnie udostępniamy ją szerszemu gronu
odbiorców, aby każdy miał szansę spróbować swoich sił w tej mini-grze.
— Maciej Żelazo, twórca gry
Na co dzień frontendowiec pracujący dla HSBC, z pasji projektant grafiki i entuzjasta biblioteki
three.js. W wolnym czasie złota rączka i rolnik-amator. Na
LinkedIn możesz
podzielić się ze mną swoją opinią :)
Gra została stworzona dzięki j-labs. Szczególne podziękowania dla Patrycji Botwiny, pomysłodawcy i
kierownika projektu.
Mamy nadzieję, że ta prosta gra, którą stworzyliśmy w ekstremalnie krótkim czasie spodoba się także Tobie!
Masz pytania o j-labs? Napisz
tutaj
