5. Tvoříme hru pro Android

Téma

 Vyrábíme hru pro Android

Tematický celek

Tvorba mobilní Android aplikace založené na animaci

Motivační rámec

Hry nepochybně patří mezi nejpopulárnějších formy mobilních aplikací. Existuje mnoho kategorií her a nejčastěji se hry dělí podle žánru (např. akční, logické, arkádové, strategické, RPG, simulátory (sportovní, závodní, letecké atd.). Pojďme si společně jednu takovou jednoduchou hru společně vytvořit.

Počet žáků

15 (nebo podle počtu počítačových stanic v učebně)

Věk žáků

15-18

Pomůcky

Osobní počítač připojený k internetu; mobilní telefon s dotykovým displejem nebo tablet s OS Andoid popř. emulátor OS Android; program Stencyl; editor vektorové nebo rastrové grafiky.

Stručný popis aktivity s využitím přístroje

Žáci v editoru rastrové grafiky nebo v editoru vektorové grafiky (s následným exportem do rastrového obrazu) vytvoří obrázky herních postav (hrdinů a padouchů), bonusových objektů, které budou v průběhu hry sbírány, a obrázky herního prostředí (pozadí hry, bloky "země", po kterých se bude hráč pohybovat). Ve vývojovém prostředí programu Stencyl žáci vytvořené obrázky použijí při realizaci vlastní hry. Výslednou hru žáci otestují na svém zařízení s operačním systémem Android (mobilní telefon, tablet) nebo v Android emulátoru.

Vhodné místo

Počítačová učebna

Cíle aktivity

Žáci budou schopni efektivně vytvořit jednoduchou Android hru a publikovat ji na mobilní zařízení; budou ovládat základní  principy a postupy při návrhu her pro Android.

Rozvíjené kompetence

Kompetence k učení, k řešení problémů, kompetence využívat prostředky informačních a komunikačních technologií a práce s informacemi.

Předchozí znalosti

Aktivita navazuje na tematické oblasti učiva zahrnující realizaci a editaci  rastrových a vektorových obrazů.

Časový plán

Fáze činnosti s přístrojem

Metody a formy, motivace

45 až 60 minut

Příprava vlastních grafických objektů do hry na stolním PC nebo notebooku v libovolném grafickém editoru rastrové grafiky (např. Gimp, Photoshop, Pixlr) nebo editoru vektorové grafiky (např. Inkscape, Adobe Illustrator, CorelDRAW) s exportem obrazového materiálu do rastrové grafiky

Samostatná práce

15 minut

Návrh scénáře jednoduché herní zápletky.

Samostatná práce s diskuzí

60 až 90 minut

Realizace jednoduché plošinové hry ve vývojovém prostředí Stencyl.

Samostatná práce podle  dostupných materiálů

20 minut

Publikování hotové aplikace a import do mobilního zařízení s OS Android nebo  do odpovídajícího emulátoru.

Samostatná práce podle  dostupných materiálů

30 minut

Ukázky (krátké prezentace) jednotlivých aplikací mezi spolužáky, skupinové hodnocení prací. Diskuse na téma: Jak bych mohl svoji hru vylepšit nebo co bych měl ve hře změnit?

Skupinová diskuze

Hodnocení

Hodnocení celkové funkčnosti a přehlednosti vytvořené aplikace, hodnocení  grafického návrhu prostředí aplikace (dodržení kontrastu barvy prostředí a herních postav versus pozadí  aplikace).

Návaznosti

Na tuto aktivitu může navazovat společná skupinová realizace rozsáhlejší hry a její publikace na oficiálním serveru s Android aplikacemi.

Doporučený multimediální materiál

1. Poslední verzi programu Stencyl je možné stáhnout přímo z webových stránek produktu na www.stencyl.com/download/. Startovací verze programu (Starter) je zdarma, avšak placené verze (Indie a Studio), jak už to tak bývá, nabízejí další rozšíření. Nejdražší verze Studio pak zahrnuje vše, co verze Indie, další podporu uvedenou níže v tabulce.

Indie

Studio

Čerstvý přístup k programovým novinkám

Přímé publikování na iOS a Android

Publikování do platforem Flash, Windows, Mac a Linux Podpora reklam typu: iAd, AdMob, a další
Žádné vkládání vodoznaků nebo vynucených značkovacích prvků Podpora Game Center pro iOS
Přístup do zákaznického fóra Podpora nákupů pro iOS a Android v aplikacích
Vkládání vlastních reklam a vlastních načítacích obrázků pro Flash před hraním her
Zásuvné moduly třetích stran s dalšími funkcemi

2. Instalace a spuštění programu Stencyl

  • Instalace programu probíhá standardním způsobem (postupnými kroky se zobrazováním dialogových oken s umístěním instalované aplikace na lokálním disku) jako u většiny aplikací, proto komukoliv, kdo někdy nějaký program instaloval, nebude cizí ani postup instalace tohoto programu.
  • Po prvním spuštění programu se objeví dialogové okno s možností vytvoření uživatelského účtu (obrázek 1a), které po zadání identifikačních informací o uživateli (obrázek 1c) umožňuje ukládat realizované projekty vytvořené v aplikaci prostřednictvím cloudového úložiště. Registrace může být odložena tlačítkem připomenout později (obrázek 1b).

Vytvoření uživatelského účtu nebo připomenout později   Vytvoření účtu aplikace Stencyl

3. Vytvoření (založení) nové hry

  • Možností, jak vytvořit (založit) projekt s novou hrou, je hned několik. Zeleným tlačítkem (obrázek 2a), kliknutím do oblasti ohraničené čárkovanou čarou uprostřed pracovní plochy (obrázek 2b) - v takovém případě je nutné mít označenou položku Games v levé nabídce My products. Nebo je možné projekt s novou hrou vytvořit klasicky prostřednictvím hlavní lišty položkou File → Create New → Game (obrázek 2c).

Založení projektu s novou hrou 01   Založení projektu s novou hrou 02

  • V úvodu vytvoření projektu s novou hrou je možné tlačítkem Get Simple Games / Kits vybrat z již hotových volně dostupných herních projektů, které byly realizovány komunitou Stencylvybrat nebo vytvořit prázdný projekt s hrou Blank Game od začátku a pokračovat (obrázek 3a).
  • V dalším kroku po výběru prázdného projektu je vyžadováno vyplnění položek s názvem hry (obrázek 3b) a nastavení rozměrů (šířky a výšky) herní obrazovky (obrázek 3c).
  • Tlačítem Create se vytvoří projekt s dříve nastavenými základními parametry hry.

Volba druhu hry   Nastavení základních parametrů nové hry

4. Příprava pozadí hry

  • K vytvoření pozadí ve hře je nutné si připravit vhodný obrázek nebo barevnou plochu, na které dobře vyniknou (budou v kontrastu) ostatní herní prvky, jako hlavní hrdina, herní bloky (reprezentující zem, po které se bude hrdina pohybovat) a bonusy, které bude hrdina sbírat.
  • Příprava položky reprezentující obrázek na pozadí může být provedeno tlačítkem (obrázek 4a) nebo kliknutím do oblasti ohraničené čárkovanou čarou uprostřed pracovní plochy (obrázek 4b) - v takovém případě je nutné mít označenou položku Backgrounds v levé nabídce Resources.
  • Při pojmenování položky reprezentující pozadí (obrázek 4c) stejně jako i další položky v rámci projektu musí být pojmenovány bez diakritiky.

Přidání vytvořeného pozadí do hry   Pojmenování nového pozadí hry

  • Snímek herního pozadí může být přidán kliknutím do oblasti ohraničené čárkovanou čarou v levé části pracovního okna (obrázek 5a) nebo tlačítkem s ikonou ozubeného kola v pravém dolním rohu pracovního okna (obrázek 5b) a následně volbou Add Frame. V dialogovém okně s názvem Add Frame pomocí tlačítka Choose Image (obrázek 5c) se otevře okno s možností procházení souborů na lokálním disku a dohledat připravený obrázek pozadí už bude snadné.
  • Po výběru připraveného obrázku pozadí se rozsvítí tlačítko Add v pravém dolním okraji dialogového okna. Tím se obrázek přidá jako snímek, který pak bude viditelný v pracovním okně nejen na pozici 5a, ale také bude evidován pod položkou levé postranní nabídky Backgrounds na záložce Dashboard.

Přidání snímku pozadí jako položku projektu   Výběr obrázku z lokálního disku v počítači

5. Realizace herního prostředí

  • Prostředím hry jsou myšleny především nejrůznější plochy, překážky a bariéry v popředí, po kterých se může herní postava pohybovat nebo kterým se má vyhýbat. Stejně jako v případě obrázku na pozadí, tak i objekty herního prostředí je nutné do projektu vložit. V případě přípravy zcela vlastní hry bude nutné vyvtvořit v nějakém grafickém editoru rastrové obrázky reprezentující herní prostředí. Pokud při prvotním návrhu obrázků na nějaké prvky herního prostředí člověk zapomene, vždy se dají přidávat další.
  • Do projektu hry se položky herního prostředí vkládají obdobně jako v případě herního pozadí a jiných herních prvků, tedy tlačítkem (obrázek 6a) nebo kliknutím do oblasti ohraničené čárkovanou čarou uprostřed pracovní plochy (obrázek 6b) - v obou případech je nutné mít označenou položku Tilesets v levé nabídce Resources.
  • Jako u jiných položek, tak i zde je nutné položku projektu pojmenovat bez diakritiky (obrázek 6c).

Přidání obrázku s prvky herního prostředí jako položka projektu   Pojmenování nového prostředí hry

  • Nyní je možné z lokálního disku vybrat připravený obrázek s herními prvky prostředí (obrázek 7a) a pomocí tlačítka Add přidat vytvořenou položku.
  • Před návratem na hlavní stránku projektu se může s obrázkem herního prostředí dále pracovat a mohou být nastaveny jeho vlastnosti, jako např. tvar oblasti kolize s objektem (obrázek 7c). Oblast kolize je důležitý herní aspekt, který je nastavován nejen u herního prostředí, ale také u herních postav. Určuje reakční oblast daného objektu, tedy v případě prostředí musí být určena oblast, po které se herní postava pohybuje (případně do které herní postava naráží).
  • Další možnosti práce s obrázky prostředí jsou např. přidávání dalších obrázků prostředí v rámci jedné položky tlačítkem Import Frames (obrázek 7d) či tlačítkem s ikonou ozubeného kola (obrázek 7b) a pak položkou Add Tiles, dále je možné editovat (popř. odstraňovat) stávající obrázky prostředí jako celek nebo jen jednotlivé dílky (obrázek 7e).
  • Uložení všech úprav se provede automaticky po zavření záložky s obrázky herního prostředí (obrázek 7f).

Výběr obrázku z lokálního disku v počítači   Definování kolize prvků prostředí, jejich úprava a přidávání

6. Realizace herních postav

  • Na podobném principu vytváření položek připravených obrázků (uložených na lokálním disku) fungují také další herní prvky, jako herní postavy Actor Types.
  • Úkol: Zamyslete se nad tím, jak se budou jednotlivé herní postavy (hrdina, se kterým pohybuje hráč, a záporné postavy) pohybovat (směry pohybu, výskoky apod.), vytvořte obrázky těchto postav v různých polohách (pohled postav podle směru pohybu, pohyb, výskok apod.) a vložte svoje obrázky do herního prostředí k jednotlivým postavám. Jednotlivé typy postav by v projektu měly být vidět jako položky. Také si uvědomte, že případné bonusy, které bude "hrdina" sbírat, jsou také jedním typem herní postavy.

7. Realizace herní scény

  • Dříve navržené herní prvky (pozadí, prostředí a postavy) bude možné zkombinovat v prostředí herní scény.
  • Úkol: Vytvořte položku herní scény s názvem Level01 a navrhněte prostředí 1. kola hry tím, že vložíte dříve připravené herní prvky do scény (prvky najdete v sekcích návrhu scény nazvaných jako Tiles a Actors). Pozadí hry vložte jako novou vrstvu umístěnou zcela dole. Připravenou scénu otestujte na platformě Flash (Player) tlačítkem Test Scene.