Jak vytvořit mobilní hru – krok za krokem

GameStylus je systém, díky kterému můžete snadno a rychle vytvořit hru pro mobilní telefony a tablety – bez znalosti programování. Vše jednoduše naklikáte ve webovém prohlížeči – výsledná hra ale běží ve skutečné mobilní aplikaci, takže je rychlá a snadno ovladatelná. Vytvořit můžete nejen hru, ale třeba i výukovou aplikaci, animaci a podobně. Zde je návod, jak na to – krok za krokem.

Již po přečtení tohoto krátkého návodu tedy budete umět vytvořit svou vlastní mobilní hru.

Doporučujeme: Pusťte si toto video s ukázkou celého postupu tvorby. Tip: Klikněte vpravo dole u videa na YouTube, vyberte maximální rozlišení a pusťte si video přes celou obrazovku. Tak budou čitelné všechny texty ve videu. Ve videu je zobrazena jednoduchá testovací hra, záběry ze skutečné hry můžete vidět třeba ve videu zde.

Text návodu pokračuje pod videem.

1. Prostě začínáme: Vytvoříme novou hru

Pro začátek se hodí mít alespoň tušení, o čem vaše hra, animace nebo jiná aplikace bude. A mít samozřejmě připravenou grafiku. Pak už se jen přihlaste ke svému uživatelskému účtu na GameStylus.com (pokud zde ještě nejste zaregistrováni, zdarma se zaregistrujte, nezabere to déle než 10 sekund). Po přihlášení vyplňte jméno své hry a stiskněte tlačítko Vytvořit novou hru.

(Postup je vždy stejný – nadále tedy budeme mluvit o hře, ale stejně můžete vytvořit i jinou aplikaci. A ještě jedna věc: Výše zmíněné jméno hry slouží jen pro vaše použití, nemusíte tedy nyní nutně vymyslet to, pod kterým bude hra později zveřejněna.)

2. Vložíme obrázky

Co hráč vaší hry na svém displeji uvidí? O tom se rozhoduje právě teď! Nahoře v menu najdete dvě důležité položky: Pozadí a Obrázky. Pozadí jsou obrázky scén hry – může to být les, komnata hradu nebo třeba povrch měsíce. Pozadí musí mít rozměry 1280 x 720 pixelů (bodů) a být ve formátu JPG.

Obrázky jsou všechno ostatní, co hráč uvidí: Předměty k sebrání, animované postavy a další pohyblivé prvky, animace hrdiny, objekty, za kterými hrdina prochází. Obrázky musí být ve formátu PNG. Doporučujeme rozhodně obrázky menší než 2000 x 2000 pixelů (bodů) ve 256 barvách (tj. 8bitové) a s průhledným pozadím. To zvládne každý rozumný grafický editor.

Obrázky a pozadí nahrajete snadno: Nahoře v menu zvolíte Obrázky (nebo pozadí) a pak u Soubory k nahrání použijete tlačítko Zvolit soubory. Nahrávat je můžete po jednom nebo více současně.

V jednom obrázku může být i více objektů: Třeba všechny fáze jedné animace nebo všechny předměty, které lze sebrat. Jakmile obrázek nahrajete, můžete ho rozřezat na jednotlivé části – tlačítkem Rozřezat obrázek. Pro rozřezání vždy stačí kliknout do levého horního rohu a pak do pravého dolního rohu objektu. Tak postupně označíte každý objekt v jednom obrázku.

Všechny obrázky mohou být použity opakovaně – vícekrát – v jedné scéně nebo ve více scénách – tak, jak potřebujete. Přitom lze ve scénách nastavit i jejich velikost, takže pro různé velikosti stačí mít nahrán pouze jeden obrázek.

3. Předměty k sebrání

Pokud ve vaší hře bude možné sebrat předměty, všechny jejich obrázky by měly být v jednom obrázku. Až je rozřežete, nechte si u každého z nich tlačítkem Ukázat/schovat čísla ukázat čísla, vyberte z rolety postupně číslo objektu (například 1 doleva nahoru) a vyplňte jeho název (ten je jen pro vás), popis a text k akci. Popis se ukáže hráči, když se na sebraný předmět podívá v seznamu předmětů – inventoráři, text k akci se ukáže, když předmět použije na nějakém místě, kde předmět nemá smysl použít.

4. Připravíme si hrdinu hry

Nyní přejděte v menu do položky Lokace – a vejděte do první z nich nazvané Pro testování a společné animace. Tady vytvoříte animace pohybu hlavního hrdiny. Asi budete potřebovat chůzi doprava, doleva a stání v klidu doprava, doleva, možná se vám bude hodit i chůze do šikma, nějaké skákání... Fantazii se meze nekladou.

V položce Hlavní menu je tlačítko Přidej anim. objekty na scénu, stiskněte ho a nahoře vyberte obrázek a pod-obrázek hrdiny – a kliknutím umístěte. Pak zvolte další a umístěte. (Umísťujte jednotlivé kroky animace tak, aby se hrdina opravdu pohyboval žádaným směrem, nikoli všechny na jedno místo! Poslední krok každé animace chůze musí být stejný obrázek, jako krok první.) Až máte celou animaci pohybu jedním směrem. Běžte znovu do menu a zopakujte stejný postup pro pohyb dalším směrem. A pro stání v jednom směru (to může být jen jedna fáze, pokud se tedy hrdina nemá při stání třeba nějak vrtět). A v druhém.

Tím, že vždy po dokončení vkládání obrázků pro jeden směr přejdete do Hlavního menu a zvolíte znovu Přidej anim. objekty na scénu, se vždy vytvoří nová animace. Pokud pak zvolíte Upravuj anim. objekty, můžete si nahoře zvolit libovolný z obrázků a tlačítkem Krok nebo Běž si přehrát animaci, do které ten obrázek patří.

Vyberte takto postupně jeden krok z každé animace a pomocí položky více (v horním menu) ji pojmenujte. Například: Hrdina běh vlevo. Hrdina běh vpravo. A podobně. Nezapomeňte název vždy uložit. Teď máte hrdinu připraveného k použití.

5. Scéna hry

V menu zvolte Lokace a stiskněte tlačítko Vložit novou lokaci. Vyberte pro ni pozadí (z dříve nahraných) a pojmenujte ji (jméno je jen pro vaši orientaci). Tlačítkem Přidej objekty na scénu – a výběrem nahoře z obrázků a pod-obrázků můžete nyní na scénu umístit různé objekty – třeba nábytek, keře, předměty k sebrání a podobně. Tlačítkem Přidej anim. objekty na scénu můžete vytvořit animace – podobně, jako když jste animovali hlavního hrdinu.

Tlačítkem Přidej body (cesty) v Hlavním menu můžete přidat body, mezi kterými bude hrdina na scéně chodit. Tlačítkem Uprav body/přidej cesty je pak můžete propojit – pomocí položky více – nahoře v menu: Vždy vyberete dva body, které se mají propojit a animace hrdiny, které se použijí k pohybu mezi těmito body (doprava, doleva). Může to být chůze, ale třeba i hopsání, chůze do schodů, klouzání, prostě cokoli vás napadne a co máte připraveno.

Každý bod cesty, každý objekt (i animovaný) má vlastnost, které se říká Z-index. Čím větší jeho hodnota je, tím blíže k displeji objekt je. Body cesty ho mají obvykle 50, objekty 10, animované objekty 30. Normálně jsou tedy objekty vzadu, animované objekty před nimi a nejvíce vepředu jsou body cesty (s hrdinou; samotné body cesty hráč samozřejmě nevidí). Hodnoty Z-indexu ale samozřejmě můžete změnit (při úpravě objektu nahoře v položce více) a díky tomu můžete například postavit nějaký kus nábytku nebo strom před hrdinu.

POZOR: Nastavení Z-Indexu se projeví ve hře, v editoru ale nikoli! V editoru tak může být vidět vepředu objekt, který ve hře bude vzadu.

6. Hodnoty: Kdy se co má hýbat, kdy má být co vidět

Abyste mohli hru řídit, budete potřebovat něco, co se nazývá hodnoty (ten, kdo někdy programoval, je zná jako proměnné). Pomocí nich můžete určit, v jakém stavu hra je. Zní to složitě? Žádný strach!

V menu nahoře zvolte Hodnoty. Zde můžete vyplnit vždy název a číslo a tlačítkem Přidat je přidat. Vytvořme si třeba hodnotu Mrkev s hodnotou 1 a Zajíc s hodnotou 0.

Hodnota Mrkev=1 bude říkat, že mrkev, která je v jedné scéně hry, bude vidět. Až ji později změníte na Mrkev=0, mrkev zmizí. Hodnota Zajíc=0 bude říkat, že na scéně není žádný zajíc. Až ji změníte na 1, animovaný zajíc vykoukne z nory. Jak to uděláte? To si hned ukážeme.

7. Necháváme věci objevovat a mizet

V každé lokaci můžete v Hlavním menu jedním z tlačítek začít upravovat objekty nebo animované objekty. Jakmile je začnete upravovat, nahoře zvolte číslo upravovaného objektu a pak nahoře najeďte nad položku více.

V menu, které se objeví, najdete u objektů volbu Objekt je aktivní když. U naší mrkve zde zvolíme Objekt je aktivní když Mrkev > 0. Mrkev pak bude vidět, když hodnota Mrkev je větší než 0, třeba 1.

Podobně u animovaných objektů lze nastavit, že Animace pokračuje za tento krok když – u prvního kroku animace zajíce zde zvolíme Zajíc > 0. A zaškrtneme ještě níže První krok neviditelný. Co to znamená? Dokud bude hodnota Zajíc rovná nule, animace bude stát a její první krok bude neviditelný. Jakmile změníme hodnotu na 1, spustí se animace zajíce a všechny její kroky se postupně ukážou.

8. Necháváme hráče ovládat hru

Hráč ovládá hru pomocí takzvaných Aktivních oblastí. Je to velmi jednoduché: Na každé scéně pomocí Hlavního menu – tlačítka Přidej aktivní oblasti – můžete nakreslit obdélníky. Když hráč na tyto obdélníky na displeji ťukne prstem, něco se stane. (Tyto obdélníky přitom hráč samozřejmě nevidí - ale vy je můžete umístit kamkoli - třeba na nějaké objekty k sebrání, na animace a podobně.)

Jakmile máme obdélníky vloženy, přes Hlavní menu – Upravuj aktivní oblasti – určíme, co se po ťuknutí na danou oblast bude dít. Stačí nahoře vybrat číslo aktivní oblasti a najet na volbu více. Ukáže se menu se dvěma typy akcí – Podmínky a Akce k udělání.

Lze třeba zvolit: Ukaž tento text – a pokud hráč ťukne na dané místo na displeji, ukáže se nějaký text. Nebo: Jdi do bodu – hrdina pak půjde do vybraného bodu. Nebo: Po dokončení všech akcí běž do lokace – hrdina pak přejde do jiné lokace hry. Nebo: Nastav hodnotu – tím se změní nějaká hodnota, například výše zmiňovaný Zajíc z 0 na 1. Ťukne-li tedy hráč na takovou oblast, hodnota Zajíc se změní na 1, čímž se spustí animace zajíce. Akcí může být řada za sebou.

Akce mohou mít i podmínky a lze tak třeba vložit akce: Když hrdina užije Mrkev, Jdi do bodu 2, Nastav hodnotu Zajíc na 1. Když tedy hráč použije na daném místě mrkev, hrdina přijde k noře zajíce a hodnota Zajíc se nastaví na 1, takže se spustí animace zajíce.

Jakmile vložíte všechny akce, uložte je tlačítkem Uložit všechny vložené akce.

9. Základní nastavení hry

Nyní máme hru téměř hotovou. Zvolte nahoře v menu Domů a ťukněte uprostřed na odkaz Základní nastavení hry. Tady zvolte, jaký je jazyk hry, kde hra začíná (jméno lokace, bod, kde hrdina stojí), jaké animace se použijí, pokud hrdina stojí a je otočen do různých směrů (stačí animace s jedním obrázkem – hrdina se tak sice při stání nebude nijak hýbat, ale to často postačí). A uložte tlačítkem Uložit.

10. Hrajte hru a vydělávejte peníze

V menu nyní zvolte Domů a klikněte na tlačítko Exportovat. Do svého mobilního telefonu nebo tabletu si nainstalujte aplikaci GameStylus a stáhněte si právě dokončenou hru – stiskněte šipku směrem dolů číslo 1, přihlaste se ke svému účtu na GameStylus a klikněte na Stáhnout hru. Pak ji spusťte.

Jakmile si otestujete, že vše funguje, jak má, můžete hru publikovat – takže ji bude moci hrát každý, kdo si nainstaluje aplikaci GameStylus. A jestli to s tvorbou her myslíte vážně, napište nám – a my vaši hru převedeme do podoby plnohodnotné aplikace a zveřejníme ji za podmínek, které spolu dohodneme, na Google Play. Takže si ji hráči budou moci zdarma stáhnout – nebo koupit – ještě snáz. Bude-li hra prodávána, o výnos se samozřejmě spravedlivě podělíme.

A ještě poznámka

V tomto krátkém návodu jsme nemohli probrat všechny detaily. GameStylus samozřejmě umí také přehrávat hudbu a zvuky, podporuje překlad hry do různých jazyků, dovoluje nejrůznější animace hrdiny nejen při chůzi, ale i při různých akcích, lze v něm kombinovat sebrané předměty... Detaily najdete v dalších návodech na GameStylus.com, doporučujeme pokračovat zde.

Vše popisované v tomto návodu můžete také vidět ve videu výše na této stránce.

Máte chuť tvořit mobilní hry? Začněte hned! Ještě nikdy to nebylo snazší! A dejte vědět také svým kamarádům! Dělejte konečně to, co jste už dlouho chtěli dělat!