Fantasy Commando – gra co miesiąc: kwiecień. Phaser.js – drugie podejście.

Żeby uniknąć gonitwy na ostatnią chwilę, już dziś zabrałem się za grę kwietnia. Tym razem ponownie korzystam z Phasera, framework ma spory potencjał i chcę poznać go lepiej. Wspomogłem się też grafikami ze starego warcrafta, które znalazłem tu (jeżeli czyta to ktoś z Blizzarda, proszę nie pozywajcie mnie 🙁 ).

Docelowo kwietniowa gra ma być czymś na kształt klasycznego Commando, ale w klimacie fantasy 🙂 .

Jak tworzyć gry w phaser js

Obecnie gra jest w bardzo wczesnym stadium rozwoju. Można ją odpalić klikając w obrazek powyżej, jednak póki co w nie dzieje się w niej zbyt wiele. Na prowizorycznej planszy znajduje się tylko postać bohatera. Można nim sterować przy pomocy strzałek. Po naciśnięciu spacji postać zamachnie się mieczem, ale prócz animacji, atak nie ma żadnych efektów. Przygotowałem też paczkę z aktualnym kodem gry. Należy pamiętać o tym, żeby gre uruchomić na lokalnym serwerze, inaczej Phaser nie zadziała.

Tym razem skupiłem się na tym aby w miarę rozsądnie rozłożyć kod projektu. Nie chcę tak jak ostatnio upychać wszystkiego w jeden plik. Udało mi się podzielić kod ale nie jestem jeszcze do końca zadowolony z efektu. Brak dogłębnej wiedzy na temat działania Phasera wciąż trochę mnie ogranicza.

Projekt składa się obecnie z czterech plików zawierających kod: index.html, game.js, init.js oraz level1.js. Pierwszy plik to po prostu kod html wyświetlany w przeglądarce. Jest on tym razem dość ważny ze względu na to jak dodaje w nim skrypty JS. game.js jest punktem wyjściowym dla całej aplikacji, to w nim uruchamiam grę. Dwa ostatnie pliki zawierają logikę wczesnych wersji stanów gry.

Zacznę od treści pliku HTML:

Chcę tu przede wszystkim zwrócić uwagę na kolejność tagów script. Aby wszystko działało, muszę dodawać skrypty w odpowiedniej kolejności. Zasada jest taka, żeby dodawać je tak aby wymagane w nich elementy były dodane wcześniej. Każdy plik wymaga Phasera, dlatego kod frameworka dodaję najpierw. Następnie dołączam pliki zawierające stany gry, a na końcu game.js, które to wszystko wywołuje.

Oto jak wygląda treść game.js:

Jak widać, nie dzieje się tu nic nadzwyczajnego. Najpierw tworzę nową instancję gry Phasera, następnie dodaję do niej dwa stan. Na koniec odpalam stan init. Warto zwrócić uwagę na przekazywane obiekty stanów. Znajdują się one wewnątrz obiektu FC, który pełni rolę paczki / przestrzeni nazw. W końcu nie chcę zaśmiecać przestrzeni globalnej. Powyższy kod ma dostęp do kodu stanów, ponieważ jest dodany na stronę po nich.

Pierwszy uruchamiany stan to init:

Jest to pierwszy plik dodany do HTMLa po kodzie frameworka. To właśnie w nim tworzę pusty obiekt FC. Kod we wszystkich plikach, które dodam później, będzie miał dostęp do tej przestrzeni nazw.

Po za tym jest to standardowy stan Phaser. Korzystam z metody preload żeby załadować grafikę oraz z metody create aby wycentrować płótno na stronie. Włączam też silnik fizyki ARCADE.

Nowością jest obiekt grafiki hero. Zamiast metody load, używam metody spriteSheet. W ten sposób daje Phaserowi znać, że dodany obrazek jest arkuszem klatek dla animacji obiektu a nie pojedyncza grafiką. Arkusz zawiera wszystkie klatki ruchu bohatera gry. Rozmiar jednej klatki podaję jako dwa ostatnie parametry metody.

