JavaDevMatt.pl – Mateusz Kupilas

Programista na emigracji… aktualnie po emigracji. ;) Przedsiębiorca, bloger, youtuber.

Nauka Phasera, systematyzowanie wiedzy z JS i omawianie prototypu projektu

W dzisiejszym DevLogu projektu o tym, z jakich źródeł uczę się JS, Phasera i z jakich źródeł korzystałem, by na szybko w 2-3 dni sklecić prototyp pomysłu. Omówimy też dotychczasowe mechaniki z pierwotnego prototypu.

Jak zacząłem z Phaserem?

Na oficjalnej stronie znajdziemy bardzo przyjemny tutorial: Getting Started with Phaser. Dowiemy się tam jak lokalnie odpalać projekt (potrzebny prosty serwer – osobiście korzystam z Mongoose web server), poleca nam się też parę edytorów – wybrałem Sublime Text.

Jako kolejny krok przerobiłem making your first Phaser game, w którym napiszemy prostą platformówkę. Nie znam się specjalnie na JavaScripcie – czasami sporadycznie z niego korzystałem, ale to na zasadzie googlaniu tego co potrzebuję i kopiowaniu kodu ze Stackoverflow 😉 – ale nie miałem problemów, by zrozumieć poradnik. Jest napisany bardzo przystępnie.

Później udałem się do Phaser Examples. Przykłady są podzielone na kategorie, przez co bardzo łatwo znajdziemy interesującą nas funkcjonalność.

Na oficjalnej stronie brakuje jakiegoś artykułu (albo może go nie znalazłem?), w którym przedstawiona jest jakaś sensowna struktura projektu. Większość przykładów, to kod w jednym pliku JS.

Na szczęście udało mi się odnaleźć ten świetny wpis: USING STATES IN PHASER.JS JAVASCRIPT GAME DEVELOPEMENT. Autor omawia tam jak zbudować taką oto strukturę projektu w Phaserze:

\States\
|
|- phaser.js
|
|- index.html
|
|- assets\
|    |
|    |-player.png
|    |
|    |-win.png
|
|- js\
|
|- game.js
|
|- boot.js
|
|- load.js
|
|- menu.js
|
|- play.js
|
|- win.js

Całość rozumiałem mniej więcej „na czuja” – kod źródłowy, który napisałem po przerobieniu tych materiałów. Jednym z celów mojego udziału w konkursie „Daj Się Poznać” jest usystematyzowanie swojej wiedzy związanej z JavaScriptem. Nie chciałbym napisać coś „by działało”. Dlatego zacząłem systematyzować moją chaotyczną wiedzę o JS. Niżej krótko o tym z czego korzystam.

Systematyzowanie wiedzy z JS

Nigdy nie „uczyłem” się JavaScriptu. Jak potrzebowałem coś małego w nim zrobić, to googlałem i jakoś „kleiłem całość”. 😉 Nie pisałem w tym języku projektu, który bym rozwijał dłużej niż 2-3 dni. Dlatego chcę tę wiedzę teraz trochę usystematyzować.

Istnieje świetna i darmowa książka: http://eloquentjavascript.net/, którą przeglądam w wolnym czasie.

Gdy wydaje mi się, że coś nie do końca zrozumiałem, to szukam informacji w innym miejscu.Np. Closure w JS jest tutaj fajnie wytłumaczone.

Kiedyś popełniałem taki błąd, że zapisywałem sobie milion zakładek źródeł, z których mam zamiar się tego uczyć. Opisałem ten problem kiedyś na blogu jako „siedzenie w jaskini”. Teraz przeglądam głównie jedną książkę „Eloquent JavaScript” i zerknę dopiero do innej, gdy wyda mi się, że z tej już nic nie potrzebuję.

Mam satysfakcję z tego, że dzisiaj wiem trochę więcej niż wczoraj. To nie wyścig.

By ramach nauki na szybko coś przetestować przydaj się https://jsfiddle.net/. W JS potrzebujemy tylko przeglądarki i prostego edytora tekstu… z tą stroną potrzebujemy już tylko przeglądarki. 😉 Dla mnie JSFiddle jest bardzo wygodne – może i komuś z Was się przyda.

W ramach nauki chcę czysto napisać grę webową. Niżej o wstępnym prototypie, który jest aktualnie totalnym chaosem… ale o to w sumie w prototypach w gamedevie chodzi. 😉

O prototypowaniu i samym prototypie

