Pierwsza gra w Phaserze 3

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.