Pierwsze kroki do tworzenia gier z Phaser

Przyjazd HTML5 Zmieniło to sposób, w jaki postrzegamy sieć, nie tylko dało nam lepsze narzędzia do ich rozwoju, ale także otworzyło nam możliwości tworzenia aplikacji, które idą dalej, jak w przypadku gier wideo.
Zaleta tworzenia gry wideo w HTML5 chodzi o to, że jest kompatybilny praktycznie z każdym urządzeniem, które posiada przeglądarkę i co więcej bez konieczności pobierania czy wykonywania dodatkowych instalacji.
Dzięki tej nowej popularności, ramy do tworzenia gier wideo rozmnożyły się, każdy ze swoimi cechami i zaletami, tym razem skupimy się na Fazer, powodów jest kilka i możemy je zobaczyć na poniższej liście:

• Ma świetną społeczność i jest aktywny.
• Jest okresowo aktualizowany.
• Jest darmowy.
• Posiada narzędzia fizyki, które ułatwiają nam życie.

Skoro więc widzimy, że ma kilka interesujących zalet, zamierzamy go zainstalować, ale najpierw zobaczmy kilka wymagań, które wymaga framework.
1- Potrzebujemy dostępu do Internetu, aby móc pobrać wszystkie zasoby, które pojawiają się podczas instalacji frameworka, w tym również ten.
2- Musieliśmy mieć zainstalowany lub być w stanie zainstalować serwer WWW tego stylu LAMPA lub WAMP lub MAMP w zależności od naszego systemu operacyjnego, ponieważ Fazer używa HTML5 i również JavaScript Dlatego ze względu na środki bezpieczeństwa nasza przeglądarka nie będzie akceptować lokalnych wykonań.
3- Potrzebujemy uprawnień, aby uzyskać dostęp do niezbędnych folderów i usług, które są ustawione podczas instalacji frameworka.
4- Potrzebujemy przeglądarki kompatybilnej z HTML5 i że ma narzędzia do debugowania, w przypadku tego samouczka użyjemy Firefox Developer Edition w najnowszej wersji, jednak mogą wybrać tę, która wydaje im się najlepsza.
5- Na koniec potrzebujemy edytora tekstu, aby móc napisać kod dla przykładów, ponieważ zawsze może być to, co mamy, chociaż zalecamy Wzniosły tekst o NotePad ++ ze względu na dużą liczbę wtyczek, które ułatwiają nam życie jako programistów.
Pierwszą rzeczą, którą zrobimy, aby móc zainstalować Fazer ma wejść na jego oficjalną stronę internetową i tutaj znajdziemy kilka zasobów, jednak na razie przejdziemy do sekcji, która mówi Pobierać:

POWIĘKSZAĆ

Mamy kilka opcji do pobrania, dwie, których możemy użyć to pobranie skompresowanego .zip lub .tar.gz, możemy również zrobić klon z Github projektu, w naszym przypadku pobierzemy projekt w .zip, aby przyspieszyć proces. Po pobraniu lub sklonowaniu projektu najważniejsze katalogi to:
docs / index.htmlTutaj mamy wpis do offline i oficjalnej dokumentacji wersji, którą właśnie pobraliśmy, może nam to pomóc w przejrzeniu niektórych szczegółów, chociaż jeśli mamy możliwość wejścia do Internetu i udokumentowania siebie, zawsze będziemy mieli lepsze opcje.
build / phaser.min.jsTo jest nasz framework jako taki, to zminimalizowana i skompresowana biblioteka zawierająca wszystkie narzędzia, których będziemy potrzebować do rozpoczęcia naszych pierwszych projektów.
Ponieważ pobraliśmy projekt, aby sprawdzić, czy wszystko jest w porządku, wystarczy skopiować rozpakowany folder, do którego możemy uzyskać dostęp za pomocą naszego serwera WWW, generalnie jest to katalog www lub public_html, to wszystko naprawdę zależy od naszego środowiska.
Tam musimy przejść do naszej przeglądarki i uruchomić nasz host lokalny / fazer lub nazwę, którą umieściliśmy i zobaczymy listę plików, tutaj musimy przejść do następującego folderu: zasoby / tutoriale / 01 Pierwsze kroki / hellofazer / index.html i możemy docenić to, co widzimy na poniższym zrzucie ekranu:

POWIĘKSZAĆ