Prototypując pomysł nie warto poświęcać dużo czasu na świetną implementację – prawdopodobnie dużo zostanie wyrzucone. Osobiście działam według takiego schematu: testuję jakąś mechanikę/pomysł -> sprawdzam, czy jest z tego „fun” -> jeśli tak, to zostawiam funkcjonalność i sprzątam kod -> gdy ficzer jest kiepski, to resetuje go w Git, albo (lepsze rozwiązanie) zostawiam kod w jakimś branchu, którego nie merguję. Gdy kiedyś zdecydujemy, że taka funkcjonalność jednak się nam przyda, to wiemy gdzie szukać ten stary kod w naszym repo.

W przypadku GameDevu istnieje coś na co powinniśmy zwracać największą uwagę. Awesome Per Second:

Dlatego prototypujemy. Zamiast tracić czas na robienie długich i nudnych levelów, robimy pojedyncze mechaniki, które mają być ciekawe. Dopiero gdy mamy te mechaniki, to zaczynamy generować właściwy content.

W ramach prototypu starałem się robić po jednym krótkim poziomie na mechanikę. Dotychczasowe mechaniki to:

  • trampolina,
  • spadające platformy,
  • poruszające się platformy,
  • wprawienie w ruch czerwonych szlamów, by te wpadły do kwasu (dotychczasowy cel gry – może to się jeszcze zmieni),
  • napisy, które dają graczowi dobry feedback,
  • wystrzelenie gracza, po zebraniu odpowiedniego powerupu,
  • TNT do rozsadzenia otoczenia.

Mechaniki w akcji możesz zobaczyć w krótkim filmie z gry, albo możesz pograć tutaj.

Jeżeli chodzi o grafikę z prototypu: całość bazuje na darmowych assetach jak np. tło gry.

Obsługa urządzeń mobilnych i gamepadu

Po stworzeniu pierwotnego prototypu pojawiły się komentarze, że coraz więcej osób gra w takie webowe gierki na urządzeniach mobilnych. Tu znalazłem przystępny poradnik jak zaimplementować obsługę mobilek.

Wygląda to mniej więcej tak jak niżej. Mamy dwa obszary po lewej (idziemy w lewo/prawo) i jeden obszar po prawej – gdy na niego przyciśniemy to skaczemy. To bardzo prymitywna implementacja, którą wstępnie testowałem. Tutaj branch mojego starego prototypu, w którym bawiłem się w implementację do urządzeń mobilnych.

Za gamepad się jeszcze nie brałem, ale z tego co widziałem w przykładach, to nie powinno być z tym większego problemu. Postaram się udostępnić Wam za jakiś czas wersję, w której będzie można wypróbować pad.

Co za tydzień?

Mam nadzieję, że przedstawię Wam pierwsze wrażenia z e-booka autora bloga TrueValhalla. Przypominam, że drugi cel tego projektu, to przyjrzenie się aspektowi biznesowemu gier mobilnych. Za cel postawiłem sobie zarobienie na takiej prostej grze mobilnej 100zł. Przede wszystkim mam się tym projektem dobrze bawić i usystematyzować moją wiedzę o JS.

To tyle na dzisiaj. 🙂


4 thoughts on “Nauka Phasera, systematyzowanie wiedzy z JS i omawianie prototypu projektu

  • gos4k napisał(a):

    Polecam Phaserowe poradniki o box2D są naprawdę świetne a możliwość zobaczenia jak działa kod, który czytamy bardzo ułatwia zrozumienie.

  • Przemek napisał(a):

    Dzięki za wypakowany informacjami wpis! Jeśli o mnie chodzi to chętnie zapoznam się z Twoją recenzją ebooka od TrueValhalla. Jakieś 2 lata temu sam miałem przygodę z mobile game devem – finansowo była to porażka, ale jednocześnie wspaniałe doświadczenie i niesamowity boost wiedzy z zakresu Androida i C# (gra była tworzona w Unity3D).
    Mateuszu, przy okazji mam pytanie techniczno-organizacyjne: w jaki sposób przygotowujesz się do kręcenia swoich vlogów? Jedziesz na żywioł, czy układasz jakiś scenariusz? Myślę, że to ciekawy case na jeden z kolejnych wpisów.
    Przy okazji życzę powodzenia w konkursie 🙂 Trzymaj się!

    • JavaDevMatt napisał(a):

      Przeważnie przygotowuję jakieś główne punkty i według nich nagrywam. Często piszę wpis przed filmem – przez to przygotowuję treść tego co będzie w vlogu. 🙂 Może zrobię o o tym kiedyś osobny wpis. Dzięki za sugestię.

Dodaj komentarz

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