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

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

Phaser je framework 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, že má rozsáhlou knihovnu, která doplňuje většinu fyziky videoher a umožňuje vám soustředit se na navrhování samotné hry.





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



Proč vyvíjet s Phaserem?

Phaser je podobný ostatní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í se 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ěží po celé hře ve smyčce. Je to pracan, 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, hry jsou ve skutečnosti spuštěny na straně serveru, nikoli na straně klienta. To znamená, že budete muset spustit hru tvůj localhost . Spuštění hry na straně serveru umožňuje vaší hře přístup k dalším souborům a prostředkům mimo program. doporučuji pomocí XAMPP k nastavení localhost pokud ještě nemáte jedno nastavení.



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







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');
}


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



Pokud narazíte na problém, pomocí ladicího programu prohlížeče zjistěte, co se stalo. Chybějící byť jen jeden znak může způsobit zmatek, ale obecně váš debugger zachytí tyto malé chyby.

Vysvětlení instalačního kódu

Zatím hra nic nedělá. Ale už jsme pokryli spoustu půdy! Podívejme se na kód hlouběji.

Aby byla hra Phaser spuštěna, 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 ho stáhnout na localhost a také odkazovat na soubor.

vymazání pevného disku Windows 10

Velká část kódu zatím konfiguruje herní prostředí, což je proměnná konfigur 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ů. Fyzika hry byla prozatím nastavena na Arcadian , ale Phaser nabízí jinou fyziku.

Konečně, scéna řekne programu, aby spustil soubor předpětí funkce před spuštěním hry a vytvořit funkce pro spuštění hry. Všechny tyto informace jsou předány hernímu objektu s názvem hra .

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

Další část kódu je místo, kde 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 si předinstalovali obrázek naší herní figurky. První parametr .obraz pojmenuje náš obrázek a druhý řekne programu, kde obrázek najde.

Do hry byl přidán obrázek gamePiece ve funkci create. Řá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.

Aby se naše hra stala tahem

Tomu se zatím dá jen stěží říkat hra. Jednak nemůžeme přesunout naši figurku. Abychom mohli změnit věci v naší hře, budeme muset přidat funkci aktualizace. Také budeme muset upravit scénu v konfigurační proměnné, abychom hře řekli, jakou funkci má při aktualizaci hry spustit.

Přidání funkce aktualizace

Nová scéna v konfiguraci:

scene: {
preload: preload,
create: create,
update: update
}

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

jak převzít zvuk z videa
function update(){
}

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, která bude sledovat, jaké klávesy hráč stiskne. Níže deklarujte proměnnou nazvanou keyInputs, kde jsme deklarovali gamePieces. Když to tam prohlásíte, 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, když je hra vytvořena ve funkci create.

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

Nyní ve funkci aktualizace můžeme zkontrolovat, zda hráč mačká klávesu se šipkou, a pokud ano, podle toho přesunout naši figurku. V níže uvedeném příkladu se herní figurka přesune o 2 pixely, ale můžete z ní udělat větší nebo menší číslo. Pohyb kusu po 1 pixelu se zdál trochu pomalý.

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;
}
}

Tato hra má nyní pohyblivý charakter! Ale abychom skutečně byli hrou, potřebujeme cíl. Pojďme přidat nějaké překážky. Vyhýbání se 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 gamepiece sprite.

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

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

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');
}

Přemisťování překážek

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

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);
}

Výše uvedený kód přesune překážku1 po obrazovce a překážku2 po herní ploše 4px v každém snímku. 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římo přes překážky. Musíme zajistit, aby hra detekovala, když hráč narazí na překážku a hru ukončil.

Fyzikální knihovna Phaser má detektor urychlovače. Vše, co musíme udělat, je inicializovat to ve funkci create.

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 collider vyžaduje tři parametry. První dva parametry identifikují, které objekty se srazí. Nahoře tedy máme nastaveny dva srážky. První detekuje, kdy se gamepiece srazí s překážkou1 a druhý collider hledá kolize mezi gamepiece a překážkou2.

Třetí parametr sděluje urychlovači, co má dělat, jakmile detekuje kolizi. V tomto příkladu existuje funkce. Pokud dojde ke kolizi, všechny herní prvky jsou zničeny; tím se hra zastaví. Nyní hráč přejde, pokud narazí na překážku.

Vyzkoušejte vývoj her s Phaserem

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

proč mi spouštění počítače trvá tak dlouho?

Tento úvod vám pomůže začít, ale je toho ještě mnoho, co se můžete naučit. Skvělá věc na Phaseru je, že hodně herní fyziky je uděláno za vás. Je to skvělý snadný způsob, jak začít s navrhováním 2D her. Pokračujte v budování tohoto kódu a upřesněte svou hru.

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

Podíl Podíl tweet E-mailem Jak používat Chrome DevTools k řešení problémů s webovými stránkami

Naučte se používat integrované vývojové nástroje prohlížeče Chrome ke zlepšování svých webů.

Číst dále Související témata
  • Programování
  • JavaScript
  • HTML5
  • Vývoj hry
O autorovi Jennifer Seaton(21 článků zveřejněno)

J. Seaton je vědecký spisovatel, který se specializuje na bourání složitých témat. Má doktorát z University of Saskatchewan; její výzkum se zaměřil na využití herního učení ke zvýšení zapojení studentů online. Když nepracuje, najdete ji při čtení, hraní videoher nebo zahradničení.

Více od Jennifer Seaton

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru