Pierwsze kroki z Phaser do tworzenia gier

Phaser to framework do tworzenia gier wideo 2D. Używa HTML5 Canvas do wyświetlania gry i JavaScript do jej uruchamiania. Zaletą używania Phasera w porównaniu do zwykłego JavaScript jest obszerna biblioteka, która uzupełnia większość fizyki gier wideo, pozwalając ci skoncentrować się na projektowaniu samej gry.

Phaser skraca czas programowania i ułatwia przepływ pracy. Nauczmy się, jak stworzyć podstawową grę za pomocą Phasera.

Dlaczego warto programować z Phaser?

Phaser jest podobny do innych wizualnych języków programowania, ponieważ program jest oparty na zapętlonych aktualizacjach. Phaser ma trzy główne etapy: wstępne ładowanie, tworzenie i aktualizowanie.

Podczas wstępnego ładowania zasoby gry są przesyłane i udostępniane w grze.

Utwórz inicjuje grę i wszystkie początkowe elementy gry. Każda z tych funkcji jest uruchamiana jeden raz w momencie uruchomienia gry.

Z drugiej strony aktualizacja przebiega w pętli przez całą grę. To koń roboczy aktualizuje elementy gry, aby uczynić ją interaktywną.

Skonfiguruj swój system do tworzenia gier za pomocą programu Phaser

Pomimo tego, że Phaser działa na HTML i JavaScript, gry są w rzeczywistości uruchamiane po stronie serwera, a nie klienta. Oznacza to, że będziesz musiał uruchomić swoją grę twój localhost. Uruchomienie serwera gry umożliwia Twojej grze dostęp do dodatkowych plików i zasobów poza programem. polecam użycie XAMPP do skonfigurowania hosta lokalnego jeśli nie masz jeszcze jednej konfiguracji.

Co to jest 127.0 0.1, Localhost czy adres Loopback?

Widziałeś "localhost" na swoim komputerze, ale co to jest? Co oznacza adres 127.0.0.1? Zostałeś zhakowany?

Poniższy kod pozwoli Ci zacząć działać. Tworzy podstawowe środowisko gry.

Do uruchomienia gra będzie wymagała obrazu PNG o nazwie „gamePiece” zapisanego w folderze „img” na Twoim hoście lokalnym. Dla uproszczenia w tym przykładzie zastosowano pomarańczowy kwadrat 60xgame de60px. Twoja gra powinna wyglądać mniej więcej tak:

Jeśli napotkasz problem, użyj debugera przeglądarki, aby dowiedzieć się, co poszło nie tak. Brak choćby jednego znaku może spowodować spustoszenie, ale generalnie debugger wyłapie te drobne błędy.

Wyjaśnienie kodu konfiguracji

Jak dotąd gra nic nie robi. Ale już pokonaliśmy wiele kwestii! Przyjrzyjmy się dokładniej kodowi.

Aby gra Phaser działała, musisz zaimportować bibliotekę Phaser. Robimy to w linii 3. W tym przykładzie połączyliśmy się z kodem źródłowym, ale możesz pobrać go na swojego lokalnego hosta i odwołać się do pliku.

Jak dotąd znaczna część kodu konfiguruje środowisko gry, które jest zmienną config sklepy. W naszym przykładzie ustawiamy grę fazera z niebieskim tłem (CCFFFF w kodzie szesnastkowym) o wymiarach 600 na 600 pikseli. Na razie fizyka gry została ustawiona na arkada, ale Phaser oferuje inną fizykę.

Wreszcie, scena informuje program, aby uruchomił plik wstępne ładowanie funkcji przed rozpoczęciem gry i Stwórz funkcja, aby rozpocząć grę. Wszystkie te informacje są przekazywane do obiektu gry o nazwie gra.

Związane z: 6 najlepszych laptopów do programowania i kodowania

Następna sekcja kodu to miejsce, w którym gra naprawdę nabiera kształtu. Funkcja wstępnego ładowania to miejsce, w którym chcesz zainicjować wszystko, czego potrzebujesz do uruchomienia gry. W naszym przypadku wstępnie załadowaliśmy obraz naszego elementu gry. Pierwszy parametr .wizerunek nazywa nasz obraz, a druga mówi programowi, gdzie znaleźć obraz.

Obraz gamePiece został dodany do gry w funkcji tworzenia. Linia 29 mówi, że dodajemy obrazek gamePiece jako sprite 270px po lewej i 450px w dół od lewego górnego rogu naszego obszaru gry.

Poruszanie naszego elementu gry

Jak dotąd trudno to nazwać grą. Po pierwsze, nie możemy przesunąć naszego elementu gry. Aby móc zmieniać rzeczy w naszej grze, będziemy musieli dodać funkcję aktualizacji. Będziemy również musieli dostosować scenę w zmiennej konfiguracyjnej, aby poinformować grę, którą funkcję ma uruchomić, gdy aktualizujemy grę.

Dodawanie funkcji aktualizacji

Nowa scena w konfiguracji:

scena: {
preload: preload,
utwórz: utwórz,
aktualizacja: aktualizacja
}

Następnie dodaj funkcję aktualizacji poniżej funkcji tworzenia:

function update () {
}

Uzyskiwanie kluczowych danych wejściowych

Aby gracz mógł kontrolować element gry za pomocą klawiszy strzałek, będziemy musieli dodać zmienną, aby śledzić, które klawisze naciska. Poniżej zadeklaruj zmienną o nazwie keyInputs, w której zadeklarowaliśmy GamePieces. Zadeklarowanie go w tym miejscu umożliwi wszystkim funkcjom dostęp do nowej zmiennej.

var gamePiece;
var keyInputs;

Zmienna keyInput powinna zostać zainicjowana podczas tworzenia gry w funkcji create.

function create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Teraz w funkcji aktualizacji możemy sprawdzić, czy gracz naciska klawisz strzałki, a jeśli tak, odpowiednio przesunąć nasz element gry. W poniższym przykładzie element gry został przesunięty o 2 piksele, ale możesz zwiększyć lub zmniejszyć liczbę. Przesuwanie elementu o 1 piksel na raz wydawało się trochę powolne.

function update () {
if (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
if (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
if (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
if (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Gra ma teraz ruchomą postać! Ale żeby naprawdę być grą, potrzebujemy celu. Dodajmy kilka przeszkód. Unikanie przeszkód było podstawą wielu gier w erze 8-bitowej.

Dodawanie przeszkód do gry

Ten przykład kodu używa dwóch sprite'ów przeszkód o nazwach przeszkoda1 i przeszkoda 2. Przeszkoda1 to niebieski kwadrat, a przeszkoda2 jest zielona. Każdy obraz będzie musiał zostać wstępnie załadowany, tak jak sprite gry.

function preload () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('przeszkoda1', 'img / przeszkoda1.png');
this.load.image ('obstacle2', 'img / obstacle2.png');
}

Następnie każdy duszek przeszkody będzie musiał zostać zainicjowany w funkcji tworzenia, tak jak w przypadku gry.

function create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
przeszkoda1 = this.physics.add.sprite (200, 0, 'przeszkoda1');
obstacle2 = this.physics.add.sprite (0, 200, 'przeszkoda2');
}

Poruszanie przeszkód

Aby przenieść figury tym razem, nie chcemy używać danych wejściowych gracza. Zamiast tego pozwólmy jednej figurze przesuwać się od góry do dołu, a drugiej od lewej do prawej. Aby to zrobić, dodaj następujący kod do funkcji aktualizacji:

przeszkoda1.y = przeszkoda1.y + 4;
if (obstacle1.y> 600) {
przeszkoda1.y = 0;
obstacle1.x = Phaser. Matematyka. Między (0,600);
}
przeszkoda2.x = przeszkoda2.x + 4;
if (obstacle2.x> 600) {
przeszkoda2.x = 0;
obstacle2.y = Phaser. Matematyka. Między (0,600);
}

Powyższy kod przesunie przeszkodę1 w dół ekranu, a przeszkodę2 po obszarze gry o 4 piksele w każdej klatce. Gdy kwadrat jest poza ekranem, jest przenoszony z powrotem na przeciwną stronę w nowym losowym miejscu. Zapewni to, że zawsze pojawi się nowa przeszkoda dla gracza.

Wykrywanie kolizji

Ale jeszcze nie skończyliśmy. Być może zauważyłeś, że nasz gracz może przejść przez przeszkody. Musimy sprawić, by gra wykryła, kiedy gracz uderzył w przeszkodę i zakończyła grę.

Biblioteka fizyki Phaser zawiera detektor zderzacza. Wszystko, co musimy zrobić, to zainicjować go w funkcji tworzenia.

this.physics.add.collider (gamePiece, obstacle1, function (gamePiece, obstacle1) {
gamePiece.destroy ();
przeszkoda.destroy ();
obstacle2.destroy ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
przeszkoda.destroy ();
obstacle2.destroy ();
});

Metoda zderzacza wymaga trzech parametrów. Pierwsze dwa parametry określają, które obiekty kolidują. Tak więc powyżej mamy skonfigurowane dwa zderzacze. Pierwsza wykrywa, kiedy gra zderza się z przeszkodą1, a druga zderzacz szuka kolizji między grą a przeszkodą2.

Trzeci parametr mówi zderzaczowi, co ma zrobić, gdy wykryje kolizję. W tym przykładzie jest funkcja. Jeśli dojdzie do kolizji, wszystkie elementy gry zostaną zniszczone; to zatrzymuje grę. Teraz gracz zakończy grę, jeśli napotka przeszkodę.

Wypróbuj tworzenie gier z Phaserem

Istnieje wiele różnych sposobów na ulepszenie tej gry i uczynienie jej bardziej złożoną. Stworzyliśmy tylko jednego gracza, ale drugą grywalną postać można było dodać i kontrolować za pomocą elementów sterujących „awsd”. Podobnie możesz poeksperymentować z dodawaniem większej liczby przeszkód i zmienianiem szybkości ich ruchu.

To wprowadzenie pomoże Ci zacząć, ale jest jeszcze wiele do nauczenia się. Wspaniałą rzeczą w Phaserze jest to, że duża część fizyki gry jest wykonywana za Ciebie. To świetny, łatwy sposób na rozpoczęcie projektowania gier 2D. Kontynuuj tworzenie na podstawie tego kodu i udoskonalaj swoją grę.

Jeśli napotkasz jakiekolwiek błędy, debuger przeglądarki to świetny sposób na wykrycie problemu.

Jak używać Chrome DevTools do rozwiązywania problemów z witryną

Dowiedz się, jak korzystać z narzędzi programistycznych wbudowanych w przeglądarkę Chrome, aby ulepszać swoje witryny.

O autorze