Začíname s programom Phaser pre vývoj hier

Phaser je rámec pre vytváranie 2D videohier. Na zobrazenie hry používa HTML5 Canvas a na jej spustenie JavaScript. Výhodou používania programu Phaser oproti vanilkovému JavaScriptu je rozsiahla knižnica, ktorá dokončuje väčšinu fyziky videohier a umožňuje vám sústrediť sa na návrh hry samotnej.

Phaser skracuje čas potrebný na vývoj a uľahčuje pracovný tok. Naučme sa, ako vytvoriť základnú hru s Phaserom.

Prečo sa vyvíjať s Phaserom?

Phaser je podobný iným vizuálnym programovacím jazykom v tom, že program je založený na opakovaných aktualizáciách. Phaser má tri hlavné fázy: predbežné načítanie, vytváranie a aktualizácia.

Pri predbežnom načítaní sa aktíva hry nahrávajú a sprístupňujú sa hre.

Vytvorením sa inicializuje hra a všetky počiatočné herné prvky. Každá z týchto funkcií sa pri spustení hry spustí raz.

Aktualizácia na druhej strane beží v priebehu celej hry v slučke. Je to ťažný kôň, ktorý aktualizuje prvky hry tak, aby bola interaktívna.

Nastavte si systém pre vývoj hier pomocou Phaseru

Napriek tomu, že Phaser beží na HTML a JavaScript, hry sú v skutočnosti spustené na strane servera, nie na strane klienta. To znamená, že budete musieť svoju hru spustiť ďalej váš localhost. Spustenie hry na strane servera umožňuje vašej hre prístup k ďalším súborom a prostriedkom mimo programu. odporúčam pomocou XAMPP na nastavenie localhost ak ešte nemáte jedno nastavenie.

Čo je 127.0 0.1, Localhost alebo adresa spätnej slučky?

„Localhost“ ste už videli vo svojom počítači, ale čo to je? Čo znamená adresa 127.0.0.1? Boli ste hacknutý?

Nasledujúci kód vás uvedie do prevádzky. Nastavuje základné herné prostredie.

Na spustenie bude hra vyžadovať obrázok PNG s názvom „gamePiece“ uložený do priečinka „img“ vo vašom localhost. Pre jednoduchosť tento príklad používa oranžový štvorec 60x60 de60px. Vaša hra by mala vyzerať asi takto:

Ak narazíte na problém, pomocou ladiaceho programu prehľadávača zistite, čo sa pokazilo. Vynechanie čo i len jedného znaku môže spôsobiť zmätok, ale všeobecne váš debugger tieto malé chyby zachytí.

Vysvetlenie kódu nastavenia

Hra zatiaľ nič nerobí. Ale už sme prešli veľa pôdy! Pozrime sa na kód podrobnejšie.

Ak chcete spustiť hru Phaser, musíte importovať knižnicu Phaser. Robíme to na riadku 3. V tomto príklade sme odkazovali na zdrojový kód, ale môžete si ho stiahnuť do svojho miestneho hostiteľa a tiež odkazovať na súbor.

Veľká časť kódu zatiaľ konfiguruje herné prostredie, ktoré premenná predstavuje konfigur obchodoch. V našom príklade nastavujeme phaserovú hru s modrým pozadím (CCFFFF v hexadecimálnom farebnom kóde), ktoré má veľkosť 600px na 600px. Zatiaľ je nastavená fyzika hry arkáda, ale Phaser ponúka inú fyziku.

Nakoniec scéna hovorí programu, aby spustil predpätie funkciu pred začiatkom hry a vytvoriť spustiť hru. Všetky tieto informácie sa odovzdávajú volanému hernému objektu hra.

Súvisiace: 6 najlepších notebookov na programovanie a kódovanie

V ďalšej časti kódu sa hra skutočne formuje. Funkcia predbežného načítania je miesto, kde chcete inicializovať všetko, čo potrebujete na spustenie svojej hry. V našom prípade sme predinštalovali obraz nášho herného dielu. Prvý parameter .obrázok pomenuje náš obrázok a druhá informuje program, kde má obrázok nájsť.

Obrázok gamePiece bol do hry pridaný vo funkcii vytvorenia. Riadok 29 hovorí, že pridávame image gamePiece ako sprite 270px doľava a 450px dole z ľavého horného rohu našej hernej oblasti.

Náš kúsok hry sa posúva ďalej

Zatiaľ sa to dá len ťažko nazvať hrou. Jednak nemôžeme pohnúť našim herným kúskom. Aby sme mohli zmeniť veci v našej hre, budeme musieť pridať aktualizačnú funkciu. Budeme tiež musieť upraviť scénu v konfiguračnej premennej, aby sme hre povedali, ktorá funkcia sa má pri aktualizácii hry spustiť.

Pridanie funkcie aktualizácie

Nová scéna v konfigurácii:

scéna: {
predpätie: predpätie,
vytvoriť: vytvoriť,
aktualizácia: aktualizácia
}

Ďalej pridajte funkciu aktualizácie pod funkciu vytvorenia:

aktualizácia funkcie () {
}

Získavanie kľúčových vstupov

