Programy pro výuku dětí s poruchou zraku

Transkript

1 Programy pro výuku dětí s poruchou zraku Nastudujte problematiku obrázkových úloh a testů pro zrakově postižené děti. Převeďte úlohy, naprogramované v systému GamLab pro speciální mateřskou školku do prostředí pro mobilní zařízení. Porovnejte svou implementaci s implementací v systému GamLab[1, 2]. Definujte vhodná kritéria (např. náročnost programování, modifikovatelnost, rychlost a spolehlivost, apod.) a zhodnoťte klady a zápory obou implementací. Implementaci otestujte s dětmi. i

2 ii

3 České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačů Bakalářská práce Programy pro výuku dětí s poruchou zraku Jakub Bouška Vedoucí práce: Ing. Petr Felkel, Ph.D. Studijní program: Otevřená informatika, strukturovaný, Bakalářský Obor: Softwarové systémy 23. května 2013

4 iv

5 v Poděkování V této části bych chtěl poděkovat vedoucímu této práce, Ing. Petru Felkelovi, PhD., za trpělivost při vedení této práce. Dále bych chtěl poděkovat SPC Horáčkova, Praha, s kterou probíhala spolupráce. Hlavně pak Mgr. Červenákové, která velmi pomohla při návrhu aplikace i jejím testování, kdy se ujala role moderátora a s dětmi kvůli jejich stydlivosti komunikovala raději ona. Velmi také oceňuji její pozitivní přístup a ochotu při konzultacích i rozboru testování. Také děkuji účastníkům testování i jejich rodičům, kteří s testováním souhlasili.

6 vi

7 vii Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu 60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon). V Praze dne

8 viii

9 Abstract A few years ago students created a PC program to support the treatment of visually impaired children. I consider this an imperfect solution as the program suffers from programming errors, slow load times for certain scenes and it lacks intuitive controls. The aim of my project was to re-implement this application for mobile and tablet devices, which would make the controls more intuitive and allow children to practice important skills at home and with the help of their parents. The project met all my expectations and was successfully tested by real users visually impaired kids. The mobile and tablet application is faster, more reliable and has a superior graphical interface to the PC version. Abstrakt V minulých letech se několik studentů pokusilo o návrh PC programu pro podporu léčby zrakově postižených dětí. Řešení považuji za nedokonalé proto, že obsahuje programové chyby, pomalu načítá jednotlivé scény a nemá intuitivní ovládání. Cílem mé práce je reimplementace těchto podkladů pro mobilní a tabletová zařízení, čímž se zjednoduší ovládání a dětem se umožní trénovat své vady i doma za dozoru rodičů. Projekt splnil všechna očekávání, což bylo potvrzeno i následným otestováním se skutečnými uživateli - zrakově postiženými dětmi. Mobilní a tabletová verze je rychlejší, spolehlivější a má lepší grafické rozhraní, než program pro PC. ix

10 x

11 Obsah 1 Úvod 1 2 Popis problému, specifikace cíle Oční poruchy Binokulární vidění a jeho poruchy Léčebné metody poruch binokulárního vidění Cílová uživatelská skupina a kritéria pro aplikaci Cíl projektu Přehled existujících aplikací Software The Orchestra Game The Edge Game Priory Woods School and Arts College Bugz - Brouci Shapes - Tvary Inclusive TCL Alphabet paint paint Intellijoy Kids shape puzzle Kids ABC Poznávej s Luisou Porovnání nalezených aplikací dle kritérií Shrnutí rešerše Analýza a návrh řešení Obecná analýza Funkční požadavky Nefunkční požadavky Výběr implementačního prostředí Herní scény Logika Skládanka (Puzzle) Spáruj xi

12 xii OBSAH 5.2 Tvary Orientace Stíny Velikost Barvy Maluj Kulička Počty Počítej Dvojice Ovoce Grafické podklady Inkscape Návrh grafického rozhraní Výběr kategorie Výběr hry v kategoriích Statistiky Pozastavení hry Cvičící mód Realizace Vývojové studio Gideros Programovací jazyk Lua Ukázka metody Ukázka třídy Přizpůsobení aplikace různým rozlišením Zpracování události Manažer Pozic Potupné zatěžování oka Testování Testování bez uživatelů Testování s uživateli Podpisový arch pro rodiče Průběh testování Předtestový dotazník Potestový dotazník Testovací scénáře Výsledky dotazníků Výsledky testování Diskuse Závěr Možnosti dalšího vývoje

13 OBSAH xiii 11 Instalační příručka Obsah přiloženého CD Seznam literatury 59

14 xiv OBSAH

15 Seznam obrázků 2.1 Ukázka z knihy rozvoj zrakového vnímání Ukázka ze hry The Orchestra Game Ukázka ze hry The Edge Game Ukázka ze hry Bugz Ukázka ze hry Shapes Ukázka ze hry Alphabet Paint Ukázka ze hry Paint Ukázka ze hry Kids shape puzzle Ukázka ze hry Kids ABC scéna puzzle scéna spáruj scéna horno-dolní/levo-pravá scéna stíny scéna velikost starý návrh hry Maluj nový návrh hry Maluj starý návrh hry Kulička starý návrh hry Kulička scéna Počítej scéna dvojice jednotlivé verze scény ovoce První a druhá verze hlavního menu Výběr hry v kategorii Statistiky po dohrání hry Pozastavení hry Jiné návrhy grafického designu Jiné návrhy grafického designu xv

16 xvi SEZNAM OBRÁZKŮ

17 Seznam tabulek 3.1 Tabulka porovnání grafiky nalezených programů podle zvolených kritérií Tabulka porovnání vývojových prostředí Tabulka výsledků předtestového dotazníku Tabulka výsledků potestového dotazníku Tabulka porovnání aplikací xvii

18 xviii SEZNAM TABULEK