Gdy wszystko jest gotowe, program przechodzi w stan level1:

Jest to obecnie zdecydowanie najobszerniejszy plik. No i tu pojawia się pierwszy ból, bo jakieś 90% tego pliku to kod obsługujący obiekt bohatera. Prawda jest taka, że będzie on też potrzebny w stanach reprezentujących kolejne poziomy gry. Nie chcę przecież za każdym razem kopiować te same 40 – 50 linijek kodu… Póki co nie wiem jak sobie z tym poradzić, ale główkuję 😉 . Obiekt gracza musi wylądować w osobnym pliku, ale czy będzie dobrze funkcjonował poza stanem? Muszę to sprawdzić…

Ale póki co skupię się na tym co już mam. Większość kodu ostatniego stanu powinna być jasna. Nowością jest kod obsługujący animację obiektów. Obiekt bohatera korzysta z grafiki oznaczonej jako arkusz klatek. Phaser w tle, dzieli taki arkusz na pojedyncze obrazki. Każdy z tych obrazków ma wymiary podane podczas inicjalizacji arkusza. Każda klatka ma swój indeks, zupełnie jak w tablicy. Co najważniejsze, z jednego arkusza mogę stworzyć wiele animacji. Ten arkusz na przykład zawiera animacje ruchu w lewo, ruchu w prawo, ataku w dół, ataku w górę itp.

Animacje muszę jednak najpierw zadeklarować i odpowiednio oznaczyć. Robię to w metodzie create stanu. Oto przykład

Po prostu na obiekcie bohatera wywołuję odpowiednie metody. Najważniejsze są tutaj argumenty. Pierwszy z nich to etykieta dla danej animacji. Drugi to tablica z numerami klatek, składającymi się na daną animacje. Na arkuszu klatka o indeksie zero znajduje się w górnym lewym rogu, następne liczone są na prawo i w dół. Kolejny argument to częstotliwość zmiany klatki na sekundę. Im mniejsza wartość tym wolniej będzie następować będzie zmiana klatki. Ostatni argument to wartość logiczna. true oznacza, że animacja ma się zapętlać, po ostatniej klatce przechodzi od razu do pierwszej i tak w kółko.

Animacje ruchu są zapętlone, ale animacje ataku już nie. Dzięki temu wykonuje jeden zamach mieczem i spokojnie czeka na dalsze ‚rozkazy’.

Co ciekawe mogę w każdej chwili ustawić na obiekcie bohatera dowolną klatkę. Wystarcz, że odwołam się do jego pola frame. Oto przykład:

W taki sam sposób mogę też pobierać wartość aktualnej klatki. Wszystko to sprawia, że obsługa animacji jest bardzo wygodna.

Nie będę dokładnie tłumaczył reszty kodu. Większość powinna być zrozumiała dla każdego kto zapoznał się z opisami mojej poprzedniej gry stworzonej z pomocą phasera. Jeżeli jednak coś jest nie jasne, nie wahajcie się pytać w komentarzach. Na wszystkie pytania odpowiem.

Dobrym miejscem na kontakt ze mną jest też moja strona na facebooku. Warto ją też polubić aby być na bieżąco, zawsze zamieszczam tam informacje o wszystkich nowościach na blogu 🙂 .

2 przemyślenia nt. „Fantasy Commando – gra co miesiąc: kwiecień. Phaser.js – drugie podejście.”

  1. Z którego Warcrafta to rycerzyk, bo chyba nie z 2? 😀 Pewnie z 1. Zauważyłem, że używasz StateManager… zapominam ile Phaser ma rzeczy usprawniających pracę…

    W każdym razie jestem ciekaw, co wyjdzie Ci w tym miesiącu.

    1. Tak, to z pierwszego warcrafta. Grafika należy do Lothara Anduina, była unikatowa, on występował chyba tylko w jednej misji 🙂

      Co do Phasera, ma naprawdę duże możliwości. Zdecydowanie, bardzo potężny framework.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *