Vytvorenie tvojej prvej hry v programe Phaser 3

Vitaj v našom prvom kurze, kde si vytvoríš hru v hernom motore Phaser 3. Naučíš sa tu vytvoriť si malú hru s hráčom, ktorý behá a skáče po plošinkách, zbiera hviezdy a vyhýba sa podliakom. Počas tvorby hry si vysvetlíme niektoré základné rysy tohto frameworku.

Čo je Phaser?

Phaser je HTML5 framework na tvorbu hier, ktorý pomáha vývojárom skutočne rýchlo vytvárať kvalitné HTML5 hry, ktoré fungujú v rôznych prehliadačoch. Bol vytvorený tak, aby využíval všetky možnosti moderných desktopových a mobilných prehliadačov. Jediným požiadavkom na prehliadač je podpora značky canvas.

Začíname

Stiahni si tento súbor zip, ktorý obsahuje kód pre každý krok tohto kurzu a tiež všetky assety, ktoré budeš potrebovať.

Mal by si mať skutočne iba základné vedomosti o JavaScripte.

Prejdi si kurz Začíname, kde sa dozvieš, ako si môžeš framework stiahnuť, ako si nastavíš lokálne vývojové prostredie. Získaš tu aj prvé poznatky o štruktúre projektu vo frameworku Phaser a o jeho základných funkciách.

Ak si si prešiel kurz Začíname, tak si podľa neho stiahni Phaser a priprav si všetko na programovanie. Ak si si ešte nestiahol zdroje pre tento kurz, tak to urob teraz a rozbaľ ich do koreňovej zložky svojho webu.

Otvor si stránku part1.html vo svojom obľúbenom editore. Pozrime sa na kód, ktorý obsahuje. Vidíme tu zvyčajný HTML kód, vďaka ktorému získame prístup ku frameworku Phaser. Potom v značke script vidíme tento kód:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

Pomocou objektu config nakonfiguruješ svoju hru. Môžeš tu nastaviť hodnoty pre množstvo vlastností. S väčšinou z nich sa stretneš až v budúcnosti. V tomto kurze si nastavíš len vykreslovač, rozmery a defaultnú scénu.

Konfiguračný objekt config použijeme pri vytváraní inštancie objektu Phaser.Game, ktorú uložíme do lokálnej premennej game. Takto sa Phaser preberie ku životu.

Vo Phasere 2 objekt game fungoval ako brána ku takmer všetkým interným systémom a často sa ku nemu pristupovalo z globálnej premennej. Vo Phasere 3 toto už neplatí a nemá zmysel ukladať ho do globálnej premennej.

Vlastnosť type môže mať hodnotu Phaser.CANVAS, Phaser.WEBGL alebo Phaser.AUTO. Určuje kontext pre vykreslovanie, ktorý si vyberáš pre svoju hru. Doporučená hodnota Phaser.AUTO automaticky hľadá WebGL, ale ak ho prehliadač alebo zariadenie nepodporuje, tak využije Canvas. Prvok canvas, ktorý Phaser vytvorí, sa pripojí ku dokumentu. Máš však možnosť, v objektu config, určiť rodičovský kontajner.

Vlastnosti width a height nastavujú veľkosť prvku canvas na stránke, ktorý vytvorí Phaser. V našom prípade ide o 800x600 pixelov. Tvoj herný svet môže mať samozrejme aj inú veľkosť.

Ku vlastnosti scene konfiguračného objektu sa dostaneme neskôr.