PixiJS w skandynawskich podziemiach (z japońskim akcentem)

1

Kraków. Już nie stolica Polski, ale na pewno jedna z polskich stolic meetupowych. Tutaj różne wydarzenia IT odbywają się niemal codziennie. Miłośnicy gamedevu spotykają się pewnie z raz na tydzień. Javascriptowe eventy? Tych to jest dopiero pełno! Ale interesujących spotkań łączących technologie webowe z grami już wcale nie jest tak wiele…

…dlatego przedstawiam Wam relację z ostatniego eventu meet.js!

(uwaga: w treści znajdziesz linki do nagrań video z prezentacji, udostępnionych na kanale firmy Yggdrasil Gaming, a na końcu… devstyle VLOG w wykonaniu Alicji! :)

Gamedevowa edycja popularnego meetupu meet.js odbyła się w piątek 26 października właśnie w Krakowie. Od początku zapowiadało się nieźle: chętnych na udział w evencie było tak wielu, że kilkadziesiąt miejsc rozeszło się jak ciepłe bułeczki.

Ale nic straconego, bo wszyscy zainteresowani mogli dołączyć do LIVE streamu na Facebooku.

Prelekcje miały rozpocząć się około 18.00, ale przyjechałam nieco wcześniej, aby porozmawiać z organizatorami i rozejrzeć się po okolicy. Lokalizacja okazała się ciekawa: ukryte pod biurem nordycko brzmiącej firmy Yggdrasil podziemia murowanego budynku były klimatyczne i dobrze pasowały do tego kameralnego wydarzenia. Gdy weszłam do środka, stwierdziłam z zaskoczeniem, że niektórzy z pracowników jeszcze ostro kodują przy komputerach, ale chyba nie przeszkadzali im pojawiający się coraz częściej i przemykający do piwnicy uczestnicy (albo dobrze to ukrywali :)).

Mathew Groves: An introduction to Pixi.JS („To moje trzecie dziecko…”)

Gdy sala na dole się wypełniła, na scenie pojawił się pierwszy prelegent, gwiazda wieczoru – Mat Groves. Dość rzadko nadarza się okazja wysłuchania prezentacji na temat narzędzia wygłaszanej przez twórcę tego narzędzia, pewnie też dlatego wydarzenie cieszyło się tak dużym zainteresowaniem. Mat, pomysłodawca i autor PixiJS, okazał się też dobrym mówcą, a o swoim dziecku opowiadał na tyle interesująco, że sama zaczęłam zastanawiać się, do czego można by je wykorzystać.

Na początku dowiedzieliśmy się, czym w ogóle w zamyśle twórców jest PixiJS. Okazało się, że to nie do końca engine do gier, bo nie znajdziemy w nim fizyki czy sztucznej inteligencji. Pixi to przede wszystkim renderer, pośrednik pomiędzy użytkownikiem a WebGL-em, pozwalający w prosty sposób stworzyć skomplikowane układy scen, tekstu i sprite’ów. Mat podkreślał, że ulepszając to narzędzie, mocno skupia się na jego wydajności – podczas wyświetlania złożonych układów grafik w przeglądarce optymalizacja całego procesu jest niezwykle ważna.

W dalszej części prezentacji pojawiły się konkretne rozwiązania i przykłady kodu. Wyjaśnione zostały sposoby renderowania tekstur – zarówno podstawową, nieefektywną metodą, jak i przez całkiem optymalny batching, zaś na koniec jeszcze interesujący multi-texture batching wykorzystany w Pixi. Zobaczyliśmy też, w jaki sposób działają filtry i jak są zaimplementowane (oczywiście z live demo), a także posłuchaliśmy o zarządzaniu teksturami tak, aby nie zajmować niepotrzebnie pamięci.

Na koniec Mat opowiedział o feature’ach nowej wersji Pixi, która pojawi się w okolicy świąt, oraz o mid level API, które ma zostać wprowadzone do narzędzia, by umożliwić użytkownikom większą kontrolę nad będącym pod spodem WebGL-em. Dla wszystkich miłośników ingerencji w to, co dzieje się w warstwach niskopoziomowych, to na pewno bardzo dobra informacja. :)

Po prezentacji ogłoszono krótką przerwę, podczas której słuchacze mieli okazję zapoznać się ze sobą lub spróbować „lokalnych specjałów”: na stołach pojawiło się sushi, a przenośna lodówka wypełniła się piwem. Uczestników naliczyłam około 50, więc nie było dużego tłoku, a kameralność wydarzenia sprzyjała ciekawym rozmowom i nawiązywaniu znajomości.

Grzegorz Przybyłowicz: Move, jump, fly – Building animations in HTML5 games (metodzie setInterval mówimy stanowcze: nie!)

Kolejnym prelegentem był Grzegorz Przybyłowicz z prezentacją Move, jump, fly – Building animations in HTML5 games. Jak można było się spodziewać po tytule, wystąpienie dotyczyło właśnie różnych rodzajów animacji i ich wykorzystania.

