Začíname s Phaserom na vývoj hier

Začíname s Phaserom na vývoj hier

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





Phaser skracuje dobu vývoja a uľahčuje pracovný tok. Naučme sa vytvoriť základnú hru s Phaserom.



Prečo sa vyvíjať pomocou Phaseru?

Phaser je podobný iným vizuálnym programovacím jazykom v tom, že program je založený na slučkový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 nahrajú a sprístupnia sa hre.

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



Aktualizácia na druhej strane prebieha v celej hre v slučke. Je to pracant, ktorý aktualizuje prvky hry tak, aby bola interaktívna.

Nastavte si systém na 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ť spustiť hru váš localhost . Spustenie herného 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.



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







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


Na spustenie hry bude potrebný obrázok PNG s názvom „gamePiece“ uložený do priečinka „img“ na vašom lokálnom serveri. Pre jednoduchosť tento príklad používa oranžový štvorec 60x hra de60px. Vaša hra by mala vyzerať takto:



Ak narazíte na problém, pomocou ladiaceho programu vášho prehliadača zistite, čo sa stalo. Chýbajúci čo i len jeden znak môže spôsobiť zmätok, ale vo všeobecnosti váš debugger zachytí tieto malé chyby.

Vysvetlenie inštalačného kódu

Zatiaľ hra nič nerobí. Ale už sme pokryli veľa zeme! Pozrime sa na kód podrobnejšie.

Na spustenie hry Phaser je potrebné importovať knižnicu Phaser. Robíme to na riadku 3. V tomto prípade sme prepojili zdrojový kód, ale môžete si ho stiahnuť do svojho lokálneho hostiteľa a odkazovať na súbor.

ako zmeniť usporiadanie stránok v programe Word Mac

Veľká časť kódu zatiaľ konfiguruje herné prostredie, ktoré je premennou konfigur obchody. V našom prípade nastavujeme phaserovú hru s modrým pozadím (CCFFFF v hexadecimálnom farebnom kóde), ktorá je 600 x 600 pixelov. Fyzika hry je zatiaľ nastavená na Arcadian , ale Phaser ponúka inú fyziku.

Nakoniec, scéna povie programu, aby spustil súbor predpätie funkciu pred spustením hry a vytvoriť funkciu na spustenie hry. Všetky tieto informácie sú odoslané do objektu hry s názvom hra .

Súvisiace: 6 najlepších prenosných počítačov 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 hry. V našom prípade sme si vopred načítali obrázok našej hernej figúrky. Prvý parameter .obraz pomenuje náš obrázok a druhý povie programu, kde obrázok nájsť.

Do hry bol vo funkcii vytvorenia pridaný obrázok gamePiece. Riadok 29 hovorí, že pridávame obrázok gamePiece ako sprite o 270 pixlov vľavo a 450 pixelov nadol z ľavého horného rohu našej hernej oblasti.

Urobte z našej hry kúsok

Zatiaľ sa to dá len ťažko nazvať hrou. Jednak nemôžeme hýbať našim herným kúskom. Aby sme mohli v našej hre veci meniť, budeme musieť pridať funkciu aktualizácie. Rovnako budeme musieť upraviť scénu v konfiguračnej premennej, aby sme hre povedali, akú funkciu má spustiť, keď hru aktualizujeme.

Pridanie funkcie aktualizácie

Nová scéna v konfigurácii:

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

Ďalej pridajte funkciu aktualizácie pod funkciu vytvorenia:

požiadavka deskriptora zariadenia zlyhala Windows 10 android
function update(){
}

Získanie kľúčových vstupov

Aby hráč mohol ovládať figúrku pomocou klávesov so šípkami, budeme musieť pridať premennú, ktorá bude sledovať, ktoré klávesy hráč stlačí. Nižšie, kde sme deklarovali gamePieces, deklarujte premennú s názvom keyInputs. Ak ho tam deklarujete, umožní všetkým funkciám prístup k novej premennej.

var gamePiece;
var keyInputs;

Premenná keyInput by mala byť inicializovaná pri vytváraní hry vo funkcii vytvoriť.

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

Teraz vo funkcii aktualizácie môžeme skontrolovať, či hráč stlačí kláves so šípkou, a ak áno, podľa toho presunúť našu figúrku. V nižšie uvedenom príklade sa hra posunie o 2 pixely, ale môžete z nej urobiť väčšie alebo menšie číslo. Premiestňovanie figúrky po 1 pixele sa mi zdalo 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;
}
}

Hra má teraz pohyblivý charakter! Ale aby to bola hra, potrebujeme cieľ. Pridajme niekoľko prekážok. Vyhý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 dva prekážkové skřítky nazývané prekážka1 a prekážka 2. prekážka1 je modrý štvorec a prekážka2 je zelená. Každý obrázok bude musieť byť vopred načítaný, rovnako ako 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');
}

Potom bude musieť byť každý prekážkový sprite inicializovaný vo funkcii vytvoriť, rovnako ako 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');
}

Prinútenie prekážok k pohybu

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

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

Vyššie uvedený kód presunie prekážku1 po obrazovke a prekážku2 po hernej oblasti po 4 pixeloch v každom rámci. Akonáhle je štvorec mimo obrazovku, presunie sa späť na opačnú stranu na nové náhodné miesto. Tým sa zabezpečí, že pre hráča bude vždy nová prekážka.

Detekcia kolízií

Ale ešte nie sme úplne hotoví. Možno ste si všimli, že náš hráč dokáže prejsť priamo cez prekážky. Musíme zaistiť, aby hra detekovala, keď hráč narazí na prekážku, a ukončila hru.

Fyzikálna knižnica Phaser má detektor zrážok. Všetko, čo musíme urobiť, je inicializovať ho vo funkcii vytvoriť.

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

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

Tretí parameter informuje zberač o tom, čo má robiť, keď zistí kolíziu. V tomto prípade existuje funkcia. Ak dôjde k zrážke, všetky herné prvky sú zničené; tým sa hra zastaví. Teraz hráč prejde, ak narazí na prekážku.

Vyskúšajte vývoj hier s Phaserom

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

najlepšie bezplatné hranie počítačových hier 2017

Tento úvod vám pomôže začať, ale je toho veľa, čo sa ešte môžete naučiť. Skvelé na Phaseri je, že veľa hernej fyziky je urobených za vás. Je to veľmi jednoduchý spôsob, ako začať s navrhovaním 2D hier. Pokračujte v budovaní tohto kódu a zdokonaľujte svoju hru.

Ak narazíte na nejaké chyby, ladiaci program vášho prehliadača je skvelým spôsobom, ako problém odhaliť.

zdieľam zdieľam Tweet E -mail Ako používať Chrome DevTools na riešenie problémov s webovými stránkami

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

Čítajte ďalej Súvisiace témy
  • Programovanie
  • JavaScript
  • HTML5
  • Vývoj hry
O autorovi Jennifer Seaton(21 publikovaných článkov)

J. Seaton je vedecký spisovateľ, ktorý sa špecializuje na delenie zložitých tém. Má doktorát z University of Saskatchewan; jej výskum sa zameral na využitie učenia založeného na hrách na zvýšenie zapojenia študentov online. Keď nepracuje, nájdete ju pri jej čítaní, hraní videohier alebo záhradníctve.

Viac od Jennifer Seaton

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber