Začínáme s Phaserem pro vývoj her

Phaser je rámec pro vytváření 2D videoher. K zobrazení hry používá HTML5 Canvas a ke spuštění hry JavaScript. Výhodou používání Phaseru oproti vanilkovému JavaScriptu je to, že má rozsáhlou knihovnu, která doplňuje většinu fyziky videoher a umožňuje vám soustředit se na návrh samotné hry.

Phaser zkracuje dobu vývoje a usnadňuje pracovní postup. Naučme se, jak vytvořit základní hru s Phaserem.

Proč se vyvíjet s Phaserem?

Phaser je podobný jiným vizuálním programovacím jazykům v tom, že program je založen na smyčkových aktualizacích. Phaser má tři hlavní fáze: předběžné načítání, vytváření a aktualizace.

Při předběžném načtení se aktiva hry nahrají a zpřístupní hře.

Vytvořit inicializuje hru a všechny počáteční herní prvky. Každá z těchto funkcí se spustí jednou při spuštění hry.

Aktualizace na druhé straně běží ve smyčce po celou dobu hry. Je to kůň, který aktualizuje prvky hry, aby byla interaktivní.

Nastavte si systém pro vývoj her pomocí Phaseru

Navzdory tomu, že Phaser běží na HTML a JavaScriptu, jsou hry ve skutečnosti spuštěny na straně serveru, nikoli na straně klienta. To znamená, že budete muset hru spustit

váš localhost. Spuštění hry na straně serveru umožňuje vaší hře přístup k dalším souborům a aktivům mimo program. doporučuji pomocí XAMPP k nastavení localhost pokud ještě nemáte jedno nastavení.

Co je 127.0 0.1, Localhost nebo Loopback adresa?

Viděli jste ve svém počítači „localhost“, ale co to je? Co znamená adresa 127.0.0.1? Byl jste hacknut?

Níže uvedený kód vás uvede do provozu. Nastavuje základní herní prostředí.

Ke spuštění bude hra vyžadovat obrázek PNG s názvem „gamePiece“ uložený do složky „img“ ve vašem localhostu. Pro zjednodušení tento příklad používá oranžový čtverec 60x hra de60px. Vaše hra by měla vypadat asi takto:

Pokud narazíte na problém, použijte ladicí program prohlížeče, abyste zjistili, co se stalo. Chybějící jediný znak může způsobit zmatek, ale obecně váš debugger tyto malé chyby zachytí.

Vysvětlení kódu instalace

Hra zatím nic nedělá. Ale už jsme hodně pokryli! Podívejme se na kód podrobněji.

Chcete-li spustit hru Phaser, musíte importovat knihovnu Phaser. Děláme to na řádku 3. V tomto příkladu jsme odkazovali na zdrojový kód, ale můžete si jej stáhnout do svého localhost a také odkazovat na soubor.

Velká část kódu zatím konfiguruje herní prostředí, které proměnná konfigurace obchody. V našem příkladu nastavujeme phaserovou hru s modrým pozadím (CCFFFF v hexadecimálním barevném kódu), které je 600 x 600 pixelů. Prozatím byla nastavena fyzika hry pasáž, ale Phaser nabízí jinou fyziku.

Konečně, scéna řekne programu, aby spustil předpětí funkce před spuštěním hry a vytvořit spusťte hru. Všechny tyto informace jsou předány volanému objektu hry hra.

Příbuzný: 6 nejlepších notebooků pro programování a kódování

V další části kódu se hra skutečně formuje. Funkce preload je místo, kde chcete inicializovat vše, co potřebujete ke spuštění hry. V našem případě jsme předinstalovali obrázek našeho herního dílu. První parametr .obraz pojmenuje náš obrázek a druhý řekne programu, kde obrázek najít.

Obrázek gamePiece byl do hry přidán ve funkci vytvoření. Řádek 29 říká, že přidáváme image gamePiece jako sprite 270px vlevo a 450px dolů z levého horního rohu naší herní oblasti.

Jak se náš herní kousek pohne

Zatím to lze jen stěží nazvat hrou. Za prvé, nemůžeme pohnout s naším herním dílem. Abychom mohli změnit věci v naší hře, budeme muset přidat funkci aktualizace. Budeme také muset upravit scénu v konfigurační proměnné, abychom hře řekli, která funkce se má spustit, když ji aktualizujeme.

Přidání funkce aktualizace

Nová scéna v konfiguraci:

scéna: {
preload: preload,
vytvořit: vytvořit,
aktualizace: aktualizace
}

Dále přidejte funkci aktualizace pod funkci vytvoření:

aktualizace funkce () {
}

Získání klíčových vstupů

Aby hráč mohl ovládat herní prvek pomocí kláves se šipkami, budeme muset přidat proměnnou ke sledování, které klávesy hráč stiskne. Deklarujte proměnnou nazvanou keyInputs níže, kde jsme deklarovali gamePieces. Deklarací to umožníte všem funkcím přístup k nové proměnné.

var gamePiece;
var keyInputs;

Proměnná keyInput by měla být inicializována při vytváření hry ve funkci create.

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

Nyní ve funkci aktualizace můžeme zkontrolovat, zda hráč stiskne klávesu se šipkou, a pokud ano, podle toho přesunout naši herní část. V níže uvedeném příkladu je hra přesunuta o 2 pixely, ale můžete z ní udělat větší nebo menší číslo. Přesunutí kousku po 1 pixelu se zdálo trochu pomalé.

aktualizace funkce () {
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;
}
}

Tato hra má nyní pohyblivý charakter! Ale abychom skutečně byli hrou, potřebujeme cíl. Přidejme nějaké překážky. Uhýbání překážkám bylo základem mnoha her v 8bitové éře.

Přidání překážek do hry

Tento příklad kódu používá dva překážkové skřítky zvané překážka1 a překážka 2. překážka1 je modrý čtverec a překážka2 je zelená. Každý obrázek bude muset být předem načten stejně jako sprite hry.

funkce preload () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('překážka1', 'img / překážka1.png');
this.load.image ('překážka2', 'img / překážka2.png');
}

Poté bude třeba ve funkci create inicializovat každého překážkového sprajta, stejně jako gamepiece.

funkce create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
prekážka1 = this.physics.add.sprite (200, 0, 'překážka1');
prekážka2 = this.physics.add.sprite (0, 200, 'překážka2');
}

Přesouvání překážek

Abychom tentokrát přesunuli figurky, nechceme používat vstup hráče. Místo toho nechme jeden kus posunout shora dolů a druhý zleva doprava. Chcete-li to provést, přidejte do funkce aktualizace následující kód:

prekážka1.y = překážka1.y + 4;
pokud (překážka1.y> 600) {
překážka1.y = 0;
prekážka1.x = Phaser. Matematika. Mezi (0, 600);
}
prekážka2.x = překážka2.x + 4;
pokud (překážka2.x> 600) {
překážka2.x = 0;
prekážka2.y = Phaser. Matematika. Mezi (0, 600);
}

Výše uvedený kód přesune překážku1 dolů po obrazovce a překážku2 po herní oblasti 4px každý snímek. Jakmile je čtverec mimo obrazovku, přesune se zpět na opačnou stranu na nové náhodné místo. Tím zajistíte, že pro hráče bude vždy nová překážka.

Detekce kolizí

Ale ještě nejsme úplně hotovi. Možná jste si všimli, že náš hráč může projít přes překážky. Musíme hru nechat detekovat, když hráč narazí na překážku, a ukončit hru.

Knihovna fyziky Phaser má detektor urychlovače. Jediné, co musíme udělat, je inicializovat to ve funkci create.

this.physics.add.collider (gamePiece, překážka1, funkce (gamePiece, překážka1) {
gamePiece.destroy ();
prekážka.destroy ();
prekážka2.destroy ();
});
this.physics.add.collider (gamePiece, překážka2, funkce (gamePiece, překážka2) {
gamePiece.destroy ();
prekážka.destroy ();
prekážka2.destroy ();
});

Collider metoda vyžaduje tři parametry. První dva parametry určují, které objekty kolidují. Takže výše máme nastaveny dva urychlovače. První detekuje, kdy se gamepiece srazí s překážkou1 a druhý srazí, že hledá kolize mezi gamepiece a překážkou2.

Třetí parametr říká srážce, co má dělat, jakmile detekuje kolizi. V tomto příkladu je funkce. Pokud dojde ke kolizi, budou zničeny všechny herní prvky; tím se hra zastaví. Nyní hráč přejde na další hru, pokud narazí na překážku.

Vyzkoušejte vývoj her s Phaserem

Existuje mnoho různých způsobů, jak lze tuto hru vylepšit a zkomplikovat. Vytvořili jsme pouze jednoho hráče, ale druhou hratelnou postavu lze přidat a ovládat pomocí ovládacích prvků „awsd“. Podobně můžete experimentovat s přidáním dalších překážek a změnou rychlosti jejich pohybu.

Tento úvod vás seznámí, ale zbývá vám toho ještě hodně naučit. Na Phaseru je skvělé, že spousta herní fyziky je pro vás hotová. Je to skvělý snadný způsob, jak začít navrhovat 2D hry. Pokračujte v budování na tomto kódu a vylepšujte svou hru.

Pokud narazíte na nějaké chyby, je skvělým způsobem, jak problém zjistit, ladicí program prohlížeče.

Jak používat Chrome DevTools k řešení problémů s webem

Naučte se, jak pomocí integrovaných vývojových nástrojů prohlížeče Chrome vylepšovat své webové stránky.

O autorovi