Część 1 - Wprowadzenie
Witaj w pierwszym tutorialu dotyczącym tworzenia gier w Phaserze 3. Nauczysz się z niego jak stworzyć małą grę, w której gracz będzie biegał i skakał po platformach, kolekcjonował gwiazdki i unikał przeciwników. Podczas nauki przeprowadzimy Cię przez podstawowe funkcje frameworka.
Czym jest Phaser?
Phaser jest opartym na HTML5 frameworkiem służącym do tworzenia gier. Jego celem jest usprawnienie i przyśpieszenie procesu pisania zaawansowanych, przenośnych gier. Został on stworzony po to by wykorzystać zalety nowoczesnych przeglądarek, zarówno tych mobilnych jak i desktopowych. Jedynym wymaganiem Phasera jest obsługa znacznika canvas.
Wymagania
Pobierz ten plik zip – zawiera on każdy krok tego poradnika w postaci kodu oraz wymaganych plików.
Wymagana jest bardzo podstawowa wiedza na temat języka JavaScript.
Pamiętaj również by przeczytać Przewodnik wprowadzający, pokaże Ci on jak pobrać framework, skonfigurować lokalne środowisko, a także pozwoli rzucić okiem na strukturę projektu w Phaserze oraz jego podstawowe funkcje.
Jeżeli przebrnąłeś już przez Przewodnik wprowadzający, masz skonfigurowane środowisko testowe i możesz rozpocząć kodowanie. Pobierz pliki tego tutoriala i wypakuj je w głównym folderze Twojego serwera WWW.
Otwórz plik part1.html
w Twoim ulubionym edytorze. Przyszedł czas na zapoznaniem się z kodem. Po linijkach dołączających Phaser oraz zawierających podstawowy HTML5 znajdziesz:
var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload () { } function create () { } function update () { }
Obiekt config
zawiera ustawienia Twojej gry. Istnieje wiele opcji, które możesz deklarować w tym obiekcie. Dowiesz się o nich stopniowo powiększając wiedzę o Phaserze. W tym poradniku ustawimy jedynie sposób renderowania, wymiary i domyślną scenę.
Instancja objektu Phaser.Game jest przypisana do lokalnej zmiennej nazwanej po prostu game
i obiekt zawierający konfigurację jest do niej przekazywany. Tak rozpoczyna działanie framework.
W wersji drugiej Phasera obiekt game
zachowywał się jak interfejs udostępniający wszystkie wewnętrzne systemy i często wykorzystywany był poprzez globalną zmienną. Phaser 3 nie działa w taki sposób i nie udostępnia już globalnej instancji gry.
Właściwosć type
może przyjąć wartości Phaser.CANVAS
, Phaser.WEBGL
albo Phaser.AUTO
. Opcja ta określa metodę renderowania grafiki. Rekomendowana wartość Phaser.AUTO
sprawia, że Phaser spróbuje uruchomić się w trybie WebGL i automatycznie zmieni sposób renderowania na canvas jeżeli tryb ten nie jest obsługiwany przez przeglądarkę. Element canvas, w którym renderowana jest gra, zostanie dodany do dokumentu w miejscu wywołania skryptu lub można go umiejscowić za pomocą odpowiedniej konfiguracji w innym elemencie nadrzędnym dokumentu.
Właściwości width
i height
odpowiadają za rozmiar tworzonego przez Phaser elementu canvas. W tym przypaddku będzie to 800 na 600 pikseli. Świat gry może skalować się do dowolnych rozmiarów ale zostanie wygenerowany właśnie w takiej rozdzielczości.
Parametr scene
zostanie dokładniej opisany w dalszej części tego poradnika.