19 Kapitola 1 Úvod V současné době je v České republice asi 4% dětí předškolního věku, které mají nějaký druh zrakového postižení. Existují terapeutické metody pro podporu léčby tohoto druhu postižení. Mezi tyto metody se řadí i různá cvičení slabého oka pomocí her. Většina z těchto her je pouze v papírové podobě, které trénují jednotlivé vady. Dle mého názoru je škoda, že děti nemohou cvičit své vady i doma za pomoci rodičů. Je sice možné zakoupit různé herní knihy či si tyto hry oxeroxovat, ale tato metoda je náročná na přírodní zdroje. V předchozích letech se několik studentů pokusilo o vytvoření programu na základě designu těchto papírových předloh. Tento program, určený pouze pro PC, má podle mého názoru spoustu chyb, na které bych se rád zaměřil v tomto projektu. Projekt se tedy věnuje re-implementaci těchto her. V první části se zaměřím na analýzu požadavků pro tuto aplikaci a porovnání podobných her. V druhé části projektu se zaměřím na návrh grafického rozhraní jednotlivých scén, realizaci a testování mé implementace na skutečných uživatelích pomocí metod HCI(human computer interaction). Cílem těchto testů je získat zpětnou vazbu o použitelnosti aplikace. Nakonec následuje diskuse ohledně témat, která se nevešla do jiných kapitol a porovnání mé implementace s programem Poznávej s Luisou. Po dokončení implementace je třeba porovnat obě aplikace podle stanovených kritérií. Se zvětšujícím se počtem chytrých telefonů v naší společnosti bude tento projekt realizován především pro Android a ios zařízení. Ovládání těchto zařízení je, pro děti předškolního věku, více intuitivní. Pro implementaci jsem vybral Gideros Studio, vývojářský software, určený pro vývoj her pro Android a ios zařízení pomocí skriptovacího jazyku Lua( V rámci projektu byla navázána spolupráce se Speciálně pedagogickým centrem (dále jen SPC), kde autor práce konzultoval design aplikace a následně prováděl testování aplikace pomocí speciálních metod. Hlavním konzultantem zde byla Mgr. Červenáková, která kromě konzultací s autorem této práce, pomáhala i při testování aplikace, kde se ujala role moderátora. 1

20 2 KAPITOLA 1. ÚVOD

21 Kapitola 2 Popis problému, specifikace cíle Cílem této práce je podpora léčby zrakově postižených dětí. Těžištěm zájmu jsou poruchy funkční binokulárního vidění. Funkčních poruch binokulárního vidění je mnoho, ale nejrozšířenějšími poruchami u dětí předškolního věku jsou právě šilhavost a tupozrakost. Proto se v projektu zaměřuji hlavně na tyto dvě funkční poruchy. Pro správný návrh herních principů a grafického zpracování jednotlivých scén je důležité poznat nejrozšířenější druhy očních poruch, jejich příznaky a způsoby jejich léčby. V této kapitole proto popíši tyto dvě poruchy u dětí a metod, které se používají pro léčbu těchto poruch. Metod na léčbu poruch binokulárního vidění je mnoho, ovšem já zde uvedu pouze nejvíce využívané, kterými jsou okluzivní a pleoptická terapie. Na závěr uvedu cíle své práce. 2.1 Oční poruchy Binokulární vidění a jeho poruchy Binokulární vidění je vidění za použití obou očí současně (z latinského bi = dvojitý a oculus = oko). Umožňuje člověku vidět předmět pozorovaný oběma očima nezdvojený. Binokulární vidění umožnuje člověku prostorové vidění, u dětí se vyvíjí zhruba do jednoho roku a upevňuje se do věku kolem šesti let, kdy dochází k jeho stabilizaci. V případě poruchy vývoje vzniká šilhání a tupozrakost. Šilhání a tupozrakost spolu úzce souvisejí. Šilhavost (strabismus) Šilhavost je spojena se špatnou spoluprací očí. Nastává, když oči nehledí rovnoběžně, ale jedno se odchyluje od druhého. Příčinou může být velký dioptrický rozdíl mezi očima. Dítě potom stáčí oko, jehož ostrost je snížena. Existují dva typy šilhání. První případ nastává, pokud dítě stáčí postižené oko ke vnitřnímu koutku. Tomuto šilhání se říká sbíhavé. Opačný případ nastane, pokud dítě stáčí oko k vnějšímu koutku. Nazývá se rozbíhavé šilhání. Běžnou metodou léčby této poruchy jsou brýle, z důvodu, aby se nerozvinula tupozrakost. Tato metoda se používá, pokud je příčinou šilhání dioptrická porucha. 3

22 4 KAPITOLA 2. POPIS PROBLÉMU, SPECIFIKACE CÍLE Tupozrakost (amlyopie) Tupozrakost patří také mezi funkční poruchy. Zde jde o zrakovou neostrost způsobenou nečinností oka. Trvá-li neostrost delší dobu, porucha se ještě zhorší a to může vést až k těžké tupozrakosti. Postižené oko pak dítě přestane používat, kvůli čemuž se naruší jeho prostorové vidění. U obou chorob je velmi důležité začít s léčbou co nejdříve. Podstatou léčby je obnova aktivity oka, ke které se používají brýle. 2.2 Léčebné metody poruch binokulárního vidění Léčebných metod určených k nápravě binokulárního vidění existuje mnoho od pravidelných cvičení po operační zákroky. Zde jsou popsány jen metody, které souvisí s tématem tohoto projektu. Používají se ve speciálních centrech, jako je SPC Horáčkova, se kterým byla navázána spolupráce při tvorbě projektu. Okluzivní terapie Okluzivní terapie využívá při léčbě okluzor, kterým se zakrývá zdravé oko. Namáháno je tedy slabé oko. Cvičením je slabé oko donuceno k činnosti a tím se stav zlepšuje. Nevýhodou je estetická stránka léčby, protože okluzor je velmi výrazný a navíc se může stát terčem posměchu ostatních dětí. Cílem okluzivní terapie je vyrovnat sílu slabého oka. Okluzivní terapie se používá hlavně při nápravě šilhavosti. Pleoptická terapie Pleoptická terapie používá cvičení, při kterých se tupozraké oko aktivně podílí na úkolech, které se provádí za pomoci hmatu, sluchu a paměti. Pleoptická terapie pomáhá hlavně s léčbou tupozrakosti. Terapie se často využívá společně s okluzivní terapií. V rámci pleoptické terapie je využíváno grafických podkladů. Existuje mnoho cvičení, ve kterých se terapie uplatňuje. Mezi tato cvičení patří například hledání odlišností mezi téměř stejnými obrázky, hledání obrázku podle vzoru viz obr. 2.1, hledání dvojic, horno-dolní/levopravá orientace obrázků, různé výtvarné činnosti atd.. Pro děti se zvýšeným postižením se používají plastové barevné objekty. S objekty děti trénují základní tvary a jejich vlastnosti. Postupně se ukazují jednotlivé tvary a cvičitelka pokládá otázky například na počet rohů, nebo hran. Děti mají možnost vzít si jednotlivé objekty do ruky a zapojit tak kromě zraku i hmat.

23 2.3. CÍLOVÁ UŽIVATELSKÁ SKUPINA A KRITÉRIA PRO APLIKACI 5 Obrázek 2.1: Ukázka z knihy rozvoj zrakového vnímání 2.3 Cílová uživatelská skupina a kritéria pro aplikaci Projekt je zaměřen na tvorbu her pro děti předškolního věku se zrakovým postižením. Z toho tedy plyne hlavní cílová uživatelská skupina, kterou jsou zrakově postižené děti ve věku tři až šest let. Postižení můžou být různého rozsahu od dalekozrakosti či šilhavosti až ke kombinovaným postižením, kdy mají děti nejen zrakové, ale i lehké tělesné či mentální postižení. Jedná se o projekt zaměřený na specifickou skupinu uživatel, je tedy nutné mít nastavena kritéria, která musí splňovat návrh grafického rozhraní aplikace a jednotlivých obrázků. Aby uživatelé rozpoznali význam obrázků, je důležité kritéria dodržet. V práci Kateřiny Štromerové a Bohumila Tománka byly za pomoci Speciálně Pedagogického Centra stanoveny požadavky na funkcionalitu ovládání a vizuální stránku her. Požadavky jsem převzal z jejich práce: málo detailů (jednoduchost) výrazné kontury - nejméně 5 pixelů kontrastní a barevné obrázky logické uspořádání (málo obrázků na ploše, mezery mezi obrázky) propojení zraku a sluchu 2.4 Cíl projektu Cílem projektu je zpracovat kvalitní mobilní aplikaci pro léčbu zraku u dětí předškolního věku, která bude vycházet ze stávajících metod léčby těchto dětí. V SPC se používají k cvičení s dětmi, které mají pouze zrakové postižení, papírové předlohy. Předlohy jsou pouze

24 6 KAPITOLA 2. POPIS PROBLÉMU, SPECIFIKACE CÍLE statické a je připraven jen omezený počet variant. Cvičení s papírovými předlohami mohou děti cvičit pouze s učitelkou. U těchto předloh také chybí motivace k dalšímu cvičení. Papírová cvičení považuji jako důležitou součást léčby, bohužel ale zároveň i velmi málo zábavnou. Těmto problémům spojeným s papírovými předlohami bych chtěl zabránit pomocí mé aplikace. Aplikace bude pro mobilní a tabletová zařízení. Aplikace bude interaktivní a autonomní, tj. okamžitá zpětná vazba po interakci. Aplikace by měla zaručit generování nových variant scén. Výhodou mé aplikace oproti papírovým předlohám je zejména zábavnost, interaktivita, postupné zatěžování jednotlivých scén, zvuková složka, která působí jako nápověda a motivace, a jednoduchost aplikace. Díky jednoduchosti aplikace mohou děti trénovat slabé oko doma za dozoru rodičů.

25 Kapitola 3 Přehled existujících aplikací V kapitole se zaměřím na rešerši dostupných řešení her pro zrakově postižené děti. Hledal jsem hlavně herní aplikace se zaměřením na skupinu uživatel se zrakovým či jiným postižením. Pro projekt bych si rád vzal z těchto her inspiraci pro lepší návrh grafického rozhraní. Po prozkoumání nalezených zdrojů jsem našel 4 společnosti zaměřující se na vývoj aplikací pro zrakově postižené děti. Od každé společnosti jsem hodnotil 2 hry. Dále byl vedoucím práce předložen program pro PC Poznávej s Luisou, který slouží jako hlavní předloha Software Software ( je společnost zabývající se tvorbou jednoduchých her pro PC. Jejich hry jsou použitelné pro osoby s různými postiženími, od nevidomých k zrakově, sluchově, či pohybově postiženým. Svojí tvorbu nazývají Simply Entertainment, což naznačuje jednoduchost aplikací. Aplikace jsou placené, nicméně v minulých letech bylo studentům poskytnuto několik her bez nároku na finanční odměnu. Následuje popis těchto her The Orchestra Game The Orchestra Game trénuje hráčovu paměť i jeho motorické schopnosti. Na herní ploše je rozmístěno několik hudebních nástrojů, z nichž každý vydává určitý zvuk. Uživatel má čas na zapamatování si hudebních nástrojů. Jeho úkolem je pak seřadit nástroje tak jak byly umístěny v úvodu. Přesouvání nástrojů funguje na principu Drag&Drop. Grafické prvky použité v herních scénách jsou malé a nevýrazné. Ovládání těchto her je pro děti předškolního věku velmi složité. Aplikace je tedy nevhodná pro další inspiraci. Ukázka ze hry je na obrázku

26 8 KAPITOLA 3. PŘEHLED EXISTUJÍCÍCH APLIKACÍ Obrázek 3.1: Ukázka ze hry The Orchestra Game The Edge Game Úkolem ve hře The Edge je přiřazovat k sobě pomocí Drag&Drop dvojice obdélníků se stejným vzorem. Hrací plocha je ohraničena černou konturou, uvnitř které se objevují vzorované obdélníky. Vně hrací plochy se na různých místech objevují jejich shodné dvojice. Občas se na hrací ploše zobrazí šedé obdélníky, kterým se hráč musí vyhnout. Hra je rozdělena do několika úrovní obtížnosti. The Edge Game je také velmi nevhodná pro inspiraci, jelikož jsou v aplikaci použity malé, nevýrazné obrázky bez jasných kontur. Herní principy této hry jsou, na první pohled, velmi nejasné. Není zde ani žádná motivace pro další hraní. Ukázka ze hry je na obrázku 3.2. Obrázek 3.2: Ukázka ze hry The Edge Game

27 3.2. PRIORY WOODS SCHOOL AND ARTS COLLEGE Priory Woods School and Arts College Priory Woods School and Arts College( je speciální škola se zaměřením na výuku dětí s vážnými poruchami učení a speciálními potřebami. Je součástí projektu European Comenius založeného Evropskou Unií, který je zaměřen na kreativní umělce, sportovní a jiné venkovní aktivity. Školka vytváří své PC programy pro podporu výuky. Aplikace "Bugz", kterou školka poskytuje na svých stránkách, vyhovuje požadavkům definovaným v sekci 2.3. Konkrétně jsou to velké obrázky a kontury, jednoduché tvary a kontrastní barvy. Aplikace bude předlohou pro návrh her. Druhá zkoumaná aplikace není dostatečně vyhovující pro další inspiraci. Konkrétně nesplňuje kritérium kontrastních a jednoduchých obrázků Bugz - Brouci V této hře má hráč za úkol nakrmit ještěrku beruškami se správným počtem teček. Po spuštění aplikace je zobrazena úvodní obrazovka. Po kliknutí kamkoliv ve scéně jsou zobrazeny instrukce ke hře. Po dalším kliknutí se spustí hra samotná. Na obrazovce se objeví beruška s určitým počtem teček. V dolní části scény se objeví čísla od 1 do 6. Hráč má za úkol tečky spočítat a kliknout na číslo, které odpovídá počtu teček na berušce. V případě, že hráč uhodl, je spuštěna animace, kdy ještěrka sní tuto berušku. Při neúspěchu je hráč vyzván, aby pokus opakoval. Obrázky jsou jasné a jednoduché. Kontury u obrázků jsou vyhovující. Je zde použit zvuk jako motivace. Ve hře je jako další motivace pro dítě použito skóre, které považuji u tří až šesti letých dětí za nevhodné. Náhled obrazovky ze hry je na obrázku 3.3. Obrázek 3.3: Ukázka ze hry Bugz

28 10 KAPITOLA 3. PŘEHLED EXISTUJÍCÍCH APLIKACÍ Shapes - Tvary Aplikace nabízí více možností her se základními tvary. Jsou to například počítání rohů jednotlivých tvarů, určování správného tvaru podle zadání či spojování stejných tvarů. Hra je doprovázena slovními instrukcemi v podobě zvuků. Obrázky i ovládání jsou velmi jednoduché. Ve hře chybí motivace pro další hraní. Také grafický vzhled této aplikace je nepřehledný a některé obrázky mají malý kontrast, nebo jsou nepochopitelné. Zvukový podklad je nevhodný z hlediska zabarvení hlasu. Zabarvení hlasu je velmi nepříjemné. Náhled obrazovky ze hry je na obrázku 3.4. Obrázek 3.4: Ukázka ze hry Shapes 3.3 Inclusive TCL Inclusive TLC ( je součástí společnosti Inclusive Technology Ltd. Společnost je největším dodavatelem kompenzačních vzdělávacích technologií ve Velké Británii. Specializuje se na vzdělávací software, zařízení pro přístup k počítači, jednoduché komunikační pomůcky a podpůrné technologie pro studenty s těžkou poruchou učení a tělesným nebo smyslovým postižením. Jejich aplikace jsou bohužel zpoplatněny, tudíž nebyla možnost hry vyzkoušet. U každé hry je alespoň popis aplikace a seznam postižení, které aplikace pomáhá léčit. Zkoumané aplikace jsou určeny pro slabozraké děti. Snímky z obrazovek jsou převzaty ze stránek Inclusive TLC Alphabet paint Hra je založena na principu klasických omalovánek. Hráč má za úkol vybarvit správnou barvou obrázek, jehož název začíná zobrazeným písmenkem abecedy. Uživatel tedy trénuje kromě motorických schopností i schopnosti didaktické a zároveň si cvičí přiřazovat barvy k doprovodným obrázkům. Starší děti se učí také písmena abecedy. Ve hře jsou zvuky a animace, které přidávají do výchovné a vzdělávací hry zábavnost. Obrázky jsou jednoduché a kontrastní, tudíž je tato aplikace vhodná pro zrakově postižené osoby. V aplikaci chybí motivace dítěte pro další hraní. Ukázka ze hry je na obrázku 3.5.

29 3.3. INCLUSIVE TCL 11 Obrázek 3.5: Ukázka ze hry Alphabet Paint paint Hra funguje obdobně jako Alphabet paint, ovšem s čísly. Úkoly jsou rozděleny do čtyř úrovní obtížnosti. Hra je doprovázena zvuky. Uživatel má za úkol vybarvit obrázek podle vzoru. Ukázka ze hry je na obrázku 3.6. Ve hře jsou použity zvuky jako motivace. Obrázky v aplikaci splňují kritéria nastavená pro zrakově postižené děti, jsou jednoduché a kontrastní, tudíž je aplikace vhodná pro zrakově postižené osoby. V aplikaci chybí motivace dítěte pro další hraní. Obrázek 3.6: Ukázka ze hry Paint

30 12 KAPITOLA 3. PŘEHLED EXISTUJÍCÍCH APLIKACÍ 3.4 Intellijoy Intellijoy ( je vývojářská skupina, která se zabývá vývojem výukových her pro zařízení s operačním systémem Android a ios. Vybral jsem dvě z jejich her a vyzkoušel jejich verzi zdarma. Zkoumané aplikace jsou pro děti ve věku 3-7 let. Tyto hry jsou velmi zábavné a velmi se podobají cvičením při pleoptické terapii. Bohužel po bližším prozkoumání bylo zjištěno několik nedostatků, které brání použití na cílové skupině tohoto projektu. Jedním z nich je zpracování grafických objektů. Obrázky v jejich hrách nesplňují kritérium mít kontury nejméně 5px. Obrázky nejsou jednoduché, ale mají různé přechody a vrstvy Kids shape puzzle Kids shapes puzzle je hra, ve které dítě musí poskládat objekt z dílků. Objekt je rozdělen na zhruba 10 částí a dítě musí stiskem a tažením přetáhnout jednotlivé dílky na správné místo. Pokud toto splní, obrázek se změní na obrázek, který je správně vybarvený, a zároveň se spustí zvuk, který říká, jaký předmět dítě vybarvilo. Ukázky ze hry jsou na obrázcích 3.7. Hra je velmi jednoduchá a pro děti v předškolním věku jistě i zábavná. Nevýhodou je rozdělení předlohy, na kterou mají děti umisťovat jednotlivé dílky a také zpracování již vybarvených obrázků, které jsou pro cílovou skupinu příliš složité. Na předloze pro skládání je použita příliš malá kontura, je tedy porušeno i kritérium mít minimálně 5px kontury. Obrázek 3.7: Ukázka ze hry Kids shape puzzle Kids ABC Kids ABC je hra, ve které musí dítě rozeznávat správná písmenka. Na obrazovce je mořské dno. Na hladině, která není vidět, je loďka s kočkou, která se snaží chytnout rybku se správným písmenkem jako je předloha. Po dně plavou ryby s různými písmeny, ale velmi často ty, které je za úkol najít. Pokud se dítěti podaří pochytat určený počet ryb se správným písmenem je dítě odměněno hlasovou motivací. Poté se vygeneruje nové písmeno jako předloha a hra pokračuje. Hra se snaží u dětí naučit jednotlivá písmena abecedy. Tento úkol je pro děti se zrakovým postižením těžší úkol, než pro normální dítě. Hra je na děti v cílové skupině složitá a příliš rychlá na to, aby dokázali správně rozeznat, o jaké písmenko se jedná. Použité obrázky jsou

31 3.5. POZNÁVEJ S LUISOU 13 také složité a nemají dostatečné kontury. Aplikace je velmi dobrá, ale pro cílovou skupinu nepoužitelná. Ukázky ze hry jsou na obrázku 3.8. Obrázek 3.8: Ukázka ze hry Kids ABC 3.5 Poznávej s Luisou Program vznikl jako bakalářská práce Kateřiny Štromerové a Bohumila Tománka. Práce byla předložena vedoucím projektu jako předloha. V aplikaci studenti připravili několik scén, podle vzorů papírových předloh s pomocí konzultace s pí. Červenákovou ze Speciálního Pedagogického Centra Horáčkova. Implementovány jsou scény: najdi správný stín najdi dvojici levo-pravá/horno-dolní orientace doplň chybějící část (puzzle) logická dvojice Jednotlivé scény popisuji podrobněji v části 5. Proto se jimi nyní zabývat nebudu. Obrázky použité v programu vyhovují požadavkům definovaným v sekci 2.3. Program je ale velmi pomalý při načítání jednotlivých scén a často dochází k programovým pádům. Rozvržení jednotlivých scén a celkový grafický dojem není dobrý. Na jiných rozlišeních, než pro které je aplikace určena se grafické rozhraní rozhodí na jiné pozice, než jaké by mělo správně být. Použitá motivace ve formě bonbónu po dohrání hry považuji také za nedostačující. Tyto nedostatky považuji jako zásadní pro hratelnost a použitelnost programu, proto jsem se rozhodl vytvořit novou verzi.

32 14 KAPITOLA 3. PŘEHLED EXISTUJÍCÍCH APLIKACÍ Barevnost Jednoduchost Kontury Kontrast Málo obr. Mezery Zvuky Bugz ANO ANO ANO ANO NE ANO Shapes ANO NE ANO ANO ANO ANO Alphabet ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO ANO Orchestra ANO NE ANO ANO NE ANO Edge ANO NE NE NE ANO NE Kids shape puzzle NE NE ANO ANO ANO ANO Kids ABC NE NE ANO ANO NE ANO Programuj s Luisou ANO ANO ANO ANO ANO ANO Tabulka 3.1: Tabulka porovnání grafiky nalezených programů podle zvolených kritérií Porovnání nalezených aplikací dle kritérií Nalezené aplikace jsem zhodnotil podle zvolených kritérií. Shrnul jsem je do tabulky 3.1, která ukazuje, jak moc jsou jednotlivé aplikace vhodné pro tuto skupinu uživatel. Aplikace Programuj s Luisou, Aplhabet Paint a Paint splňují všechna kritéria pro cílovou skupinu uživatel, kterou jsou děti v předškolním věku se zrakovým postižením. Grafické zpracování, herní mechanismus a komplexnost aplikací je nedokonalá. Aplikace společnosti Intellijoy jsou zábavné a kvalitně zpracované, ale obrázky nesplňují stanovená kritéria. Nejméně vhodnými jsou pak aplikace Orchestra The Game a The Edge Game. 3.6 Shrnutí rešerše V této kapitole jsem se věnoval analýze stávajících aplikací. Programů či aplikací zaměřujících se na relativně malou skupinu uživatel slabozrakých dětí není mnoho, patrně z důvodu malého potenciálu zisku. Ve speciálních školkách se používají papírové předlohy. Výjimečně jsou to aplikace, kterou vyvíjeli sami zaměstnanci školky. Jednou z takových školek je Priory Woods School and Arts College. Našel jsem 4 jmenované společnosti, které se zaměřují na tvorbu her pro postižené děti. Nalezené aplikace jsem zhodnotil podle kritérií definovaných v sekci 2.3. Výsledky jsou shrnuty v tabulce 3.1. Aplikace společnosti Software považuji za nedostatečné pro cílovou skupinu uživatel, tedy dětí předškolního věku se zrakovým postižením, z důvodu malých obrázků a kontur. Aplikace společností Inclusive TCL a Priory Woods School and Arts College pokládám za uspokojivé z hlediska kontur a velikostí obrázků. Ovládání u těchto aplikací je intuitivní a hry jsou zábavné. Tyto hry budou inspirací při návrhu her pro projekt. Aplikace společnosti Intellijoy jsou velmi zábavné a určené pro děti v předškolním věku. Jejich aplikace ovšem nesplňují kritéria pro obrázky a tudíž jsou nepoužitelné pro cílovou skupinu. Budou sloužit jako inspirace pro tento projekt.

33 3.6. SHRNUTÍ REŠERŠE 15 Aplikace Poznávej s Luisou je převzata jako hlavní předloha pro tento projekt. Po provedení analýzy předloženého programu a několika papírových podob je zřejmé, že se studenti pokusili zachovat stejný design práce jako papírových předloh, tj. řádkový layout jednotlivých her. Vady ostatních her jsem vzal jako hlavní motivaci k tomu udělat tento projekt zajímavý. Zaměřil jsem se na dodržování správných kontur a velikostí obrázků, motivaci dětí pro další hraní, pěknou zvukovou nápovědu, zajímavé grafické rozhraní a zábavnost jednotlivých her. Hlubší analýzu her pro slabozraké děti lze najít v sekci 3.5.1, kde se zabývám porovnáním zkoumaných aplikací podle zvolených kritérií. Nalezené aplikace, které byly označeny jako vhodné pro cílovou skupinu projektu, se staly inspirací jednak z hlediska grafického návrhu, tak z hlediska herního mechanismu.

34 16 KAPITOLA 3. PŘEHLED EXISTUJÍCÍCH APLIKACÍ

35 Kapitola 4 Analýza a návrh řešení V kapitole se budu věnovat analýze požadavků pro projekt. Mezi požadavky se řadí typ operačního systému, na kterém bude aplikace spustitelná. To je důležité kvůli výběru programovacího jazyka či prostředí pro projekt. Budu se také zabývat funkčními a nefunkčními požadavky. Funkční a nefunkční požadavky jsou velmi důležité z hlediska samotného návrhu aplikace. Na konci kapitoly věnuji sekci výběru implementačního prostředí pro projekt a také porovnání kandidátů, kteří byli do výběru zařazeni. 4.1 Obecná analýza Aplikace musí být autonomní, tj. dát uživateli okamžitou zpětnou reakci jako odpověď na jeho akci. Aplikace je zaměřena na slabozraké děti, proto musí být aplikace jednoduchá a intuitivní na ovládání. Grafický návrh musí být v kontrastních barvách, aby uživatelé dovedli správně rozpoznat obrázky. V aplikacích zkoumaných v minulé kapitole je velmi často používán zvuk jako motivace pro hráče. To je velmi výhodné při návrhu zpětné vazby hráči. Zvuky také dokáží v hráči vzbudit nejrůznější emoce jako je radost, smutek, napětí atd. V mé aplikaci budou zvuky používány jako vysvětlení herních principů jednotlivých scén, zhodnocení výkonu hráče po dohrání a pomoc při orientaci v menu. Aplikace má oproti papírovým předlohám velkou výhodu při cvičení, protože je tu možnost náhodnosti, kterou u papírových předloh nemáme. Nevýhodou jsou ovšem pořizovací náklady na zařízení a menší flexibilita při tvorbě nových úloh. Nové scény je totiž nutno programovat a vytvářet novou verzi aplikace. Cílem projektu je přinést zábavnější a více propracovanou verzi implementace papírových předloh, které se používají ve speciálních školkách jako je SPC. Jelikož je více typů cvičení, která se s dětmi provozují, je vhodné rozdělit hry do jednotlivých kategorií podle jejich účelu. S rostoucím počtem mobilních a tabletových zařízení v rodinách je vhodné implementovat řešení pro operační systémy Android a ios. To má řadu výhod i nevýhod oproti předchozím řešením. Zařízení s těmito operačními systémy mají různá rozlišení, je tedy nutno s tím počítat při návrhu grafického rozhraní. Zařízení mají také různé množství operační pamětí 17

36 18 KAPITOLA 4. ANALÝZA A NÁVRH ŘEŠENÍ pro aplikace. Musí být tedy optimalizovaná pro ipad1, který má pouze 100 MB operační paměti pro běh aplikace. Aby děti dovedly pracovat s aplikací i samy, musí obsahovat i cvičící mód, který je učí správné odpovědi. Je také vhodné zvyšovat složitost hry postupně podle pokroku hráče, aby scénami procházel podle obtížnosti od nejlehčích po nejtěžší. Výhody mobilního prostředí: intuitivnost ovládání dotykové obrazovky - Ovládání mobilních a tabletových zařízení pomocí dotykové obrazovky je velmi jednoduché a intuitivní. interaktivita - Uživatel dostane okamžitou reakci na svou akci. zvuky - Zvuky dokáží navodit v uživateli nejrůznější emoce jako například strach, radost, smutek atd. Jsou také velmi dobrým prostředníkem při interakci uživatele se zařízením. náhodnost - Oproti papírovým řešením mají elektronická zařízení výhodu náhodnosti obrázků. animace a pohyby obrázků - V herních aplikacích je běžné, že jsou použity různé animace či pohyby obrázků pro zlepšení dojmu z aplikace. Mohou být použity například k přechodu mezi scénami. zábava - Při hraní her zažívá člověk pocit zábavy, který mu zlepšuje náladu. úspora papíru - Používání mobilních či tabletových zařízení je ekologicky šetrnější, než používání papírových předloh. Nevýhody mobilního prostředí: vyšší pořizovací náklady na HW - Tabletová zařízení jsou na trhu poměrně krátkou dobu. Jejich pořizovací náklady jsou tedy vyšší. asociálnost - Při hraní zde není takový kontakt s učitelkou a ostatními dětmi. To může způsobovat postupné zhoršování komunikačních schopností dítěte. menší flexibilita při tvorbě nových úloh - Nové úlohy je nutno programovat a vytvářet novou verzi aplikace. Také přidávání nových obrázků do aplikace je možné jen při vydání nové verze.

37 4.2. FUNKČNÍ POŽADAVKY Funkční požadavky Funkční požadavky na systém jsou takové, podle kterých by měl program pracovat. Zde je seznam požadavků pro tuto konkrétní aplikaci, které vyplynuly z rešerše v kapitole 3 a z obecné analýzy v kapitole 4.1: Aplikace musí mít jednoduché/intuitivní ovládání - u dětí předškolního věku nelze předpokládat hlubší znalost klasických herních mechanismů musí mít 2D grafiku - vzhledem k postižení cílové skupiny není vhodné používat 3D virtuálního prostředí musí být v kontrastních barvách - aby uživatelé dokázali lépe rozeznávat obrázky, je nutné dodržovat kontrast mezi jednotlivými obrázky musí se přizpůsobovat jednotlivým operačním systémům (android/ ios) - každý z těchto systémů má jiný způsob zacházení s aplikacemi, jiný způsob gest atd. Proto musí být aplikace přizpůsobivá vůči jednotlivým systémům. musí mít cvičící a testovací mód - cvičící mód by měl děti naučit správné odpovědi i bez pomoci paní cvičitelky, nebo rodičů. Díky cvičícímu módu mohou děti trénovat svůj zrak i doma bez přítomnosti rodičů. musí mít vyhodnocení her po jejich odehrání - aplikace musí být autonomní, to znamená, že se musí vyhodnotit automaticky po uživatelské akci. To umožňuje interakci mezi hráčem a aplikací. musí mít jednotlivé hry rozděleny do kategorií podle jejich účelu - každá hra vytvořena za účelem trénování jiného problému/postižení, proto je vhodné mít aplikaci rozdělenou do jednotlivých kategorií podle toho, jaký typ postižení trénuje. musí být zábavná - základním principem každé hry je její zábavnost. To je velmi důležité dodržovat u každé herní aplikace, proto není výjimkou ani tento projekt. musí se přizpůsobovat rozdílným rozlišením displeje - každé zařízení na kterém je aplikace schopna běžet, je vybaveno různým typem rozlišení. Druhů rozlišení je velký počet, aplikace by se ovšem měla chovat stejně na všech zařízeních s operačním systémem Android nebo ios. aplikace musí mít obtížnost od nejlehčí po nejtěžší (na návrh Mgr. Červenákové) - postupné zatěžování slabého oka je jedním ze způsobů tréninku očního postižení. Je tedy důležité, aby aplikace také zatěžovala oko uživatele postupně od nejlehčí po nejtěžší obtížnost.

38 20 KAPITOLA 4. ANALÝZA A NÁVRH ŘEŠENÍ 4.3 Nefunkční požadavky Nefunkční požadavky jsou takové, které omezují podmínky pro daný systém. Zde je seznam nefunkčních požadavků pro tuto konkrétní aplikaci: Aplikace musí být spustitelná na operačních systémech android a ios - Hlavním požadavkem pro aplikaci je její použitelnost na zařízeních s operačními systémy Android a ios. Musí běžet na dvou hlavních operačních systémech pro tabletová zařízení, tedy Android a ios. bude napsaná v jazyce Lua pomocí studia Gideros( - Toto vývojové studio bylo vybráno podrobnou analýzou tří kandidátů. Aplikace bude napsána ve studiu Gideros, viz kapitola 4.4. aplikace musí rychle načítat jednotlivé scény - kvůli plynulému běhu aplikace je důležité, aby byly jednotlivé scény načítány do tří sekund od začátku načítání. aplikace nesmí překročit hranici 100MB operační paměti při běhu - jedním z hlavních tabletových zařízení je ipad1, který je stále velmi rozšířený. Toto zařízení dovoluje aplikaci obsadit pouze 100 MB paměti. Proto byla zvolena hranice 100MB jako horní hranice paměti při běhu aplikace. jednoduché obrázky a silné kontury - uživatelská skupina by mohla být problém s rozpoznáváním obrázků, proto musí mít jednoduché a mít silné kontury. snadná rozšiřitelnost - aplikace musí umožnit jednoduše přidávat další obrázky do jednotlivých herních scén. Je sice nutno vydat novou verzi aplikace, ale mělo by jít o úpravy pouze konfiguračních souborů. automatizace generování obrázků - přidání náhodnosti do scén je velkou výhodou z hlediska herního návrhu. aplikace musí běžet na všech zařízeních srovnatelných s ipad1 - horní hranicí pro operační paměť při běhu aplikace určuje zařízení ipad1 se svou hranicí 100MB. Aplikace musí tedy běžet na všech zařízeních srovnatelných s ipad1.

39 4.4. VÝBĚR IMPLEMENTAČNÍHO PROSTŘEDÍ 21 prostředí Cena programovací jazyk náročnost na paměť Unity3D 750$ za zařízení javascript/c# náročnost běhu 3D enginu (Android/ ios) Gideros 0/100$ Lua OpenGL (bez úvodní obrazovky) Cocos2d-x 0$ C++ OpenGL Tabulka 4.1: Tabulka porovnání vývojových prostředí 4.4 Výběr implementačního prostředí Pro implementaci řešení mi bylo vedoucím práce navrženo vývojové prostředí Unity3D. Myslím si ovšem, že pro jakýkoliv výběr je nejlepší mít alespoň tři kandidáty a z nich potom vybrat jednoho podle různých kritérií. Proto jsem po prozkoumání několika dalších možností nalezl své tři kandidáty. Již zmíněný engine Unity3D( vývojové studio Gideros( a také framework cocos-2dx ( Z nich jsem poté vybral podle následujících kritérií. Porovnání 3 kandidátů: Pro výběr implementačního prostředí bylo nutno stanovit kritéria, podle kterých bude prostředí vybráno. Projekt není nijak financovaný, je tedy nutno mít co nejnižší náklady. Proto je prvním kritériem cena pro implementaci v daném prostředí. Dále jsem vybral náročnost prostředí na operační paměť při běhu aplikace z důvodu požadavku využívat maximálně 100 MB operační paměti. Jako poslední kritérium jsem stanovil náročnost programování v jazyce jednotlivých kandidátů. Porovnávací tabulka: Vlastnosti hodnocených kandidátů jsem shrnul v tabulce 4.1. Podle kritérií jsem zhodnotil, že navrhovaný doporučený nástroj Unity3D není vhodný pro tento projekt z cenového hlediska. Jelikož obě zbylé varianty jsou OpenGL rozšíření, rozhodující kritérium byl programovací jazyk. Z hlediska kontroly běhu systému (cache,...), by byl vhodnější framework cocos2d-x. V projektu není prioritní starat se o spotřebu paměti (malý počet obrázků, žádné animace), rozhodl jsem se pro vývojové studio Gideros. Důvodem byla jednoduché programování v jazyce Lua a jeho přehlednost. Také jednoduché testování aplikace na zařízení s operačním systémem Android, při kterém se aplikace nahraje na zařízení pomocí Wi-Fi. Lua je programovací jazyk implementovaný v ANSI C, který se kompiluje nezměněný na všech známých platformách. Nejznámějším kompilátorem ANSI C je gcc( Aplikace napsané v tomto jazyce se dají také jednoduše zkompilovat jako C++.

40 22 KAPITOLA 4. ANALÝZA A NÁVRH ŘEŠENÍ

41 Kapitola 5 Herní scény Po prozkoumání programu Poznávej s Luisou předloženém vedoucím práce jsem se rozhodl implementovat všechny scény z Poznávej s Luisou do mé aplikace a doplnit další. Scény jsem rozdělil do čtyř kategorií: Logika, Tvary, Barvy a Počty. Oproti Poznávej s Luisou jsou v mém projektu navíc scény Maluj, Počítej, Dvojice, Velikost a Kulička. Herní scény v průběhu vývoje zlepšovaly svůj grafický návrh. Jednalo se zejména o změnu návrhu jednotlivých herních prvků. U každé scény uvedu několik příkladů různých návrhů. Za zlepšením grafického dojmu stálo vytvoření třídy manažera pozic 7.5, přidání prvku pozastavení hry a zlepšení pro postupné zatěžování oka 7.6. Těm jsou věnovány vlastní sekce v pozdějších kapitolách. Při testování (viz kapitola 8) bylo nalezeno několik problémů, které byly opraveny ve finální aplikaci. Zde je seznam hlavních problémů, které byly zařazeny na seznam věcí, které se na aplikaci vylepšili. zvětšení dotykové zóny kolem jednotlivých obrázků výměna obrázků ve hře počty více obrázků pro hru barvy verze aplikace pro děti s větším postižením Všechny problémy byly opraveny ve finální verzi aplikace, kterou lze najít na přiloženém CD. Po příchodu na každou scénu v aplikaci je spuštěna hlasová nápověda, která uživateli pomáhá se seznámením s aplikací. Hlas je také spouštěn jako odměna za splnění úkolu a nápověda při hře. V kapitole se budu zabývat jednotlivými herními scénami, jejich postupným vývojem a přidáváním. 23

42 24 KAPITOLA 5. HERNÍ SCÉNY 5.1 Logika Logické hry mají dítě naučit cvičit jejich logické uvažování. Do kategorie jsem zařadil hry skládanka(puzzle) a Spáruj. I když se na první pohled zdá, že hry do aplikace patřit nemusí, není to pravda. Hra skládanka trénuje oko dítěte na rozpoznávání tvarů jednotlivých dílků skládačky. Hra logika trénuje hráče v rozpoznávání obrázků a také logické vazby mezi předměty Skládanka (Puzzle) Scéna je navržena za účelem naučit dítě rozpoznat správný tvar předmětu. Ve hře je vždy sestavená téměř celá skládačka až na jeden dílek, který musí dítě uhodnout. Skládačka má co nejjednodušší tvar. Dítě zde trénuje slabé oko rozpoznáváním obrysů dílků. Na obrázcích 5.1 lze vidět změnu designu, která probíhala v rámci vývoje. Obrázky jsou pořízeny na zařízeních s různým rozlišením. Ukázka vlevo je pořízena z prototypu. Na ní lze vidět řádkový design výběru, který se změnil v náhodné pozice jednotlivých dílků skládanky po implementaci manažera pozic 7.5, viz obrázek uprostřed. Obrázek napravo je pořízen z finální verze aplikace. Rozdíl mezi návrhy uprostřed a vpravo je po přidání vlastnosti pro postupné zatěžování oka, viz 7.6. Obrázek 5.1: scéna puzzle Spáruj Scéna Spáruj pomáhá cvičit logické vazby mezi předměty. Pro scénu jsou připraveny páry obrázků, které spolu logicky souvisejí (např. dveře a klíč, kočka a myš a jiné). Dítě zde trénuje rozpoznávání předmětů a logické uvažování. Na obrázcích 5.2 je zachycen postupný vývoj této scény. Ukázka vlevo je z verze prototypu. Na ukázce uprostřed si lze všimnout velkého množství obrázků na výběr. Tento stav nastal v době, kdy se o umístění jednotlivých obrázků staral pouze manažer pozic viz 7.5. Postupně bylo do hry přidáno zlepšení, které se staralo o počet předmětů na výběr. Více o tématu v sekci 7.6. Obrázek napravo je pořízen z verze finální aplikace. Rozdíl mezi návrhy uprostřed a vpravo je v přidání postupného zatěžování oka, viz 7.6.

43 5.2. TVARY 25 Obrázek 5.2: scéna spáruj 5.2 Tvary Na kategorii tvary by mělo dítě cvičit zrak na různých hříčkách s tvary objektů. Do kategorie jsem zařadil scény Orientace, Stíny a Velikost. Hry na stejné bázi jsou nejvíce používané v centrech, jako je SPC Horáčkova, se kterou probíhala spolupráce Orientace Scéna učí dítě rozpoznávat natočení předmětu. Ve scéně jsou po obrazovce rozmístěny předměty, přičemž jeden z nich je vertikálně či horizontálně převrácený. Dítě má za cíl najít, o který se jedná. Obrázky mohou být barevné, ale pro slabozraké děti je mnohem příhodnější, aby obrázky byly jenom stíny. Dítě si pak lépe trénuje slabozraké oko větším namáháním při rozeznávání obrysu zobrazovaného předmětu. Na ukázkách 5.3 lze opět vidět postupnou změnu návrhu. Na prvním, pořízeném ve verzi prototypu lze vidět řádek obrázků s nabídkou, která se později také změnila na náhodné pozice nabídky. Uprostřed lze vidět velké množství dílku puzzle, který byl pro scénu použit. Po konzultaci s paní Červenákovou byly složité obrázky jako tento zavrženy. Pro děti, na které je aplikace cílena jsou příliš složité. Na scéně se začíná se 3 obrázky jako možnosti. Postupně se počet zvýší na 7 možností. Obrázek 5.3: scéna horno-dolní/levo-pravá

44 26 KAPITOLA 5. HERNÍ SCÉNY Stíny Scéna stíny učí dítě rozpoznávat obrys předmětu. Na scéně je velká předloha obrázku a v okolí menší stíny. Dítě musí určit, který stín patří k předloze. Rozeznáváním stínu si dítě trénuje slabozraké oko. Vývoj návrhu scény byl podobný jako u předchozích her, takže jej nebudu více rozebírat. Na ukázkách 5.4 si lze prohlédnout postup zlepšení. Hra nyní začíná s dvěma možnostmi. Při posledním kole má hráč na výběr z šesti možností. Scéna byla při testování nejvíce-krát označována jako nejoblíbenější. Obrázek 5.4: scéna stíny Velikost Scéna pomáhá dítě učit rozpoznávat větší a menší předměty. Na scéně jsou rozmístěny obrázky, přičemž jeden je buď o něco větší, nebo o něco menší. Dítě má určit, o který se jedná. Scéna nebyla zahrnuta v prototypu, proto jsou zde uvedeny pouze 2 ukázky, viz 5.5. Na první ukázce si lze všimnout ohromně velkého množství obrázků na výběr a také malého rozdílu mezi velikostmi. Po zavedení zlepšení pro postupné zatěžování oka 7.6 byl počet možností zmenšen. Po konzultaci s paní Červenákovou ze SPC Horáčkova byl problém rozdílu velikostí vyřešen pomocí zvýšení rozdílu velikostí. Obrázek 5.5: scéna velikost

45 5.3. BARVY Barvy Kategorie barvy má dítě zábavnou formou naučit rozpoznávat barvy předmětů. Do kategorie patří scény Maluj a Kulička. Scéna Maluj učí dítě, že každý předmět má svou přirozenou barvu a učí děti najít přirozenou barvu. Hra kulička je testovací verzí aplikace Interaktivní malování. Ze začátku nebyla plánována a do aplikace byla zařazena na popud vedoucího práce Maluj Hra má dítě naučit přirozenou barvu předmětů. Na scéně je obrys obrázku a několik druhů barev. Po výběru barvy se obrázek zbarví podle vybrané barvy. Pokud dítě vybere správnou barvu, ozve se vítězný zvuk a vygeneruje se nová předloha. Pokud vybere špatně, ozve se zvuk špatné odpovědi a hráč musí výběr opakovat. Na ukázkách 5.6 si lze opět všimnout dvou starších verzí. První ukázka je z verze prototypu, která opět využívá řádový design možností. Na druhé ukázce se pouze změnilo pozadí scény. Obrázek 5.6: starý návrh hry Maluj Na obrázcích 5.7 je ukázka nové verze hry. Pro scénu bylo vytvořeno speciální pozadí, které vypadá jako malířské plátno. Nabídka barev je nyní zobrazena jako paleta. Na prvním obrázku je scéna po spuštění, na druhém po výběru špatné barvy a na posledním po správném výběru. Obrázek 5.7: nový návrh hry Maluj

46 28 KAPITOLA 5. HERNÍ SCÉNY Kulička Scéna byla do aplikace zařazena na doporučení vedoucího této práce. Jedná se o interaktivní malování. Scéna byla přidána jako poslední, nebyla tedy ve verzi prototypu aplikace. Jedná se o hru, kde jsou zobrazeny pouze kontury jednoduchých tvarů, jako jsou čtverce a kruhy. Objekty hráč může a nemusí vybarvit. Po jejich vybarvení se na objekty naváže jednoduchá fyzika podle jejich typu. Objekty můžou být buď statické, nebo dynamické. Dynamické objekty po vybarvení začnou padat, zatímco statické zůstanou na stále na místě, od této chvíle jimi ale nemohou proletět objekty dynamické. Cílem hráče je vybarvit objekty tak, aby dostal žlutou kuličku k vlajce. To znamená, že musí vytvořit cestu mezi kuličkou a vlajkou. Pro orientaci mezi typem objektu (dynamický/statický) je použita barva kontury. Barva kontury statického objektu je černá, zatímco dynamického modrá. V rámci vývoje vznikly 2 druhy designu této scény. První návrh využíval obrázky z jiných scén. Bylo tedy použito pozadí ze scény Ovoce (5.4.3) a možnosti barev ze scény Maluj (5.3.1). Ukázka staré verze je na obrázcích 5.8. Zde je zobrazena první úroveň hry. Obrázek 5.8: starý návrh hry Kulička Pro finální verzi bylo vytvořeno pozadí určené jen pro hru Kulička. Dále bylo přidáno více možností barev, ze kterých může hráč vybírat. Nově se zde také objevil grafický prvek barevného kruhu ve spodní části obrazovky, který ukazuje hráči vybranou barvu a také bylo vytvořeno tlačítko pro opětovný start úrovně. Na obrázcích 5.9 je ukázka první úrovně finální verze hry. Obrázek 5.9: starý návrh hry Kulička Po testování bylo zjištěno, že hra Kulička je pro děti ve věku cílové skupiny velmi složitá.

47 5.4. POČTY Počty Kategorie počty by měla dítě naučit nejrůznější jednoduché početní úkony. Do kategorie Počty patří scény Počítej, Dvojice a Ovoce. Hry Počítej a Ovoce cvičí s dítětem jednoduché číslovky od 0 do 10. Děti trénují své oko rozpoznáváním vybarveného/nevybarveného obrázku. Hra dvojice učí dítě hledat stejné předměty mezi velkým počtem jiných předmětů Počítej Ve scéně jsou rozmístěny stíny obrázků a číslo, jaký počet obrázků má dítě vybarvit. Po dotyku nevybarveného obrázku se zbarví. Druhým dotykem se obrázek odbarví. Dítě musí po označení správného počtu obrázků potvrdit svůj výběr. Dítě by se mělo naučit základní čísla. Na ukázkách 5.10 je zobrazen postup vývoje grafického rozhraní. Ve verzi prototypu byly ve scéně pomocné čáry, které nebyly graficky vhodné. Proto byly později odstraněny. Tlačítko pro potvrzení bylo po přidání grafického prvku pozastavení (6.2.4) přesunuto do horní části obrazovky. Obrázek 5.10: scéna Počítej Dvojice Scéna vychází ze hry pexeso. Na scéně jsou rozmístěny obrázky. Je zde jen jedna dvojice. Dítě by mělo najít tuto dvojici a propojit ji čarou. Tuto čáru vytvoří propojením obrázků objektů na obrazovce. Jelikož dítě nemá velký cit v rukou, je zde použitá tolerance při puštění prstu tak, že se čára propojí s obrázkem, který je nejblíž tomuto místu. Na první ukázce 5.11 si lze všimnout opět řádkového návrhu. Návrh obsahoval i text skóre, ten byl ale později odstraněn a nahrazen scénou statistiky (6.2.3). Prvek potvrzení byl pro finální verzi odebrán. Důvodem bylo příjemnější uživatelské rozhraní a jednoduší ovládání.

48 30 KAPITOLA 5. HERNÍ SCÉNY Obrázek 5.11: scéna dvojice Ovoce Scéna by měla zábavnou formou naučit dítě základním číslům do deseti. Ve scéně je obrázek stromu s ovocem. Ovoce se generuje náhodně ze sady obrázků. Po kliknutí na ovoce se na ovoce naváže jednoduchá fyzika. Tím pádem ovoce spadne do připraveného koše. Po shození správného počtu kusů by mělo dítě svůj pokus potvrdit. Na ukázkách 5.12 je vidět vývoj grafického rozhraní. U scény nastala změna pozadí na speciální obrázek určený jen pro tuto scénu. Dále byly zvětšeny obrázky ovoce z důvodu lepší ovladatelnosti hry na zařízeních s menším rozlišením. Grafický prvek šipky pro potvrzení správného počtu byl přesunut do horní části obrazovky. Do finální verze byl vytvořen také "koš na ovoce", do kterého jednotlivé kusy ovoce po jejich shození padají. Obrázek 5.12: jednotlivé verze scény ovoce V testovací verzi bylo vylepšení, které dovolovalo hráči vrátit ovoce zpět na strom druhým klikem. Z testování ovšem vyšlo, že tento postup není dobrý z hlediska uživatelského chování.

49 Kapitola 6 Grafické podklady Před implementací samotného řešení tohoto projektu bylo třeba připravit podklady pro jednotlivé scény. Vedoucím práce byl dodán balíček bitmapových obrázků, který byl použit v programu "Poznávej s Luisou". Jejich autorem je Kateřina Štromerová. Část těchto obrázků byla použita i pro tuto aplikaci. Obrázky jsou použity pouze při samotných hrách jako herní prvky. Všechny ostatní prvky byly vytvořeny vlastními silami při přípravě grafického rozhraní aplikace. Pro návrh jednotlivých prvků grafického rozhraní byl použit software Inkscape( Všechny návrhy grafického rozhraní mají tedy vektorovou verzi a jsou součástí přibaleného CD. V této kapitole se budu zabývat softwarem použitým pro návrh grafického rozhraní, samotnými návrhy jednotlivých scén a grafickými prvky, které byly ve finální aplikaci použity či z ní odebrány. Bitmapy se používají proto, že studio Gideros v základní verzi nedovoluje vektorový formát obrázků. Pro použití formátu SVG je potřeba mít koupený rozšíření v ceně 100$, které nebylo pro tento projekt zakoupeno. 6.1 Inkscape Inkscape je grafický vektorový editor. Inkscape je multiplatformní, může být spuštěna na zařízeních s operačním systémem Windows, Mac OS X i operačních systémech na unixové bázi. K přístupu a ukládání dat obrázků používá formát SVG, který je založený na standartu XML. Podporuje podobnou funkcionalitu jako komerční programy Illustrator, či CorelDraw. Pracuje s intuitivními objekty jako kruhy, obdélníky, text či křivky, jejichž kombinací vznikne výsledný obrázek. Jeho pomocí lze jednoduše dělat úpravy jako změna barvy, změna velikosti, či průhlednosti a další. Je možné také přímo editovat XML soubor a tím docílit potřebné změny. Aktuální verze je Tato verze byla použita k přípravě prvků pro grafické rozhraní. Software Inkscape je šířen pod volnou licencí. Inkscape je v aktivním vývoji a s každou novou verzí jsou přidávány nové, užitečné funkce. 6.2 Návrh grafického rozhraní Jelikož je aplikace zaměřena na úzkou skupinu uživatel, bylo třeba grafické rozhraní navrhovat vzhledem k jejich omezením. Hlavní aspekty byly vysvětleny v kapitole Analýza v 31

50 32 KAPITOLA 6. GRAFICKÉ PODKLADY sekci Kritéria pro programy. Vzhledem k těmto kritériím byl třeba zaměřit se na jednoduché/intuitivní ovládání, jednoduché a přehledné rozhraní. Téměř u každé scény postupně vznikalo několik verzí. Zaměřím se na jednotlivý vývoj grafického rozhraní jednotlivých scén. V průběhu vývoje se několikrát změnilo hlavní pozadí aplikace. Vylepšení bylo provedeno z důvodu zlepšení celkového grafického dojmu Výběr kategorie Při přípravě grafického rozhraní bylo vytvořeno jednoduché a intuitivní menu, viz obr Připraveno bylo několik verzí. První verze obsahovala znak "x"pro ukončení aplikace. Znak se měl zobrazovat pouze na zařízeních s operačním systémem android. Znak "x"byl ale následně odebrán. Jedním z důvodů byl špatný vzhled rozhraní, dalším jeho nepotřebnost díky vlastnostem operačních systémů Android a ios. Tlačítka na scéně odkazují na jednotlivé kategorie popsané v kapitole 5. Každé tlačítko je navrženo tak, aby odráželo typ scén, které se dají v kategorii hrát. Dále byly do menu implementovány orientační prvky. Prvky jsou malé kruhy vespod obrazovky, které mají barvu dle tlačítek umístěných na této scéně. Ty se skládají do řady dle průchodu aplikací a pomáhají uživateli s orientací při průchodu hierarchií menu. Obrázek 6.1: První a druhá verze hlavního menu

51 6.2. NÁVRH GRAFICKÉHO ROZHRANÍ Výběr hry v kategoriích Pro výběr hry v kategoriích byl zvolen stejný přístup jako pro výběr kategorie. Následující popis platí pro obrázky 6.2. To znamená velká tlačítka s názvem hry a obrázkem popisujícím jednotlivé scény. Tlačítka jsou vytvořena tak, aby bylo možné rozpoznat, o jakou hru se jedná a přilákala zájem dítěte o jejich hraní. U každé hry je také zhodnocení minulého hraní. To je znázorněno pomocí smajlíků, které se u každého tlačítka zobrazují podle počtu chyb, které dítě udělalo při minulém hraní této hry. "Smajlíci"mají dítěti také pomoci určit, kterou hru už hrálo. Pokud hra ještě hrána nebyla, jsou zde zobrazena pouze prázdná kolečka s otazníky, které mají v dítěti vzbudit zájem o její hraní a následné získání odměny. Počet smajlíků by měl dítě motivovat k dalšímu hraní a tím i docílit zlepšování zrakových schopností. Na ukázce scén na obrázcích 6.2 lze vidět grafické rozhraní těchto scén ve verzi, která je použita v konečné aplikaci. Lze zde opět vidět zpracování orientačních prvků v jednotlivých scénách (barevné kruhy ve spodní části obrazovky), které naznačují, v jaké části menu se zrovna uživatel nachází. Je zde také použitý grafický prvek šipky směřující směrem vlevo, po jejímž stisknutí se uživatel dostane zpět na scénu s výběrem kategorie. Obrázek 6.2: Výběr hry v kategorii

52 34 KAPITOLA 6. GRAFICKÉ PODKLADY Statistiky Scéna statistiky se zobrazí vždy po dohrání celé série v jedné hře a zhodnocuje výkon dítěte. Ve scéně jsou vypsány 4 hlavní položky, které byly konzultovány s paní Červenákovou. Jedná se o celkový počet pokusů, čas potřebný pro splnění dané hry, počet chyb a počet správných pokusů, viz obr Ohledně času vznikla s paní Červenákovou debata, ze které bylo vyvozeno, že pro aplikaci není nutné, aby uživatelům měřila čas na splnění hry. Hlavním důvodem bylo rčení, že je mnohem důležitější, aby dítě správně hru dohrálo, než čas, za který se mu to podaří. Výsledek debaty byl, že výsledná aplikace bude položku "čas"obsahovat, ale pro potřeby Speciálního Pedagogického centra, s kterým probíhala konzultace, není důležitá. Na scéně je také použit prvek zpětné šipky pro návrat na scénu s výběrem hry v kategorii, ke které se váže právě dohraná hra. Obrázek 6.3: Statistiky po dohrání hry Jako motivace k dalšímu hraní hry slouží odměna ve formě usměvavého obrázku. V první verzi scény byl použit jako motivační prvek hvězda, která je používaná v mnoha podobných aplikacích. Prvek byl později nahrazen pozitivnějším prvkem "smajlíků", právě z důvodu zvýšení pozitivního dojmu z používání aplikace. Těchto prvků vidí uživatel podle počtu chyb provedených v dané hře. Pokud jsou prvky zobrazeny tři, uživatel udělal maximálně dvě chyby. Pokud uživatel vidí pouze dva, udělal tři až šest chyb. Více než šest chyb je ohodnoceno pouze jedním prvkem. Žádný prvek není možné dostat, jelikož je velmi důležité dítě motivovat k dalšímu používání aplikace a přístup neudělování odměny a pochvaly by uživatele spíše demotivoval, než jej motivoval. Při vstupu na scénu dostane uživatel také hlasovou odezvu na jeho hraní. Podle počtu motivačních prvků se přehraje zvuk se slovním hodnocením.

53 6.2. NÁVRH GRAFICKÉHO ROZHRANÍ Pozastavení hry Pro opuštění hry slouží prvek pozastavení hry. Ten byl navržen jako tlačítko ve spodní části obrazovky, viz obrázek 6.4. Po stisknutí tohoto tlačítka je scéna zastíněna a jsou zobrazeny prvky pozastavené scény. Těmi jsou box s popisem scény, tlačítko zpětné šipky pro návrat na scénu s výběrem hry v kategorii, do které patří právě spuštěná scéna a lišta pokroku, která signalizuje úspěšné/neúspěšné pokusy hráče. Tlačítko pro pozastavení hry dále změní svou texturu. Nyní je na ni vyobrazen symbol pro spuštění. Tento symbol je standartním znakem a uživatelé by na něj měli být zvyknutí z používání jiných zařízení, jako například DVD přehrávač či rádio. Lišta pokroku také ukazuje, kolikrát je nutné hru hrát pro její dokončení. Dále je zobrazeno tlačítko pro spuštění cvičícího módu. Tím je průhledná a přeškrtnutá ikona tabule, která signalizuje, že je cvičící mód vypnutý. Prvku cvičící mód je věnována kapitola Obrázek 6.4: Pozastavení hry Barevných návrhů prvků vzniklo během vývoje aplikace několik. Ostatní návrhy byly postupem času zavrhnuty za účelem zlepšení celkového grafického dojmu aplikace. První z návrhů používal k přechodu barev gradient. Gradient byl po konzultaci s paní Červenákovou zavržen, jelikož zrakově postižené děti, na které je aplikace zaměřena by mohly mít problém s vnímáním takovýchto přechodů. Proto bylo nahrazeno i hlavní pozadí aplikace. Další z návrhů používal stejnou barvu jako zpětná šipka. Návrh byl zavržen z důvodu nedostatečného vyniknutí grafického prvku pro opuštění scény a také z důvodu špatného grafického dojmu Cvičící mód Pro jednotlivé hry byly vymyšleny cvičící módy, které dítěti ukazují správnou odpověď a tím ho učí jednotlivé principy, pro které jsou hry určeny. Každá z herních scén má jiný herní princip, proto muselo být vymyšleno více typů cvičících módů. Pro scény, které obsahují obrázky, jako možnosti, byla implementována jedna verze cvičícího módu. Hry, které mají první verzi cvičícího módu, jsou puzzle, logika, velikost, dvojice, barvy, orientace a stíny. Verze je založena na červených a zelených "bublinách", které po zapnutí Cvičícího módu označují správnost jednotlivých obrázků. Zelené označují správnou možnost, červené označují špatné možnosti. Na obrázcích 6.5 je několik ukázek návrhů bublin.