Nasza pierwsza graPonieważ sprawdziliśmy, że nasze środowisko działa perfekcyjnie, nadszedł czas, aby zrobić naszą pierwszą grę, w tym celu ustalimy osiągalny cel dla naszego poziomu w tym momencie, gdzie na końcu przykładu musimy być w stanie pokazać Krasnoludek na ekranie.
W folderze, w którym mamy framework na naszym serwerze internetowym, utworzymy nowy folder, w tym przypadku nazwiemy go fazer-przykład, w środku umieścimy plik fazer.min.js u podstaw tego utworzymy plik o nazwie index.html i inny plik o nazwie main.js, musimy również umieścić obrazek o nazwie logo.png.webp który będzie sprite, który pokażemy, który można znaleźć w zasobach frameworka i może to być zalecany rozmiar 180 na 64 piksele. W końcu nasz katalog powinien wyglądać tak:

Skoro mamy już ustaloną strukturę, musimy zacząć pisać kod do naszego pierwszego projektu, w tym celu musimy otworzyć nasz plik index.html i tam dołączymy pliki .js które stworzyliśmy, oprócz stworzenia który będzie miał jako identyfikator słowo graDiv. Zobaczmy, jak wygląda nasz kod:

 Nasza pierwsza gra na Phaserze
Nasza pierwsza gra =)

To będzie podstawa, na której będzie wspierana nasza gra, aby użytkownik mógł przeglądać zawartość. Kolejnym krokiem w budowaniu naszej pierwszej gry jest napisanie kodu dla main.js, który obsłuży całą logikę naszej gry i zawiera trzy kluczowe metody, zobaczmy:
wstępne ładowanieTa metoda jest odpowiedzialna za wstępne ładowanie wszystkich zasobów, których potrzebuje nasza gra, czy to obrazów, audio, wideo itp. Zawsze działa przy starcie.
StwórzTa metoda działa po jej zakończeniu wstępne ładowanie a jego funkcją jest włączenie załadowanych zasobów do naszej gry, a także danie nam możliwości ustalenia początkowej konfiguracji.
aktualizacjaWreszcie, ta metoda działa 60 razy na sekundę i zawiera prawdziwą logikę naszej gry, to jest to, co daje nam ruch, że tak powiem.
Jak widać, każda z tych metod odpowiada za stan gry, dwie pierwsze są przed rozpoczęciem gry, natomiast aktualizacja występuje podczas wykonywania. Po zdefiniowaniu, co robi każda metoda, musimy zobaczyć tylko potrzebny kod:

 var mainState = {preload: function() {// Wczytujemy obraz game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Pokazujemy nasz obraz w grze this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// zmieniamy kąt o jedną jednostkę 60 razy na sekundę // da nam to efekt rotacji obrazu this.sprite.angle + = 1; }};// tutaj zaczynamy naszą grę i ustawiamy ją // tak, aby używała div gameDiv, którą umieściliśmy w naszej grze HTMLvar = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState);game.state.start ('main');

Jak widać na końcu metod tworzymy zmienną o nazwie gra i w tym wykonujemy instancję Gra Phaser tam, gdzie przekazujemy pewne parametry, w tej chwili nie trzeba o nich dużo wiedzieć, po prostu kopiujemy je tak, jak je widzimy. Ale z grubsza jest to część, w której mówimy naszej aplikacji, aby szukała Fazer tak, że powie Ci, co zrobić z metodami, które stworzyliśmy powyżej, a na końcu z stan.gry.start to miejsce, w którym mówimy frameworkowi, aby zaczął naszą grę.
Teraz, jeśli wszystko poszło dobrze, uruchomimy nasz projekt w przeglądarce i powinniśmy zobaczyć, jak wybrany obraz obraca się na ekranie:

W przypadku tego przykładu użyliśmy obrazu, który znajduje się w zasobach FazerNie jest to jednak wymóg, z każdym obrazem możemy osiągnąć te same rezultaty. Inną rzeczą, którą możemy zauważyć w naszym przykładzie, jest to, że poniżej mamy otwartą konsolę debugowania przeglądarki, to narzędzie jest najlepszym przyjacielem, jakiego będziemy mieć, ponieważ tam możemy debugować różne błędy, które możemy znaleźć podczas tworzenia naszych gier.
Na tym zakończyliśmy ten samouczek, pomyślnie zainstalowaliśmy Fazer, poznaliśmy kilka początkowych cech tego wspaniałego frameworka i dzięki temu stworzyliśmy małą aplikację lub grę. Ważne jest, aby potraktować ten samouczek jako punkt wyjścia do przeprowadzenia nieco bardziej dogłębnych badań na temat Fazer, ponieważ to nie jest nawet 1% wszystkiego, co nam oferuje, ale jest to pierwszy krok, który tak często nas kosztuje.