MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY 3D interaktívna počítačová hra pre deti predškolského veku DIPLOMOVÁ PRÁCA František Cisko Brno, 2015 ii Prehlásenie Prehlasujem, že táto diplomová práca je mojím pôvodným autorským dielom, ktoré som vypracoval samostatne. Všetky zdroje, pramene a literatúru, ktoré som pri vypracovaní používal alebo z nich čerpal, v práci riadne citujem s uvedením úplného odkazu na príslušný zdroj. Vedúci práce: MgA. Helena Lukášová, ArtD. iii Poďakovanie Rád by som poďakoval MgA. Helene Lukášovej, ArtD. a RNDr. Barbore Kozlíkovej, Ph.D. za vedenie diplomovej práce a za cenné rady a konzultácie k vyvíjanej aplikácii. Za pomoc a konzultácie práce z informatického hľadiska ďakujem Mgr. Vilémovi Šustrovi. Ďalej by som poďakoval Jánovi Novotnému zo zariadenia Mráček, za spoluprácu a podieľanie sa na vývoji aplikácie, ako aj za pomoc a organizovanie testovania novej hry s deťmi. iv Zhrnutie Táto diplomová práca popisuje návrh a vývoj detskej počítačovej hry ABC hrou, ktorá vznikla na podporu zariadenia Mráček a jeho činností s deťmi. Cieľom hry je deťom spestriť čas strávený v zariadení a dopomôcť im k vzdelávaniu zábavnou formou. V jednotlivých podkapitolách sa opisuje samotný proces vývoja aplikácie. Podrobnejšie sa rozoberajú implementačné spracovania oblastí ako sú napríklad načítavanie objektov a textúr, animácie, zvuky, antialiasing a ďalšie. Text práce dopĺňa priložené DVD so samotnou aplikáciou a kompletnými zdrojovými kódmi. v Kľúčové slová OpenGL, C++, Microsoft Visual Studio, vývoj počítačovej hry, analýza, návrh, implementácia, testovanie vi Obsah Úvod.........................................................................................................1 Cieľ a obsah práce............................................................................1 Štruktúra a spôsob písania textu.......................................................2 1 Zameranie diplomovej práce.................................................................3 1.1 Detské počítačové hry......................................................................3 1.1.1 Zložitosť hier pre deti...........................................................3 1.1.2 Počítačová grafika hier.........................................................4 1.1.3 Učenie hrou ..........................................................................5 1.2 Zámer práce......................................................................................6 1.2.1 Detské zariadenie Mráček ....................................................7 1.2.2 Predstavy o novej hre ...........................................................8 2 Súčasné vzdelávacie hry pre deti ..........................................................9 2.1 Vzdelávacie počítačové hry pre deti ................................................9 2.1.1 ABCya...................................................................................9 2.2 České vzdelávacie počítačové hry pre deti ....................................11 2.2.1 Onesoft................................................................................11 2.2.2 Hravé učení ........................................................................13 3 Analýza hry...........................................................................................15 3.1 Analýza požiadaviek hry................................................................15 4 Návrh hry ..............................................................................................17 4.1 Diagram prípadov použitia.............................................................17 4.1.1 Popis prípadov použitia......................................................18 4.2 Diagram stavov a prechodov v hre.................................................19 5 Implementácia hry ...............................................................................21 5.1 Prostredie........................................................................................21 5.2 Kostra programu.............................................................................21 5.3 Scéna ..............................................................................................24 5.4 Objekty...........................................................................................24 5.5 Textúry...........................................................................................25 5.6 Materiály a osvetlenie ....................................................................26 5.6.1 Antialiasing ........................................................................28 5.7 Ovládanie .......................................................................................29 5.8 Slovník ...........................................................................................30 5.9 Zvuk ...............................................................................................32 5.10 Animácie ........................................................................................32 5.11 Ostatne úpravy ...............................................................................34 5.11.1 Rozloženie objektov...........................................................34 OBSAH vii 6 Testovanie hry.......................................................................................36 6.1 Testovanie popri implementovaní..................................................36 6.1.1 Zmeny grafickej stránky hry ..............................................36 6.2 Užívateľské testovanie finálnej verzie hry.....................................38 6.2.1 Výsledky užívateľského testovania....................................39 6.3 Vyjadrenie detského zariadenia Mráček k aplikácii ......................41 Záver......................................................................................................43 Literatúra..............................................................................................45 Obrazová príloha..................................................................................48 Referencie..............................................................................................53 Dotazník užívateľského testovania .....................................................55 Priložené DVD ......................................................................................56 Administrátorský manuál....................................................................57 1 Úvod Súčasná doba je veľmi rýchla. Nové technológie nám umožnili stavať rýchle autá a diaľnice, aby sme si skrátili svoj čas strávený cestovaním. Priniesli nám mobilné telefóny, vďaka ktorým je aj komunikácia s veľmi vzdialeným človekom okamžite možná. Pomocou počítačov môžeme nakupovať z pohodlia domova bez toho, aby sme sa zdržiavali chodením do obchodov. To sú len príklady z množstva priemyselných vylepšení, ktoré vďaka technologickému pokroku výrazne skrátili čas rôznych činností. Dalo by sa predpokladať, že vďaka tomu všetkému času, ktorý sme si pomocou pokroku ušetrili, budeme mať množstvo voľného času. Často krát, ale ani vlastný rodičia nemajú dostatok voľna na to, aby ho trávili so svojimi deťmi a venovali sa ich výchove. Tie potom presedia detstvo pri televízii a počítači, a práve toto sú prostriedky, ktoré v súčasnosti z veľkej mieri ovplyvňujú ich vývoj a pomocou ktorých sa vzdelávajú. Existuje veľké množstvo hier, dokonca aj pre najmenších, ktorými sú deti fascinované a ich hraním dokážu stráviť veľké množstvo času. V dobe, keď som sa rozhodoval a vyberal som si, akú tému by som spracoval vo svojej diplomovej práci, som sa stretol aj s ľuďmi, ktorý sa angažujú vo výchove a strážení detí. Dozvedel som sa, že deti často krát nemajú ani povedomie o tom, čo robiť ak sa niečo stane. Ako privolať pomoc. Aké tri čísla im stačí na telefóne či mobile rodičov v takejto situácii stlačiť a zavolať. Snahou pomôcť pri vzdelávaní detí aj v tejto oblasti som si špecifikoval svoje zadanie k diplomovej práci. Cieľ a obsah práce Rozhodol som sa prispieť k početným počítačovým hrám a vytvoriť hru pre najmenších. Hru, ktorá by bola pre deti zaujímavá a zábavná, ale predovšetkým aby mala vzdelávací charakter. V tejto práci popisujem vývoj počítačovej hry ABC hrou. V jednotlivých podkapitolách sa opisuje analýza, návrh, implementácia a testovanie hry. Podrobnejšie sa rozoberajú implementačné spracovania oblastí ako sú napríklad načítavanie objektov a textúr, animácie, zvuky, antialiasing a ďalšie. Pripojený administrátorský manuál hry dopĺňa text práce a priložené DVD obsahuje samotnú aplikáciu, ako aj jej kompletné zdrojové kódy. ÚVOD 2 Štruktúra a spôsob písania textu Jednotlivé kapitoly práce sú štruktúrované a číslované, čo sa využíva v texte pri odkazoch na súvisiace časti. Názvy sú v texte pre odlíšenie písané kurzívou. Pre lepšiu názornosť je práca doplnená obrázkami a ukážkami kódov s popismi a odkazmi v texte. Predpokladá sa, že čitateľ má základnú znalosť programovania. Práca mu tak popisom vývoja tejto hry a rozobratím jej implementačných riešení spolu s poskytnutými zdrojovými kódmi, dá základ pre jednoduchšie vytváranie grafických počítačových aplikácií a spracovanie podobných implementačných oblastí v nich. 3 Kapitola 1 Zameranie diplomovej práce V tejto kapitole som sa snažil zhrnúť poznatky o detských počítačových hrách. Ďalej sa tu opisuje zámer vytvorenia novej počítačovej hry pre detskú organizáciou Mráček a upresňujú sa požiadavky na hru. 1.1 Detské počítačové hry Počítačová hra je interaktívny softvér so zábavným účelom, komunikujúci s jeho používateľom prevažne pomocou 2D alebo 3D grafiky a zvukov. Detská počítačová hra je určená pre deti predovšetkým predškolského veku a vyznačuje sa jednoduchým spôsobom spracovania [1]. Počítačová hra sa skladá z virtuálneho sveta alebo prostredia, do ktorého hráč zasahuje pomocou komponent pripojených k počítači. Tým doň môže vstúpiť a nejakým spôsobom ovplyvňovať dianie takéhoto virtuálneho prostredia. Obvykle sa jedná o určitú úlohu, ktorú má hráč splniť. Môže napríklad ísť o porazenie počítačového programu v simulácii boja alebo pretekov či o dosiahnutie iného cieľa, podmieneného napríklad časovým limitom. To všetko závisí od konkrétneho žánru hry a zámeru jej tvorcov. Existujú ale aj počítačové hry, ktoré nemajú žiadny konkrétny cieľ. Označujú sa pojmom sandboxové hry [1]. Detaily o rozdelení a zameraní jednotlivých typov hier sú mimo rámec tejto práce a záujemcovia sa môžu dozvedieť viac v [22]. Rodičia majú veľký vplyv na to, aké počítačové hry ich deti hrajú. Podľa štatistickej štúdie [4] je síce priemerný vek hráčov počítačových hier 31 rokov, ale skupina do 18 rokov tvorí skoro tretinu (presne 29%) zo všetkých hráčov počítačových hier. 95% rodičov kontroluje, aký je obsah hier, ktoré ich deti hrajú a 91% je osobne prítomná pri kupovaní alebo vypožičiavaní hry. Pozitíva v hraní hier vidí 56% rodičov. Tí veria, že počítačové hry ich deťom prinášajú mentálnu stimuláciu a vzdelanie, pomáhajú im nadväzovať vzťahy s kamarátmi a tiež prispievajú k spoločne strávenému času v rodine. 1.1.1 Zložitosť hier pre deti Detské hry by mali byť jednoduché, čo sa týka myšlienky/podstaty hry a zároveň jednoducho ovládateľné. Dieťa netreba podceňovať, ale určite sa 1. ZAMERANIE DIPLOMOVEJ PRÁCE 4 nebude dlho zamestnávať komplikovanou hrou, ktorej samo nerozumie alebo ktorej porozumeniu predchádza pochopenie zložitých pravidiel. Takáto hra ho odradí a prestane baviť ešte skôr, než príde na to, ako sa správne ovláda a o čo v nej ide. U hier pre najmenších by preto mala byť myšlienka hry už po chvíli jasná. S pribúdajúcim vekom hráčov sa samozrejme môže hra úmerne rozširovať a komplikovať, aby sa starším deťom zase nezdala až príliš jednoduchá. Rozdelenie hry do rôznych úrovní zložitostí je pekný spôsob, ako rozšíriť vekovú skupinu detí, pre ktoré bude hra úmerne jednoduchá či dostatočne zložitá k ich mentálnym schopnostiam [2]. 1.1.2 Počítačová grafika hier To, ako vnímame svet v skutočnosti, sa výrazne líši od možností, aké poskytuje počítačová grafika. Základné spôsoby práce, špecifiká zobrazovania a odlišnosti v počítačovej grafike sú popísané v knihe [5] na stranách 2-83. Jedná sa najmä o rozdiely možností vizualizácie. Svet okolo nás je spojitý (plynulý, neprerušovaný), zatiaľ čo informácie snímané, spracovávané a zobrazované výpočtovou technikou sú obmedzené možnosťami počítačového hardvéru do diskrétnej (konečnej, prerušovanej) podoby. Vizuálna stránka patrí v hrách asi k tomu najpodstatnejšiemu, čím môže aplikácia najskôr zaujať. Farebnosť, rozmanité pestré farby, málo čiernej, tak vyzerajú hračky na pultoch v hračkárstvach a to sa uplatňuje aj v detských hrách (Obr. 1.1). Zrak je prevládajúcim zmyslom u človeka a preto je grafická stránka hry rozhodujúca v tom, či sa na prvý pohľad vôbec niekto rozhodne aplikácii venovať svoj čas [3]. Až 48% ľudí hrajúcich počítačové hry považuje grafiku hry za najdôležitejší faktor ovplyvňujúci ich pri rozhodovaní o kúpe počítačovej hry. Cena je pri rozhodovaní najdôležitejším faktorom pre 21% [4]. (a) (b) 1. ZAMERANIE DIPLOMOVEJ PRÁCE 5 (c) (d) Obr. 1.1 Ukážky počítačovej grafiky z detských hier: (a) Hravé učení [13], (b) Childsplay [14], (c) Alphabet Match [15] a (d) Barvíci [16]. 1.1.3 Učenie hrou Hry, v ktorých sa primárne kladie dôraz na niečo iné, ako je len samotné pobavenie hráča, spadajú do kategórie hier označovaných pojmom serious games. Jedná sa najmä o krízové simulátory, trenažéry a hry spracovávajúce pohľad na spoločenské problémy. Aj keď môžu byť zároveň zábavné, ich hlavná myšlienka je precvičiť a vzdelať ich užívateľa a predať mu skúsenosti v danej oblasti. Zábavný a zároveň vzdelávací software sa obecne nazýva edutainment. Tento termín vznikol z anglických slov education (výchova, vzdelávanie) a entertainment (zábava). [1, 3]. Ak vie profesor v škole veľmi pútavo vysvetľovať, pripraví si ukážky či predvedie nejaký pokus na doplnenie vysvetľovanej látky, získava si pozornosť celej triedy a preberaná látka sa žiakom jednoducho chápe. Upútanie pozornosti hrá pri výučbe dôležitú rolu. V hre ide zase najmä o zábavu. Spojenie výučby so zábavou, to je podstatou a aj samotným názvom skupiny hier označovaných ako vzdelávacie hry. Zasmiať sa a vyvolať pri hraní príjemné pocity, upútať pozornosť komickou činnosťou postavičky, ktorá robí sprievodcu v hre, zvukmi doplniť atmosféru, aj to sú možnosti, na ktoré som v hrách narazil a ktorými sa autori snažia o zaujatie a upútanie pozornosti. Sú to spôsoby, ktorými sa v hre dopĺňa vložený vzdelávací obsah a snaží sa tak čo najviac spríjemniť a zatraktívniť učenie (Obr. 1.1 a 1.2). 1. ZAMERANIE DIPLOMOVEJ PRÁCE 6 Obr. 1.2 Ukážky zo vzdelávacej hry Alphabet Order [17], kde je cieľom správne zostaviť poradie písmen abecedy. 1.2 Zámer práce Nové média1 sú už od malička neoddeliteľnou súčasťou života mladých ľudí, narodených v novom tisícročí. Využívanie týchto médií nielen uľahčuje prácu pedagógom, ale tiež dodáva motiváciu žiakom pre vzdelávanie. V spolupráci s detským zariadením Mráček2 sme sa rozhodli zužitkovať vlastností počítačových hier a umožniť deťom zábavné vzdelávanie s využitím moderných technológií. Mojím zámerom pre diplomovú prácu sa stalo vytvorenie počítačovej hry, ktorá by neposkytovala len samotnú zábavu, ale mala by hlavne vzdelávací charakter. Hraním hry by sa deťom nenásilným spôsobom poskytovali vedomostné informácie. Dôležité témy, ako je prvá pomoc a čísla záchranných zložiek, by si tak mohli ľahšie osvojiť. Pred časom som prišiel do kontaktu s vedením detskej organizácie Mráček. Pri našej konverzácii som sa dozvedel, že deti často nemajú 1 Pod pojmom nové média sa označujú primárne média založené na digitálnych technológiách. Radia sa sem napríklad počítače (hardvér aj softvér), tablety a mobilné telefóny. 2 Predškolské zariadenie pre deti . 1. ZAMERANIE DIPLOMOVEJ PRÁCE 7 podobné vedomosti, ktoré by v krízovej situácii mohli rozhodovať o záchrane života. Mojou snahou pomôcť v zariadení s výučbou detí v tejto a ďalších oblastiach sa zrodila myšlienka vytvorenia vzdelávacej hry. Podnet na vytvorenie hry, ktorá by spĺňala požiadavky detského zariadenia a zohľadňovala ich skúsenosti s prácou s deťmi tým, že by so mnou spolupracovali pri jej vývoji, bol veľmi ochotne prijatý. 1.2.1 Detské zariadenie Mráček Výchovou a organizáciou rôznych aktivít pre deti sa zaoberá viacero ľudí, ako aj oddielová organizácia TOM Sluníčko3 , vedená pánom Jánom Novotným a pôsobiaca prevažne v Brne a Šitbořiciach. Táto skupina má za sebou vyše 8 ročnú prax s uskutočňovaním výletov a rôznych zábavných činností pre deti. Výsledkom jednej z aktivít oddielu je aj detské zariadenie Mráček, ktoré sa nachádza v Brne. Jedná sa o zariadenie poskytujúce rodičom služby v podobe starostlivosti o ich deti. V priestoroch zariadenia sa počas dňa nachádzajú deti, zväčša vo veku 3-6 rokov. Kapacita priestorov je 20 detí. Tie sú pod dospelým dozorom vedené k rôznym aktivitám s cieľom podporiť ich výchovu a rozvíjať ich schopnosti (Obr. 1.3). Nová vzdelávacia hra by mala deťom spestriť čas strávený v zariadení a dopomôcť k atraktívnemu vzdelávaniu zábavnou formou. Obr. 1.3 Jedna z aktivít s deťmi v detskom zariadení Mráček. 3 Bližšie o oddielovej organizácii a ich aktivitách pre deti . 1. ZAMERANIE DIPLOMOVEJ PRÁCE 8 Po technickej stránke zariadenie Mráček disponuje vo svojich priestoroch klasickými stolovými počítačmi, na ktorých by mala nová hra bežať. Dostupný majú tiež projektor s možnosťou premietania obrazu na stenu. Organizácia úzko spolupracuje s vedením priľahlej školy a na prázdninovú prevádzku si prenajímajú aj dostupné školské priestory, či ich počítačovú učebňu, kde by sa hra mohla takisto uplatniť. Z týchto hľadísk je vývoj novej hry prioritne zameraný na stolové počítače. Hra by mala byť uspôsobená tak, aby ani slabší hardvér počítačov v školských učebniach nebol prekážkou v jej používaní. V budúcnosti by sa dalo uvažovať o uspôsobení a rozšírení hry na tablety či mobily, ktoré sa deťom stále častejšie dostávajú do rúk. V štatistickej štúdii [4] z roku 2014 je prehľad, akým podielom sa využívajú v súvislosti s hraním rôznych hier. Napríklad 44% hráčov počítačových hier hrá hry aj na svojich smartfónoch a 33% využíva aj iné bezdrôtové zariadenia. 1.2.2 Predstavy o novej hre Podobne, ako to je napríklad v úplne jednoduchej počítačovej aplikácii Craymachine4 , ktorá len reaguje na stláčanie písmen, aj ja som chcel vo svojej aplikácii docieliť, aby sa ňou aj najmenšie deti mohli jednoducho zabávať. Náhodné bezmyšlienkovité stláčanie kláves, na ktoré by hra reagovala obrazom a zvukom, patrilo do mojej základnej predstavy o novej detskej hre. Interpretovať obrazom a zvukom práve stlačenú klávesu je dobrý spôsob asociatívneho učenia sa písať a čítať. Hlavnou požiadavkou od organizácie Mráček bolo, aby nová hra obsahovala vzdelávací materiál, ktorý by bol deťom prezentovaný zábavnou formou. Malo sa jednať napríklad o telefónne čísla záchranných zložiek. V hre som si tak predstavoval zakomponovaný slovník, ktorý by interaktívne zobrazoval jednoduché reťazce/slová (napríklad ako 112, 155, pes, dom) a ponúkal by ich na základe posledných stlačených kláves. Slúžil by ako pomôcka pre deti a ukázal im, aké ďalšie klávesy majú na klávesnici nájsť a stlačiť. Pri úspešnom zložení celého slova by sa objavila jeho animácia doplnená zvukom. Hľadať a stláčať rovnaké klávesy na klávesnici, ako sú zvýraznené písmená v slovníku v hre a skladať slová s cieľom zobrazenia ich výslednej animácie, to tvorilo myšlienku mojej novej hry. 4 Aplikácia je spustiteľná online na . 9 Kapitola 2 Súčasné vzdelávacie hry pre deti V tejto kapitole sa opisujú existujúce detské vzdelávacie hry. Sú tu zhodnotené súčasné hry, ktoré majú jednoduchú myšlienku, poskytujú vzdelávací obsah a sú určené predovšetkým pre predškolské deti. Ich rozobratím, zistením kladou a záporov a zvážením uplatnenia v detskom zariadení Mráček, bolo možné v nasledujúcej kapitole (3 Analýza hry) vychádzať pri stanovení konkrétnych požiadaviek na novú hru. 2.1 Vzdelávacie počítačové hry pre deti V súčasnosti existuje množstvo rôznych počítačových hier. Na internete je možné nájsť stránky, ktoré hry združujú a obsahujú ich aj niekoľko desia- tok1 . Tie sú na týchto stránkach pripravené na okamžité spustenie a online hranie. Vzdelávacích hier je oproti tomu omnoho menej. 2.1.1 ABCya Jednou zo stránok so vzdelávacími hrami je ABCya.com (Obr. 2.1). Jedná sa skôr o webový portál, ktorý združuje vzdelávacie hry pre deti. Tie sú podľa náročnosti rozdelené do kategórií školských ročníkov a predškolákov. Obr. 2.1 Webový portál ABCya [20], so vzdelávacími hrami pre deti. 1 Príklady z množstva webových stránok, ktoré obsahujú ďalších niekoľko desiatok hier: . 2. SÚČASNÉ VZDELÁVACIE HRY PRE DETI 10 V kategórii hier pre predškolákov sa nachádzajú hry prevažne založené na výučbe písmen. Myšlienky hier sú jednoduché a väčšinou ide o hľadanie podobných párov, ako napríklad v pexese, alebo o skladanie, ako u puzzle. Reprezentujúcimi príkladmi môžu byť hry Alphabet Match [15] na obrázku 2.2 (a), ktorá je založená na hľadaní párov a Alphabet Order [17] na obrázku 2.2 (b), ktorá je založená na skladaní. Po grafickej stránke vyzerajú hry veľmi príjemne, pestro a farebne. Jedinou veľkou nevýhodou je jazyk. Všetky hry na stránke, ako aj väčšina ďalších vzdelávacích hier, je založená na texte a zvukoch, ktoré sú v angličtine. Ak sa má dieťa pri hraní hry aj učiť, potrebuje jej najmä rozumieť. Ak hre nerozumie a kvôli cudziemu jazyku nevie, čo sa v nej hovorí, rýchlejšie ho prestane baviť. Na druhú stranu hra, ktorá dokáže upútať dieťa aj napriek tomu, že je v cudzom jazyku, je veľmi dobrým prostriedkom na nenásilnú výučby jazyka. (a) (b) Obr. 2.2 Ukážky z hier na webovom portáli ABCya: (a) Alphabet Match [15], založená na hľadaní párov (b) Alphabet Order [17], založená na skladaní. Zhrnutie kladov a záporov: + jednoduché myšlienky a ovládanie + po grafickej stránke pekné, plné farieb, príjemné na pohľad + zvukom sa prezentujú všetky texty, ktoré sa v hrách objavujú + hry sú odstupňované podľa náročnosti a rozdelené do kategórií + postavičky robia sprievodcov v hrách, snažia sa o komické činnosti a pobavenie – jazyk hier je angličtina, všetky texty a komunikácia prostredníctvom zvuku sú v angličtine a sú tak pre deti s iným materským jazykom nezro- zumiteľné 2. SÚČASNÉ VZDELÁVACIE HRY PRE DETI 11 2.2 České vzdelávacie počítačové hry pre deti Jazykový problém s hrami mi potvrdili aj v zariadení Mráček. Vzdelávacie hry v angličtine, ktorými skúsili zatraktívniť deťom pobyt, boli nechápané a pre deti rýchlo nezaujímavé. Najviac sa im osvedčili projektorom premietané rozprávky v českom jazyku ako napríklad Bol raz jeden život. Tie boli pre staršie deti dostatočne zaujímavé a zrozumiteľné. 2.2.1 Onesoft Podobný webový portál ako ABCya má v českej republike Onesoft [21]. Na ich stránkach sú vzdelávacie hry rozdelené do dvoch kategórií. Nachádzajú sa tam poznávacie hry a pexesá. Pri hraní pexesa sú obrázky doplnené zvukom slova, ktoré je na obrázku a deti sa tak majú možnosť asociatívne učiť, ako vyzerajú napríklad vlajky, dopravné značky, rastliny alebo zvieratá (Obr. 2.3). Obr. 2.3 Ukážka z hry Pexeso s dopravními značkami [18] od Onesoft. V poznávacích hrách si deti môžu svoje naučené znalosti ďalej trénovať. Tieto hry sú založené na spoznaní a označení obrázku slova, ktoré bolo zadané zvukom. Správny obrázok sa vyberá zo štyroch ponúknutých možností (Obr. 2.4). 2. SÚČASNÉ VZDELÁVACIE HRY PRE DETI 12 Obr. 2.4 Ukážka z poznávacej hry Hledej květinu podle jména [19] od Onesoft. Po grafickej stránke vyzerajú hry, v porovnaní s hrami od ABCya, o niečo horšie. Použité obrázky v hrách sú výrazne komprimované, čo negatívne ovplyvňuje kvalitu ich zobrazenia. Jazyk je ale kompletne v češtine, ako aj všetky hovorené prípadne písomné inštrukcie. Po obsahovej stránke je vzdelávací materiál dosť rozsiahli. Miestami obsahuje aj dosť ojedinelé vzorky obrázkov napríklad málo známe rastliny či štátne vlajky. V týchto hrách by sa tak mohli vyskytovať omnoho užitočnejšie základne vzdelávacie informácie. Takto sa často skôr ponúka precvičovanie pamäti, než výučba relevantných vzdelávacích informácií. Zhrnutie kladov a záporov: + jednoduché myšlienky a ovládanie + zvukom sa prezentujú všetky inštrukcie a texty, ktoré sa v hrách objavujú + jazyk hier je čeština, sú tak pre deti zrozumiteľné – po grafickej stránke horšie, viditeľne kostrbaté obrázky – vzdelávací materiál je miestami dosť ojedinelý, v hrách by sa mohli ponúkať omnoho užitočnejšie informácie 2. SÚČASNÉ VZDELÁVACIE HRY PRE DETI 13 2.2.2 Hravé učení K tomu najlepšiemu z českých vzdelávacích hier pre deti radím Hravé učení [13]. Jedná sa o hru ponúkajúcu deťom základné vzdelávacie informácie z viacerých oblastí. Vybrať si môžu napríklad z naučenia sa písmen, čísel, prvých slov, zvierat alebo farieb (Obr. 2.5). Obr. 2.5 Ukážka zo vzdelávacej hry pre deti Hravé učení [13] . Po grafickej stránke je hra veľmi pekná, pestrofarebná, plná zábavných zvukov a animácií. Všetky zvukom prehrávané informácie sú v češtine, jasne a zrozumiteľne vyslovované. Myšlienka hry je veľmi jednoduchá. Myšou stačí prechádzať po obrázku a keď sa kurzor dostane na časti obrázkov, na ktoré sa dá kliknúť, prehráva sa ich zvuk a animácia. Kliknutím na obrázky sa v úvode volí, akú tému sa chce dieťa naučiť a v už konkrétne zvolenej oblasti sa po kliknutí zobrazujú ďalšie dodatočné informácie o zvolenom obrázku (Obr. 2.6). Síce sa v hre na ovládanie používa len myš, je niekedy jej ovládanie dosť problémové. Zvuk k obrázkom sa miestami prehráva oneskorene a nezhoduje sa tak s obsahom, na ktorom už je kurzor myši, čo spôsobuje nejasnosti. V niektorých miestach hry zvuk úplne chýba pre časti obrázkov, na ktoré je možné kliknúť. To platí aj pre funkčné tlačidlá hry (napríklad späť, vpred, návrat na hlavnú stránku), ktorými sa postup v hre ovláda. Zvu- 2. SÚČASNÉ VZDELÁVACIE HRY PRE DETI 14 kom sa neprehráva ich účel a pri prechádzaní hrou sa tak dá na určitých miestach ľahko zaseknúť a nevedieť, ako pokračovať, keďže klikaním do obrázku v hre sa už nič nemení. Obr. 2.6 Ukážky zo vzdelávacej hry pre deti Hravé učení [13] . Zhrnutie kladov a záporov: + jednoduchá myšlienka + po grafickej stránke veľmi pekne spracovaná hra, plná farieb a animácií + zábavné zvuky dopĺňajú hovorené informácie k obrázkom + jazyk hry je čeština, je tak pre deti zrozumiteľná + vzdelávací materiál je rozsiahli, zahŕňa viacero oblastí a poskytuje základné a užitočné informácie – zvukom nie sú prezentované všetky texty, ktoré sa v hre objavujú – kvôli chýbajúcim zvukom je ovládanie hry miestami zložité 15 Kapitola 3 Analýza hry Táto kapitola sa venuje zostaveniu zoznamu konkrétnych požiadaviek na hru a ich analýze. Požiadavky bolo možné presne špecifikovať vďaka zhrnutiu poznatkov o detských počítačových hrách, rozobratím kladov a záporov podobných už existujúcich aplikácií a zohľadnením potrieb v detskom zariadení Mráček v predošlých kapitolách. 3.1 Analýza požiadaviek hry Cieľovú skupinu užívateľov aplikácie tvoria deti, tie by mala nová hra osloviť a zaujať. Jej používaním by sa mali zabávať a popri tom aj vzdelávať. Na základe spolupráce s detským zariadením sme došli k záveru, že vyvíjaná hrá by mala spĺňať tieto konkrétne požiadavky:  Jednoduchá myšlienka, cieľ a ovládanie hry Myšlienkou hry bude hľadanie a stláčanie rovnakých znakov na klávesnici, ako zvýraznené písmena v ponúknutom slovníku v hre. Cieľom hráča bude poskladať celé slovo, čím sa zobrazí jeho výsledná animácia. Hra bude obrazom a zvukom reagovať na stláčanie kláves, takže aj najmladšie deti sa budú môcť zabávať jej odozvou na stláčanie náhodných kláves.  Pestré a rozmanité farby, pútavá grafika Graficky by mala byť hra pestrá a farebná, aby prilákala a zaujala aj najmenšie deti. Vykresľované písmená a čísla, ako reakcia na stláčanie klávesnice, budú niesť náhodne vygenerovanú farbu. Tmavé farby budú v hre potlačené, aby sa objavovali minimálne.  Zábavné zvuky a animácie Animácia a zvuk budú reakcie hry na zásah dieťaťa. Každé stlačené písmeno sa v hre vykreslí a bude postupne padať cez obrazovku na plochu. Výsledné animácie úspešne poskladaných slov sa doplnia aj prekvapujúcim špecifickým zvukom, ak to bude logicky možné. Napríklad pri poskladaní slova pes, sa zobrazí pes a zašteká. 3. ANALÝZA HRY 16  Nenútený, asociatívny spôsob vzdelávania Stláčané klávesy sa v hre budú interpretovať ich obrazom a zvukom. Tým sa umožní deťom učiť sa písať a čítať. Vzdelávací materiál sa do hry zakomponuje v podobe obrázkov, ktoré sa budú zobrazovať k úspešne poskladaným slovám (v slovníku tak budú aj reťazce ako napríklad 112, 150, 155, 158). Pridaním slovníkov rôznych jazykov sa umožní výučba slovnej zásoby cudzieho jazyka.  Zrozumiteľnosť, komunikácia v rodnom jazyku Hra bude s deťmi komunikovať obrazom a zvukom v češtine. Prehrá zvuk každého stlačeného písmena a prečíta každé poskladané slovo. Prípadné texty nesúvisiace priamo s dejom hry, ako napríklad informácie o možnostiach zmeny herných vlastností, budú čo najviac potlačené s možnosťou úplného skrytia, aby nepútali pozornosť. Pridaním slovníkov rôznych jazykov sa umožní rozšíriť skupinu detí, pre ktoré by bola hra zrozumiteľná vďaka rodnému jazyku.  Možnosť ovplyvnenia/prispôsobenia vzdelávacieho obsahu hry Keďže základných slovníkových slov, ktoré by aplikácia mala poznať, je strašne veľa, požiadavkou je hru vyvíjať tak, aby bolo jednoducho možné doplniť jej slovník a zároveň aj slovné animácie o nové slová. Tým by sa umožnilo ovplyvňovať a mať úplne pod kontrolou celý herný obsah a podľa potrieb doň pridávať vlastný vzdelávací materiál.  Beh hry na stolných počítačoch aj so slabším hardvérom Technické požiadavky hry na hardvér by mali byť minimálne, prípadne ovplyvniteľné, aby bolo možné hru používať aj na starších stolných počítačoch. 17 Kapitola 4 Návrh hry V tejto kapitole je opísaný návrh počítačovej hry ABC hrou. Pomocou doplňujúcich diagramov sú poskytnuté informácie o funkcionalite a logickej stránke hry. 4.1 Diagram prípadov použitia Nasledujúce diagramy prípadov použitia (Obr. 4.1 a Obr. 4.2) zobrazujú informácie o poskytovanej funkcionalite aplikácie vo vzťahu k jednotlivým používateľom. Z hľadiska rolí používateľov aplikácie sú identifikovaní nasledujúci dvaja užívatelia:  Dieťa – hrá hru (Obr. 4.1).  Administrátor – spravuje obsah hry (Obr. 4.2). Obr. 4.1 Diagram prípadov použitia pre dieťa. 4. NÁVRH HRY 18 Obr. 4.2 Diagram prípadov použitia pre administrátora. 4.1.1 Popis prípadov použitia Písanie znakov Vstup: zadaný znak Výstup: reprezentovanie zadaného znaku Užívateľ: dieťa Opis: hra ponúka spätnú väzbu a animuje zadávané znaky Mazanie znakov Vstup: požiadavka na zmazanie znaku Výstup: zmazanie posledného zadaného znaku Užívateľ: dieťa Opis: hra odstráni posledný znak zo zadanej postupnosti znakov Zmeny nastavení hry Vstup: požiadavka na zmenu nastavenia hry Výstup: zmena nastavenia hry Užívateľ: dieťa Opis: hra zmení podľa zadanej požiadavky svoj nastavený jazyk, použité pozadie v hre alebo grafickú úroveň vykresľovania (úroveň použitého antialiasingu) Spravovanie vzdelávacieho obsahu Vstup: vzdelávací obsah Výstup: zmena vzdelávacieho obsahu hry Užívateľ: administrátor 4. NÁVRH HRY 19 Opis: administrátor má možnosť meniť vzdelávací obsah hry, pridávať, upravovať alebo mazať slovníkové slová, ich použité obrázky a zvuky v animáciách 4.2 Diagram stavov a prechodov v hre Myšlienkou hry je hľadanie a stláčanie rovnakých znakov na klávesnici, ako zvýraznené písmena v ponúknutom slovníku v hre. Cieľom hráča je poskladať celé slovo, čím sa zobrazí jeho výsledná animácia. Hra bude obsahovať slovník jednoduchých slov. Slová z neho sa budú zobrazovať ako pomôcka a interaktívne meniť na základe posledných stláčaných kláves. Ak sa podarí slovníkové slovo napísať, zobrazí sa jeho animácia. Stavovým diagramom (Obr. 4.3) sa dá vyjadriť táto logická následnosť jednotlivých opísaných procesov v hre. Po spustení hry a úvodnej inicializácii sa hra dostane do stavu Beh hry. Je to stav, kedy je hra plne spustená. Pravidelne prekresľuje obrazový výstup na monitore a počíta prípadné spustené animácie. Je pripravená prijať vstup od hráča a reagovať naň. V závislosti na type vstupu sa rozhoduje, či sa jednalo o funkčnú požiadavku na vykonanie istej akcie (zmena jazyka hry, pozadia a iné) alebo či sa jednalo o znak, ktorý sa má reprezentovať animáciou. V druhom prípade prechádza postupne stavmi, kedy spúšťa animáciu znaku, prevádza aktualizáciu a kontrolu napísanej postupnosti so slovníkom a v prípade úspešne poskladaného celého slova spustí aj jeho animáciu. 4. NÁVRH HRY 20 Obr. 4.3 Diagram stavov a prechodov v hre. 21 Kapitola 5 Implementácia hry V tejto kapitole sa rozoberá implementácia aplikácie. Podrobnejšie sa opisujú implementačné spracovania oblastí ako sú napríklad načítavanie objektov a textúr, animácie, zvuky, antialiasing a ďalšie. 5.1 Prostredie Ako implementačné prostredie som použil program Microsoft Visual Studio 2010 a programovací jazyk C++. Hneď v úvode som si prostredie projektu upravil a pridal potrebné nastavenia, ktoré mi umožnili použiť rozširujúce knižnice SDL1 , ktorej funkcie som plánoval použiť pri spracovaní obrázkov a textúr v aplikácii a GLUT2 , pomocou ktorej funkcií som chcel inicializovať aplikačné okno a napísať grafickú OpenGL aplikáciu. Potrebné nastavenie na použitie doplňujúcich knižníc je dostupné vo vlastnostiach projektu na priloženom DVD k tejto práci. 5.2 Kostra programu Pre lepšiu orientáciu v programe a pre prehľadnosť, pri opisovaní metód v tejto kapitole o implementácii hry, je na obrázku 5.1 zobrazený diagram metód vyskytujúcich sa v aplikácii. Kostru programu tvorí tzv. main funkcia, ktorá sa pri spustení aplikácie začne prevádzať ako prvá a je vstupným bodom do programu (Obr. 5.2). V nej sa v úvode nastavuje a vytvára aplikačné okno, volajú ďalšie funkcie pre počiatočné nastavenia (funkcia init()) a definujú sa volania tzv. callbacks. Týmito volaniami sa nastavuje, aké funkcie sa budú v aplikácii používať pri udalostiach, ako je prekreslenie a zmena veľkosti okna, stláčanie kláves na klávesnici či uplynutie určitého časového úseku. Podrobnejšie sú informácie o dôležitosti vstupnej main funkcie a jej práci s callback funkciami spracované v knihe [6] na stranách 22-61. 1 Informácie o SDL a súbory na stiahnutie dostupné na . 2 Informácie o GLUT a súbory na stiahnutie dostupné na . 5. IMPLEMENTÁCIA HRY 22 Obr. 5.1 Diagram metód v aplikácii. 5. IMPLEMENTÁCIA HRY 23 Obr. 5.2 Vstupná main funkcia aplikácie (súbor main.cpp). Kostru programu dotvára funkcia init() (súbor initialization.h). Obsahuje riadky kódu, ktoré sa starajú o nastavenie úvodných parametrov scény a volajú funkcie nahrávania všetkých potrebných informácií, od zoznamu objektov a ich textúr, až po slovníky a zoznamy zvukových a obrazových súborov (Obr. 5.3). Priebeh štartu aplikácie a úvodného nahrávania všetkého potrebného je v kóde doplnený aj textovým výstupom, ktorý poskytuje informácie o stave. Prípadné zlyhanie sa zobrazením chyby ľahšie identifikuje a odstráni (Obr. 5.3). Obr. 5.3 Ukážka spracovania volaní funkcií v init() starajúcich sa o nahrávanie potrebných informácií pri štarte aplikácie. 5. IMPLEMENTÁCIA HRY 24 5.3 Scéna V OpenGL sa pracuje v 3D priestore. Objekty sa vykresľujú bodmi na zadaných trojrozmerných súradniciach a postupne sa vyskladá celá scéna. Aby sa táto scéna dala premietnuť na displeji počítača, musí sa určiť spôsob zobrazenia (mapovania) z tohto 3D priestoru do 2D plochy monitora. Používa sa na tu ortografická alebo perspektívna projekcia. V aplikácii sa používa nastavenie pre perspektívne zobrazenie scény (Obr. 5.4). Definovaním umiestnenia a smeru pozorovateľa/kamery, zorného uhlu a ďalších parametrov vybraného zobrazenia, sa vyskladaná 3D scéna premietne do 2D plochy na monitore. V knihe [10] na stranách 146-158 je uvedených viac informácií o možnostiach nastavenia zobrazovania scény v OpenGL. Obr. 5.4 Nastavenie perspektívneho zobrazenia scény (funkcia display() v súbore initialization.h). 5.4 Objekty Vykresľovanie objektov sa uskutočňuje základnými príkazmi, ktoré poskytujú možnosti na kreslenie jednoduchých primitív, ako sú napríklad body, čiary, trojuholníky a štvoruholníky3 . Písať kód, v ktorom by sa príkazmi určovalo umiestnenie každého jedného bodu objektu v priestore, by bolo u náročnejších scén veľmi zložité. V tejto aplikácii sa pracuje s objektmi, ktoré sú spracovávané na úrovni súborov v obj4 formáte. Všetky objekty boli najprv vytvorené v modelovacom programe 3ds Max. Pomocou tohto programu sa vymodelovala geometria každého objektu a ďalšími modifikátormi sa upravilo zobrazenie textúr na objektoch, kde to bolo potrebné. Následným exportom jednotlivých objektov do obj formátu sa získal súborový zápis o polohe bodov tvoriacich 3 Viac o kreslení v OpenGL pomocou základných primitív v knihe [7] na stranách 73-126. 4 Informácie o štandardnom súborovom obj formáte . 5. IMPLEMENTÁCIA HRY 25 geometriu objektu, ich textúrových a normálových súradníc a prepojeniach do plôch, ktorý bolo možné spracovávať funkciami aplikácie. Kód funkcie getObject(char *filename) (súbor loadObject.h) obstaráva v aplikácii spracovanie objektov z obj súborov a ich poskladanie z jednotlivých bodov podľa informácií v súbore. Na ďalšiu prácu s objektmi v aplikácii sa uplatňujú display listy5 (Obr. 5.5). Tie sa používajú na uloženie príkazov pre neskoršie prevedenie, čím zlepšujú výkon programu. Je veľmi vhodné použiť ich, keď je potrebné v programe vykonávať rovnakú skupinu príkazov hneď niekoľko krát. Obr. 5.5 Vytváranie display listov (funkcia getDisplayList() v súbore displayList.h). V aplikácii sa vykresľujú objekty pre každé jedno stlačené písmeno a číslo na klávesnici. Ďalej sa objektmi zobrazujú aj všetky úspešne poskladané slová zo slovníka. Pri štarte aplikácie sa preto vytvárajú display list pre každý jeden objekt (Obr. 5.5), lebo hra ich bude podľa stláčaných kláves často vykresľovať. Uľahčila sa tým aj následná práca s nimi, keďže pre zobrazenie konkrétneho objektu už potom stačí len jednoduchým príkazom glCallList(GLuint list) zavolať vytvorený display list na prevedenie. 5.5 Textúry Použitie textúry sa špecifikuje pred začatím vykresľovania objektu. Keďže na všetky objekty sa uplatňujú uložené display listy, príkazy glBindTexture(GLenum target, GLuint texture) na použitie konkrétnej textúry sú už rovnako zakomponované priamo v nich (Obr. 5.5). Než je ale možné týmto príkazom použiť ľubovoľný obrazový súbor, ako textúru pri vykresľovaní ob- 5 Viac o práci a používaní display listov v OpenGL je uvedené v elektronickej príručke [8] kapitola 7. 5. IMPLEMENTÁCIA HRY 26 jektu, je potrebné aplikácii poskytnúť prostriedky na to, aby vedela, ako s takými súbormi pracovať. Podobne, ako objektové súbory vo formáte obj, majú aj obrazové súbory, napríklad ako jpg, svoj špecifický formát zápisu informácií v nich. Na ich spracovanie sa v aplikácii používa knižnica SDL. Jej preddefinované funkcie a dátové objekty sú použité na spracovanie obrázkov a sprístupnenie ich súborových informácii v podobe textúr. Toto obstarávanie je riešené funkciami createTexture (Obr. 5.6) v súbore loadTexture.h. Rozširujúce informácie o práci s textúrami v OpenGL a parametroch ovplyvnenia rozličných funkcií na prácu s nimi, je možné nájsť v knihe [9] na stranách 105-148. Obr. 5.6 Ukážka funkcie spracovávajúcej obrazový súboru do textúrovej podoby s využitím knižnice SDL (súbor loadTexture.h). 5.6 Materiály a osvetlenie V aplikácii sa používajú aj objekty, na ktoré sa pri vykresľovaní neuplatňuje žiadna textúra. Jedná sa o objekty písmen a číslic, ktoré sa v hre pri stláčaní kláves animujú. Pre docielenie pestrosti a farebnosti aplikácie sa im prideľuje špecifický materiál (Obr. 5.7). Generovaním náhodných farieb a upravením materiálových vlastností sa v hre docielili rozmanité pestré pastelové farby. Podobne, ako u použitia textúry, aj nastavenie a použitie materiálu6 sa musí špecifikovať predtým, než sa začne s vykresľovaním objektu. OpenGL funguje ako stavový automat a pri začatí vykresľovania nového objektu by 6 O možnostiach a ďalších nastaveniach materiálových vlastností v OpenGL v knihe [7] na stranách 173-227. 5. IMPLEMENTÁCIA HRY 27 sa použili súčasné (posledné) nastavenia textúry či materiálu, aké boli použité u predchádzajúceho objektu. Obr. 5.7 Nastavenie materiálu pre animované objekty písmen a číslic (súbor drawCharacter.h). Materiál ale nie je to jediné, čo ovplyvňuje výsledný vzhľad predmetov v aplikácii. Ak by sa na biely objekt zasvietilo napríklad červeným svetlom, určite by to výrazne ovplyvnilo jeho výzor. Povolenie a nastavenie osvetlenia je v hre uskutočnené hneď v úvode pri štarte aplikácie (funkcia init() v súbore initialization.h) (Obr. 5.8). Je tam nastavené neutrálne biele svetlo, ktoré sa naprieč aplikáciou uplatní skoro na všetkých vykresľovaných objektoch. Obr. 5.8 Nastavenie vlastností osvetlenia7 (funkcia init() v súbore initialization.h). Jediné miesto, kde sa mení osvetlenie na iné, je pri vykresľovaní písmen v slovníku. V ňom sa ponúkajú slová, ktoré sa pri úspešnom poskladaní animujú. Zmenou farby svetla na červenú (pred vykreslením písmena) a následnou úpravou do pôvodného stavu (po jeho vykreslení), sa v kombinácii s vlastnosťami použitého materiálu dosahuje väčšieho zvýraznenia písmen v slovách, než by tomu bolo pri nezmenení a uplatnení neutrálneho osvetlenia, ktoré bolo stanovené na začiatku. Týmto väčším zvýraznením vykresle- 7 Podrobne o možnostiach a práci s osvetlením v OpenGL v knihe [10] na stranách 203-247. 5. IMPLEMENTÁCIA HRY 28 ného objektu sa má najmä upútať pozornosť na písmeno, ktoré by sa malo na klávesnici ďalej stlačiť, aby sa podarilo slovo úspešne napísať (Obr. 5.9). Obr. 5.9 Efekt zvýraznenia písmen, ktorý sa dosahuje vhodnou kombináciou zmeny nastavenia osvetlenia a materiálu pred vykreslením objektu (použitie vo funkcii write3dtext(std::string text, int change) v súbore text.h). 5.6.1 Antialiasing Digitálny svet nie je spojitý, ako ten reálny. Displej počítača má konečné množstvo bodov (pixelov). Na hranách vykresľovaných objektov je tak pri zväčšení veľmi dobre pozorovateľné, aké body pravidelnej mriežky displeja boli pri výpočte ešte zahrnuté do objektu, a aké už do pozadia. Vytvára to ostrý kostrbatý prechod, ktorý je rušivý a ľudské oko si ho jednoducho všimne. Tento jav sa nazýva aliasing. Antialiasing8 je práve potláčanie tohto javu a vykreslenie obrazu, ktorý nebude pre ľudské oko taký rušivý. Dosahuje sa to napríklad zjemnením (rozmazaním) týchto ostrých prechodov (Obr. 5.10). (a) (b) Obr. 5.10 Príklad vykreslenia písmena v hre bez a s použitím antialiasingu. (a) Aliasing - pri zväčšení viditeľná ostrá kostrbatá hrana. (b) Antialiasing - pri zväčšení viditeľné rozmazanie hrany. 8 Viac o aliasingu a antialiasingu [12]. 5. IMPLEMENTÁCIA HRY 29 V aplikácii sa používa antialiasing celej scény. Ten funguje na princípe viacnásobného vykreslenia scény a spojenia týchto vykreslení pre získanie jediného snímku. Do pomocnej pamäte (akumulačný buffer) sa vykreslí scéna hneď niekoľkokrát, ale vždy s drobným posunutím. Výsledná farba pre jeden pixel je potom spriemerovaný súčet farieb týchto vykreslení v danom bode. Čím viac vykreslení sa použije pre zhotovenie jediného snímku, tým lepších výsledkov rozmazania sa dosiahne. Je to ale na úkor výkonu. Programátorský kód, ktorý uskutočňuje antialiasing v hre, je vo funkcii vykresľovania scény display() (súbor initialization.h). Keďže jednou z požiadaviek na hru je, aby dobre bežala aj na slabších počítačoch, z hľadiska potrebného výpočtového výkonu pre kvalitný antialiasing sa preň nastavili možnosti na ovládanie jeho úrovne. V menu hry sa preto vytvoril štyri možnosti grafickej úrovne vypnutá, nízka, stredná a vysoká, ktoré postupne znamenajú 1, 2, 4 a 8 násobné vykreslenie celej scény pre získanie jediného snímku. 5.7 Ovládanie Ako sa už spomenul v úvode kapitoly (5.2 Kostra programu), hneď vo vstupnej funkcii main sa definujú volania tzv. callbacks. Nimi sa nastavuje, aké funkcie sa v aplikácii majú použiť, ak nastane nejaká špecifická udalosť. Stlačenie klávesy na klávesnici je jedna z takýchto udalostí. Dokonca ešte aj pre stlačené klávesy sú zaznamenávané rozličné udalosti, napríklad pri použití skupiny štandardných alebo funkčných kláves. V knihe [10] je na stranách 733-734 zoznam vybraných callback funkcií s vysvetlením a s popisom parametrov, ktoré používajú. V aplikácii je pre ovládanie vstupov z klávesnice, ako reakcia na stlačenie štandardnej klávesy, nastavená funkcia keyboard(unsigned char key, int x, int y) a pri udalosti stlačenia špeciálnej klávesy sa volá funkcia special(int key, int x, int y). Obe sa nachádzajú v súbore keyboard.h a štruktúrovane sú v nich určené akcie na vykonávanie pre každú jednu klávesu (Obr. 5.11). Pre doplnenie ovládania je pomocou štandardných funkcií knižnice GLUT vytvorené jednoduché pop-up menu9 . To sa vždy objaví pri stlačení pravého tlačidla myši. Aplikácia je vo viacerých jazykoch, preto sa prekladajú aj jednotlivé položky v menu podľa súčasne zvoleného jazyka (riešenie je vo funkcii setMenuText()). 9 Popis funkcií vytvárania a správy pop-up menu knižnice GLUT je v elektronickej príručke [11] kapitola 6. 5. IMPLEMENTÁCIA HRY 30 Obr. 5.11 Príklad obstarávania vstupov z klávesnice (funkcia special(int key, int x, int y) v súbore keyboard.h). Samotné vytvorenie menu je riešené funkciou createMenu() a zvolenie položky v menu spúšťa funkciu menu(int val). Tá je štruktúrou rovnaká ako klávesnicové funkcie keyboard a special a tiež sú v nej postupne určené akcie na vykonanie pre každú jednu zvolenú položku (Obr. 5.11). Všetky tieto spomenuté funkcie, v ktorých sa vytvára a obstaráva práca s menu, sa nachádzajú v súbore loadMenu.h. 5.8 Slovník Myšlienkou hry je hľadanie a stláčanie rovnakých znakov na klávesnici, ako zvýraznené písmena v ponúknutom slovníku v hre. Cieľom hráča je poskladať celé slovo čím sa zobrazí jeho výsledná animácia. Hra preto obsahuje slovník jednoduchých slov. Slová z neho sa zobrazujú ako pomôcka a interaktívne sa menia na základe stláčaných kláves. Ak sa podarí slovníkové slovo napísať, zobrazí sa jeho animácia. Požadované je tiež, aby sa samotný slovník dal jednoducho doplniť o nové slová a ich animácie. Po zvážení stanovených požiadavkou som si vytvoril takýto funkčný koncept pre slovník. Všetky potrebné informácie sa budú udržiavať len v textových súboroch. Na pridanie nového slova a jeho animácie potom bude stačiť len zápis nových informácií do týchto textových súborov. Všetky zapísané informácie, ktoré sa budú týkať jedného slova, sa značia spoloč- 5. IMPLEMENTÁCIA HRY 31 ným číslom (indexom)10 . Forma zápisu indexu a pripojenej informácie bude vo všetkých textových súboroch jednotná. To povedie k dobrej kontrole a jednoduchšej práci so slovami. Pre animácie k slovám sa bude zobrazovať obrázok (znamená zobrazenie textúry na ploche) a k tomu prehrávať zvuk. V textových súboroch by sa ako informácie k slovným animáciám dopĺňali len cesty k obrazovému a zvukovému súboru (Obr. 5.12). Obr. 5.12 Formát slovníkových textových súborov. Slovo a jeho informácie k animácii sú v súboroch prepojené cez spoločný číselný index. Čítanie a spracovanie informácií zo slovníkových textových súborov prebieha v úvode pri spustení hry. Postupne sa prečítajú všetky informácie zapísané v týchto súboroch. Z nich si aplikácia vytvorí slovníky slov, textúry z určených obrázkov a pripojí odkazy na zvukové súbory (Obr. 5.13). Obr. 5.13 Ukážka kódu čítania a spracovávania informácií z jedného zo slovníkových textových súborov (funkcia getTextures() v súbore displayList.h) 10 Podobne ako v databázových systémoch primárny kľúč, ktorý jednoznačne identifikuje jednu entitu, tu rovnaký index zlučuje dáta k jednému slovu naprieč rozličnými súbormi. 5. IMPLEMENTÁCIA HRY 32 Podobné časti kódu, ktoré spracúvajú informácie z textových súborov ako na obrázku 5.13, sú aj vo funkcii getDictionary(char *filename, int lang) (v súbore loadDictionary.h) a vo funkcii loadDictionarySound(char *filename, int lang) (v súbore sound.h). Tiež sa nimi pri štarte aplikácie čítajú a spracovávajú potrebné informácie zo slovníkových textových súborov o prepojeniach slov, obrázkov a zvukov. Zvyšná práca so slovníkom je v hre obstarávaná funkciami v súbore dictionary.h. Rieši sa nimi porovnávanie slov v slovníku s poslednou napísanou postupnosťou kláves (funkcia checkDictionaryWords(int equals)) a aj samotné rozvrhnutie a vykreslenie slov na tabuli v hre (funkcia drawDictio- nary()). 5.9 Zvuk Na prehrávanie zvuku k animáciám u slov a písmen sa v hre používa jedna zo štandardných preddefinovaných funkcií PlaySoundA11 z Windows.h. S nastavenými parametrami táto funkcia prehráva zvukové súbory podľa zadanej cesty k súboru v premennej path (Obr. 5.14). Ďalšie spôsoby, ktorými je možné spracovávať a prehrávať zvuky, sú opísané v knihe [6] na stranách 518-579. Obr. 5.14 Prehrávanie zvuku (funkcia playWordSound(std::string path) v sound.h). 5.10 Animácie Existujú dva základné prístupy, ktorými sa dá docieliť animácia. Buď sa vykonávajú transformácie na objektoch v scéne alebo sa vykonávajú transformácie so samotnou kamerou (nastaveným pozorovateľom). Pohyb, rotácia a zmena veľkosti sú tri základné používané transformácie. V knihe [7] na stranách 127-172 sú tieto dva prístupy k animáciám a používanie spomenutých transformácií veľmi dobre opísané a vysvetlené. 11 Podrobné informácie o funkcii a možných parametroch na ovplyvnenie jej chovania . 5. IMPLEMENTÁCIA HRY 33 V aplikácii sa použil prístup, v ktorom sa transformujú len vykresľované objekty. Nastavenie zobrazenia scény a pozorovateľa/kamery ostáva v priebehu hry nemenné, presne také, ako je uvedené v kapitole 5.3 Scéna. S plynúcim časom sa v programe vynucuje pravidelné prekreslenie scény. Slúži k tomu funkcia timer() (súbor initialization.h), ktorá bola v úvode nastavená ako callback funkcia pre pravidelné vykonávanie po uplynutí určitého časového úseku (kapitola 5.2 Kostra programu). Obsahuje príkaz glutPostRedisplay(), ktorým si vynucuje volanie funkcie nastavenej na prekreslenie zobrazenej scény12 . Ak sa pri každom novom vykreslení pomocou transformácií posunie zobrazovaný objekt na nové miesto, dosiahne sa tým animovaného efektu jeho pohybu. V hre sa transformácia objektov používa napríklad pri animovaní písmen stláčaných kláves. To sa deje vo funkcii animateChar(int object) (súbor animation.h) (Obr. 5.15). Tým, že sa v parametri premennej animationTime udržiava hodnota počtu vykreslení daného objektu a pri každom novom pravidelnom prekreslení scény sa v programe táto hodnota zvýši, sa dá objektu nastaviť ľubovoľná transformácia pre danú hodnotu počtu jeho aktuálneho vykreslenia. V kóde funkcie animateChar sa mení poloha vykresľovaného písmena v závislosti na hodnote v tomto parametri premennej animationTime (Obr. 5.15). Obr. 5.15 Funkcia animateChar(int object) (súbor animation.h) vykonávajúca animáciu objektov interpretujúcich stláčané klávesy. 12 Použitím príkazu glutPostRedisplay() sa volá callback funkcia, ktorá je nastavená pre udalosť na prekreslenie scény (v aplikácii to je funkcia display() v súbore initialization.h). 5. IMPLEMENTÁCIA HRY 34 5.11 Ostatne úpravy Ako jedna z konečných úprav sa pridala jednoduchá pamäť nastavení hry. Aby nebolo potrebné pri každom spustení aplikácie znovu zvoliť jazyk alebo úroveň antialiasingu, ktorá vyhovuje danému počítaču, si hra pri každej zmene nastavení zapíše zvolené hodnoty do súboru config.txt (Obr. 5.16 (b)). Pri novom spustení si už len prečíta tieto hodnoty zo súboru (Obr. 5.16 (a)) a spustí aplikáciu s poslednými nastaveniami. (a) (b) Obr. 5.16 Pamäť nastavení aplikácie, používajúca textový súbor. (a) Načítanie posledných nastavení (funkcia init(), súbor initialization.h). (b) Uloženie zmeny nastavení (funkcia saveConfig, súbor loadMenu.h). 5.11.1 Rozloženie objektov Pri záverečných úpravách sa riešilo aj rozloženie objektov v scéne a celkový grafický vzhľad aplikácie. Na obrazovke bolo potrebné zobrazovať viacero objektov a preto bolo potrebné zvážiť ich rozloženie v scéne. Dôležité časti sa umiestnili na viditeľné miesta, menej dôležité sa umiestnili na okraj, kde by neprekážali a nepútali prílišnú pozornosť (Obr. 5.17):  Objekty stláčaných kláves (písmená a číslice) Stláčané klávesy sa animujú objektmi ktoré postupne padajú cez celú obrazovku, aby zaujali pozornosť a dieťa si ich vďaka pohybu všimlo. Postupne sa umiestňujú do spodnej tretiny okna aplikácie, ktorá je pre ne vyhradená. 5. IMPLEMENTÁCIA HRY 35  Slovník a písaný reťazec znakov Zvyšný priestor v okne aplikácie je rozdelený na ľavú a pravú časť. Interaktívny slovník, ktorý slúži ako pomôcka pri hraní a skladaní slov je umiestnený v ľavej časti. Zasadil sa akoby na bielu tabuľu, ktorá zvýrazňuje jeho čitateľnosť a zabraňuje jeho splynutiu s pozadím hry.  Animácie úspešne poskladaných slov Podobne ako pre slovník, je miesto pre animácie vyhradené na ďalšej bielej tabuli. Tá sa nachádza v pravej časti okna aplikácie.  Inštrukcie k ovládaniu hry Inštrukcie k ovládaniu hry nemajú priamu súvislosť s dejom hry, preto boli čo najviac posunuté na okraj s možnosťou úplného skrytia. Umiestnili sa na horný okraj, akoby na menu lištu aplikácie, podobne ako sú užívatelia zvyknutý z iných počítačových aplikácií. Po posledných úpravách bola implementácia hotová a jej výsledkom bola funkčná aplikácia (Obr. 5.17). Aplikáciu som ešte doplnil inštrukciami a informáciami o jej možnostiach, ako je napríklad postup pridávania nových slov. Tieto písomné inštrukcie pre administrátora hry sú pripojené aj v dodatku E Administrátorský manuál. Obr. 5.17 Rozloženie objektov v scéne vo výslednej aplikácii. 36 Kapitola 6 Testovanie hry V tejto kapitole sa opisuje postupné testovanie hry počas vývoja a zmeny (najmä grafického vzhľadu aplikácie), ku ktorým sa vďaka podnetom z testov pristúpilo. Ďalej je spracované užívateľské testovanie finálnej aplikácie. 6.1 Testovanie popri implementovaní Testovanie je neodmysliteľnou súčasťou vývojového procesu každej aplikácie. Nedá sa povedať, že začína presne po skončení implementácie. Veľmi často sa prelína a vykonáva už počas samotného priebehu programovania. Výsledky, nové poznatky či zistené chyby z testovania slúžia k zlepšeniu, oprave zistených chýb a vývoji úspešnejšej aplikácie. Okrem toho, že som hru testoval sám už pri napísaní každej novej časti kódu, spätnú väzbu na jej vzhľad a funkčnosť mi popri tom poskytlo mnoho ďalších ľudí, ktorým som ju v priebehu vývoja ukazoval. S každým ďalším zhodnotením som mal veľa nových návrhov, ako hru ďalej pozmeniť. Ak sa u rôznych ľudí začali stretávať rovnaké návrhy, bol to pre mňa signál, že daná zmena by aplikáciu vylepšila. Vďaka zaujímavým postrehom od rôznych ľudí som sa rozhodol do hry zakomponovať napríklad možnosť zmazania napísaného písmena/čísla a umožniť tak návrat pri chybne stlačenej klávese. Tiež som doplnil zvukovú reakciu na klávesy, ktoré sa obrazovo nijak neprejavovali (napríklad šípky, +, -, Enter a iné). 6.1.1 Zmeny grafickej stránky hry Postupné a opakované testovanie mi dovolilo zozbierať veľa názorov a vyjadrení aj ku grafickej stránke hry. Vzhľad bol skoro stále prvá vec, ktorú ľudia v kontakte s vyvíjanou aplikáciou hodnotili. Vďaka zozbieraným podnetom prešla grafika hry sledom zmien, ktoré upravili jej prvotný vzhľad až do finálnej podoby. Postupne sa menili farby, pozadie, veľkosť a rozloženie objektov v scéne a fonty samotných písmen (Obr. 6.1). Vo finálnej aplikácii navyše pribudla aj užívateľská voľba výberu z rôznych grafických motívov pozadí v hre (ukážky v dodatku A Obrazová príloha). 6. TESTOVANIE HRY 37 Obr. 6.1 Ukážky postupných zmien grafickej stránky hry. 6. TESTOVANIE HRY 38 6.2 Užívateľské testovanie finálnej verzie hry Najpodstatnejšie pre mňa boli výsledky z testovania hry so skupinou užívateľov, pre ktorú je samotná aplikácia určená. Testovaním hry u detí a pozorovaním ich reakcií (Obr. 6.2) som dostal obraz o tom, ako sa im hra páči, s čím majú problém a čo ďalšie by bolo potrebné zmeniť. Pred začiatkom som si najprv určil body, na ktoré sa počas testovania budem sústrediť. Mojím cieľom bolo zistiť, ako hra pôsobí na dieťa po grafickej stránke a tiež aká zložitá preň bude po hernej stránke. Na jednoduchšie sledovanie týchto rysov hry som pripravil dotazník (dodatok C Dotazník užívateľského testovania), ktorý sa popri testovaní vypĺňal. Podarilo sa mi tak priamo od detí získať spätnú väzbu (kapitola 6.2.1. Výsledky užívateľského testovania). Obr. 6.2 Užívateľské testovanie. 6. TESTOVANIE HRY 39 6.2.1 Výsledky užívateľského testovania Testovaním prešlo postupne 10 detí (5 chlapcov a 5 dievčat). Zaznamenané údaje z dotazníkov, ktoré boli vyplnené popri testovaní, sú zobrazené v tabuľke 6.3. Tabuľka 6.3 Získané údaje z vyplnených dotazníkov. Zo štyroch ukážok rôznych pozadí hry bolo pri testovaní za najkrajšie označované pozadie leto. Toto pozadie vyhralo u chlapcov aj celkovo. U dievčat bolo najčastejšie za najkrajšie označované pozadie jeseň. Pri výbere najkrajšieho pozadia boli deťmi zastúpené všetky štyri ponúknuté možnosti (Graf. 6.4). Graf 6.4 Voľba najkrajšieho pozadia (os x – názov pozadia; os y – početnosť výberu). vek (r) pozadie prvé slovo čas (s) zadané slovo čas (s) 1. chlapec 3 zima vosa 180 pes 150 2. chlapec 4 leto koza 60 auto 30 3. chlapec 5 jar nos 50 pes 40 4. chlapec 6 leto vlk 30 vosa 30 5. chlapec 8 leto lev 10 slon 10 1. dievča 3 zima had 150 pes 120 2. dievča 4 leto husa 90 slon 60 3. dievča 4 jeseň pes 50 auto 50 4. dievča 5 jeseň krtek 120 tygr 120 5. dievča 7 jeseň opice 20 zvon 15 6. TESTOVANIE HRY 40 Nasledujúce grafy 6.5 a 6.6 zobrazujú čas, ktorý deti potrebovali na poskladanie slova, v závislosti na ich veku. Dá sa z nich vyčítať nepriama úmera medzi vekom a časom. Čím bolo dieťa staršie, tím kratší čas potrebovalo na poskladanie slova. Potvrdil to aj Pearsonov korelačný koeficient, ktorého spočítaná hodnota pre namerané dáta je -0,74844. Graf 6.5 Namerané hodnoty času potrebného na poskladanie prvého slova (os x – vek dieťaťa v rokoch; os y – čas v sekundách). Graf 6.6 Namerané hodnoty času potrebného na poskladanie zadaného slova (os x – vek dieťaťa v rokoch; os y – čas v sekundách). 6. TESTOVANIE HRY 41 Po poskladaní prvého slova a zistení ako hra funguje, potrebovali deti pri nasledujúcej úlohe, poskladať zadané slovo, zväčša kratší čas. Priemerný čas poskladania prvého slova bol 76 sekúnd. Poskladať zadané slovo sa deťom darilo v priemere za 62,5 sekúnd. V dotazníku bol aj priestor na subjektívne hodnotenie priebehu testovania. Tento priestor bol v pár prípadoch samostatného testovania hry s deťmi vyplnený priamo detským zariadením Mráček. Tu sú niektoré poznačené postrehy z testovania:  chlapec, 4 roky: „Kluk se méně soustředil na zadaný úkol, ale o to víc ho nadchl výsledek.“  dievča, 5 rokov: „U úkolu jsem zadal první písmenko a ostatní si byla schopná doplnit dle slovníku.“  chlapec, 8 rokov: „Kluk byl nadšený z angličtiny, takže to prošel i ve druhém jazyce a sám byl schopen si vše dle instrukcí nahoře přepínat.“ 6.3 Vyjadrenie detského zariadenia Mráček k aplikácii O názor k vytvorenej hre som poprosil aj vedenie detskej organizácie Mráček. Pán Ján Novotný mi poskytol vyjadrenie na položené otázky. 1. Otázka: Ako hodnotíš myšlienku hry, jej grafickú stránku, jej náročnosť a možnosť rozširovať ju vlastnými slovami a animáciami? Odpoveď: „Hru hodnotím velmi pozitivně. Při testování se dětem moc líbila a dokázaly se s ní dlouze i samy zabavit. Kladem pro mne je i angličtina. Tím, že je hra přeložená a děti se s ní seznámily nejprve v češtině, jim po přepnutí do angličtiny nedělala problém. V rychlosti jsem zatím nepřišel na to, jak tam vkládat vlastní slova a obrázky. Na to se budu muset podívat do manuálu.“ 2. Otázka: Ako hodnotíš deti, ktoré prišli do kontaktu s hrou? Ako sa im hra páčila? Bola pre ne dostatočne zaujímavá, alebo príliš jed- noduchá/zložitá? 6. TESTOVANIE HRY 42 Odpoveď: „Zejména pro prcky 4 let je super. Užijí si jednoduchost a vlastně každé zmáčknutí je výhrou. Tudíž je to pro ně motivace pokračovat.“ 3. Otázka: Čo by si v hre zmenil a aké ďalšie možnosti, vylepšenia by si uvítal v novej verzii? Odpoveď: „Osobně mně vadí jen vypnutí pomocí esc. To je klávesa nahoře v rohu, která láká všechny děti. Lepší je to vypínat jen myší a křížkem nahoře vpravo.“ 43 Záver Vo svojej práci som sa zaoberal procesom vývoja počítačovej hry ABC hrou, ktorá vznikla na základe požiadaviek organizácie Mráček. Na konkrétnych príkladoch z vyvíjanej aplikácie som v jednotlivých podkapitolách opísal jej samotný návrh, implementáciu rôznych častí a priebeh testovania. Pri písaní práce som použil vlastné skúsenosti a informácie z rôznych textových a internetových zdrojov, na ktoré v práci odkazujem. Text čitateľa oboznámi s postupmi a praktikami pri vývoji jednoduchej počítačovej hry a podrobnejšie rozoberá jej implementačné spracovania. Tie ponúkajú základ, z ktorého je možné čerpať pri implementačných riešeniach spomenutých oblastí a pri ďalšom vývoji podobných aplikácií. Priložené DVD navyše poskytuje kompletné zdrojové kódy. Vyvinutá hra sa plánuje ďalej vylepšovať v spolupráci s vedením zariadenia Mráček. Okrem toho, že samotný slovník hry je rozšíriteľný a ponúka možnosti, ako hru ďalej vylepšovať a pridávať k nej nové slová, má aplikácia veľký potenciál aj v oblasti jej ďalšieho implementačného rozšírenia a vylepšenia. Ponúka sa tu možné preloženie hry aj do ďalších jazykových verzií. Momentálne má hra českú, slovenskú a anglickú verziu. Týmto rozšírením by sa mohla viac uplatniť pri výučbe jazykov u detí. Ďalší smer, ktorým sa hra môže rozšíriť, je pridanie implementácie pre možnosť zapnutia či vypnutia nového módu hry, ktorý by ovládal rozpoznávanie a písanie malých a veľkých písmen a písanie s diakritikou. Táto možnosť bola pre súčasnú verziu hry zavrhnutá, aby aplikácia ostala jednoduchšou a hrateľnou aj pre menšie deti, ktoré si môžu asociovať animované písmena len s tým, čo vidia na klávesnici. Na tých sú vo vysoko prevládajúcej miere len klávesy, ktoré ukazujú písmená iba v ich veľkej tlačenej podobe. Pre zachovanie jednoduchosti a jednotnosti pri písaní malých a veľkých písmen a ich skladaní do slov, sú hrou v súčasnej verzii všetky stláčané klávesy písmen vždy interpretované ako veľké písmená. Do módu, ktorým by sa ovládala zložitosť hry (zapnutie a vypnutie skladania slov s diakritikou), sa plánuje tiež pridať najľahšia úroveň pre najmenších. S týmto nastavením by hra zobrazovala animácie už po stlačení úvodného písmena v slove. Pri stlačení písmena, na ktoré v slovníku začína viac slov, by sa náhodne vybrala a hneď zobrazila animácia práve jedného z nich. Takéto doplnenie a rozdelenie hry do jednotlivých úrovní zložitostí rozšíri aj vekovú skupinu detí, pre ktoré bude hra zodpovedajúco jednoduchá či dostatočne zložitá a stále zaujímavá. ZÁVER 44 Rozšírenie je plánované aj v počítačových učebniach na školách, ktorých riaditelia už prejavili záujem o spestrenie výučby detí používaním tejto aplikácie. Ponúka sa tiež možná úprava hry na zariadenia, ako napríklad tablety či smartfóny, ktoré sa stále viac a viac dostávajú do rúk aj deťom. 45 Literatúra [1] JIRKOVSKÝ, J. Game industry: vývoj počítačových her a kapitoly z herního průmyslu. Praha: D.A.M.O., 2011. 135 s. ISBN 978-80-904387-1-2. [2] HRICOVÁ I.; JAKUBÍKOVÁ J. a TULENKOVÁ M. Hry a kolektívne úlohy v prírodopise. Metodicko-pedagogické centrum v Prešove, 2003. 58 s. ISBN 80-8045-294-6. [3] Raise Smart Kid. The Positive and Negative Effects of Video Games [online]. [cit. 2014-5-10]. Dostupný z: . [4] Essential Facts about the Computer and Video Game Industry. Entertainment Software Association, 2014. [online]. [cit. 2014-5-10]. Dostupný z: . [5] HEARN, D. a BAKER, M. Computer graphics with OpenGL: third edition. Upper Saddle River: Pearson Prentice Hall, 2004. 857 s. ISBN 0131202383. [6] HAWKINS, K. a ASTLE D. OpenGL game programming. Roseville: Prima publishing, 2001. 777 s. ISBN 0761533303. [7] WRIGHT, R. S.; LIPCHAK, B. a HAEMEL, N. OpenGL superbible: fourth edition. Upper Saddle River, N.J.: Addison-Wesley, 2007. 1205 s. ISBN 9780321498823. [8] OpenGL programing guid: The official guide to learning OpenGL [online]. [cit. 2014-29-3]. Dostupný z: . [9] WOLFF, D. OpenGL 4.0 shading language cookbook. Birmingham: Packt Publishing, 2011. 323 s. ISBN 9781849514767. LITERATÚRA 46 [10]SHREINER, D. OpenGL programming guide: seventh edition. Upper Saddle River: Addison-Wesley, 2010. 885 s. ISBN 9780321552624. [11]Kilgard, M. J. The OpenGL utility toolkit (GLUT) programing interface API version 3 [online]. Silicon Graphics, Inc. 1996. [cit. 2014-5-4]. Dostupný z: . [12]Subramanian, K. R. Aliasing and Antialiasing [online]. 2009. [cit. 2014-4-10]. Dostupný z: . [13] Hravé učení. [online; detská počítačová hra; cit. 2014-10-30] . Dostupný z: . [14] Childsplay. [online; detská počítačová hra; cit. 2014-10-30] . Dostupný z: . [15] Alphabet Match. ABCya. [online; detská počítačová hra; cit. 2014-10-30] . Dostupný z: . [16] Barvíci. Onesoft. [online; detská počítačová hra; cit. 2014-10-30] . Dostupný z: . [17] Alphabet Order. ABCya. [online; detská počítačová hra; cit. 2014-10-30] . Dostupný z: . [18] Pexeso s dopravními značkami. Onesoft. [online; detská počítačová hra; cit. 2014-11-4] . Dostupný z: . [19] Hledej květinu podle jména. Onesoft. [online; detská počítačová hra; cit. 2014-11-4] . Dostupný z: . [20] ABCya. [online; webový portál s detskými počítačovými hrami; cit. 2014-11-20] . Dostupný z: . LITERATÚRA 47 [21] Onesoft. [online; webový portál s detskými počítačovými hrami; cit. 2014-11-20] . Dostupný z: . [22]Cheung, H. S. Computer Games. [online]. [cit. 2014-11-22]. Dostupný z: . 48 Dodatok A Obrazová príloha Nasledujúca obrazová príloha obsahuje ukážky z aplikácie ABC hrou. Demonštruje sa na nich grafický vzhľad aplikácie a možnosti nastavení, ktoré samotná hra ponúka. Sú na nich postupne ukázané štyri voľby pozadia, beh aplikácie v rôznych jazykoch, zobrazené pop-up menu a ukážky skrytých a zobrazených informácii o hre a ovládaní. Obr. 1 Ukážka z hry. V slovníkovom priestore sú zobrazené reťazce (čísla záchranných zložiek), ktoré je možné poskladať na základe postupnosti posledných stlačených kláves (1 je poslednou stlačenou klávesou). Zvolené pozadie je jar a jazyk český. Dodatočné informácie o ovládaní sú zobrazené, informácie o hre sú skryté. Obr. 2 Ukážka z hry s úspešne poskladaným slovom snake. Zvolené pozadie je leto a jazyk anglický. Dodatočné informácie o hre a aj o ovládaní sú skryté. Obr. 3 Ukážka z hry s úspešne poskladaným slovom slon. Zvolené pozadie je jeseň a jazyk slovenský. Dodatočné informácie o ovládaní sú zobrazené, informácie o hre sú skryté. Je vyvolané aj pop-up menu hry zobrazujúce jeho možnosti voľby. Obr. 4 Ukážka z hry s úspešne poskladaným slovom vosa. Zvolené pozadie je zima a jazyk český. Dodatočné informácie o hre sú zobrazené, informácie o ovládaní sú skryté. 4. TESTOVANIE HRY 49 Obr. 1 4. TESTOVANIE HRY 50 Obr. 2 4. TESTOVANIE HRY 51 Obr. 3 4. TESTOVANIE HRY 52 Obr. 4 53 Dodatok B Referencie Referencie na použité prevzaté ukážkové obrázky a zvuky, ktoré sa v aplikácii k diplomovej práci objavujú v rovnakej alebo aj upravenej podobe. Vďaka tomu, že aplikácia nie je komerčná, sa uvedenou citáciou zdrojov neporušujú autorské práva. Obrázky k slovám: AHOJ AUTO BUBON CUKOR DOM FILM GUMA HAD HADICA HUS IHLA INJEKCIA JABLKO JAR KOZA KRTKO LETO LEV MED MOST NOS OBRAZ OKO B. REFERENCIE 54 OPICA OSA PES RAK RYBA SLON STOPA TIGER TORTA UHLIE VEDRO VLK VODA ZIMA ZUB ZVON 112 150 155 158 Pozadia v hre: Jar Leto Jeseň Zima Zvuky boli nahrané z prekladača Google . Ďalšie špeciálne zvuky, ktoré dopĺňajú animácie slov boli prevzaté z nasledujúcich zdrojov: 55 Dodatok C Dotazník užívateľského testovania Vek dieťaťa: Pohlavie dieťaťa: chlapec dievča Vybralo si pozadie: jar leto jeseň zima Prvé úspešne poskladané slovo: Čas potrebný k poskladaniu: Úloha poskladať zadané slovo: Čas potrebný k poskladaniu: Priestor na subjektívne hodnotenie priebehu testovania: 56 Dodatok D Priložené DVD Priložené DVD obsahuje nasledujúce súbory:  Táto práca vo formáte pdf a doc. Pripojené sú aj všetky vlastné a prevzaté obrázky, ktoré sa v texte vyskytli.  Projekt aplikácie v Microsoft Visual Studio 2010 so všetkými zdrojovými súbormi aplikácie ABC hrou.  Inštalačný balíček obsahujúci aplikáciu ABC hrou a samostatný pdf manuál. 57 Dodatok E Administrátorský manuál V nasledujúcej časti je zdokumentovaná počítačová hra ABC hrou. Táto časť slúži ako podrobná príručka poskytujúca informácie o hre (1. O hre), jej inštalácii (2. Inštalácia), jazykoch (3. Jazyk), ovládaní (4. Ovládanie) a ďalších možnostiach (5. Rozšírenie hry), ako aj informácie o prípadnom riešení problémov (6. Možné problémy a ich riešenie). 1 O hre .......................................................................................................58 2 Inštalácia.................................................................................................59 2.1 Požiadavky........................................................................................59 3 Jazyk .......................................................................................................60 4 Ovládanie................................................................................................61 4.1 Myš ...................................................................................................61 4.2 Klávesnica ........................................................................................61 5 Rozšírenie hry ........................................................................................62 5.1 Rozšírenie hry novým slovom..........................................................62 5.2 Ukážkový príklad rozšírenia hry novým slovom .............................65 6 Možné problémy a ich riešenie.............................................................68 6.1 Problém s obrázkom.........................................................................68 6.2 Problém so zvukom ..........................................................................69 E. ADMINISTRÁTORSKÝ MANUÁL 58 O hre ABC hrou je jednoduchá 3D interaktívna počítačová hra pre deti predškolského a školského veku. Jej hlavným cieľom je zabaviť a hravou formou najmä vzdelávať. Stláčaním kláves (písmen a číslic) sa zobrazujú na displeji ich 3D interpretácie sprevádzané zvukovými efektmi. Na základe postupnosti stláčaných kláves sa mení ponúkaný slovník na tabuli, ktorý zobrazuje možnosti úspešného dokončenia začatého slova. Úspech je odmenený jeho následnou animáciou (Obr. 1.1). Aplikáciu zhotovil František Cisko ako svoju diplomovú prácu pri štúdiu na Fakulte informatiky Masarykovej univerzity. Obr. 1.1 Ukážka z aplikácie ABC hrou. E. ADMINISTRÁTORSKÝ MANUÁL 59 Inštalácia Hru stačí jednoducho prekopírovať na počítač a rozbaliť do vami zvoleného umiestnenia. Po rozbalení je hra spustiteľná súborom: ABC hrou.exe 2.1 Požiadavky Hra beží pod systémom Windows. Potrebné je 97 MB voľnej pamäte na disku. Hra môže požadovať väčší výpočtový výkon, ak pobeží na displeji s vysokým rozlíšením v maximálnom okne alebo na počítači so slabou či len integrovanou grafickou kartou. V menu hry je preto umožnené zmeniť grafickú úroveň zobrazovania (Obr. 4.1). Zvolené nastavenie úrovne zobrazovania si hra vždy zapamätá a pri ďalšom spustení sa inicializuje s poslednou použitou grafickou úrovňou. Pri prvom spustení je predvolená nízka úroveň. E. ADMINISTRÁTORSKÝ MANUÁL 60 Jazyk Pri prvom spustení je hra inicializovaná v základnom jazyku, ktorým je čeština. Zmena jazyka je možná v pop-up menu (vyvolané stlačením pravého tlačidla na myši) (bližšie v kapitole o ovládaní 4.1 Myš). V menu je možné vybrať si z jazykov čeština, slovenčina a angličtina (Obr. 3.1). Zmena jazyka je hneď platná a nie je potrebný reštart aplikácie. Zvolené nastavenie jazyka si hra vždy zapamätá a pri ďalšom spustení sa inicializuje s posledným použitým jazykom. Obr. 3.1 Voľba jazyka v pop-up menu. E. ADMINISTRÁTORSKÝ MANUÁL 61 Ovládanie 4.1 Myš Pravé tlačidlo myši vyvolá pop-up menu (Obr. 3.1 a 4.1). V tomto menu je možné myšou ovládať mód hry, podobne ako to je možné aj pomocou špeciálnych kláves na klávesnici. Menu navyše poskytuje aj možnosť zmeny jazyka (bližšie v kapitole 3. Jazyk) ako aj zmenu pozadia a voľbu grafickej úrovne zobrazovania hry (bližšie v kapitole 2.1 Po- žiadavky). Obr. 4.1 Voľba grafickej úrovne v pop-up menu. 4.2 Klávesnica Hra reaguje na stláčanie kláves interpretovaných ako malé a veľké písmená bez diakritiky (a-z, A-Z) a čísla (0-9). Ich stláčaním je písmeno/číslo na obrazovke v okne hry animované a zvukovo sprevádzané. Aby aplikácia ostala jednoduchšou aj pre menšie deti, sú pri písaní malých a veľkých písmen všetky interpretované ako veľké písmená. Hra reaguje aj na stláčanie týchto špeciálnych kláves, ktoré majú uvedenú funkciu: F1 - O hre (ukáž/skry) F2 - Ovládanie (ukáž/skry) F5 - Celá obrazovka (zapni/vypni) Esc - Koniec Backspace - vymaže posledný napísaný znak (ak existuje) Stláčanie ostatných kláves je po grafickej stránke hrou úplne ignorované, ale pre atraktívnosť na stláčanie väčšiny z nich hra reaguje aspoň zvukom. E. ADMINISTRÁTORSKÝ MANUÁL 62 Rozšírenie hry Hra bola vyvíjaná tak, aby bolo jednoducho možné rozšíriť jej slovník o nové slová a k nim odpovedajúce animácie. Toto rozšírenie je realizovateľné bez toho, aby bolo potrebné zasahovať do napísaného programátorského kódu hry. Prevažne stačí len doplniť a upraviť pár textových súborov aplikácie. V tejto kapitole je následne opísaný všeobecný postup rozširovania hry novým slovom (kapitola 5.1 Rozšírenie hry novým slovom) ale aj spracovaný ukážkový príklad rozšírenia (kapitola 5.2 Ukážkový príklad rozšírenia hry novým slovom). 5.1 Rozšírenie hry novým slovom Samotné rozšírenie hry prebieha v pár nadväzujúcich krokoch: 1. Zapísanie slova a jeho prekladov do jazykových slovníkov. 2. Obrázok a jeho prepojenie so slovom. 3. Zvuk a jeho prepojenie so slovom. 1. Zapísanie slova a jeho prekladov do jazykových slovníkov. V priečinku animation sa modifikáciou textových súborov dictionary_xx (pod označením xx sa vyjadruje skratka jazyka, napríklad dictionary_sk je slovenský slovník) dá rozšíriť slovník slov, ktoré hra pozná a používa. Na každom riadku je zapísané spojenie slova s jemu priradením číselným indexom v tvare: index;SLOVO (Obr. 5.1). Pre zapísanie nového slova do slovníku je potrebné použiť nasledujúci väčší číselný index, ktorý ešte nebol použitý v žiadnom z jazykových slovníkov. Príkladom je pridanie (na nový samostatný riadok) zápisu v tvare: najväčší_index+1;NOVE_SLOVO Novo pridané slovo by nemalo prekročiť dĺžku 10 znakov, lebo by sa pri zobrazení v hre už celé nevošlo na určenú plochu pre slovník. E. ADMINISTRÁTORSKÝ MANUÁL 63 Obr. 5.1 Jazykové slovníky (dictionary_xx) a ukážka zápisu slov v nich. Pre doplnenie prekladov nového slova aj do ďalších jazykových slovníkov stačí do odpovedajúcich súborov doplniť riadok pre preložené slovo a použiť rovnaký číselný index, aký mu bol pridelený v prvom súbore (Obr. 5.2). Je tiež možné mať v hre slová, ktorým neodpovedá žiaden ekvivalent v inom jazyku. Vtedy je potrebné použitý číselný index v iných jazykových súboroch pri rozširovaní preskočiť a nepoužívať. V slovníkoch sa zachováva abecedné poradie slov, vďaka čomu sú aj slová v hre s rovnakým počtom úspešne stlačených písmen radené v abecednom poradí. Obr. 5.2 Používanie rovnakého číselného indexu u slov a ich prekladov v jazykových slovníkoch. E. ADMINISTRÁTORSKÝ MANUÁL 64 2. Obrázok a jeho prepojenie so slovom. Hra pracuje s obrázkami vo formáte JPEG o veľkosti 645x510. Všetky obrázky k animáciám sú uložené v priečinku animation/photo a sú priradené k slovám v slovníku pomocou odpovedajúcich indexov v súbore animation/photoList.txt. V tomto súbore sa prepája použitý index u slova v jazykovom slovníku a cesta k obrázku. Prepojenie má tvar: index;animation/photo/obrázok.jpg (Obr. 5.3). Nový riadok sa pridáva vždy na koniec súboru photoList.txt a to tak, aby číselný index slova neporušil stúpajúcu postupnosť. Slúži to na kontrolu či bol novému slovu určený správny unikátny index. Pre jednoduché určenie nového číselného indexu pri pridávaní slova do jazykového slovníku v prvom kroku, je práve najjednoduchšie pozrieť sa najprv na posledný číselný index v súbore photoList.txt a zvoliť index o jedna väčší. Pre správne zobrazenie je potrebné pri nahrávaní nových obrázkov dodržať spomenuté vlastnosti, rozmer a formát. Nežiaducim artefaktom, ktoré by mohli vzniknúť na okrajoch obrázkov pri ich zobrazení v hre, je najlepšie predísť použitím obrázkov s bielim pozadím či prípadne aspoň pár pixelovím bielim okrajom. Obr. 5.3 Prepojenie číselného indexu slova s obrázkom. E. ADMINISTRÁTORSKÝ MANUÁL 65 3. Zvuk a jeho prepojenie so slovom. Hra používa zvukové súbory vo formáte WAV. Všetky zvuky k animáciám sú uložené v priečinkoch sound/sound/xx/ (pod označením xx sa vyjadruje skratka jazyka). Zvuky sú priradené k slovám v slovníkoch pomocou odpovedajúcich indexov. Toto priradenie sa spravuje v súboroch sound/sound_xx.txt. V týchto súboroch sa spája použitý index u slova v jazykovom slovníku spolu s cestou k zvukovému súboru. Prepojenie má tvar: index;sound/sound/xx/zvuk.wav (Obr. 5.4). Obr. 5.4 Zvukové súbory (sound_xx) a ukážka prepojenia indexu slova so zvukom v nich. 5.2 Ukážkový príklad rozšírenia hry novým slovom V tejto kapitole je prakticky ukázané, ako prebieha rozšírenie hry v troch nadväzujúcich krokoch (bližšie o jednotlivých krokoch v kapitole 5.1 Rozšírenie hry novým slovom). Rozhodol som sa, že hru rozšírim novým slovom JABLKO. 1. Zapísanie slova a jeho prekladov do jazykových slovníkov. V priečinku animation pracujem s textovými súbormi dictionary_xx (pod označením xx sa rozumie skratka jazyka, napríklad dictionary_sk je slovenský slovník). Zvolím si najbližší väčší nepoužitý index, ktorý bude reprezentovať JABLKO (zvolený index v tomto ukážkovom príklade rozšírenia je číslo 42). Do požadovaných jazykových slovníkov pridám nové riadky v tvare: index;SLOVO (Obr. 5.5). V slovníkoch zachovám abecedné poradie slov, vďaka čomu budú aj slová v hre s rovnakým počtom úspešne stlačených písmen zobrazované v abecednom (slovníkovom) poradí. E. ADMINISTRÁTORSKÝ MANUÁL 66 Obr. 5.5 Rozšírenie jazykových slovníkov novým slovom. 2. Obrázok a jeho prepojenie so slovom. Najprv si spracujem obrázok, ktorý chcem použiť pri animácii nového slova. Upravím si jeho rozmery na 645x510 pixelov a uložím ho vo formáte JPEG. Pre vyhnutie sa nežiaducim artefaktom odporúčam používať len obrázky s bielim pozadím či vytvoreným aspoň pár pixelovím bielim okrajom. Obrázok nahrám do priečinku animation/photo (tu sú uložené všetky obrázky k animáciám hry). Následne upravím súbor animation/photoList.txt, kde pridám na koniec súboru na nový riadok zápis v tvare: index;animation/photo/názov_obrázku.jpg (Obr. 5.6). Číselný index u slova v novo pridanom zápise by nemal porušiť stúpajúcu postupnosť v súbore. Slúži to zároveň na kontrolu či bol novému slovu určený správny unikátny index. Pre jednoduché určenie nového číselného indexu, pri pridávaní slova do jazykového slovníku v prvom kroku, je práve najjednoduchšie pozrieť sa najprv na posledný číselný index v súbore photoList.txt a zvoliť index o jedna väčší. Obr. 5.6 Obrázok a jeho prepojenie so slovom cez číselný index. E. ADMINISTRÁTORSKÝ MANUÁL 67 3. Zvuk a jeho prepojenie so slovom. Najprv si upravím zvukový súbor, ktorý chcem použiť pri animácii, aby bol vo formáte WAV. Nahrám ho do priečinku sound/sound/xx/ (pod označením xx sa vyjadruje skratka jazyka) k ostatným zvukovým súborom. Ak som novým slovom rozšíril aj iné jazykové slovníky, bude potrebné pridať nový zvukový súbory aj do ostatných priečinkov so zvukovými súbormi pre daný jazyk. Zvuky sú priradené k slovám v slovníkoch pomocou odpovedajúcich indexov. Toto priradenie sa spravuje v súboroch sound/sound_xx.txt. V týchto súboroch sa spája použitý index u slova v jazykovom slovníku spolu s cestou k zvukovému súboru. Prepojenie má tvar: index;sound/sound/xx/zvuk.wav. V prvom kroku ukážkového príkladu som rozšíril všetky tri jazykové slovníky novým slovom (Obr. 5.5). Je preto potrebné doplniť aj všetky textové súbory sound/sound_xx.txt, v ktorých sa spracúva zvukové prepojenie k slovu (Obr. 5.7). Pri tomto doplnení sa musí dávať pozor na zachovanie rovnakého poradia riadkov s číselnými indexmi, ako je tomu aj v súbore jazykového slovníku (všimnite si zachovanie rovnakého slovníkového poradia v týchto súboroch na Obr. 5.5 a Obr. 5.7). Obr. 5.7 Zvuk a jeho prepojenie so slovom cez číselný index. E. ADMINISTRÁTORSKÝ MANUÁL 68 Možné problémy a ich riešenie Pri rozširovaní hry novým slovom sa môže stať, že sa zabudne na doplnenie jedeného z textových súborov, zvolí zlý číselný index, doplní prepojenie v chybnom poradí či čokoľvek iné. V najhoršom prípade spúšťanie aplikácie zlyhá, v lepšom hra pobeží, ale nebude zobrazovať obrázky alebo prehrávať zvuky ku niektorým úspešne poskladaným slovám. Pri spúšťaní aplikácie sa objavuje okno (Obr. 6.1), ktoré informuje o priebehu jej inicializácie a môže upozorniť na niektoré z týchto chýb a dopomôcť k ich odstráneniu. Obr. 6.1 Okno informujúce o priebehu spúšťania hry. 6.1 Problém s obrázkom Ak sa vyskytne problém a nezobrazuje sa obrázok u animácie, skontrolujte či je nahraný súbor vo formáte JPEG a na odkazujúcom sa umiestnení (animation/photo/obrázok.jpg) (bližšie v kapitole 5.1 Rozšírenie hry novým slovom v časti 2. Obrázok a jeho prepojenie so slovom). V spúšťacom okne aplikácie sa môže objaviť popis chyby signalizujúci nesprávny zápis do súboru s obrazovými prepojeniami (Obr. 6.2). Potom je potrebné upraviť tento chybný zápis v textovom súbore. Ak sa opravuje nesprávne zvolený index u slova, je potrebné skontrolovať a prípadne opraviť aj ostatné textové súbory (slovníkové a zvukové), kde sa vyskytujú prepojenia k tomuto slovu (bližšie informácie o prepojeniach a korektnom spôsobe zápisoch do potrebných textových súborov sú v kapitole 5. Rozšírenie hry). Číselný index u jedného slova, jeho prekladov, obrazového a zvukového prepojenia, musí byť vždy rovnaký, ale v porovnaní k ostatným slovám, musí byť tento index unikátny. E. ADMINISTRÁTORSKÝ MANUÁL 69 Obr. 6.2 Chyba signalizujúca nesprávny výber číselného indexu u prepojenia pre novo pridaný obrázok (index nie je unikátny). 6.2 Problém so zvukom Ak sa vyskytne problém a neprehráva sa zvuk u animácie, skontrolujte či je nahraný zvukový súbor vo formáte WAV a na odkazujúcom sa umiestnení (sound/sound/xx/zvuk.wav) (bližšie v kapitole 5.1 Rozšírenie hry novým slovom v časti 3. Zvuk a jeho prepojenie so slovom). V spúšťacom okne aplikácie sa môže objaviť popis chyby signalizujúci nesprávny zápis do súboru so zvukovými prepojeniami (Obr. 6.3). Potom je potrebné, najlepšie porovnaním k odpovedajúcemu jazykovému slovníku (Obr. 6.4), opraviť tento chybný zápis v súbore. Obr. 6.3 Chyba signalizujúca problém s prepojením číselného indexu 12 a 42 vo zvukovom súbore sound_sk.txt (Obr. 6.4). Obr. 6.4 Prepojenie zvukového súboru u novo pridaného slova JABLKO bolo vložené na nesprávny riadok a nezachovalo sa slovníkové poradie zo súboru dictionary_sk.txt.