První kroky k vývoji her s Phaserem

Příchod HTML5 Změnilo to způsob, jakým vidíme web, nejen že nám poskytlo lepší nástroje pro jejich vývoj, ale také nám otevřelo možnosti vyvíjet aplikace, které jdou dál, jako v případě videoher.
Výhoda výroby videohry v HTML5 je to tak, že je kompatibilní prakticky s jakýmkoli zařízením, které má prohlížeč, a co je ještě lepší, aniž byste museli stahovat nebo provádět další instalace.
Díky této nové popularitě se rozšířily rámce pro vývoj videoher, z nichž každý má své vlastnosti a výhody, tentokrát se zaměříme na Phaser, důvodů je několik a můžeme je vidět v následujícím seznamu:

• Má skvělou komunitu a je aktivní.
• Je pravidelně aktualizován.
• Je zdarma k použití.
• Má fyzikální nástroje, které nám usnadňují život.

Protože vidíme, že má několik zajímavých výhod, chystáme se jej nainstalovat, ale nejprve se podívejme na některé požadavky, které rámec vyžaduje.
1- Potřebujeme přístup k internetu, abychom mohli stáhnout všechny zdroje, které vzniknou během instalace rámce, včetně tohoto.
2- Musíme mít nainstalovaný nebo schopný nainstalovat webový server tohoto stylu SVÍTILNA nebo WAMP nebo MAMP v závislosti na našem operačním systému, protože Phaser použití HTML5 a také JavaScript Náš prohlížeč proto z důvodu bezpečnostních opatření nepřijímá místní popravy.
3- Potřebujeme oprávnění pro přístup k potřebným složkám a službám, které jsou nastaveny během instalace rámce.
4- Potřebujeme prohlížeč kompatibilní s HTML5 a že má ladicí nástroje, v případě tohoto tutoriálu použijeme Firefox Developer Edition ve své nejnovější verzi v tuto chvíli si však mohou svobodně vybrat tu, která se jim zdá nejlepší.
5- Nakonec potřebujeme textový editor, abychom mohli psát kód pro příklady, protože to může být vždy cokoli, i když doporučujeme Vznešený text o NotePad ++ díky velkému počtu pluginů, které oba mají a které nám usnadňují život vývojářů.
První věc, kterou uděláme, abychom mohli nainstalovat Phaser je jít na své oficiální webové stránky a zde najdeme několik zdrojů, ale prozatím půjdeme do sekce, která říká Stažení:

ZVĚTŠIT

Máme několik možností stahování, dvě, které můžeme použít, jsou stažení komprimovaného souboru .zip nebo .tar.gz, můžeme také vytvořit klon z Github projektu, v našem případě stáhneme projekt v .zip, abychom proces urychlili. Jakmile stáhneme nebo naklonujeme projekt, nejdůležitější adresáře jsou následující:
docs / index.htmlTady máme vstup do offline a oficiální dokumentace verze, kterou jsme právě stáhli, může nám to pomoci zkontrolovat některé detaily, i když pokud máme možnost jít na internet a dokumentovat se, vždy budeme mít lepší možnosti.
build / phaser.min.jsToto je náš rámec jako takový, je to zmenšená a komprimovaná knihovna, která obsahuje všechny nástroje, které budeme potřebovat k zahájení našich prvních projektů.
Protože jsme stáhli projekt, abychom ověřili, že je vše v pořádku, musíme jednoduše zkopírovat rozbalenou složku, kam k ní můžeme přistupovat pomocí našeho webového serveru, obecně je to adresář www nebo public_html, to vše opravdu závisí na našem prostředí.
Jakmile jsme tam, musíme jít do našeho prohlížeče a spustit náš localhost / phaser nebo název, který jsme umístili, a uvidíme seznam souborů, zde musíme přejít do následující složky: zdroje / návody / 01 Začínáme / hellophaser / index.html a můžeme ocenit to, co vidíme na následujícím snímku obrazovky:

ZVĚTŠIT