Grzegorz zaczął od pokazania przykładów animacji proceduralnych, czyli tych tworzonych w kodzie poprzez zmianę parametrów. Opowiedział też, z jakich sposobów na animację warto korzystać w technologiach webowych (i dlaczego setInterval należy zostawić za drzwiami), a także uświadomił, jak ease functions mogą upiększyć każdy ruchomy element.

Następnie dowiedzieliśmy się niemal wszystkiego o wadach i zaletach animacji poklatkowych składających się z wielu obrazków, które – połączone – mogą opisać nawet bardzo skomplikowane ruchy. Tu ponownie powrócił temat optymalizacji i zarządzania pamięcią: frame by frame animations są proste do implementacji, ale podczas ładowania setek grafik należy się nieźle nagłowić, by wszystko działało płynnie.

Ciekawym tematem, który został poruszony podczas tej prelekcji, okazała się kwestia przenoszenia efektów 3D do świata 2D. Na slajdach pojawiło się trochę macierzy pozwalających opisać ruch w przestrzeni, a także algorytmy liczenia projekcji – zarówno tej ortograficznej, jak i perspektywicznej – oraz różnice pomiędzy nimi. Pomimo okrzyków przerażenia, które u publiczności wzbudziła ta trudna matematyka, myślę, że to dobrze, że Grzegorz opowiedział o niej więcej – w branży gier każdy programista prędzej czy później napotka podobne problemy.

Jens Malmborg: Tricks with Spine – Using spine animations to create a stunt jump game (Szkielety w cyrku)

Już bez kolejnej przerwy, bo prezentacje nieco się przeciągnęły, na scenie pojawił się Jens Malmborg z Tricks with spine – Using spine animations to create a stunt jump game. Grzegorz w swoim talku specjalnie pominął temat animacji szkieletowych, aby Jens mógł przedstawić je bardziej szczegółowo. W dodatku nie tylko o nich opowiedzieć – cała prelekcja okazała się interesującym case study opartym na tworzeniu gry cyrkowo-motoryzacyjnej z efektami specjalnymi. Brzmi ciekawie? Takie właśnie było. :)

Jens rozpoczął swoją prezentację od pokazania zalet animacji szkieletowych. Porównał dwie identyczne animacje – jedną stworzoną jako szkieletową, a drugą jako poklatkową – i zaczął je spowalniać. Już po chwili ruch frame by frame zaczął się zacinać, podczas gdy animacja szkieletowa pozostała płynna. Działo się tak dzięki interpolacji pomiędzy poszczególnymi klatkami – będzie działać świetnie nawet w zwolnionym tempie.

Case study krok po kroku przedstawiało projektowanie i tworzenie animacji do gry cyrkowej. Jens tłumaczył, że fizyka nie zawsze idzie w parze z ładnie wyglądającymi animacjami, więc dla dobrych efektów musiał niekiedy nieco nagiąć jej prawa. Aby rozwiązanie było optymalne i proste do implementacji, zdecydował się zrobić wiele krótkich animacji szkieletowych, które zależnie od akcji użytkownika łączą się ze sobą w różnej kolejności.

Andrzej Mazur: Progressive Web Apps and board games (Online + offline = ?)

Ostatnim prelegentem, którego mieliśmy okazję wysłuchać, był Andrzej Mazur z prezentacją na temat Progressive Web Apps i gier planszowych. Okazało się, że nie jest jedynym miłośnikiem planszówek w pomieszczeniu – gdy zapytał, kogo cieszą tego typu rozrywki, ręce podniosła prawie cała sala. :)

Andrzej pokazał, że swoje hobby offline można połączyć z tym online poprzez tworzenie dodatków do gier planszowych właśnie za pomocą technologii webowych. Wprowadził nas także do tematu Progressive Web Applications, opisując ich wady i zalety (ale oczywiście skupiając się na tych drugich :)). Stwierdził, że PWA to technologia przyszłości, dlatego warto zacząć z niej korzystać już teraz, szczególnie że jest prosta do implementacji i niezależna od urządzenia. Prezentacja była interesująca, ale dość krótka i czułam lekki niedosyt – myślę, że ten temat nadawałby się dobrze do znacznie dłuższej prelekcji.

Podsumowując: dla amatorów gamedevu i sushi to był naprawdę udany event! Piwnica, piwo i pasjonujące prelekcje – ten zestaw na „p” sprawdził się naprawdę świetnie.

Cieszę się, że miałam okazję tam zajrzeć – merytorycznych wypowiedzi w miłej atmosferze zawsze warto wysłuchać.

Dzięki za zaproszenie i see you soon!

A tutaj – bonusowo – jeszcze wersja video :).

Nie przegap kolejnych postów!

Dołącz do ponad 9000 programistów w devstyle newsletter!

Tym samym wyrażasz zgodę na otrzymanie informacji marketingowych z devstyle.pl (doh...). Powered by ConvertKit
Share.

About Author

Pozytywnie patrząca na świat programistka. Oficjalnie Web Developer, nieoficjalnie nie boi się chwycić za lutownicę. Pasjonatka małych samolotów, dobrego jedzenia i podróży.

1 Comment

Leave A Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.