Home-theater-designers
Phaser to framework do tworzenia gier wideo 2D. Używa HTML5 Canvas do wyświetlania gry i JavaScript do uruchamiania gry. Zaletą korzystania z Phasera w porównaniu z waniliowym JavaScriptem jest obszerna biblioteka, która uzupełnia większość fizyki gier wideo, co pozwala skoncentrować się na projektowaniu samej gry.
Phaser skraca czas programowania i ułatwia przepływ pracy. Nauczmy się tworzyć podstawową grę za pomocą Phasera.
Dlaczego warto rozwijać się za pomocą Phasera?
Fazer 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 aktualizacja.
W fazie 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 raz podczas uruchamiania gry.
Z drugiej strony aktualizacja przebiega w pętli przez całą grę. To koń pociągowy, który aktualizuje elementy gry, aby była interaktywna.
Skonfiguruj swój system do tworzenia gier za pomocą Phaser
Pomimo tego, że Phaser działa na HTML i JavaScript, gry są faktycznie uruchamiane po stronie serwera, a nie po stronie klienta. Oznacza to, że będziesz musiał uruchomić grę Twój lokalny gospodarz . Uruchamianie gry po stronie serwera umożliwia grze dostęp do dodatkowych plików i zasobów poza programem. polecam używanie XAMPP do konfiguracji hosta lokalnego jeśli nie masz jeszcze jednej konfiguracji.
Poniższy kod pozwoli Ci zacząć działać. Tworzy podstawowe środowisko gry.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
Do uruchomienia gra będzie wymagała obrazu PNG o nazwie „gamePiece” zapisanego w folderze „img” na lokalnym hoście. Dla uproszczenia w tym przykładzie użyto pomarańczowego kwadratu 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 nawet jednego znaku może spowodować spustoszenie, ale generalnie debugger wykryje te małe błędy.
Wyjaśnienie kodu konfiguracji
Jak na razie gra nic nie robi. Ale przebyliśmy już sporo terenu! Przyjrzyjmy się bliżej kodowi.
Aby gra Phaser działała, musisz zaimportować bibliotekę Phaser. Robimy to w wierszu 3. W tym przykładzie podaliśmy link do kodu źródłowego, ale możesz go pobrać na swój lokalny host i odnieść się również do pliku.
jak wyświetlić nagranie z dźwiękiem na iPhonie?
Znaczna część kodu do tej pory konfiguruje środowisko gry, które zmienna konfiguracja sklepy. W naszym przykładzie konfigurujemy grę fazerową z niebieskim tłem (CCFFFF w kodzie koloru szesnastkowego) o wymiarach 600 na 600 pikseli. Na razie fizyka gry została ustawiona na arkadyjska , ale Phaser oferuje inną fizykę.
Wreszcie, scena mówi programowi, aby uruchomił wstępne ładowanie funkcja 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, co jest potrzebne do uruchomienia gry. W naszym przypadku wstępnie załadowaliśmy obraz naszego fragmentu gry. Pierwszy parametr .obraz nazywa nasz obraz, a drugi mówi programowi, gdzie znaleźć obraz.
Obraz gamePiece został dodany do gry w funkcji tworzenia. Linia 29 mówi, że dodajemy obrazek gamePece jako sprite 270px w lewo i 450px w dół od lewego górnego rogu naszego obszaru gry.
Wprawianie w ruch naszego kawałka gry
Jak dotąd trudno to nazwać grą. Po pierwsze, nie możemy przesunąć naszego pionka. 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ę uruchomić, gdy aktualizujemy grę.
Dodawanie funkcji aktualizacji
Nowa scena w konfiguracji:
scene: {
preload: preload,
create: create,
update: update
}Następnie dodaj funkcję aktualizacji poniżej funkcji tworzenia:
jakie są trofea w snapchat
function update(){
}Uzyskiwanie kluczowych danych wejściowych
Aby umożliwić graczowi kontrolowanie elementu gry za pomocą klawiszy strzałek, będziemy musieli dodać zmienną, aby śledzić, które klawisze gracz naciska. Poniżej zadeklaruj zmienną o nazwie keyInputs, w której zadeklarowaliśmy gamePieces. Zadeklarowanie go tam pozwoli wszystkim funkcjom uzyskać 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 kawałek gry. W poniższym przykładzie element gry jest przesunięty o 2px, ale możesz zwiększyć lub zmniejszyć liczbę. Przesuwanie kawałka 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-bitów.
Dodawanie przeszkód do gry
Ten przykładowy kod wykorzystuje dwa ikonki przeszkód zwane przeszkodą1 i przeszkodą 2. przeszkoda1 to niebieski kwadrat, a przeszkoda2 jest zielona. Każdy obraz będzie musiał być wstępnie załadowany, podobnie jak duszek z gry.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.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();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Wprawianie przeszkód w ruch
Aby tym razem przesunąć pionki, nie chcemy używać danych wejściowych gracza. Zamiast tego niech jeden kawałek przesuwa się od góry do dołu, a drugi od lewej do prawej. Aby to zrobić, dodaj następujący kod do funkcji aktualizacji:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Powyższy kod przesunie przeszkodę1 w dół ekranu i przeszkodę2 w poprzek obszaru gry 4px na klatkę. Gdy kwadrat jest poza ekranem, jest przesuwany z powrotem na przeciwną stronę w nowym losowym miejscu. Dzięki temu gracz zawsze znajdzie nową przeszkodę.
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 wykrywała trafienie gracza w przeszkodę i kończyła grę.
Biblioteka fizyki Phaser posiada detektor zderzaczy. Wszystko, co musimy zrobić, to zainicjować go w funkcji tworzenia.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Metoda zderzacza wymaga trzech parametrów. Pierwsze dwa parametry określają, które obiekty się kolidują. Powyżej mamy ustawione dwa zderzacze. Pierwszy wykrywa, kiedy gra zderza się z przeszkodą1, a drugi zderzacz szuka kolizji pomiędzy granym a przeszkodą2.
Trzeci parametr mówi zderzaczowi, co ma zrobić po wykryciu kolizji. W tym przykładzie jest funkcja. W przypadku kolizji wszystkie elementy gry zostają zniszczone; to zatrzymuje grę. Teraz gracz zakończy grę, jeśli uderzy w przeszkodę.
Wypróbuj tworzenie gier z Phaser
Istnieje wiele różnych sposobów ulepszania i komplikowania tej gry. Stworzyliśmy tylko jednego gracza, ale drugą grywalną postać można dodać i kontrolować za pomocą elementów sterujących 'awsd'. Podobnie możesz poeksperymentować z dodawaniem kolejnych przeszkód i zmienianiem prędkości ich ruchu.
gry vr na Androida bez kontrolera
To wprowadzenie pozwoli Ci zacząć, ale pozostało jeszcze wiele do nauczenia się. Wspaniałą rzeczą w Phaserze jest to, że większość fizyki gry jest wykonywana za Ciebie. To świetny, łatwy sposób na rozpoczęcie projektowania gier 2D. Kontynuuj budowanie na tym kodzie i udoskonalanie swojej gry.
Jeśli napotkasz jakiekolwiek błędy, debuger przeglądarki to świetny sposób na wykrycie problemu.
Udział Udział Ćwierkać E-mail 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.
Czytaj dalej Powiązane tematy- Programowanie
- JavaScript
- HTML5
- Produkcja gier
J. Seaton jest pisarzem naukowym, który specjalizuje się w rozwiązywaniu złożonych tematów. Posiada tytuł doktora na Uniwersytecie Saskatchewan; jej badania koncentrowały się na wykorzystaniu nauki opartej na grach w celu zwiększenia zaangażowania uczniów w Internecie. Kiedy nie pracuje, znajdziesz ją z jej czytaniem, graniem w gry wideo lub ogrodnictwem.
Więcej od Jennifer SeatonZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować