Jak fajnie by było, gdyby doba miała więcej niż 24 godziny. Albo, żeby w tygodniu był jeden dodatkowy dzień (najlepiej wolny od pracy). Jednak jest jak jest i zasoby wolnego czasu, który mógłbym wykorzystać na pracę nad blogiem są ograniczone. Do tego, większość tego czasu spędzam nad projektem konkursowym.
Mimo to, nie chciałbym aby zrobiło się tu zbyt monotematycznie. Dlatego postanowiłem trzymać się noworocznego postanowienia i również w marcu stworzyć grę w serii ‚gra co miesiąc’. Ale jak to zrobić z ograniczonym czasem? Odpowiedź okazała się bardzo prosta: ‚Phaser.js’.
Aby jak najbardziej skrócić czas produkcji nowej gry, pomysł musiał być prosty a silnik gry mało skomplikowany. Prostym pomysłem okazało się stworzenie klona klasycznego froggera. Co do silnika, nieważne jak bardzo starałem się ograniczyć ilość funkcjonalności gry i tak wymagał sporo pracy. Dlatego pomyślałem, że może pomogę sobie, korzystając z gotowego rozwiązania. Postanowiłem spróbować użyć frameworka Phaser.js. To był strzał w dziesiątkę.
Wyniki mojej pracy można zobaczyć klikając w obrazek powyżej. Co do kodu, nie przygotowałem specjalnej paczki, ale jest on do obejrzenia na moim koncie github. Będzie on tam na bieżąco aktualizowany.
Jak widać, gra nie jest jeszcze skończona, jednak główne jej mechanizmy już działają. Udało mi się też przemycić w niej trochę świątecznego klimatu, zamiast żaby, gracz steruje królikiem (wielkanocnym? 🙂 ). Królik porusza się po naciśnięciu strzałek. Gdy trafi pod koła pędzących aut lub do wody, ginie i pojawia się ponownie na dole planszy. Gdy królik dotrze do jednej z norek znajdujących po drugiej stronie rzeki, zostanie ona ‚zaliczona’. Aby ukończyć grę należy przeprowadzić królika przez ulicę i rzekę cztery razy i zaliczyć wszystkie norki.
Nie teraz będę opisywał całego kodu, zamiast tego skupię się na wrażeniach z korzystania Phasera. W skrócie: Jestem naprawdę zachwycony możliwościami tego frameworka. Jest on, według mnei, dla tworzenia gier w HTML5 tym czym jQuery jest dla manipulowania DOMem.
Wiele skomplikowanych mechanizmów można zaimplementować używając zaledwie jednej lub dwóch komend. Takie rzeczy jak kontrolowanie stanów gry, dodawanie obiektów, fizyki czy wykrywanie kolizji, stają się wręcz bezmyślnie proste.
Do tego, korzystanie z Phasera jest bardzo intuicyjne. Była to moja pierwsza styczność z tym frameworkiem a już po 15 minutach wiedziałem co robić, żeby stworzyć prostą grę. Bardzo pomogła mi bogata dokumentacja i strona z przykładami wykorzystania właściwości silnika. Tak naprawdę to najwięcej czasu poświęciłem tworzeniu grafik do gry 🙂 . Możliwe, że nie wszystko zrobiłem jak trzeba i pewne rzeczy dałoby się zaimplementować w wygodniejszy sposób, ale tak to zazwyczaj bywa w pierwszym projekcie wykorzystującym nową technologię. Z czasem nabiorę doświadczenia.
Gdy dokończę grę (zostało mi już tylko ‚doszlifowanie’ całości), rozpiszę cały kod, z przykładami potwierdzającymi powyższe tezy 🙂 Opisanie całości kodu nie będzie specjalnie trudne, ponieważ ma on w tej chwili raptem 200 linijek (nie licząc kodu źródłowego frameworka). Nie przewiduje aby rozmiar projektu przekroczył 300 linijek.
Dajcie znać czy używaliście już
Tym czasem zachęcam do polubienia mojej strony na facebooku i cierpliwego czekania na kolejne posty 🙂 .