Do stworzenia wrześniowej gry eksperymentalnie wykorzystałem język TypeScript. Bardzo podoba mi się konwencja typowanego JavaScriptu na sterydach. Jednak brakowało mi frameworka Phaser, który lubię i dobrze znam.
Dlatego w tym miesiącu, do stworzenia prostej gry, postanowiłem wykorzystać obie te technologie. Październikowa gra powstanie we frameworku Phaser i napisana zostanie w TypeScript. Zdradzę wam od razu, że to połączenie spisuje się doskonale.
Aktualną wersję gry przetestować można klikając w obrazek powyżej. Na moim githubie znajduje się repozytorium zawierające jak najaktualniejszy stan gry. Wersja przedstawiona w poście nie będzie dostępna w źródle strony. To czego używa przeglądarka to przetranspilowany na JS kod. Wersję TypeScriptową zobaczyć można ściągając tę paczkę.
Tym razem zamiast edytora Atom, używałem IDE Visual Studio. Idealnie nadaje się do programowania w TypeScript. Ponieważ oba produkty pochodzą od microsoftu, można powiedzieć, że praktycznie jest to narzędzie dedykowane do pracy (między innymi) z TS’em. Nie ma w nim niczego, czego nie byłem w stanie zrobić w Atomie, ale wiele rzeczy jest ułatwionych. Do tego, jest też sporo ułatwień dookoła kodowych takich jak np automatyczne startowanie serwera czy połączenie z repozytorium na githubie.
Ale to nie o Visual Studio jest post. Wracam do tematu. Aby móc pisać phaserową grę w TypeScripcie, przede wszystkim potrzebuję dodać kod biblioteki do dokumentu html. Nie korzystam tym razem z żadnego bundlera (wiem amatorka, ale jeszcze ogarniam jak to dobrze zrobić w workflow TSa), więc wszystkie generowane pliki js dodaje w tagach script. Aby nie było żądnych problemów z zależnościami pierwszy musi być kod biblioteki, następnie kod głównego pliku gry (w moim wypadku app.js, generowane z app.ts), a potem wszystkie obiekty gry i na końcu stany. W tej chwili tak wygląda zawartość elementu body mojego dokumentu html:
|
1 2 3 4 5 6 7 8 |
<body> <div id="game"></div> <script type="text/javascript" src="http://greeboro.linuxpl.eu/apps/Phaser/phaser.min.js"></script> <script src="app.js"></script> <script src="GameObjects/player.js"></script> <script src="States/welcomeState.js"></script> <script src="States/gameState.js"></script> </body> |
Następnie, aby w TypeScripcie była możliwość korzystania z typów Phasera, potrzebuję jeszcze jednej rzeczy – definicji tych typów. Należy je pobrać z tego repozytorium i umieścić w głównym katalogu gry. Pliki które nas interesują to pixi.d.ts, p2.d.ts oraz phaser.d.ts. W Visual Studio nie muszę robić nic więcej, IDE samo wykrywa dodane definicje. Jednak w innych narzędziach może być wymagane dodanie referencji w plikach ts. Aby dodać taką referencję wystarczy na początku pliku wpisać taką linijkę, dla każdego pliku d.ts:
|
1 |
/// <reference path="jquery.d.ts" /> |
Oczywiście w przypadku phasera należy podać ścieżkę do odpowiedniego pliku. jQuery to tylko przykład 😉 .
Pliki javascriptowe generowane są w tych samych lokacjach, w których tworzę pliki ts. W głównym katalogu projektowym mam więc oprócz dokumentu html, app.ts i plików z definicjami typów, mam też katalogi GameObjects, States oraz Assets. Zanim będę mógł przejś do opisywania kodu plików, które znajdują się w projekcie, muszę napisać jeszcze parę słów o zawartości ostatniego katalogu.
Wewnątrz Assets przechowuję wszystkie te elementy gry, które nie są kodem z logiką. Obecnie są to dwie grafiki oraz pliki JSON je opisujące. Pierwsza para to necropolis.png oraz necropolis.json. Oba te pliki wygenerowane zostały przy użyciu fantastycznego narzędzia TexturePacker. Jest to spritesheet zawierający grafiki gry, oraz plik JSON zawierający informacje o ich rozmieszczeniu. Stworzenie tych plików było bardzo proste i co najlepsze Phaser je wspiera :). Ten tutorial fajnie pokazuje jak korzystać z TexturePackera. Wprawdzie jest po angielsku, ale w razie czego obrazki i kod wystarczą aby zrozumieć co trzeba.
Druga para plików w katalogu Assets to spr_wall_0.png oraz tiles.json. Te dwa z kolei stworzyłem z pomocą znanego mi już dobrze narzędzia tiled. Te pliki Phaser również rozumie bez najmniejszego problemu.
I to cały setup jaki potrzebny był do rozpoczęcia tworzenia gry w Phaser i TypeScript. Gdy to było już gotowe stworzyłem dwa proste stany i obiekt gracza aby przetestować jak to wszystko razem chodzi. Efekt można zobaczyć klikając w obrazek dodany na górze posta.
W kolejnym wpisie pokażę jak tworzyć phaserowe obiekty w TypeScripcie i jak połączyć je w działającą grę. Tymczasem jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :). Do przeczytania.