Vytvoření první hry ve Phaseru 3

V├¡tejte v na┼íem prvn├¡m tutori├ílu o vytvo┼Öen├¡ hry ve Phaseru 3. Nau─ì├¡me se zde, jak vytvo┼Öit malou hru s hr├í─ìem, kter├¢ b─øh├í a sk├í─ìe po plo┼íink├ích, sb├¡r├í hv─øzdy a vyh├¢b├í se nep┼Ö├ítel┼»m. B─øhem tvorby si vysv─øtl├¡me n─økter├® z├íkladn├¡ rysy frameworku.

Co je Phaser?

Phaser je HTML5 framework pro tvorbu her a jeho c├¡lem je pomoci v├¢voj├í┼Ö┼»m vytv├í┼Öet kvalitn├¡ HTML5 hry spou┼ít─øn├® v prohl├¡┼¥e─ì├¡ch opravdu rychle. Vytvo┼Öen byl p┼Ö├¡mo k vyu┼¥it├¡ v├¢hod modern├¡ch prohl├¡┼¥e─ì┼», desktopov├¢ch i mobiln├¡ch. Jedin├¢ po┼¥adavek na prohl├¡┼¥e─ì je podpora tagu canvas.

Příprava

St├íhn─øte si tento soubor zip, kter├¢ obsahuje k├│d pro ka┼¥d├¢ krok tohoto tutori├ílu a tak├® assety, kter├® budeme pot┼Öebovat. Jako assety souhrnn─ø ozna─ìujeme obr├ízky, zvuky, fonty a dal┼í├¡ obdobn├® polo┼¥ky, kter├® na┼íe hra pou┼¥├¡v├í.

Dále budete potřebovat opravdu základní znalost JavaScriptu.

Tak├® si projd─øte Jak za─ì├¡t, kde se dozv├¡te, jak framework st├íhnout, nastavit lok├íln├¡ v├¢vojov├® prost┼Öed├¡ a kde z├¡sk├íte p┼Öehled o struktu┼Öe projektu ve Phaseru a jeho z├íkladn├¡ch funkc├¡ch.

Pokud jste pro┼íli Jak za─ì├¡t, tak m├íte sta┼¥en├¢ Phaser a v┼íe nastaven├® a p┼Öipraven├®. St├íhn─øte si zdroje pro tento tutori├íl a rozbalte je do ko┼Öenov├® slo┼¥ky sv├®ho webu (web root).

Otev┼Öete str├ínku part1.html v editoru, kter├¢ pou┼¥├¡v├íte a pod├¡v├íme se bl├¡┼¥e na k├│d, kter├¢ obsahuje. Pokud p┼Öesko─ì├¡me z├íkladn├¡ HTML k├│d, kter├¢ do str├ínky vkl├íd├í Phaser, pak struktura k├│du vypad├í takto:

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

Objekt config ur─ìuje, jak nakonfigurujete svou hru. Existuje mnoho vlastnost├¡, kter├® zde mohou b├¢t nastaveny a s v─øt┼íinou se st┼Öetnete b─øhem rozv├¡jen├¡ sv├¢ch znalost├¡ Phaseru. V tomto tutori├ílu jen nastav├¡me renderer, rozm─øry a v├¢choz├¡ sc├®nu (objekt Scene).

Konfigura─ìn├¡ objekt config pou┼¥ijeme p┼Öi vytv├í┼Öen├¡ instance objektu Phaser.Game, kterou ulo┼¥├¡me do lok├íln├¡ prom─ønn├® game. To zah├íj├¡ inicializaci Phaseru.

Ve Phaseru 2 objekt game fungoval jako br├ína k t├®m─ø┼Ö v┼íem intern├¡m syst├®m┼»m a ─ìasto se k n─ømu p┼Öistupovalo z glob├íln├¡ prom─ønn├®. Ve Phaseru 3 toto neplat├¡ a nem├í nad├íle smysl ukl├ídat ho do glob├íln├¡ prom─ønn├®.

Vlastnost type m┼»┼¥e b├¢t bu─Å Phaser.CANVAS, Phaser.WEBGL nebo Phaser.AUTO. Ur─ìuje kontext pro vykreslov├ín├¡ (rendering context), kter├¢ chcete pou┼¥├¡t pro svou hru. Doporu─ìen├í hodnota Phaser.AUTO automaticky zkus├¡ vyu┼¥├¡t WebGL, ale pokud ho prohl├¡┼¥e─ì nebo za┼Ö├¡zen├¡ nepodporuje, tak vyu┼¥ije Canvas. Prvek canvas, kter├¢ Phaser vytvo┼Ö├¡ je jednodu┼íe p┼Öipojen k dokumentu v tom m├¡st─ø, kde byl vol├ín skript. Ale pokud chcete, m┼»┼¥ete v objektu config tak├® specifikovat rodi─ìovsk├¢ kontejner (vlastnost parent).

Vlastnosti width a height nastavuj├¡ velikost prvku canvas na str├ínce, kter├¢ Phaser vytvo┼Ö├¡. V na┼íem p┼Ö├¡pad─ø 800x600 pixel┼». V├í┼í hern├¡ sv─øt m┼»┼¥e m├¡t libovolnou velikost, ale toto je rozli┼íen├¡, ve kter├®m bude hra zobrazena.

Vlastnost scene konfigura─ìn├¡ho objektu bude rozebr├ína detailn─øji d├íle v tomto tutori├ílu.