Wstęp

Większość z osób, które posiadają przynajmniej podstawowe umiejętności w zakresie programowania, na pewno kiedyś myślała o stworzeniu swojej własnej gry. Być może sam dalej marzysz o tym, aby stworzyć grę, w którą będą grały miliony osób na całym świecie. W tej serii artykułów pokażę jak stworzyć grę, którą będzie można uruchomić w przeglądarce internetowej na komputerze lub na smartfonie, znając wyłącznie język JavaScript oraz absolutne podstawy HTML. Jeśli nie pisałeś nigdy wcześniej w JavaScript lub nie czujesz się komfortowo w tym języku, zachęcam do skorzystania z naszych kursów:

• Język JavaScript. Podstawy
• Zaawansowany kurs JavaScript

Do stworzenia gry wykorzystamy narzędzie Phaser. Jest to darmowy framework open-source służący do tworzenia gier odpalanych w przeglądarkach internetowych. Podczas jego tworzenia dużo uwagi poświęcono na dostosowanie go do urządzeń mobilnych, które mają coraz większe znaczenie w grach internetowych. Jeśli przed rozpoczęciem korzystania z Phaser’a chcesz sprawdzić, co można zrobić za jego pomocą zachęcam do sprawdzenia przykładowych gier na oficjalnej stronie.

Przygotowanie środowiska

Przygotowanie pliku html

Przygotowanie środowiska, w którym będziesz tworzyć gry nie wymaga dużo pracy. Wystarczy, że dodasz poniższą linię do sekcji head pliku html, w którym będzie znajdować się kod twojej gry.

1

<script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>

Serwer dla systemu Windows

Aby uruchomić plik html z kodem JavaScript na lokalnym komputerze będziemy potrzebować jakiegoś serwera, który udostępni naszą grę pod adresem localhost. Pliki html można teoretycznie po prostu otworzyć przeglądarką internetową, jednak takie rozwiązanie ma wiele wad i nie sprawdzi się podczas tworzenia gry w JS.

Jeśli korzystasz z systemu Windows polecam użycie XAMPP, jest on na tyle popularny, że nawet jeśli nigdy wcześniej nie uruchamiałeś serwera na własnym komputerze i będziesz mieć jakieś problemy, to w internecie na pewno znajdziesz ich rozwiązanie. Pamiętaj, że podczas tworzenia gier w Phaser nie będzie nam na razie potrzebna żadna baza danych, nie trzeba też uruchamiać kodu PHP, więc nie musisz się przejmować tymi zagadnieniami. Aby otworzyć stronę znajdującą się w pliku index.html wpisz w przeglądarce internetowej adres http://localhost/

Serwer dla systemu Linux/OSX

Jeśli korzystasz z systemu z rodziny Linux lub OSX polecam użyć prostego serwera HTTP. Jedyne co potrzebujesz, aby go uruchomić to posiadanie zainstalowanego pythona. Dodam tylko, że większość nowych wersji Linuxa oraz systemy OSX posiadają go domyślnie zainstalowanego, więc nie musisz się niczym przejmować. Aby uruchomić serwer wystarczy wejść przez terminal, do folderu w którym znajduje się plik HTML i wpisać:

1

python -m SimpleHTTPServer

Serwer zostanie domyślnie uruchomiony na porcie 8000, więc aby otworzyć stronę znajdującą się w pliku index.html wpisz w przeglądarce internetowej adres http://localhost:8000/

Edytor

Oczywiście kod HTML i JS musisz napisać w jakimś edytorze tekstu. Na początek nie potrzebujesz jakiś zaawansowanych możliwości, jednak warto korzystać z czegoś lepszego niż Notatnik. Ja najbardziej polecam skorzystanie z Sublime Text edytor ten oferuje bardzo duże możliwości, jednak nie przytłacza nimi początkującego użytkownika. Kolejnym ciekawym edytorem jest Atom, z którego również warto skorzystać.

Oba powyższe edytory posiadają menu w języku angielskim. Myślę, ze nie powinno to być problemem, jeśli jednak chcesz używać czegoś co oferuje polskie menu, możesz skorzystać z popularnego wśród początkujących Web Developerów w naszym kraju edytora Notepad++.

Pierwsze uruchomienie Phaser’a

Aby sprawdzić, czy wszystko, co do tej pory zrobiłeś działa poprawnie, uruchomimy pierwszą aplikację napisaną z użyciem Phaser’a. Nie jest to prawdziwa gra, aplikacja ta wyświetla tylko jeden statyczny obrazek.

Pobierz ten plik, wypakuj jego zawartość do folderu w którym znajdują się pliki hostowane przez Twój lokalny serwer, a następnie otwórz w przeglądarce stronę http://localhost/ w systemie Windows lub http://localhost:8000/ dla Linux/OSX.

Jeśli do tej pory wszystko zrobiłeś poprawnie, powinieneś zobaczyć obrazek pochodzący ze strony głównej platformy CodeQack.

Podsumowanie

W tym artykule dowiedziałeś się czym jest Phaser i jak przygotować środowisko do pracy z nim. Już teraz możesz sprawdzić kolejny wpis, pokazujący jak stworzyć pierwszą prawdziwą grę, w którą można zagrać w przeglądarce internetowej.

Kurs wideo

Jeśli spodobał Ci się ten artykuł i chciałbyś dokładniej poznać narzędzie Phaser, serdecznie zapraszamy do naszego nowego kursu wideo Tworzenie gier w JavaScript. Tworzymy w nim klona popularnej gry Pacman, przy pomocy frameworku Phaser. Jeśli jeszcze nie masz konta, zarejestruj się za darmo.