image

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.