Aby hráč mohol ovládať hru pomocou klávesov so šípkami, budeme musieť pridať premennú na sledovanie, ktoré klávesy hráč stláča. Deklarujte premennú nazvanú keyInputs nižšie, kde sme deklarovali gamePieces. Jeho deklarovaním povolíte všetkým funkciám prístup k novej premennej.

var hraKus;
var keyInputs;

Premenná keyInput by sa mala inicializovať pri vytváraní hry vo funkcii create.

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

Teraz vo funkcii aktualizácie môžeme skontrolovať, či hráč stláča kláves so šípkou, a ak sú, podľa toho presunieme náš herný kúsok. V príklade nižšie sa hracia figúrka presunie o 2 pixely, ale môžete ju zväčšiť alebo zmenšiť. Pohyb po kúsku po 1 pixeli sa zdal trochu pomalý.

aktualizácia funkcie () {
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;
}
}

Hra má teraz pohyblivý charakter! Ale aby sme skutočne boli hrou, potrebujeme cieľ. Pridajme nejaké prekážky. Uhýbanie sa prekážkam bolo základom mnohých hier v 8-bitovej ére.

Pridanie prekážok do hry

Tento príklad kódu používa dvoch prekážkových škriatkov zvaných prekážka1 a prekážka 2. prekážka1 je modrý štvorec a prekážka2 zelená. Každý obrázok bude musieť byť vopred načítaný rovnako ako gamepiece sprite.

preload funkcie () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('prekážka1', 'img / prekážka1.png');
this.load.image ('prekážka2', 'img / prekážka2.png');
}

Potom bude treba vo funkcii create inicializovať každého prekážkového skriptu, podobne ako v gamepice.

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

Dajte prekážkam priestor

Aby sme tentokrát presunuli figúrky, nechceme používať vstup hráča. Namiesto toho nechajme jeden kúsok posunúť sa zhora nadol a druhý pohybom zľava doprava. Za týmto účelom pridajte do funkcie aktualizácie nasledujúci kód:

prekážka1.y = prekážka1.y + 4;
ak (prekážka1.y> 600) {
prekážka1.y = 0;
prekážka1.x = Phaser. Matematika. Medzi (0, 600);
}
prekážka2.x = prekážka2.x + 4;
ak (prekážka2.x> 600) {
prekážka2.x = 0;
prekážka2.y = Phaser. Matematika. Medzi (0, 600);
}

Vyššie uvedený kód presunie prekážku1 nadol po obrazovke a prekážku2 po hernej ploche o 4 pixely v každom zábere. Akonáhle je štvorec mimo obrazovku, presunie sa späť na opačnú stranu na novom náhodnom mieste. Takto zabezpečíte, že hráč bude mať vždy novú prekážku.

Zisťovanie kolízií

Ešte však nie sme úplne hotoví. Možno ste si všimli, že náš hráč môže prejsť priamo cez prekážky. Musíme hru nechať rozpoznať, keď hráč narazí na prekážku, a ukončiť hru.

Knižnica fyziky Phaser má detektor urýchľovačov. Všetko, čo musíme urobiť, je inicializovať ho vo funkcii create.

this.physics.add.collider (gamePiece, prekážka1, funkcia (gamePiece, prekážka1) {
gamePiece.destroy ();
prekážka.zničiť ();
prekážka2.destroy ();
});
this.physics.add.collider (gamePiece, prekážka2, funkcia (gamePiece, prekážka2) {
gamePiece.destroy ();
prekážka.zničiť ();
prekážka2.destroy ();
});

Colliderova metóda vyžaduje tri parametre. Prvé dva parametre identifikujú, ktoré objekty sa zrazia. Takže vyššie máme nastavených dvoch zrážačov. Prvý detekuje, keď sa gamepice zrazí s prekážkou1 a druhý urýchľovač hľadá kolízie medzi gamepiece a prekážkou2.

Tretí parameter hovorí zrážke, čo má robiť, keď zistí kolíziu. V tomto príklade je funkcia. Ak dôjde ku kolízii, zničia sa všetky herné prvky; tým sa zastaví hra. Teraz hráč prejde na ďalšiu hru, ak narazí do prekážky.

Vyskúšajte vývoj hier s programom Phaser

Existuje mnoho rôznych spôsobov, ako je možné túto hru vylepšiť a skomplikovať. Vytvorili sme iba jedného hráča, ale druhú hrateľnú postavu bolo možné pridať a ovládať pomocou ovládacích prvkov „awsd“. Podobne môžete experimentovať s pridaním ďalších prekážok a so zmenou rýchlosti ich pohybu.

Tento úvod vás naštartuje, ale treba sa ešte veľa učiť. Na Phasere je vynikajúce to, že veľa hernej fyziky je za vás. Je to skvelý ľahký spôsob, ako začať s navrhovaním 2D hier. Pokračujte v budovaní na tomto kóde a vylepšujte svoju hru.

Ak narazíte na chyby, ladiaci program prehľadávača je skvelý spôsob, ako problém odhaliť.

Ako používať Chrome DevTools na riešenie problémov s webmi

Naučte sa, ako používať vstavané vývojové nástroje prehliadača Chrome na vylepšenie svojich webových stránok.

O autorovi