Naše první hraProtože jsme si ověřili, že naše prostředí funguje perfektně, je na čase udělat naši první hru, a proto si v tuto chvíli stanovíme dosažitelný cíl pro naši úroveň, kde na konci příkladu musíme být schopni ukázat Skřítek na obrazovce.
Ve složce, ve které máme framework na našem webovém serveru, vytvoříme novou složku, v tomto případě ji nazveme phaser-příklad, dovnitř umístíme soubor phaser.min.js v kořenovém adresáři vytvoříme soubor s názvem index.html a další soubor s názvem main.js, musíme také umístit obrázek s názvem logo.png.webp což bude sprite, který si ukážeme, který lze nalézt v prostředcích rámce a může to být doporučená velikost 180 x 64 pixelů. Náš adresář by měl nakonec vypadat takto:

Protože máme nyní vytvořenou strukturu, musíme začít psát kód pro náš první projekt, proto musíme otevřít náš soubor index.html a tam zahrneme soubory .js které jsme vytvořili, kromě vytvoření a který bude mít jako identifikátor slovo hra Div. Podívejme se, jak náš kód vypadá:

 Naše první hra na Phaseru
Naše první hra =)

To bude základ, na kterém bude naše hra podporována, aby si uživatel mohl zobrazit obsah. Dalším krokem při vytváření naší první hry je napsat kód main.js, který zvládne veškerou logiku naší hry a obsahuje tři klíčové metody, podívejme se:
předpětíTato metoda je zodpovědná za předběžné načtení všech zdrojů, které naše hra potřebuje, ať už jde o obrázky, zvuk, videa atd. Vždy běží při spuštění.
vytvořitTato metoda se spustí po dokončení předpětí a jeho funkcí je začlenit načtené zdroje do naší hry, kromě toho, že nám dává možnost stanovit její počáteční nastavení.
AktualizaceNakonec tato metoda běží 60krát za sekundu a obsahuje skutečnou logiku naší hry, to je to, co nám dává pohyb, abych tak řekl.
Jak vidíme, každá z těchto metod má na starosti stav hry, první dvě jsou před začátkem hry, zatímco Aktualizace dochází během provádění. Jakmile definujeme, co která metoda dělá, musíme vidět pouze potřebný kód:

 var mainState = {preload: function () {// Načteme obrázek game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Náš obrázek zobrazujeme ve hře this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// změníme úhel o jednu jednotku 60krát za sekundu // tím získáme efekt otočení obrázku this.sprite.angle + = 1; }}; // zde spustíme naši hru a nastavíme ji // pro použití div gameDiv, který jsme vložili do naší HTMLvar hry = nový Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Jak vidíme na konci metod, vytvoříme proměnnou s názvem hra a v tomto spustíme instanci Phaser.Game kde předáváme nějaké parametry, v tuto chvíli o nich není nutné mnoho vědět, jednoduše je zkopírujeme tak, jak je vidíme. Ale zhruba toto je část, kde říkáme naší aplikaci, aby ji hledala Phaser takže vám řekne, co dělat s metodami, které jsme vytvořili výše a na konci s game.state.start je to místo, kde řekneme rámci, aby zahájilo naši hru.
Pokud je vše v pořádku, spustíme náš projekt v prohlížeči a na obrazovce bychom měli vidět otáčení vybraného obrázku:

V případě tohoto příkladu jsme použili obrázek, který spadá do zdrojů PhaserVe skutečnosti to však není požadavek, s jakýmkoli obrázkem bychom mohli dosáhnout stejných výsledků. Další věcí, které si v našem příkladu můžeme všimnout, je, že níže máme otevřenou konzolu pro ladění prohlížeče, tento nástroj je nejlepší přítel, kterého budeme mít, protože právě tam můžeme ladit různé chyby, které můžeme při vývoji našich her najít.
Tímto jsme tento návod dokončili, úspěšně jsme nainstalovali Phaser„Znali jsme některé počáteční vlastnosti tohoto skvělého rámce, a proto jsme vytvořili malou aplikaci nebo hru. Je důležité vzít tento tutoriál jako výchozí bod pro trochu podrobnější průzkum Phaser„Protože to není ani 1% všeho, co nám nabízí, je to však první krok, který nás tak často stojí udělat.