Na tomto míst bude ociální zadání va²í práce

Na tomto míst¥ bude ociální zadání va²í práce •

Toto zadání je podepsané d¥kanem a vedoucím katedry,

•

musíte si ho vyzvednout na studijním odd¥lení Katedry po£íta£· na Karlov¥ nám¥stí,

•

v jedné odevzdané práci bude originál tohoto zadání (originál z·stává po obhajob¥ na kated°e),

•

ve druhé bude na stejném míst¥ neov¥°ená kopie tohoto dokumentu (tato se vám vrátí po obhajob¥).

ii

eské vysoké u£ení technické v Praze Fakulta elektrotechnická

Bakalá°ská práce

Interaktivní omalovánky

Tomá² Pastorek

Vedoucí práce:

Ing. Petr Felkel, Ph.D.

Studijní program: Elektrotechnika a informatika strukturovaný bakalá°ský

Obor: Informatika a výpo£etní technika

£erven 2008

iv

Pod¥kování D¥kuji vedoucímu mé bakalá°ské práce Ing. Petru Felkelovi, Ph.D. za pozornost, kterou mé práci v¥noval, za jeho rady a pomoc p°i zpracování bakalá°ské práce, své sest°e Kate°in¥ Pastorkové za zvukový doprovod, Veronice Veselé za um¥leckou £ást práce a dále d¥kuji své p°ítelkyni Michaele Krej£ové za trp¥livost a opravy text·.

v

vi

Prohlá²ení Prohla²uji, ºe jsem svou bakalá°skou 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 7. 7. 2008

.............................................................

vii

viii

Abstrakt Tato práce prezentuje my²lenku vyuºití fyzikálních simulací v d¥tských omalovánkách. Mým cílem bylo navrhnout °e²ení a to pak realizovat.

Abstract This work presents the concept of using physics simulations in children's coloring book. The aim of this work is to propose a solution and then implement it.

ix

x

Obsah Seznam obrázk·

xv

Seznam tabulek

xvii

1 Úvod

1

1.1

Motivace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

Stru£ný popis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

2 Popis °e²eného problému a vymezení cíl· BP 2.1

3

Specikace vlastností Interaktivních omalovánek . . . . . . . . . . . . . . . . . . .

3

3 Popis struktury BP ve vztahu k vyty£eným cíl·m

5

4 Re²er²ní zpracování existujících implementací

7

4.1

Porovnání omalovánek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

4.1.1

Psychologický rozbor omalovánek . . . . . . . . . . . . . . . . . . . . . . .

7

4.1.2

Kritéria pro hodnocení omalovánek . . . . . . . . . . . . . . . . . . . . . .

7

4.1.3

Interaktivní omalovánky od Keith Haring Foundation

. . . . . . . . . . .

8

4.1.4

Omalovánky na www.apples4theteacher.com . . . . . . . . . . . . . . . . .

9

4.1.5

National Association of Home Builders Omalovánky

4.1.6

FISHER-PRICE Click and Color . . . . . . . . . . . . . . . . . . . . . . .

12

4.1.7

Omalovánky na www.Alík.cz

. . . . . . . . . . . . . . . . . . . . . . . . .

12

4.1.8

Seznam ostatních program· omalovánek . . . . . . . . . . . . . . . . . . .

14

4.1.9

Diskuse nad porovnávanými omalovánkami

4.1.10 Záv¥r porovnání omalovánek 4.2

4.3

. . . . . . . . . . .

. . . . . . . . . . . . . . . . .

15

. . . . . . . . . . . . . . . . . . . . . . . . .

16

Po£íta£ové hry na podobném principu

. . . . . . . . . . . . . . . . . . . . . . . .

16

4.2.1

The Incredible Machine

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

4.2.2

Crayon Physics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

4.2.3

Neverball

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dal²í podobný software

18

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

4.3.1

Barrel Mania

4.3.2

Armadillo Run

4.3.3

Microsoft Physics Illustrator for Tablet PC

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5 Analýza a návrh °e²ení 5.1

11

20 20

23

Katalog poºadavk· na program . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

5.1.1

Funk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

5.1.2

Nefunk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

5.2

Nezávislá funk£ní logika

5.3

Nahrávání XML soubor· . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

5.4

Poºadavky na software a hardware

. . . . . . . . . . . . . . . . . . . . . . . . . .

24

5.4.1

Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

5.4.2

Hardware

25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5.5

Komponenty programu a jejich diagram

5.6

Diagramy a popis t°íd

. . . . . . . . . . . . . . . . . . . . . . .

24

25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.6.1

Základní objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.6.2

Scéna a pomocné t°ídy . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.6.3

Paleta barev

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

5.6.4

Souborový manaºer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

xi

5.7

5.6.5

Zvukový podsystém

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.6.6

Argumenty událostí

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

Volba implementa£ního prost°edí

. . . . . . . . . . . . . . . . . . . . . . . . . . .

32

5.7.1

Cílový opera£ní systém . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

5.7.2

Volba programovacího jazyka a vývojového prost°edí . . . . . . . . . . . .

32

5.7.3

Dal²í pouºitý software

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

5.8

Volba zp·sobu zobrazování

5.9

Volba knihovny pro fyzikální simulace

. . . . . . . . . . . . . . . . . . . . . . . .

35

5.9.1

Physics2D C#

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

5.9.2

Farseer Physics XNA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

5.9.3

Newton Game Dynamics . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

5.9.4

Záv¥r výb¥ru fyzikálních knihoven

36

. . . . . . . . . . . . . . . . . . . . . .

6 Realizace

37

6.1

Výchozí bod implementace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

6.2

Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

Moºnosti controller· . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

6.3

Vlastnosti scény . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

6.4

Vlastnosti objekt·

39

6.5

Tvorba scény

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

6.5.1

scene.xml

40

6.2.1

6.5.2 6.6

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6.5.1.1

Obecné informace

. . . . . . . . . . . . . . . . . . . . . . . . . .

40

6.5.1.2

Pouºité soubory

. . . . . . . . . . . . . . . . . . . . . . . . . . .

41

6.5.1.3

Nastavení scény

. . . . . . . . . . . . . . . . . . . . . . . . . . .

41

6.5.1.4

Paleta barev

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

6.5.1.5

Objekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

6.5.1.6

Denice pouºití controlleru

. . . . . . . . . . . . . . . . . . . . .

43

6.5.1.7

Seznam zvuk·

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

6.5.1.8

Pozadí scény a objekt·

Tvorba controlleru

. . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Zajímavé £ásti implementace

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43 44

Úprava obalující knihovny fyzikálního engine

. . . . . . . . . . . . . . . .

44

6.6.2

Úprava kolekcí

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

6.6.3

P°íkazová °ádka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

6.6.3.1

Ozvu£ení programu

6.6.3.2

Tvorba instala£ního programu

. . . . . . . . . . . . . . . . . . . . . . . . .

45

. . . . . . . . . . . . . . . . . . .

45

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

6.6.4.1

Proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

6.6.4.2

Abstract factory

46

6.6.4.3

Singleton

Pouºité návrhové vzory

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Omezení sou£asné implementace

. . . . . . . . . . . . . . . . . . . . . . . . . . .

7 Testování 7.1

43

6.6.1

6.6.4

6.7

Soubor

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46 46

49

Uºivatelská studie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

7.1.1

Metodika uºivatelské studie

. . . . . . . . . . . . . . . . . . . . . . . . . .

49

7.1.2

Testovací scény . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

Vlastní testování

50

7.1.3

7.1.4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7.1.3.1

Velikono£ní scéna

. . . . . . . . . . . . . . . . . . . . . . . . . .

50

7.1.3.2

Scéna s vybarvováním cesty . . . . . . . . . . . . . . . . . . . . .

51

7.1.3.3

Scéna s automobilem

. . . . . . . . . . . . . . . . . . . . . . . .

51

Záv¥r testování . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

xii

7.2

Seznam otestovaného hardware

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

8 Záv¥r

52

53

8.1

Diskuse nad výsledky práce

8.2

Moºnosti roz²í°ení

8.3

Vyuºití práce

8.4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

Zhodnocení práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

9 Literatura

55

A Instala£ní p°íru£ka

57

A.1

Minimální poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

A.2

Instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

B Uºivatelská p°íru£ka

61

B.1

Velikono£ní scéna (Obrázek B.1)

. . . . . . . . . . . . . . . . . . . . . . . . . . .

B.2

Scéna s vybarvováním cesty (Obrázek B.2) . . . . . . . . . . . . . . . . . . . . . .

61

B.3

Scéna s automobilem (Obrázek B.3)

61

. . . . . . . . . . . . . . . . . . . . . . . . .

C Obsah p°iloºeného CD

61

65

xiii

xiv

Seznam obrázk· 4.1

Snímek obrazovky omalovánek od Keith Haring Foundation

. . . . . . . . . . . .

4.2

Snímek obrazovky omalovánek na adrese www.apples4theteacher.com . . . . . . .

10

4.3

Snímek obrazovky omalovánek National Association of Home Builders

11

4.4

Snímek obrazovky omalovánek FISHER-PRICE Click and Color . . . . . . . . . .

12

4.5

Snímek obrazovky omalovánek na www.Alík.cz

. . . . . . . . . . . . . . . . . . .

13

4.6

Snímek obrazovky hry The Incredible Machine

. . . . . . . . . . . . . . . . . . .

17

4.7

Snímek obrazovky hry Crayon Physics

. . . . . . . . . . . . . . . . . . . . . . . .

18

4.8

Snímek obrazovky hry Neverball

. . . . . . . . . . . . . . . . . . . . . . . . . . .

19

4.9

Snímek obrazovky hry Barrel Mania

. . . . . .

8

. . . . . . . . . . . . . . . . . . . . . . . . .

19

. . . . . . . . . . . . . . . . . . . . . . . .

20

4.10 Snímek obrazovky hry Armadillo Run

4.11 Snímek obrazovky Microsoft Physics Illustratoru

. . . . . . . . . . . . . . . . . .

21

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

5.1

Diagram komponent

5.2

Diagram základního objektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

5.3

Diagram scény a pomocných t°íd

. . . . . . . . . . . . . . . . . . . . . . . . . . .

29

5.4

Diagram palety barev

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

5.5

Diagram souborového manaºera . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.6

Diagram zvukového podsystému . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

5.7

Diagram argument· událostí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

6.1

Kolizní obálka jednoduchého automobilu . . . . . . . . . . . . . . . . . . . . . . .

47

A.1

Dotaz na instalaci .NET Frameworku 3.0 . . . . . . . . . . . . . . . . . . . . . . .

58

A.2

Stahování .NET Frameworku 3.0 z Internetu . . . . . . . . . . . . . . . . . . . . .

58

A.3

Instalace .NET Frameworku 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

58

A.4

Uvítací obrazovka instalátoru Interaktivních omalovánek . . . . . . . . . . . . . .

59

A.5

Výb¥r umíst¥ní instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59

A.6

Potvrzení instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60

A.7

Pr·b¥h instalce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60

A.8

Záv¥re£ný dialog instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60

B.1

Snímek obrazovky velikono£ní scény

. . . . . . . . . . . . . . . . . . . . . . . . .

62

B.2

Snímek obrazovky scény s vybarvováním cesty . . . . . . . . . . . . . . . . . . . .

62

B.3

Snímek obrazovky scény s automobilem

63

xv

. . . . . . . . . . . . . . . . . . . . . . .

xvi

Seznam tabulek 4.1

Souhrn hodnocení omalovánek od Keith Haring Foundation

4.2

Souhrn hodnocení omalovánek na adrese www.apples4theteacher.com . . . . . . .

4.3

Souhrn hodnocení omalovánek National Association of Home Builders

4.4

Souhrn hodnocení omalovánek FISHER-PRICE Click and Color . . . . . . . . . .

13

4.5

Souhrn hodnocení omalovánek na www.Alík.cz

14

xvii

. . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

9 9 11

xviii

KAPITOLA 1.

ÚVOD

1

1 Úvod Jako malého m¥ bavilo vybarvování omalovánek a p°i pohledu na dne²ní internetové omalovánky jsem byl velmi zklamán. Neustále se jedná o stejný princip jako v jejich papírové verzi jen vzít tu pomyslnou virtuální pastelku a vybarvit prostor. Moºnosti dne²ní výpo£etní techniky jsou nevyuºity a záºitek z vybarvování není rozhodn¥ takový, jaký by mohl být. Navíc papírové omalovánky mají jeden hlavní úkol nau£it d¥ti grafomotorickému cít¥ní (koordinaci pohybu ruky s tuºkou a zraku), coº internetové omalovánky nemohou poskytnout. Do svých omalovánek jsem cht¥l zapojit i více neº fantazii vybarvovatele a dát tomuto jednoduchému a známému zp·sobu zábavy novou tvá°. Spojením animací a fyzikálních reakcí do b¥ºných omalovánek dostáváme podle mne zajímavou kombinaci, která dokáºe zaujmout m¥nícím se podkladem k vybarvování a hlavn¥ zcela ur£it¥ dokáºe rozvíjet hodn¥ dovedností od fantazie po logické my²lení. P°i dopln¥ní o zvukový doprovod získáme navíc dal²í prvek, na který musí d¥ti reagovat. Nejedná se tedy o pouhé vybarvování uzav°ených ploch, jaké známe z b¥ºných omalovánek na Internetu. Prost°edí jsem cht¥l ud¥lat jednoduché tak, aby bylo p°ehledné, minimalististické a aby se d¥tem líbilo. Základní vlastnosti bych cht¥l konzultovat s d¥tským psychologem, který by ur£il, co je pro d¥ti nejvhodn¥j²í.

1.1 Motivace P°i hledání tématu práce jsem se snaºil najít téma, které by mi bylo n¥jakým zp·sobem uºite£né. Zkou²el jsem vymyslet n¥jaké, ze kterého bych m¥l pozd¥ji n¥jaký nan£ní zisk, ale ºádné takové jsem nevymyslel. Cht¥l jsem n¥co, co bude mít uºitek pro mne a zárove¬ pro v¥t²í skupinu lidí. Nakonec jsem se rozhodl, ºe mi nezáleºí na nan£ním zisku, ale na tom, aby m¥ práce bavila a v¥d¥l jsem, ºe ji d¥lám pro n¥koho, komu bude prosp¥²ná. Za£al jsem p°emý²let o n¥jakém projektu pro d¥ti, protoºe je mám rád a ta radost, kterou by mohla moje práce vyvolávat v d¥tských o£ích, je velmi motivující. Zvolené téma p°esn¥ zapadá do mého po£áte£ního p°edpokladu. Jedná se o práci, kterou bych cht¥l pozd¥ji publikovat ve°ejn¥ a získat tak zp¥tnou vazbu od d¥tských uºivatel· pro dal²í moºnosti roz²í°ení.

1.2 Stru£ný popis Interaktivní omalovánky jsou program, který slouºí k zabavení d¥tí vybarvováním ploch barvami. Jejich interaktivita spo£ívá ve fyzikálních reakcích £ástí p°edloh. D¥ti budou mít r·zné úkoly, které budou specikované v souboru scény. V²e je navrºeno tak, aby program omalovánek slouºil jako univerzální prost°edí pro jednoduchou logiku jednotlivých p°edloh. Omalovánky jsou velmi intuitivní, mají velké plochy pro výb¥r barvy a minimalistické roztomilé motivy. Bakalá°ská práce se zabývá prezentací my²lenky interaktivních omalovánek a jejich základní implementací. Jako celek se bude jednat o h°í£ku s úkolem zabavit na krátký £as a poslouºit jako dopl¬kový výchovný prvek a´ uº v rozvíjení kreativity nebo k nau£ení základ· práce s po£íta£em.

2

KAPITOLA 1.

ÚVOD

KAPITOLA 2.

POPIS EENÉHO PROBLÉMU A VYMEZENÍ CÍL BP

3

2 Popis °e²eného problému a vymezení cíl· BP Princip hraní (vybarvování) interaktivních omalovánek bude následující: Ve spodní £ásti obrazovky bude paleta barev, ve které hrá£ (dít¥) vybere barvu, kterou bude vybarvovat plochy po kliknutí levým tla£ítkem my²i. Bude záleºet na konkrétní logice p°edlohy (scény), jak budou objekty na vybarvení reagovat a co p°esn¥ bude úkolem dané p°edlohy. V prezenta£ní p°edloze bude mít dít¥ p°ed sebou velikono£ní scénu, ve které bude ve spodní £ásti sed¥t zají£ek. Na obrazovce dít¥ uvidí nevybarvená vají£ka, která mají obrys r·znými barvami. Po jejich vybarvení stejnou barvou na n¥ za£ne p·sobit gravita£ní síla a dají se do pohybu. Pokud se dít¥ splete a pokusí se vají£ko obarvit ²patnou barvou, ozve se zvuk, který ho na to upozorní a vají£ko z·stane nevybarvené. Díky naklon¥ným rovinám ve scén¥ se dokutálí k zají£kovi a dít¥ usly²í zvuk, který znamená úsp¥²né dopravení vají£ka. Pokud se k zají£kovi dostanou v²echna, zazní vít¥zný zvuk a scéna se na£te znovu, s jinou barvou obrysu vají£ek.

2.1 Specikace vlastností Interaktivních omalovánek •

Scéna bude uloºena v XML souboru s danou strukturou pomocí XML Schema.

•

V podkladu se budou nacházet pevné objekty tvo°ící prost°edí a takové, které budou fyzikáln¥ reagovat.

•

Paletu bude denovat tv·rce scény.

•

Jednoduchou logiku podkladu bude obsluhovat tzv. Controller knihovna, která se do omalovánek nahraje spolu s XML souborem podkladu.

•

Controller bude dostávat informace o scén¥ pomocí událostí a bude mít p°ístup ke klí£ovým vlastnostem scény a objekt·.

•

Kurzory my²i budou v podob¥ ²t¥tce nebo pastelky, aby byla z°ejmá vybraná funkce.

•

Prost°edí bude intuitivní, aby ho zvládly ovládat d¥ti, a pro rodi£e pochopitelné, aby ho d¥tem dokázali vysv¥tlit.

•

Styl kreseb bude minimalistický a p°ehledný, aby se d¥tem líbil.

4

KAPITOLA 2.

POPIS EENÉHO PROBLÉMU A VYMEZENÍ CÍL BP

KAPITOLA 3.

POPIS STRUKTURY BP VE VZTAHU K VYTYENÝM CÍLM

5

3 Popis struktury BP ve vztahu k vyty£eným cíl·m Struktura bakalá°ské práce by se dala rozd¥lit do následujících hlavních £ástí:

•

Kapitola 4, ve které je popsána metodika vyhodnocení a srovnání Interaktivních omalovánek s dal²ími podobnými programy a po£íta£ovými hrami.

•

Kapitola 5 se zabývá analýzou, volbou technologií a software k implementaci.

•

Kapitola 6 objas¬uje zajímavé £ásti implementace a obsahuje stru£ný návod na tvorbu scén omalovánek.

•

Kapitola 7 obsahuje seznam hardwaru, na kterém jsem program testoval, a uºivatelskou studii.

•

Kapitola 8 porovnává my²lenku a princip Interaktivních omalovánek s ostatními.

•

Kapitola 9 nabízí moºné roz²í°ení a shrnuje sou£asnou práci.

6

KAPITOLA 3.

POPIS STRUKTURY BP VE VZTAHU K VYTYENÝM CÍLM

KAPITOLA 4.

REERNÍ ZPRACOVÁNÍ EXISTUJÍCÍCH IMPLEMENTACÍ

7

4 Re²er²ní zpracování existujících implementací 4.1 Porovnání omalovánek P°ed zahájením vlastní práce jsem se rozhodl ud¥lat pr·zkum omalovánek na Internetu. Omalovánky jako internetové aplikace jsem zvolil, protoºe druh omalovánek jako klasické programy se uº tém¥° nedají sehnat a jejich rozkv¥t byl v dob¥, kdy nebyl Internet je²t¥ tolik roz²í°en. Tomu odpovídá i jejich kvalita, která je úm¥rná tehdej²ím po£íta£·m. Jako klí£ové slovo vyhledávání jsem pouºil coloringbook nebo interactive coloringbook. Výsledky jsem vybíral podle toho, jak se mi dané omalovánky zalíbily a jestli byly n¥£ím odli²né od p°edchozích. V²echny dobré vlastnosti jsem se snaºil vyzdvihnout a p°ípadn¥ pouºít do mé práce. S ur£ením vhodnosti jednotlivých vlastností mi pomáhala d¥tská psycholoºka Mgr. Na¤a Kravcinová se soukromou psychologickou ambulancí v eské Líp¥.

4.1.1 Psychologický rozbor omalovánek Klasické papírové omalovánky rozvíjí v malých d¥tech hlavn¥ grafomotoriku tzn. schopnost koordinace pohybu ruky a zraku. Je to nácvik, který se pozd¥ji vyuºije p°i psaní, kreslení a dal²ích £innostech ve ²kole. Ur£it p°esný v¥k, ve kterém by dít¥ bylo schopno d¥lat ur£itou v¥c je velmi t¥ºké, protoºe jeho vývoj je velmi individuální. Papírové omalovánky by m¥lo zvládnout dít¥ staré 4 5 let. Jde zde hlavn¥ o znalost barev. V tomto v¥ku zná pouze základní barvy a podklady k vybarvování by m¥ly být konkrétní a ideáln¥ s p°edem vybarveným obrázkem jako inspirací, protoºe d¥ti je²t¥ nemají vyvinuté abstraktní my²lení. D¥ti p°ed²kolního v¥ku (5 6 let) by m¥ly um¥t více odstín· barev, orientaci v prostoru (pojmy naho°e, dole, vpravo, vlevo...) a být schopny vybarvovat sloºit¥j²í p°edlohy nap°. detaily p°edm¥t· apod. Podle psycholoºky Mgr. Nadi Kravcinové slouºí internetové omalovánky pouze pro zabavení d¥tí a rozvíjí maximáln¥ jejich barevné cít¥ní. P°i ovládání my²í se totiº ztrácí hlavní eduka£ní smysl omalovánek grafomotorika.

4.1.2 Kritéria pro hodnocení omalovánek Mou prací mají být interaktivní omalovánky. Je pot°eba se zamyslet, co se vlastn¥ rozumí pojmem interaktivní. Ve slovníku cizích slov jsem na²el tento výklad: Umoº¬ující vzájemnou komunikaci, tj. p°ímý vstup do £innosti stroje nebo programu. Interaktivní omalovánky tak, jak se dají najít na Internetu, jsou chápány tak, ºe uºivatel si m·ºe zvolit barvu, kterou bude vybarvovat, a poté klikáním vybarvuje plochy obrázku. Obecn¥ mi p°i porovnávání ²lo o to, aby omalovánky byly co nejinteraktivn¥j²í, protoºe já sám tento pojem v kombinaci s omalovánkami chápu jinak. Dal²ím kritériem byla ovladatelnost. Omalovánky jsou ur£ené primárn¥ d¥tem, kterým ne£iní tém¥° problém zacílit daný objekt na obrazovce my²í a kliknutím ho obarvit. Tento úkon by m¥ly být schopné zvládnout i d¥ti p°ed²kolního v¥ku a to v£etn¥ pouºití levého a pravého tla£ítka my²i. D·leºité je, aby kurzor my²í vypadal jako pastelka nebo ²t¥tec, aby si dít¥ dokázalo p°edstavit funkci, kterou kurzor má. Dále je d·leºité, aby podklad k vybarvení byl dob°e £itelný a dob°e se vybarvoval. Nesmí v n¥m být malé plochy, se kterými by m¥lo dít¥ problém zacílit je my²í. Sloºit¥j²í p°edlohy jsou ur£ené více pro d¥ti ²kolního v¥ku. Kladn¥ hodnotím i moºnost výb¥ru obrázku, aby si dít¥ (t°eba za pomoci rodi£·) mohlo vybrat ten, na který má chu´.

8

KAPITOLA 4.


Obrázek 4.1: Snímek obrazovky omalovánek od Keith Haring Foundation

D·leºitým faktorem byla nabízená paleta barev. Ta by m¥la obsahovat jen ty barvy, které jsou d¥ti schopny pojmenovat. Pro d¥ti ve v¥ku 4 5 let je vhodn¥j²í jen se základními barvami. V pokro£ilej²ím v¥ku je lep²í pouºít nap°. palet s pastelovými barvami v n¥kolika odstínech, kde by mohly projevit barevné cít¥ní a fantazii. Dále jsem hodnotil dal²í funkce omalovánek. Ty totiº dokáºí vyuºít pouze star²í d¥ti a n¥kdy se p°edpokládá nutnost um¥t £íst a rozum¥t pojm·m, které jsou u nástroj· napsané. Pro p°ed²kolní d¥ti je vhodn¥j²í rozhraní programu, které obsahuje pouze paletu se základními barvami a p°edlohu k vybarvení. Pro ²kolní d¥ti (p°edpokládá se schopnost £íst) m·ºe být ovládání sloºit¥j²í. V obou p°ípadech by ale ovládání a funkce m¥ly být snadno pochopitelné pro rodi£e, které je budou dít¥ti vysv¥tlovat. Funkci jako krok zp¥t nebo guma d¥ti nebudou vyuºívat tak £asto. Zajímavá je funkce tisku, která m·ºe radost z vybarvování uchovat na del²í dobu. Na záv¥r jsou zkoumal pouºitou technologii a p°ítomnost chyb v programu omalovánek. V²echna d·leºitá kritéria mnou hodnocených omalovánek jsem shrnul do p°ehledové tabulky, aby je bylo moºno rychle porovnat. Jako nejd·leºit¥j²í vlastnost povaºuji ovládání, které musí být, v programu ur£eném d¥tem, jednoduché, protoºe dít¥ by m¥lo pochopit, co se po n¥m chce.

4.1.3 Interaktivní omalovánky od Keith Haring Foundation Adresa:

http://www.haringkids.com/coloringbook/index.html

Auto°i t¥chto omalovánek pojem interaktivita implementovali v moºnosti p°esouvat a vkládat do obrázku nové objekty, jejichº po£et je v²ak velmi omezen. Na výb¥r je 7 objekt· a 6 pozadí, které m·ºe uºivatel vloºit. Objekty lze do ur£ité míry zv¥t²ovat, zmen²ovat a rotovat. Výb¥r barev je omezen na sedm. Ovládání je absolutn¥ nevhodné pro d¥ti a °ekl bych i pro kohokoliv

KAPITOLA 4.


Kategorie

Vyhodnocení

V¥k d¥tí

kolní

Interaktivita

V¥t²í s p°edm¥ty lze pohybovat, transformovat

Podklad k vybarvování

Uºivatel si podklad vytvá°í sám

Ovladatelnost

Pro d¥ti obecn¥ nevhodná

Paleta barev

7 základních barev

Dal²í funkce

Nejsou

Celkové hodnocení

Nevhodné pro d¥ti a více kreativní práci

Pouºitá technologie

Adobe Flash

9

Tabulka 4.1: Souhrn hodnocení omalovánek od Keith Haring Foundation

Kategorie

Vyhodnocení

V¥k d¥tí

P°ed²kolní

Interaktivita

Základní p°edlohu lze vybarvovat


Opravdu velké mnoºství p°edloh; £len¥no do kategorií

Ovladatelnost

Jednoduchá a intuitivní

Paleta barev

Velmi dobrá, r·zné odstíny v£etn¥ t¥lov¥ r·ºové

Dal²í funkce

Tisk

Celkové hodnocení

Jednoduché omalovánky, které rozhodn¥ d¥ti zaujmou


Adobe Flash

Tabulka 4.2: Souhrn hodnocení omalovánek na adrese www.apples4theteacher.com

dal²ího, kdo by cht¥l vytvo°it n¥co sloºit¥j²ího. Pro aktivaci mazání, zv¥t²ování, zmen²ování, rotace nebo vybarvování je pot°eba mít objekt vybraný, coº se provádí dvojklikem. P°itom pro p°esun není pot°eba objekt vybírat. Celý program na m¥ p·sobí jen jako n¥jaká ukázka, protoºe pro to, aby byl pouºitelný pro vybarvování d¥tmi je moc sloºitý a pro zjednodu²ení tvorby klasických omalovánek k pozd¥j²ímu vytisknutí obsahuje p°íli² málo nástroj· a pouºití je pon¥kud t¥ºkopádné. Velkým plusem je pouºití zvuk· pro dopln¥ní multimediálního záºitku, ov²em vzhledem k vý²e uvedenému to tém¥° nic nezlep²uje.

4.1.4 Omalovánky na www.apples4theteacher.com Adresa:

http://www.apples4theteacher.com/coloring-pages/

www.apples4theteacher.com je internetový server, který se snaºí být nápomocný u£itel·m a rodi£·m ve výchov¥ d¥tí. Obsahuje spoustu her a mezi nimi i jednoduché omalovánky, které mají asi ten nejjednodu²²í zp·sob interaktivity schopnost vybarvovat p°edlohu. Ovládání je velmi jednoduché sta£í kurzorem, který vypadá jako vosková pastelka najet na barvu, vybrat ji, a poté kliknout na plochu, která se má vybarvit. Plochy se vybarvují velmi jednodu²e: Po kliknutí na ur£itou, se vybarví i ostatní, které by m¥ly stejnou barvu. Toto chování sice trochu omezuje v kreativit¥, ale je vhodné pro men²í d¥ti. Jako velké plus t¥chto omalovánek pokládám moºnost velkého výb¥ru p°edloh, které jsou £len¥ny do kategorií. K dispozici je velká paleta barev, která obsahuje i t¥lov¥ r·ºovou, která se hodí pro vybarvování k·ºe. Dal²í dobrou funkcí je tisk, který ur£it¥ najde uplatn¥ní p°i vytisknutí vybarvené i nevybarvené p°edlohy na papír.

10

KAPITOLA 4.


Obrázek 4.2: Snímek obrazovky omalovánek na adrese www.apples4theteacher.com

KAPITOLA 4.


11

Obrázek 4.3: Snímek obrazovky omalovánek National Association of Home Builders

Kategorie

Vyhodnocení

V¥k d¥tí

kolní

Interaktivita

Velmi hezky ud¥laný zp·sob vybarvování


8 podklad· + prázdná plocha ke kreslení

Ovladatelnost


Paleta barev

Dostate£ná 27 barev (3 odstíny od kaºdé barvy)

Dal²í funkce

Tisk, poslání e-mailem, guma

Celkové hodnocení

Jednoduché omalovánky, které rozhodn¥ d¥ti zaujmou


Adobe Flash

Tabulka 4.3: Souhrn hodnocení omalovánek National Association of Home Builders

4.1.5 National Association of Home Builders Omalovánky Adresa:

http://www.nahb.org/coloringbook/book.aspx

Tyto omalovánky jsou hezkým spojením volného kreslení my²í a vybarvování. Vybarvování funguje tak, ºe po kliknutí do ur£ité plochy lze tahy my²í kreslit £áru dané barvy, ale nejde p°etáhnout do jiné plochy. Tento zp·sob zaru£uje jednoduché, rychlé a intuitivní vybarvování a p°itom nechává velký prostor pro kreativitu. Výb¥r podklad· pokládám za uspokojující podklad· je dispozici 8 plus jeden, který je úpln¥ prázdný a slouºí jako plocha pro kreslení. K dispozici je paleta £ítající 27 barev, se°azena po t°ech odstínech od kaºdé barvy. Paleta je dle mého názoru dostate£ná. Uplatn¥ní najde i nástroj gumy. Lze volit ²í°ku kreslené £áry nebo gumování. Velmi dobrou funkcí je posílání vybarvených omalovánek e-mailem, kterou povaºuji za velmi uºite£nou. Samoz°ejmostí je i moºnost tisku.

12

KAPITOLA 4.


Obrázek 4.4: Snímek obrazovky omalovánek FISHER-PRICE Click and Color

4.1.6 FISHER-PRICE Click and Color Adresa:

http://www.sher-price.com/us/playtime/coloring/toddler/thumbnail.asp

Jednoduché omalovánky Click and Color vynikají roztomilými a p°ehlednými podklady k vybarvování. Na výb¥r jich je celkem 10, coº mi p°ijde dostate£né. Kurzor ve tvaru velkého ²t¥tce je vzhledov¥ hezký a dostate£n¥ názorný. Paleta obsahuje barvy ve tvaru velkých kapek, coº usnadní zejména men²ím d¥tem výb¥r. Po£et barev není velký, ale k vybarvení jednoduchých p°edloh sta£í. Po kliknutí na plochy p°edlohy za ú£elem vybarvení se automaticky vybarví plochy, které by m¥ly stejnou barvu. To je dobré zejména pro men²í d¥ti. Dobrou funkcí je zobrazení názvu barvy, která má i výchovný efekt pro ²kolní d¥ti. Dal²í dobrou funkcí je moºnost tisku.

4.1.7 Omalovánky na www.Alík.cz Adresa:

http://www.alik.cz

eský portál pro d¥ti www.Alík.cz obsahuje mimo jiné také omalovánky, které nabízí velký po£et podklad·, které jsou roz£len¥ny do £ty° kategorií: Alík, pohádky, zví°átka a ostatní. N¥které p°edlohy mají hodn¥ malé plochy, kam by se d¥tem mohlo ²patn¥ mí°it. Ovládání je klasické: Po kliknutí na barvu lze tou samou barvou vybarvovat. Dal²í moºností je reºim tuºky, kdy lze do obrázku libovoln¥ kreslit pomocí r·zn¥ nastaveného prolu a velikosti nástroje. K dispozici je pouze základní paleta, která neobsahuje zajímavé barvy, ale nap°. £asto pot°ebnou t¥lov¥ r·ºovou ano. Bohuºel omalovánky obsahují °adu chyb. Ob£as podkladové plochy nejsou dob°e odd¥leny a vybarví se najednou. P°i vybarvování se nesmí pouºít £erná barva, protoºe

KAPITOLA 4.


Kategorie

Vyhodnocení

V¥k d¥tí

P°ed²kolní

Interaktivita

Základní P°edlohu lze vybarvovat


10 p°edloh jednoduchých roztomilých obrázk·

Ovladatelnost


Paleta barev

P°im¥°ený po£et barev p°edlohám

Dal²í funkce

Tisk

Celkové hodnocení

Jednoduché omalovánky, ur£ené pro men²í d¥ti


Adobe Flash

Tabulka 4.4: Souhrn hodnocení omalovánek FISHER-PRICE Click and Color

Obrázek 4.5: Snímek obrazovky omalovánek na www.Alík.cz

13

14

KAPITOLA 4.


Kategorie

Vyhodnocení

V¥k d¥tí

Základní funkce p°ed²kolní, v²echny funkce ²kolní

Interaktivita

Základní p°edlohu lze vybarvovat + reºim tuºky


Velmi velké mnoºství p°edloh; £len¥no do kategorií

Ovladatelnost


Paleta barev

Jednoduchá, obsahuje t¥lov¥ r·ºovou

Dal²í funkce

t¥tec, razítko

Celkové hodnocení

Jednoduché omalovánky, ve kterých se vyskytují chyby


Java Applet

Tabulka 4.5: Souhrn hodnocení omalovánek na www.Alík.cz

potom uº nejde p°ebarvit. Program omalovánek vyt¥ºuje, dle mého, zcela zbyte£n¥ na 100 % procesor. koda t¥chto chyb, protoºe server Alík.cz má na Internetu docela dobré jméno a kvalita program· ho jen kazí.

4.1.8 Seznam ostatních program· omalovánek 1. http://www.coloring.com/

•

Podpr·m¥rné zpracování

•

Technologie: Javascript

2. http://www.isoverse.com/colorbook/

•


•

Technologie: Javascript

3. http://www.leg.state..us/kids/junior/colorbook/online/

•


•

Technologie: Java Applet

4. http://www.cass.net/~rainiew/sarahbear/bigc2/colorbig.htm

•


•


5. http://www.surfnetkids.com/games/colorsums.htm

•

Matematické omalovánky barvu ur£ují výsledky jednoduchých p°íklad· na plo²e k vybarvení

•


6. http://janoch.borec.cz/omal_online.html

•

Animace vybarvování, zvuky

•

Technologie: Adobe Flash

7. http://www.ikeacz.cz/html/koutek_pro_deti/omalovanky.html

•

Sou£ást prezentace rmy Ikea

KAPITOLA 4.


•

Velmi hezky zpracováno

•


15

8. http://www.kamaradske-hry.cz/hry-na-pocitaci/omalovanky/

•

Animace pozadí

•

Nevhodné ovládání vybarvuje se p°etahováním barvy do plochy

•


9. http://www.kindersurprise.cz/hry/0210-lisky-omalovanky/

•

Hezky zpracované omalovánky

•

Objekty k vybarvení se p°idávají na pozadí a lze s nimi hýbat a posléze vybarvovat

•

Sloºit¥j²í ovládání

•


10. http://www.keasoftware.com/coloring/index.php

•

Oine omalovánky

•

Mnoho p°edloh ke staºení

•

Freeware

4.1.9 Diskuse nad porovnávanými omalovánkami P°edstavu o vlastní práci jsem si up°esnil po porad¥ s psycholoºkou Mgr. Na¤ou Kravcinovou. Podle ní, by d¥ti p°ed²kolního v¥ku m¥ly být schopné ovládat po£íta£ pomocí my²i s vyuºitím levého i pravého tla£ítka. kolní d¥ti uº zvládnou lépe koordinaci pohyb· obou rukou a mohou pouºít i klávesnici. Z toho vyplývá, ºe by moje interaktivní omalovánky m¥ly být ovladatelné pouze my²í. D¥ti p°ed²kolního v¥ku okolo 4 5ti let (záleºí na indiviálním vývoji) nemají je²t¥ tolik rozvinuto abstraktní my²lení, a proto je lep²í pro p°edlohy pouºívat konkrétní p°edm¥ty, které znají z reálného sv¥ta. Ideální je pro p°edstavu zobrazit vybarvený obrázek a dít¥ by jen kopírovalo barvy, které jsou na n¥m. Pouhé vybarvování ale nemá prakticky ºádný výchovný smysl a slouºí spí²e pro vypln¥ní volné chvíle. Moje interaktivní omalovánky tím, ºe obsahují fyzikální simulace, pomohou d¥tem pochopit vztahy mezi p°edm¥ty a prostorové vnímání. Fyzikální simulace jsou lidem v²eobecn¥ hodn¥ blízké, protoºe stejné chování p°edm¥t· vídají b¥ºn¥ okolo sebe. Pro mlad²í d¥ti sta£í nap°. jednoduchý padající mí£ek a pro star²í mohou být pouºity jednoduché mechanismy, logické hádanky, apod. D·leºité je intuitivní uºivatelské rozhraní programu. P°ed²kolní d¥ti nejsou schopny £íst textové informace z obrazovky a nerozumí sloºit¥j²ím nástroj·m. V²e by m¥lo být na první pohled pochopitelné jak pro d¥ti, tak pro rodi£e, kte°í jim budou základní instrukce alespo¬ p°ed prvním pouºitím vysv¥tlovat. D·leºité je, aby m¥l kurzor tvar ²t¥tce nebo pastelky, aby si d¥ti dokázaly p°edstavit jeho funkci. Paleta barev by m¥la mít v¥t²í rozm¥ry, aby se d¥tem barva dob°e vybírala. Pokro£ilej²í nástroje by m¥ly mít místo v omalovánkách pro star²í d¥ti, protoºe mlad²í by je nevyuºily a jen by znep°ehled¬ovaly uºivatelské rozhraní.

16

KAPITOLA 4.


4.1.10 Záv¥r porovnání omalovánek Porovnání omalovánek pro m¥ bylo velkou inspirací a ujasnil jsem si pár nápad·, které bych ve své práci pouºil. Celkem jsem podrobn¥ prozkoumal 5 r·zných internetových omalovánek a dal²ích 10 jsem uvedl pouze pro úplnost. N¥které ov²em nebyly pro d¥ti p°íli² vhodné a n¥které byly koncipovány pro star²í d¥ti. P°edloha omalovánek pro mlad²í d¥ti by m¥la obsahovat v¥t²í plochy a konkrétní p°edm¥ty, aby d¥ti v¥d¥ly, jakou barvu by mají pouºít. Dobré je pouºití vybarveného obrázku, aby se m¥ly kde inspirovat. Paleta barev by m¥la obsahovat pouze základní barvy, které d¥ti dokáºí pojmenovat. Sloºit¥j²í nástroje jako je guma nebo krok zp¥t nejsou pot°eba, jen by d¥ti pletly. U star²ích d¥tí ²kolního v¥ku je situace trochu odli²ná. P°edlohy mohou být sloºit¥j²í, fyzikální simulace mohou obsahovat jednoduché mechanismy a logické hádanky. Paleta m·ºe obsahovat více neº základní barvy a p°edem vybarvený obrázek pro inspiraci není tolik pot°eba, protoºe d¥ti mají více rozvinuté abstraktní my²lení a mohou tak rozvíjet um¥lecké cít¥ní. Na základ¥ rad psycholoºky a zkoumání ostatních omalovánek jsem specikoval vlastnosti, které bych cht¥l ve své práci implementovat. V první °ad¥ je to denovatelná paletu, u které se budou zobrazovat názvy barev (pro v¥kovou skupinu ²kolních d¥tí). P·jde tak zvolit specická paleta pro kaºdý podklad samostatn¥. Paleta musí být dostate£n¥ velká, aby se barvy dob°e vybíraly. Dále je to velký a snadno poznatelný kurzor, kterým se budou dob°e zam¥°ovat plochy k vybarvení. Styl podklad· a prost°edí k vybarvení by m¥l být minimalistický, aby byl obrázek dob°e £itelný. Vybarvovat by se m¥ly najednou plochy, které spolu souvisí, aby se usnadnilo vybarvování men²ím d¥tem. Prost°edí by m¥lo být roztomilé a intuitivní. K dispozici bude n¥kolik scenérií, které budou rozd¥leny podle v¥ku a budou obsahovat prvky, které by mohlo dít¥ zvládnout.

4.2 Po£íta£ové hry na podobném principu V dne²ní dob¥ jsou hry, ve kterých se pouºívá fyzikální simulace, zcela b¥ºnou záleºitostí. Profesionální AAA tituly pouºívají fyziku pro obohacení výsledného efektu a proºitku z celé hry. Existují ale hry, které jsou zaloºené pouze na fyzikálních reakcích to znamená, ºe fyzikální interaktivita je p°ímo zp·sob, jakým hrá£ °e²í jednotlivé úkoly. Tyto hry nemají v¥t²inou ºádný d¥j a jejich úkolem je krátká zábava pro odreagování. Jejich hratelnost je velmi dobrá a hrá£ v podstat¥ nepot°ebuje návod, protoºe princip hry zná z reálného sv¥ta. Hrami zaloºenými na fyzikálním principu se zabývají internetové stránky http://www.fun-motion. com. Obsahují seznam r·zných her, ve kterých má fyzika hlavní podíl na hratelnosti. Vybral jsem pár her, které mají n¥co spole£ného s mou prací.

4.2.1 The Incredible Machine Adresa:

http://en.wikipedia.org/wiki/The_Incredible_Machine

První verzi této hry uvedlo studio 3DO v roce 1992 pro MS-DOS a Macintosh. Poslední verze je z roku 2001 s názvem The Incredible Machine: Even More Contraptions. Na tyto hry vznikalo mnoho modikací dokonce i pro mobilní telefony. Na herní plo²e jsou rozmíst¥ny p°edm¥ty a hrá£ má k dispozici dal²í, které dopl¬uje ke stávajícím a vytvá°í tak funk£ní mechanismy. P°íkladem jednoduchého scéná°e pro p°edstavu m·ºe být scéna, kde jsou p°ednastaveny dopravníkové pásy a kuºelková koule úkolem hrá£e je rozmístit

KAPITOLA 4.


17

Obrázek 4.6: Snímek obrazovky hry The Incredible Machine

do scény motory a °emeny od nich k dopravník·m tak, aby dopravily kule£níkovou kouli do cílového prostoru. K dispozici jsou r·zné druhy p°edm¥t·: Optické (sví£ka, lupa, sv¥telné senzory, ...), elektrické (alternátor, elektromotor, vypína£e, ...), mechanické (lano, kladky, závaºí, naklon¥né rovina, r·zné typy mí£·, ...) a dal²í p°edm¥ty. Jejich kombinacemi lze sloºit ur£itý mechanismus, který splní zadaný úkol, jako nap°. umístit basketbalový mí£ do ko²e, donutit ko£ku dojít na ur£ité místo apod. Hra vyniká velmi dobrou hratelností, protoºe se jedná o logickou hru, ve které není p°edem daný postup °e²ení a nabízené p°edm¥ty, které má hrá£ k dispozici k vy°e²ení úkolu, v¥t²inou umoº¬ují vy°e²it ho n¥kolika zp·soby podle volby hrá£e. Velký podíl na hratelnosti má i fakt, ºe jednotlivé p°edm¥ty zná hrá£ z reálného sv¥ta, a proto si dokáºe °e²ení dob°e p°edstavit.

4.2.2 Crayon Physics Adresa:

http://www.kloonigames.com/blog/games/crayon/

Tato hra z podzimu roku 2007 od Kloonigames [14] vyniká mezi ostatními p°edev²ím designem. Celá hra vypadá jako by byla nakreslena pastelkami na papí°e, a to ji dodává velké kouzlo. Cíl hry spo£ívá v tom, ºe hrá£ musí dopravit kuli£ku ke ºluté hv¥zdi£ce, a pokud se dotknou, tak hra kon£í a hrá£ m·ºe hrát dal²í úrove¬. Prost°edkem jakým toho m·ºe hrá£ dosáhnout, je kreslení objekt· do scény. Pomocí my²i m·ºe hrá£ nakreslit nap°. £tverec, a ten hned po nakreslení fyzikáln¥ reaguje na okolí. Objekt op¥t vypadá jako nakreslený pastelkami. Hrá£ postupuje tak, ºe si nakreslí n¥jaké p°edm¥ty, po kterých dostane kuli£ku ke hv¥zdi£ce a potom uvede kuli£ku do pohybu pomocí jiného p°edm¥tu. Pomocí pravého tla£ítka my²i m·ºe vytvo°ený objekt smazat, coº se hodí zejména pokud by p°edm¥t stál v cest¥ kuli£ce.

18

KAPITOLA 4.


Obrázek 4.7: Snímek obrazovky hry Crayon Physics

V sou£asné dob¥ je k dispozici ukázková hra Crayon Physics, která obsahuje jen pár úrovní, ale v p°íprav¥ je Crayon Physics Deluxe, která má být placená.

4.2.3 Neverball Adresa:

http://icculus.org/neverball/

Hra jednoduchého principu, kterou Robert Kooima vyvíjí pod GPL licencí a je k dispozici pro Linux, Win2K/XP, FreeBSD a OSX. Jedná se hodn¥ o populární 3D hru nad OpenGL a knihovnou SDL, ve které jde o sbírání penízk· fyzikáln¥ reagující koulí za ur£itý £as. Kouli hrá£ ovládá pomocí sm¥rových kláves, kterými naklání celou scénu, a tím se koule dostane do pohybu. Úkolem je pomocí správného naklán¥ní posbírat v²echny penízky, p°ekonat ur£itou dráhu a p°itom nespadnout z hrací plo²iny. Jde tedy o udrºení rovnováhy a rychlosti koule. V²e je pot°eba splnit za co nejlep²í £as. Tato hra, narozdíl od p°edchozích dvou, je i trochu ak£ní, protoºe reakce hrá£e na pohyb koule musí být okamºité. Komunikace s hrá£em je skrze p°ehledné uºivatelské rozhraní a zvukový doprovod je na dobré úrovni. Protoºe se jedná o open-source hru, je kolem ní utvo°ena komunita hrá£·, p°edev²ím opera£ního systému Linux.

4.3 Dal²í podobný software 4.3.1 Barrel Mania Adresa:

http://www.cgssoftware.com/bmania.htm

KAPITOLA 4.


Obrázek 4.8: Snímek obrazovky hry Neverball

Obrázek 4.9: Snímek obrazovky hry Barrel Mania

19

20

KAPITOLA 4.


Obrázek 4.10: Snímek obrazovky hry Armadillo Run

Hra Barrel Mania od CGS software je zaloºena na principu rozmísóvání plo²ek, které mají za úkol sm¥rovat barel do cílové oblasti. K dispozici je jich n¥kolik druh·. Od oby£ejných a urychlujících po dynamit. Herní záºitek dopl¬ují bohaté efekty výbuch· a hudební doprovod.

4.3.2 Armadillo Run Adresa:

http://www.armadillorun.com/

Armadillo Run je hra zaloºená kompletn¥ na fyzikálních simulacích. Vychází z klasické hry stav¥ní mostu (http://www.bridgebuilder-game.com/) a roz²i°uje její moºnosti o pouºití kovových plo²in, plátna, lan a vzp¥r. Pro lana lze nastavit pruºnost a pro vzp¥ry £as, za který se rozpadnou. Kombinací t¥chto nástroj· lze vytvo°it i jednoduché mechanismy, které mají za úkol jediné dostat basketbalový mí£ do cílové oblasti.

4.3.3 Microsoft Physics Illustrator for Tablet PC Adresa:

http://www.microsoft.com/windowsxp/downloads/powertoys/tabletpc.mspx#ETBAC

Jedná se o zajímavý program pro simulaci fyziky vydaný rmou Microsoft v rámci nástroj· Power toys pro Tablet PC. Je optimalizovaný pro ovládání pomocí dotykové obrazovky a standardn¥ nejde nainstalovat jinde, neº na platform¥ Tablet PC. Internetový blog Hypercubed [1], ale uve°ejnil moºnost, jak Microsoft Physics illustrator nainstalovat na b¥ºném PC. Princip je takový, ºe uºivatel nakreslí objekty, provázání mezi nimi a p·sobící síly, a potom spustí animaci. Nakreslené objekty za£nou fyzikáln¥ reagovat. A£koliv se jedná o dobrou my²lenku, tak po gracké ani fyzikální stránce není dle mého tento program dotaºen do konce.

KAPITOLA 4.


Obrázek 4.11: Snímek obrazovky Microsoft Physics Illustratoru

21

22

KAPITOLA 4.


KAPITOLA 5.

ANALÝZA A NÁVRH EENÍ

23

5 Analýza a návrh °e²ení 5.1 Katalog poºadavk· na program 5.1.1 Funk£ní poºadavky 1. Obecné

•

Program bude pouºívat parametry p°íkazové °ádky.

•

Program bude mít instalátor, který zajistí v²e ke správnému chodu.

•

Program bude pouºívat fyzikální knihovnu pro simulace a animace.

2. Denice p°edlohy

•

Scéna bude denovatelná z externího souboru nebude napevno v programu.

•

Logika scény se bude nahrávat také ze souboru.

•

Gracké ztvárn¥ní scény p·jde libovoln¥ m¥nit.

•

Bude umoºn¥no denovat základní vlastnosti fyzikálního prost°edí.

3. Nahrávání soubor·

•

Na£ítání scény z jednoho komprimovaného souboru.

•

Na£ítání scény z adresá°e.

4. Zobrazování

•

Bude pouºito vektorové vykreslování.

•

Program se bude zobrazovat v okn¥, nebo p°es celou obrazovku.

5. Zvuky

•

Program omalovánek bude ozvu£en.

5.1.2 Nefunk£ní poºadavky 1. Stabilita

•

Program bude stabilní.

•

innost programu neovlivní správný chod ostatních program· ani celého systému.

2. Uºivatelská p°ív¥tivost

•

Vzhled a struktura programu bude vytvo°ena jednodu²e tak, aby byla snáze pochopitelná pro d¥tské uºivatele.

3. P°enositelnost

•

Program bude ur£ený pro Windows XP, Service pack 2 a vy²²í

4. Legálnost

•

Program bude spl¬ovat legislativu státu, na n¥mº bude systém provozován.

•

K vytvo°ení a provozu programu nebude pouºit ºádný nelegální software.

•

Program nebude slouºit k distribuci nelegálního software.

24

KAPITOLA 5.


5.2 Nezávislá funk£ní logika Ve funk£ních poºadavcích jsem uvedl, ºe logika scény nebude napevno v programu, ale bude denována v externím souboru. Tento poºadavek lze °e²it n¥kolika zp·soby. Jedním z nich je implementace skriptovacího jazyka, nebo napsání vlastního. Pomocí skript· by se ovládaly v²echny reakce na události od uºivatele nebo fyzikálního engine. Tento zp·sob je sloºit¥j²í a v p°ípad¥ dal²ího roz²i°ování funkcí prost°edí omalovánek by se musela upravovat i £ást, která by m¥la na starosti skriptování. Dal²í moºností je vykonávání logiky scény p°esunout z hlavního programu do dynamické knihovny, ze které by se na£ítala. Dynamická knihovna má p°esn¥ dané rozhraní, pomocí kterého komunikuje s hlavním programem. M·ºe vyuºívat stejné datové struktury a p°istupovat ke sdíleným objekt·m. Je psána v plnohodnotném programovacím jazyce, který nemusí omezovat ve tvorb¥ logiky. Velkou nevýhodou tohoto °e²ení je nutnost kompilace. Pro Interaktivní omalovánky jsem zvolil p°esunutí funk£ní logiky do dynamické knihovny. A£koliv je zde nutná kompilace, mohu programovat v jazyku, na který jsem zvyklý

1 , knihovna se

jednodu²e pouºívá a po p°idání referencí m·ºe pouºívat stejné t°ídy jako jsou pouºity v hlavním programu.

5.3 Nahrávání XML soubor· Zp·sob· na£ítání formátu XML je n¥kolik. Nejjednodu²²í zp·sob je zpracování pomocí SAX

Simple API for XML), ve kterém se £tou v²echny prvky sekven£n¥. Na£ítání je velmi rychlé,

(

pam¥óv¥ málo náro£né, ale vyºaduje obalující logiku, která by na£ítání ovládala. Dal²í zp·sob je

Document Object Model). Jedná se o na£tení celého XML souboru najednou do stromové

DOM (

struktury t°íd, které obalují jednotlivé prvky jazyka XML. Na£ítání je pomalej²í a pam¥óv¥ náro£n¥j²í.

Document Object Model). Soubory scén

Ve své práci jsem zvolil zp·sob zpracování pomocí DOM (

nejsou natolik velké, aby vadila pam¥óvá a £asová náro£nost. Implementace t°ídy ve jmenném prostoru

System.Xml

XmlDocument

.NET Frameworku navíc nabízí adresaci jednotlivých ele-

ment· pomocí XML Path (http://www.w3.org/TR/xpath), a tím pádem není pot°eba tém¥° ºádná na£ítací logika.

5.4 Poºadavky na software a hardware P°i sepisování t¥chto poºadavk· jsem vycházel z doporu£ení ur£ených pro .NET Framework 3.0 na stránkách http://msdn.microsoft.com/en-us/library/aa480198.aspx .

5.4.1 Software Program Interaktivní omalovánky pot°ebuje ke svému b¥hu .NET Framework 3.0, který lze nainstalovat na opera£ních systémech:

1

•

Windows XP Home, Service Pack 2 a vy²²í.

•

Windows XP Professional, Service Pack 2 a vy²²í.

•

Windows Server 2003 family, Service Pack 1 a vy²²í.

V p°ípad¥ platformy .NET je na výb¥r p°es 30 programovacích jazyk·.

KAPITOLA 5.

•

25


Na systémech Windows Vista je .NET Framework 3.0 jiº nainstalován.

Pro vyuºívání multimédií dále pot°ebuje Windows Media Player 10 a vy²²í, který je ke staºení p°es sluºbu Microsoft Update. Na stránkách http://www.microsoft.com/downloads/, lze stáhnout .NET Framework 3.0 jeho internetovou instalaci a balí£ky pro platformy x86 a x64.

5.4.2 Hardware Minimální poºadavky pro £innost programu na .NET Frameworku 3.0:

•

Pentium 400 MHz, 96 MB RAM a kompatibilní

Doporu£ené poºadavky:

•

Pentium 1 GHz a více, 256 MB RAM a více

V úvahu je pot°eba vzít i fyzikální simulace, které jsou výpo£etn¥ náro£n¥j²í zejména p°i v¥t²ím po£tu pohybujících se objekt·. Konkrétní po£íta£ové sestavy, na kterých jsem program testoval se nacházejí v kapitole Testování.

5.5 Komponenty programu a jejich diagram Návrh programu Interaktivní omalovánky jsem rozd¥lil do jednotlivých komponent. Kaºdá

Assembly), kterou pro-

z nich (mimo Command Line) odpovídá jedné dynamické knihovn¥ (

gram vyuºívá. D·vod rozd¥lení programu na komponenty byl nutný, protoºe se zde pouºívá

plugins). Kaºdý zásuvný modul musí mít referenci na obecnou kom-

systém zásuvných modul· (

2

ponentu stejn¥ jako samotný program . Pokud by m¥ly zásuvné moduly referenci p°ímo na hlavní program, nastala by chyba p°i pokusu modul nahrát. V následujícím popisu lze najít konkrétní t°ídy, které se v komponentách nacházejí a detaily vzájemného propojení.

Zobrazování

(Assembly

ColoringBook.exe) Obsahuje t°ídu App, která je vstupním bodem do Window1 se stará o okno programu a p°epínání do zobrazení

samotného programu. T°ída

p°es celou obrazovku. Nejd·leºit¥j²í t°ída této assembly je uºivatelský kontrolní prvek

PhysicsControl, který obsahuje denice vizuálního zobrazení objekt· scény a zaji²úje jejich vykreslování. Objekty jsou p°edávány p°es kolekci ObservableCollection a zm¥ny jednotlivých vlastností jsou dávány najevo pomocí události PropertyChanged rozhraní INotifyPropertyChanged. O paletu barev se stará kontrolní prvek PaletteControl, ve kterém jsou barvy z kolekce ObservableCollection<PaletteColor>. (Assembly NewtonDynamics.dll) Obsahuje obalující C# knihovnu (Wrapper) nad knihovnou v nativním kódu newton.dll. Tato knihovna p°evádí neobjektové

Fyzikální engine

rozhraní do objektového a obsahuje dal²í funkcionalitu pro pohodln¥j²í práci s fyzikálním engine. Ve své práci vyuºívám nejvíce t°ídy

CWorld

zaobalení fyzikálního sv¥ta a

reprezentuje fyzikální t¥leso. 2

Tento systém zásuvných modul· se pouºívá b¥ºn¥ v programech pro .NET Framework

CBody

26

KAPITOLA 5.


Obrázek 5.1: Diagram komponent

KAPITOLA 5.

Scene

27


Common.dll) Obsahuje v²echny t°ídy programu prost°edí omalovánek. Jedná Scene, která obsahuje základní vlastnosti fyzikálního sv¥ta (obaluje t°ídu CWorld), rozhraní IObjectBase základní abstraktní t°ída objektu, která obaluje t°ídu fyzikálního t¥lesa CBody, na£ítání scény t°ídou Loader a dal²í. Tato komponenta také (Assembly

se o t°ídu

obsahuje delegáty pro systém událostí, které dále vyuºívají controllery.

Command Line

(Assembly

Common.dll) Malá komponenta, která není vázána na dal²í sou£ásti

programu. Má za úkol £tení parametr· p°íkazové °ádky a jejich p°evod do hodnot jednotlivých vlastností. Podrobnosti o tomto systém jsou v kapitole P°íkazový °ádek.

Controller

(V mé práci assembly EasterController.dll, MazeController.dll, VehicleController.dll) Tyto soubory jsou sou£ástí scény a obsahují její funk£ní logiku. Více o moºnostech systému controller· je rozepsáno ve zvlá²tní kapitole. Kaºdý controller implementuje rozhraní

IController.

5.6 Diagramy a popis t°íd Následující kapitola obsahuje diagramy t°íd a jejich stru£ný popis, ve kterém je uvedeno základní pouºití a p°ípadné vztahy mezi t°ídami. Podrobný popis kaºdé metody a vlastnosti je k dispozici ve vygenerované elektronické dokumentaci ke zdrojovým kód·m, která se nachází na p°iloºeném CD.

5.6.1 Základní objekt Abstraktní t°ída t°ídu fyzikálního

IObjectBase je základem pro v²echny objekty, které jsou ve scén¥. Obaluje t¥lesa CBody, slouºí jako mezivrstva mezi 3D prostorem ve fyzikálním engine

a 2D prostorem zobrazování. V²echny hlavní metody a vlastnosti jsou virtuální, £ehoº se m·ºe vyuºívat v potomcích t°ídy. Typické vlastnosti, které lze nastavovat z XML souboru scény jsou popsány v kapitole Vlastnosti objekt·.

Metody, které stojí za zmínku, jsou:

• public Matrix DisplayMatrix • public RecreateBody()

get;

Vrací matici zobrazení pro WPF.

Znovu vytvo°í fyzikální t¥leso. Pouºívá se po zm¥n¥ typu

objektu (static, transparent, dynamic).

• public void Init()

Automaticky volá objekt scény Scene p°i p°idávání objektu do

kolekce.

• public Matrix GetDisplayMatrix(Matrix3D m, Vector offset)

Statická metoda,

která p°evede 3D matici na 2D s parametrem 2D vektoru vychýlení od st°edu.

5.6.2 Scéna a pomocné t°ídy Scene, která je zárove¬ kolekcí obPhysicsControl. Obaluje fyzikální patrné, ºe Scene obsahuje i paletu barev,

Tento diagram znázor¬uje jádro celého programu: T°ídu jekt·

IObjectBase

a datovým zdrojem pro kontrolní prvek

sv¥t a zpracovává jeho zp¥tná volání. Z diagramu je

zvukový podsystém, nahrávání scény, apod. Instance scény se také p°edává do controlleru p°i jeho vytvá°ení. Pro popis vlastností doporu£uji kapitolu Vlastnosti scény.

28

KAPITOLA 5.


Obrázek 5.2: Diagram základního objektu

KAPITOLA 5.


Obrázek 5.3: Diagram scény a pomocných t°íd

29

30

KAPITOLA 5.


Obrázek 5.4: Diagram palety barev

• public void Restart()

Zru²ení v²ech objekt· a jejich op¥tovné nahrání.

• public IObjectBase[] FindByRegexp(string)

Vrátí seznam objekt· ze scény,

jejichº jména odpovídájí regulárnímu výrazu.

• public void Update()

Aktualizuje fyzikální scénu. Tuto metodu volá gracký

podsystém p°i poºadavku na p°ekreslení.

5.6.3 Paleta barev T°ída prvek

Palette je kolekcí typ· PaletteColor a jako taková slouºí jako datový zdroj pro kontrolní PaletteControl. Její hlavní vlastností je aktuáln¥ vybraná barva. Vlastnosti kaºdé barvy

jsou popsány v kapitole Vlastnosti scény.

5.6.4 Souborový manaºer Souborový manaºer má za úkol spravovat cesty k soubor·m. V p°ípad¥ otevírání komprimovaného souboru

*.icb

ho rozbalí do do£asného adresá°e a upraví cesty tak, aby odpoví-

daly tomuto adresá°i. P°i ukon£ování práce s omalovánkami smaºe v²echny do£asné soubory. V p°ípad¥ otev°ení scény z adresá°e pouze zm¥ní cestu na tento adresá°.

Metody:

• public bool CheckExistence() v²echny soubory scény.

P°i nahrávání scény zjistí, zda jsou k dispozici

KAPITOLA 5.


31

Obrázek 5.5: Diagram souborového manaºera

5.6.5 Zvukový podsystém Jednoduchý zvukový podsystém umoº¬uje adresovat zvuk na základ¥ p°ezdívky, která se uvádí v XML souboru scény. Zvukové soubory lze p°ehrávat, p°ehrávat ve smy£ce a zastavovat. Ke správné funk£nosti je pot°eba mít nainstalovaný Windows Media Player 10, protoºe t°ída

MediaElement, která jej pouºívá pro p°ehrávání zvuk·, ho vyºaduje. Formát p°ehraných multimédií poté závisí na kodecích nainstalovaných v opera£ním systému.

5.6.6 Argumenty událostí Jednotlivé objekty, scéna a controller, jsou propojeny systémem událostí, které dávají controlleru v¥d¥t, co se na scén¥ d¥je. V²echny události jsou sepsané v kapitole Moºnosti controller·. Na tomto diagramu jsou vid¥t argumenty, které se p°edávají v ur£itých událostech.

• ObjectBaseEventArgs

Obecný argument obsahující objekt, kterého se událost týká.

• RequestBrushEventArgs

Argumenty události, která se vyvolává p°i zm¥n¥ pozadí ob-

jektu. Zm¥nu lze zru²it (zd¥d¥no z

• LeaveObjectBaseEventArgs

CancelEventArgs).

Argumenty události, která °íká, ºe se objekt dostal mimo

viditelnou scénu. M·ºeme zakázat jeho zru²ení a nastavit mu novou pozici.

• CollisionEventArgs

Argumenty události vyvolané p°i kolizi dvou objekt·. Obsahuje

oba dva objekty a rychlost, jakou se srazily.

32

KAPITOLA 5.


Obrázek 5.6: Diagram zvukového podsystému

5.7 Volba implementa£ního prost°edí 5.7.1 Cílový opera£ní systém Interaktivní omalovánky jsou jako program ur£eny pro d¥ti, u kterých p°edpokládám znalost opera£ního systému Windows. Ze statistik sluºby pro sledování náv²t¥vnosti internetových stránek Navrcholu.cz z dubna 2008 vyplývá, ºe systém Windows XP pouºívá 83,42 % a Windows Vista 8,08 % uºivatel· £eského Internetu. Myslím, ºe mohu toto velké procento vztáhnout i na prost°edí klasických neinternetových program· a prohlásit, ºe pro d¥tské uºivatele je, aº na výjimky, dominantní platforma Windows XP a vy²²í, a ostatní opera£ní systémy nemusím podporovat.

5.7.2 Volba programovacího jazyka a vývojového prost°edí P°i volb¥ programovacího jazyka jsem se rozhodoval mezi C# a C++. O jazyku Java jsem neuvaºoval, protoºe ho ovládám pouze povrchov¥. Programy vytvo°ené v jazyku C++ jsou obecn¥ rychlej²í z d·vodu jeho pom¥rné nízkoúrov¬ovosti, ale vývoj je pomalej²í a náchyln¥j²í na chyby programátora. Zvolil jsem jazyk C#, na který mám certikát (Microsoft 70316: Developing and Implementing Windows-based Applications with Microsoft Visual C# .NET and Microsoft Visual Studio .NET). Vývoj v tomto jazyku je rychlý a díky absenci ukazatel· (ve standardním pouºití) mén¥ náchylný na chyby. Díky výkonu sou£asných po£íta£· jsou rozdíly v programech, které jsou v nativním kódu procesoru, a programech v mezikódu, tém¥° k nerozeznání. K jazyku C# jsem zvolil knihovnu .NET Framework 3.0 (WinFX), která obsahuje knihovny pro práci s Windows

KAPITOLA 5.


Obrázek 5.7: Diagram argument· událostí

33

34

KAPITOLA 5.


Presentation Foundation. Více o této technologii uvádím v kapitole Volba zp·sobu zobrazování. Vzhledem k vý²e uvedenému byla volba vývojového prost°edí jednozna£ná. Pouºil jsem Microsoft Visual Studio 2005 Professional, jehoº originální licenci vlastním. Bohuºel v této verzi není podpora jazyka XAML, který pouºívá Windows Presentation Foundation. Musel jsem pouºít Microsoft Visual Studio 2005 CTP Extensions for .NET Framework 3.0, který je ke staºení z adresy http://www.microsoft.com/downloads/.

5.7.3 Dal²í pouºitý software •

Software pro správu verzí Subversion (http://subversion.tigris.org/)

•

Roz²í°ení Windows o podporu Subversion: Tortoise SVN (http://tortoisesvn.tigris.org/)

•

Analýza a diagramy: Enterprise Architect (http://www.sparxsystems.com.au/)

•

Psaní dokumentace: DokuWiki (http://wiki.splitbrain.org/wiki:dokuwiki) nainstalovaná na lokálním webovém serveru Apache 2.0 (http://www.apache.org/)

•

AT Xová distribuce pro Windows: MiKT X 2.7 (http://miktex.org/) L E E

•

AT Xový editor pro Windows: LEd (http://www.latexeditor.org/) L E

•

Drobné gracké úpravy: Gimp (http://www.gimp.org/), Paint.NET (http://www.getpaint. net/)

•

Generování nápov¥dy ke zdrojovým kód·m: Sandcastle + Sandcastle Help File Builder (http://www.codeplex.com/SHFB)

5.8 Volba zp·sobu zobrazování Zobrazování je velmi d·leºitá £ást mé práce. Vykreslování by m¥lo být rychlé, aby zbyte£n¥ neubíralo výkon ostatním £ástem programu. V úvahu p°icházelo n¥kolik zp·sob·: Klasický .NET Framework verze 1.0 2.0 pouºívá k vykreslování WinAPI nebo GDI. Tento zp·sob rastrového vykreslování pat°í k pomalej²ím a znamenalo by to naprogramovat mechanismy, které by vykreslovaly tvary podle zadání. Ve výsledku by se jednalo o nadstavbu nad jednoduché vykreslovací funkce. Dal²í moºností bylo pouºití n¥jaké gracké knihovny, které vyuºívají zpravidla po£íta£ové hry. Pracují s rastrovou grakou a jsou to nap°. SDL, Allegro, OpenGL, DirectX atd. Tyto knihovny by znamenaly zrychlení vykreslování, ale op¥t by tém¥° ne°e²ily tvorbu tvar·. Nevýhodou by byla také problematická portace do webového prost°edí. Ale naopak bezproblémová portace pro ostatní platformy. Vzhledem k plánovanému vyuºívání pouºití d¥tmi uvaºuji jako cílovou platformu pouze Windows. Technologií, kterou jsem se rozhodl pouºít, je Windows Presentation Foundation (http:// en.wikipedia.org/wiki/Windows_Presentation_Foundation) dále jen WPF, coº je technologie rmy Microsoft, která zaji²úje vektorové vykreslování graky p°es rozhraní DirectX a umoº¬uje separovat aplika£ní vrstvu od prezenta£ní. K dispozici je v .NET Frameworku od verze 3.0. Pomocí XML zna£kovacího jazyka XAML je moºno denovat ve²kerý vzhled aplikace nezávisle na kódu, styly pro prvky vytvo°ené dynamicky a vazba na datové zdroje. Tento systém umoº¬uje stejný zp·sob práce, jako znají vývojá°i a designé°i webových stránek. Velkou výhodou této technologie je i moºnost snadné portace pod technologii Silverlight. Nemén¥ d·leºitým d·vodem volby byla moºnost nau£it se novou technologii.

KAPITOLA 5.

35


5.9 Volba knihovny pro fyzikální simulace Knihovna pro zpracování fyzikálních reakcí (fyzikální engine) je základ interakce mých omalovánek. Její výb¥r jsem velmi zvaºoval a je²t¥ v dob¥ implementace jsem m¥l 2 favority. Základní p°ehled t¥ch nejb¥ºn¥j²ích najdeme na http://www.gphysics.com/physics-engines .

rigid body collision) a následné

V²echny umí v podstat¥ to samé: Detekci kolizí pevných t¥les (

fyzikální reakce na základ¥ p·sobících sil, dále r·zné druhy spojení mezi jednotlivými t¥lesy

joins) a ostatní pomocné funkce, nap°. pro fyziku automobil· a jednoduchých mechanism·.

(

O kvalit¥ fyzikálních engine rozhoduje jeden d·leºitý faktor, a to je stabilita. Znamená to stav ustálení objekt·, na které neustále p·sobí gravita£ní síla. P°íkladem mohou být kostky, které jsou naskládány na sebe. Na spodní kostky p·sobí síly z horních kostek a výsledkem m·ºe být rozkmitání a jejich následný pád. Vzhledem k pouºitému jazyku C# a platformy .NET jsem up°ednost¬oval engine, který je napsán v tomto jazyku a nebo má pro n¥j napsanou obalující knihovnu (

wrapper). Implementaci

vlastního jsem z £asových d·vod· zavrhl. Moje kritéria výb¥ru splnily následující 3 fyzikální engine:

5.9.1 Physics2D C# Adresa:

http://physics2d.googlepages.com/home

Physics2D C# je fyzikální engine od Jonathana Marka Portera. Je ²í°en pod MIT Licencí. Obsahuje vlastní matematickou knihovnu a dal²í pomocné t°ídy. Jeho vývoj je na Internetu datován od února 2007. Poslední verze v dob¥ psaní tohoto textu je 1.5.0.0 z prosince 2007. Celý engine je napsán v jazyce C# s optimalizacemi pro .NET platformu. Obsahuje t°ídy pro

joins) a dal²í funkce. P°i testování demo projektu

práci s 2D obrazci, základní propojení objekt· (

byl procesor i p°es jednoduchou scénu velmi vytíºen.

5.9.2 Farseer Physics XNA Adresa:

http://www.codeplex.com/FarseerPhysics

Farseer Physics Engine je engine, který je napsán v jazyce C# a pro .NET platformu a je ur£en speciáln¥ pro technologie XNA a Silverlight. Je uvoln¥n pod Microsoft Permissive Licencí. Publikován byl v °íjnu 2007 a zatím na n¥m nebyly ud¥lány ºádné zm¥ny. Má velmi jednoduché pouºití, které vývojá°i jednoduchých her t¥chto technologií jist¥ ocení. Má 4 základní druhy propojení objekt· (

joins) a p°eddenované ovlada£e sil pro r·zné pouºití. Obsahuje jen pár

optimalizovaných matematických funkcí ostatní p°ebírá z komplexn¥j²ího XNA frameworku, coº m·ºe být v n¥kterých p°ípadech, jako je ten m·j, omezující. Velkou nevýhodou je také tém¥° neexistující dokumentace.

5.9.3 Newton Game Dynamics Adresa:

http://www.newtondynamics.com/

C# Wrapper:

http://pagesperso-orange.fr/ylio/Programmation/NewtonWrapper.zip

36

KAPITOLA 5.


Newton Game Dynamics je fyzikální engine, který pouºívá pom¥rn¥ velké mnoºství po£íta£ových her. Jeho historie sahá do dubna 2004, kdy bylo poprvé uve°ejn¥no SDK. Jedná se o DLL kni-

C# wrapper

hovnu, která se C# a .NET platformou komunikuje pomocí obalující knihovny (

assembly),

kterou napsal Bernard Lionel. Sám engine je hodn¥ rychlý (díky tomu, ºe DLL

není zpracovávané .NET platformou) a stabilní. Obsahuje v¥t²í mnoºství druh· spojení objekt·

joins), se kterými je programování fyziky na trochu vy²²í úrovni. Je velmi dob°e zdokumen-

(

tován, mimo ociální dokumentaci nap°. na neociální wiki (http://walaber.com/newton_wiki/ index.php?title=Main_Page).

5.9.4 Záv¥r výb¥ru fyzikálních knihoven Ve výb¥ru fyzikálního engine hraje roli hlavn¥ rychlost a stabilita, a tou vyniká, z vý²e uvedených, Newton Game Dynamics. Ten uº jsem pouºil v jiné mé práci, a proto jsem m¥l zku²enosti s jeho implementací. Obalující knihovna ( hovny XNA, ale t°ídy ze jmenného prostoru

C# wrapper assembly) navíc nepouºívá funkce kni-

System.Windows.Media a System.Windows.Media.Media3D

z .NET Frameworku 3.0, který jsem se rozhodl pouºít. Obalující knihovnu fyzikálního engine by nem¥l být problém p°ená²et do dal²ích verzí .NET frameworku, a tím by m¥la být zaji²t¥na kompatibilita do budoucnosti.

KAPITOLA 6.

37

REALIZACE

6 Realizace 6.1 Výchozí bod implementace P°i výb¥ru knihovny fyzikální simulace pro jazyk C# jsem na Internetu narazil na zajímavé demo WPF Physics, které Chris Cavanagh uve°ejnil na svém blogu http://chriscavanagh.wordpress. com/ [11]. Jedná se o zp·sob, kde je kolekce (dynamické pole) napojena jako datový zdroj

Data source) vizuálního ovládacího prvku formulá°e. Vzhled jednotlivých poloºek kolekce je

(

podle datového typu ur£en ²ablonou v jazyce XAML. Formulá°ový prvek zaji²úje vykreslování a upravená kolekce propojení s fyzikálním engine. Tento zp·sob se mi zalíbil natolik, ºe z n¥ho vycházím ve své práci. Abych mohl tuto my²lenku pouºít, musel jsem zm¥nit objektový návrh tak, aby byl více univerzální a mohl jsem postupn¥ roz²i°ovat funkcionalitu i dal²í druhy objekt·. Denici objekt· jsem p°esunul z kódu do externího XML souboru a umoºnil tak modikaci scény bez kompilace programu. Vytvo°il jsem systém událostí a controlleru knihovny, která ur£uje funkcionalitu kaºdé scény. Vyuºil jsem více moºností fyzikální knihovny a získal tak nap°. informace o kolizích. V samém záv¥ru jsem program ozvu£il. Z p·vodního kódu Chrise Cavanagha z·stala nakonec pouze my²lenka rozd¥lit zobrazování do formulá°ového prvku s ²ablonami vzhledu jednotlivých objekt· a propojení s fyzikálním engine

Data source). Os-

nechat na kolekci objekt·, která je formulá°ovému prvku datovým zdrojem (

tatní jsem musel zm¥nit, aby v²e zapadalo do konceptu univerzálních omalovánek, které jsou denované externím XML souborem.

6.2 Controller Slovo controller pouºívám ve své práci k ozna£ení dynamické knihovny (terminologií .NET je to

assembly), která se na£ítá spolu se scénou a obsahuje její °ídící logiku. Samotná scéna a

kaºdý objekt vyvolává ur£ité události, na které controller m·ºe reagovat. Dále m·ºe nastavovat specické vlastnosti objekt·, vytvá°et nové, p°ehrávat zvuky, apod. V²echny objekty ve scén¥ jsou adresovatelné podle jména, které se denuje XML souboru scény. Jako p°íklad controlleru uvedu velmi jednoduchou situaci: Po kliknutí na objekt, který se jmenuje nap°. kole£ko se daný objekt vybarví £ervenou barvou. Implementace controlleru by vypadala tak, ºe nap°ed vytvo°ím obsluhu události P°idání objektu do scény a do ní napí²i podmínku, která testuje název p°idávaného objektu. Pokud se rovná slovu kole£ko, tak na tento objekt napojím obsluhu události kliknutí my²i. V obsluze potom pouze nastavím vlastnost Pozadí na £ervenou. Tím jsem dosáhl vý²e uvedeného chování omalovánek. Popsaný systém ovládání scény je velmi d·leºitý, aby byla zachována univerzálnost omalovánek. Logika programu není na pevno, ale je ji moºné m¥nit v závislosti na scén¥.

6.2.1 Moºnosti controller· T°ídy scény, palety a objekt· obsahují události, které se mohou napojit v controlleru. Tato kapitola obsahuje seznam událostí a jejich stru£ný význam. Jedná se tedy o p°ehled, na co mohou controllery reagovat. T°ída

Scene:

• LoadingCompleted

Nahrávání scény je ukon£eno (prázdné argumenty).

38

KAPITOLA 6.

• ObjectLoaded • ObjectAdded

REALIZACE

Objekt byl nahrán (v argumentech je objekt, který je nahrán).

Objekt byl p°idán do kolekce scény (v argumentech je objekt).

• ObjectLeaveScene

Objekt opustil viditelnou scénu (v argumentech je objekt, moºnost

zakázat automatické zru²ení a nastavit novou pozici).

• Collision

Objekt koliduje s jiným (v argumentech 2 objekty, které spolu kolidují

+

rychlost jejich sráºky).

T°ída

IObjectBase:

• MouseDown

Na objektu bylo stisknuto tla£ítko my²i (v argumentech informace o my²i

MouseEventArgs).

• MouseUp

Na objektu bylo uvoln¥no tla£ítko my²i (v argumentech informace o my²i

MouseEventArgs).

• MouseMove

Na objektu bylo pohnuto kurzorem my²i (v argumentech informace o my²i

MouseEventArgs).

• BackgroundChanging Objektu byla p°i°azena nová výpl¬ pozadí (v argumentech p°edávaná výpl¬, kterou lze zru²it).

T°ída

Palette:

• SelectColor Poºadavek na výb¥r barvy, který lze zru²it (v argumentech vybraná barva palety).

Scene. M·ºe také vyuºít FindByRegexp k vyhledání skupiny objekt· na základ¥ regulárního výrazu. V objektech

Controller má p°ístup ke kaºdému objektu scény pomocí indexeru t°ídy metodu

potom m·ºe nastavovat v²echny ve°ejné vlastnosti a volat ve°ejné metody. Seznam hlavních vlastností objekt· je uveden v kapitole Vlastnosti objekt·.

6.3 Vlastnosti scény Jak jsem se jiº zmi¬oval v popisu, koncept mých interaktivních omalovánek spo£ívá v obecn¥ navrºeném prost°edí, které zpracovává scénu uloºenou ve specickém XML souboru. V samotném XML souboru jsou denované vlastnosti celé scény:

•

Velikost scény pro fyzikální simulace

•

Velikost gravita£ní síly

•

Vektor gravita£ní síly

•

Kurzor my²i

•

Pozadí celé scény

Pr·hledné není denována ºádná výpl¬

KAPITOLA 6.

39

REALIZACE

Barevná výpl¬ tvo°í ji jedna barva ve formátu

#RRGGBBAA

(hexa hodnoty: 2 znaky

£ervená, zelená, modrá a pr·hlednost)

Obrázek na st°ed Dlaºdice z obrázk· umoº¬uje denovat rozm¥ry dlaºdice Obrázek roztaºený po celé plo²e

Dálé je v souboru denována paleta. Kaºdá barva má následující vlastnosti:

•

Název

•

Popis barvy, který se zobrazí, pokud je kurzor my²i nad barvou v palet¥

•

Barva ve formátu

#RRGGBBAA

(hexa hodnoty: 2 znaky £ervená, zelená, modrá a pr·hled-

nost)

V XML souboru scény je denován seznam soubor· pro interní manaºer, který zaji²úje správné cesty, rozbalování a p°ípravu v²ech multimediálních soubor·, které jsou ve scén¥ pouºity. Poloºka souboru je denována:

•

Typem

•

graphics sound cursor controller objects

Názvem souboru

Pro snadn¥j²í pouºití zvuk· je ve scén¥ denován seznam, který svazuje název souboru se jménem. V souboru scén je odkaz na jméno souboru knihovny (Controller), která má na starosti jednoduchou, nebo i sloºit¥j²í funk£ní logiku ve scén¥. Více tento princip a jeho moºnosti rozebírá kapitola Controller. Hlavní £ást souboru tvo°í seznam objekt· s vlastnostmi, které jsou popsané v kapitole Vlastnosti objekt·.

6.4 Vlastnosti objekt· Kaºdý objekt v podkladu bude denován následujícími vlastnostmi:

•

Jméno Objekt podle n¥j m·ºe být identikován v logice scény.

•

Automatické vytvo°ení p°i nahrávání.

•

Stati£nost Na statické objekty nebude p·sobit gravita£ní síla.

•

Transparentnost Transparentní a zárove¬ statické objekty nejsou zapojené do fyzikálních simulací a jsou pouze zobrazené.

40

KAPITOLA 6.

REALIZACE

•

Dynami£nost Objekt je zapojen do fyzikálních simulací a p·sobí na n¥j gravita£ní síla.

•

Barva a tlou²´ka okraj· M·ºe nazna£ovat barvu, kterou se má objekt vybarvit.

•

Styl výpln¥ Výpl¬, kterou má objekt na za£átku:

Pr·hledná není denována ºádná výpl¬. Barevná výpl¬ tvo°í ji jedna barva ve formátu

#RRGGBBAA

(hexa hodnoty: 2 znaky

£ervená, zelená, modrá a pr·hlednost).

Obrázek na st°ed. Dlaºdice z obrázk· umoº¬uje denovat rozm¥ry dlaºdice. Obrázek roztaºený po celé plo²e objektu.

•

Hmotnost.

•

Vektor rozloºení hmotnosti.

•

Výchozí pozice.

•

Výchozí rotace.

•

Libovolný po£et parametr· typu °et¥zec znak·, které by mohly najít uplatn¥ní v logice scény.

6.5 Tvorba scény Pokud chceme vytvo°it scénu pro omalovánky, je pot°eba pom¥rn¥ náro£ný postup. V této kapitole se ho pokusím objasnit na jednoduchých p°íkladech. V²echny multimediální soubory, které se ve scén¥ pouºívají, se nahrávají do stejného adresá°e, jako soubor

scene.xml,

ze kterého se scéna na£ítá. Pokud je tvorba scény hotová, m·ºe se

.icb (Interactive Coloring formát .icb, tak i samotný

adresá° zabalit pomocí ZIP komprese do jednoho souboru s p°íponou

Book). Program omalovánek je schopný na£íst jak komprimovaný

adresá° se scénou. Více o parametrech na£ítání je popsáno v kapitole P°íkazová °ádka, kde je uveden p°íklad.

6.5.1 Soubor scene.xml Soubor

scene.xml

obsahuje v²echny pot°ebné informace o scén¥. Jeho název je pevn¥ daný.

Nyní se podíváme na jednotlivé £ásti tohoto souboru a uvedu ke kaºdé p°íklad.

6.5.1.1 Obecné informace V této £ásti, zabalené do elementu

, se nastavuje informace o autorovi a popisu scény.

V sou£asné verzi se tyto informace nikde nepouºívají a vyuºití budou mít aº v dal²ích verzích, kde bude seznam scén, ze kterých bude uºivatel vybírat.

<description text="Easter scene" />

KAPITOLA 6.

41

REALIZACE

6.5.1.2 Pouºité soubory Tuto £ást pouºívá interní souborový manaºer, který p°i na£ítání scény zkontroluje, jestli jsou v²echny soubory k dispozici, a pokud se jiná £ást na soubor odkazuje, vrací vºdy správnou cestu. Na tomto míst¥ musí být uvedeny v²echny soubory, které se ve scén¥ pouºívají. Atribut poloºky souboru

type

se pouºívá v této verzi souborového manaºera pouze jako informace pro autora

scény.

6.5.1.3 Nastavení scény Popis £ásti nastavení scény bude lep²í uvést výpisem element· a jejich atribut·:

<settings> <size width="20" height="8" /> <cursor filename="cursor.cur" /> <stretch filename="paper.png" /> gravity

V atributu

vector

se denuje sm¥r a v atributu

nedenujeme vektor gravitace kolmo dol·

size

velikost gravitace. Pokud

(0, 1), ale nap°. ²ikmo, dostaneme efekt podobný

foukajícímu v¥tru.

size

Udává velikost fyzikální scény, protoºe okno programu a fyzikální sv¥t pouºívají jiné m¥°ítko.

background

Pozadí scény. Podrobnosti lze nalézt v podkapitole Pozadí scény a objekt·.

6.5.1.4 Paleta barev Paleta barev se denuje seznamem poloºek, ve kterých je uvedeno jméno barvy (atribut

name),

které se má zobrazit, popis, který se zobrazuje, kdyº je kurzor my²i nad barvou a nakonec je

#RRGGBBAA, kde RR, GG a BB je £ervená, zelená a modrá sloºka barvy v hexa formátu od 00 do F F . Sloºka AA zna£í pr·hlednost, kde hodnota 00

to samotná barva. Ta se udává ve formátu je úpln¥ transparentní.

<palette>

42

KAPITOLA 6.

REALIZACE

6.5.1.5 Objekty Seznam objekt· je základ denice celé scény. Kaºdý objekt m·ºe mít sv·j specický formát v XML, ale v tomto p°ehledu uvedu pouze spole£né vlastnosti kaºdého objektu. Pro podrobnosti o sloºit¥j²ích objektech doporu£uji nahlédnout do soubor·

scene.xml

u jiº vytvo°ených scén.

Atribut

typename

elementu

object

udává název t°ídy, která se má vytvo°it. V sou£asné dob¥

jsou to t°ídy:

• ColoringBook.Objects.Rectangle

Obdélník.

• ColoringBook.Objects.Ellipse

Elipsa.

• ColoringBook.Objects.Polygon

N-úhelník (denuje se seznam bod·).

• ColoringBook.Objects.Vehicle

Automobil (denuje se seznam bod· a kola).

• ColoringBook.Objects.Tire Atribut

name

Kolo automobilu.

identikuje jednozna£n¥ objekt v celé scén¥,

type

m·ºe nabývat následujících

hodnot:

• dynamic • static

Objekt je zapojen do fyzikálních simulací a p·sobí na n¥j gravita£ní síla.

Objekt je statický, reaguje fyzikáln¥ s ostatními, ale nep·sobí na n¥j gravita£ní

síla.

• transparent

Stejn¥ jako statický, ale nereaguje s ostatními objekty.

Ostatní podelementy uvedu pouze vý£tem:

• position

Pozice objektu.

• rotation

Rotace ve stupních.

KAPITOLA 6.

• size

Velikost.

• weight

Hmotnost a vektor jejího rozloºení.

• background • pen

43

REALIZACE

Pozadí.

Barva a tlou²´ka £áry obrysu.

6.5.1.6 Denice pouºití controlleru Pouºití controlleru ve scén¥ se provádí elementem

controller, jak to uvádí následující p°íklad:

6.5.1.7 Seznam zvuk· V této £ásti denujeme názvy zvuk· tak, aby byly spojené se jménem souboru. Jedná se o jednoduchý seznam v následujícím tvaru:

<sounds> <sound filename="go.wav" name="go" /> <sound filename="fall.wav" name="fall" /> <sound filename="color.wav" name="color" />

6.5.1.8 Pozadí scény a objekt· Element

background scény nebo objekt· m·ºe obsahovat následující elementy s denicí pozadí:

•

Pozadí je tvo°eno jednou barvou.

• <stretch filename="paper.png" />

Roztaºený obrázek po celé plo²e scény/objektu.

•

Dlaºdice s denicí

opakování.

•

Obrázek umíst¥ný na st°ed.

6.5.2 Tvorba controlleru Class Library p°idají reference na pot°ebné Common.dll, ve které jsou denovány v²echny pomocné t°ídy. V tomto projektu se vytvo°í t°ída pojmenovaná Controller odvozená od IController, a to ve jmenném prostoru ColoringBook. V druhém kroku se pomocí vlastnosti Scene, která je sou£ástí bázové t°ídy IController, naváºí události na v²echny pot°ebné objekty

Controller se vytvá°í tak, ºe se v projektu typu

knihovny a hlavn¥ na knihovnu Interaktivních omalovánek

a scénu, a napí²e se funk£ní logika. Na konec se projekt controller zkompiluje a p°iloºí k samotné scén¥. Podrobnosti o událostech a vlastnostech, které m·ºe objekt vyuºívat, jsou v kapitole Moºnosti controller·. Konkrétní zdrojový kód zde nemá smysl uvád¥t, protoºe pro p°edstavu lze vyuºít controllery scén, které jsem p°ipravil jako prezentaci.

44

KAPITOLA 6.

REALIZACE

6.6 Zajímavé £ásti implementace 6.6.1 Úprava obalující knihovny fyzikálního engine Bernard Lionel ve své obalující knihovn¥ (

wrapperu) pouºil asociativní pole (ha²ovací tabulku),

ve kterém byl klí£ hodnota ukazatele, který intern¥ pouºívá fyzikální engine a hodnota byla instance obalující t°ídy. Tento jednoduchý zp·sob umoº¬uje propojení mezi nativním kódem pouºívajícím ukazatele a mezikódem platformy .NET. Bohuºel jsem v kódu knihovny Bernarda Lionela na²el chybu, kterou jsem musel opravit. Ta se týkala zp·sobu p°idávání objekt· do p°evodních asociativních polí. Bernard Lionel pouºíval metodu

HashTable.Add(object key, object value),

která vyvolá výjimku, pokud klí£

uº v ha²ovací tabulce je. Tento zp·sob je nevhodný, protoºe je pom¥rn¥ £asté, ºe se objekt vytvo°í, p°idává a odebírá se z fyzikálního engine bez toho, aby byl pokaºdé ru²en a vytvá°en znovu. P°idání objektu do p°evodní ha²ovací tabulky jsem vy°e²il p°es její indexer, který má tu vlastnost, ºe pokud jiº existuje klí£, tak pouze p°epí²e odpovídající hodnotu:

key] = value.

HashTable[object

V obalující knihovn¥ jsem p°i práci nena²el jiné chyby a práce s ní byla intuitivní a o mnoho jednodu²²í, neº obvyklý neobjektový p°ístup k fyzikálnímu engine.

6.6.2 Úprava kolekcí Ve své práci jsem pouºíval zpravidla 2 druhy kolekcí: Jednoduché dynamické pole (t°ídy

ObservableCollection

Scene a Palette), které lze navázat jako datový zdroj a dále asociativní pole (ha²ovací Dictionary (t°ídy Sounds a FileManager). Obsah t¥chto kolekcí jsem plnil p°i na£ítání

tabulku)

scény a jakékoli pozd¥j²í úpravy, jako mazání prvk·, apod., jsou neºádoucí. Postupoval jsem tedy tak, ºe jsem p°ekryl metody, které kolekci upravují novými se stejnou funkcionalitou, ale s privátním zp·sobem p°ístupu. Tím jsem dosáhl toho, ºe kolekci nelze z vn¥j²ku upravovat. P°epsal jsem tyto metody:

• void Clear()

Smazání v²ech prvk· v kolekci.

• void Remove(object item)

Smazání konkrétního prvku.

• void RemoveAt(int index)

Smazání prvku na ur£ité pozici.

• void Add(objet item)

P°idání prvku.

Dále jsem p°epsal indexer kolekce tak, aby umoº¬oval pouze £tení.

6.6.3 P°íkazová °ádka O parametry p°íkazové °ádky se stará t°ída

CommandLineSettings,

vzor Singleton. Její jedinou instanci lze získat skrze statickou vlastnost

která pouºívá návrhový

CommandLine. Obsahuje

Scene typu string, která ur£uje název souboru scény nebo adresá°e, který se nahraje, Fullscreen typu bool, která znamená zp·sob zobrazení okna.

vlastnosti a

Pro obsluhu parametr· p°íkazové °ádky jsem pouºil Command Line Parser od Petera Hallama, který ho uve°ejnil na svém blogu http://blogs.msdn.com/peterhal/. Jeho princip je velmi jednoduchý: Ur£itá ve°ejná prom¥nná t°ídy se ozna£í atributem, ve kterém se uvede, kolikrát

KAPITOLA 6.

45

REALIZACE

se m·ºe na p°íkazové °ádce vyskytnout, jaké je dlouhé jméno a zkratka p°epína£e. Po zavolání metody

Parser.ParseArguments

se pomocí reexe doplní hodnoty do prom¥nných podle hod-

not na p°íkazovém °ádku. P°idání nového parametru je prosté: Sta£í p°idat dal²í prom¥nnou

string, int, uint, bool, enum a nebo pole z t¥chto typ· a ozna£it ji atributem Argument. T°ída Parser má navíc jednu dobrou vlastnost dokáºe automaticky sestavit text nápov¥dy,

typu

jak mají správn¥ argumenty vypadat. P°íklad parametr· programu:

ColoringBook.exe /s:Scenes/Easter.icb /f

otev°e scénu uloºenou v souboru Easter.icb

a zobrazení p°es celou obrazovku.

6.6.3.1 Ozvu£ení programu Pro ozvu£ení programu jsem nejprve pouºíval t°ídu

System.Media.SoundPlayer,

která nabízí

velmi snadné p°ehrávání zvuku synchronn¥ (ve stejném vláknu) a asynchronn¥ (v odd¥leném vláknu). Synchronní p°ehrávání pozastaví aktuální vlákno, dokud se zvuk nep°ehraje. Asynchronní nikoli, ale díky tomu, ºe se p°i p°ehrávání nového zvuku zastaví p°edchozí, je tento zp·sob nevhodný.

MediaElement, která pro p°ehrávání pouºívá intern¥ Windows Media Player 10 .wav, .wma nebo .mp3. Formát soubor·, které dokáºe t°ída MediaElement p°ehrát, záleºí na nainstalovaných kodecích v systému. Pro mnou vytva°ené scény jsem pouºil výhradn¥ formát .wav. Zvolil jsem t°ídu

a vy²²í. Díky tomu m·ºe být jako zvuk pouºit soubor

6.6.3.2 Tvorba instala£ního programu Instala£ní program jsem tvo°il pomocí projektu

Setup Project,

který je sou£ástí nabídky pro-

jekt· ve Visual Studiu 2005. Vytvá°í se tak, ºe se do tohoto projektu nastaví výstup z jiného, nastaví se závislosti na softwaru, který musí být nainstalovaný, a p°i sestavování projektu se vytvo°í soubory

Setup.exe

a instala£ní

.msi.

V závislostech lze nastavit nap°. verzi .NET Frameworku, kterou program pot°ebuje ke své £innosti. Pokud není .NET Framework nalezen a je k dispozici p°ipojení k Internetu, instala£ní program ho stáhne a nainstaluje. Tím je zaji²t¥no v²e pot°ebné pro správnou funkci programu. P°i nastavení závislosti na .NET Frameworku 3.0 jsem se setkal s chybou p°i sestavování, kterou jsem vy°e²il podle blogu http://blog.kirupa.com/?p=73 tak, ºe jsem nahrál distribu£ní balí£ky .NET Frameworku 3.0 do ur£itého adresá°e. Z výchozí instalace tam chyb¥ly.

6.6.4 Pouºité návrhové vzory 6.6.4.1 Proxy Proxy

Návrhový vzor Proxy vkládá mezi jeden objekt, který nabízí n¥jakou sluºbu, a druhý,

který ji poºaduje, n¥jaký objekt (zástupce, náhradník proxy), který slouºí jako mezivrstva. Návrhový vzor Proxy jsem pouºil zejména jako mezivrstvu mezi fyzikálním engine Newton a zobrazováním. Fyzikální engine totiº pracuje s trojrozm¥rným prostorem a zobrazování pouºívá pouze rozm¥ry dva. Díky vzoru Proxy jsem mohl do svých objekt· zaobalit dal²í funkcionalitu, která je tak implementována pouze na jednom míst¥ a má p°ístup k niº²í vrstv¥ fyzikálnímu engine. T°ídy, kde je vzor pouºit:

46

KAPITOLA 6.

• IObjectBase • Scene

Proxy ke t°íd¥

Proxy ke t°íd¥

CBody

CWorld

REALIZACE

(fyzikální objekt).

(fyzikální sv¥t).

6.6.4.2 Abstract factory Abstract factory

Návrhový vzor Abstract factory je takzvan¥ tvo°ivý objektový vzor. Z to-

hoto za°azení vyplývá, ºe je ur£en pro vytvá°ení instancí objekt·. To probíhá na základ¥ parametr· a v²echny vytvo°ené objekty mají spole£nou abstraktní t°ídu nebo rozhraní. Návrhový vzor Abstract factory jsem pouºil p°i vytvá°ení konkrétních instancí fyzikálních objekt· v p°edloze. Tyto objekty se ukládájí do kolekce (Scene) pouze jako typ abstraktní t°ídy

IObjectBase. P°i na£ítání XML souboru scény dochází k produkování instancí na základ¥ atributu typename z elementu object. K vytvo°ení je pouºita reexe, a pomocí t°ídy Activator se vytvo°í instance na základ¥ jména typu. T°ídy, kde je vzor pouºit:

• Loader

T°ída pro základní nahrávání XML souboru scény.

6.6.4.3 Singleton Singleton

Návrhový vzor Singleton umoº¬uje vytvá°et objekty, u nichº je zaru£ena jejich

unikátnost. Znamená to, ºe díky tomuto vzoru je moºné objekt vytvo°it pouze jednou. Osobn¥ pouºívám návrhový vzor Singleton jako náhradu za globální prom¥nné, které jsou z hlediska objektového návrhu nep°ípustné. Pouºívám ho pro jednodu²²í t°ídy, do kterých pot°ebuji mít p°ístup odkudkoli v kódu. Díky tomuto vzoru lze mít v¥t²í kontrolu nad vytvá°ením a pouºíváním, neº u globální prom¥nné. Velkou výhodou je téº vytvo°ení instance aº tehdy, kdy je opravdu pot°eba p°i prvním pouºití. T°ídy, kde je vzor pouºit:

• CommandLineSettings

T°ída, do které se ukládají hodnoty parametr· p°íkazového

°ádku. Vytvo°ená instance je dostupná p°es vlastnost

CommandLine.

6.7 Omezení sou£asné implementace Pokud bychom cht¥li denovat sloºit¥j²í objekt, který by v sob¥ obsahoval jiné objekty, narazíme v sou£asné implementaci na problém. Tato verze Interaktivních omalovánek neumoº¬uje denovat objekt, který by obsahoval n¥jaké dal²í. Typickým pouºitím toho poºadavku by byla tvorba sloºit¥j²í p°edm¥t· k vybarvování, nap°. sn¥hulák, který je sloºen ze t°ech koulí, apod. Stejné omezení se projeví i na tvorb¥ n-úhelník· (

Polygon). Sou£asný objekt n-úhelníku, který

omalovánky podporují, vytvá°í p°i inicializaci kolizní konvexní obálku, a proto sloºit¥j²í tvary, nap°. ve tvaru U, nemusí správn¥ kolidovat. Stejný p°ípad je i objekt automobilu, který z núhelníku vychází. I u tohoto objektu se p°i inicializaci vytvá°í konvexní kolizní obálka. Nelze tak vytvo°it nap°. nákladní automobil, ve kterém by se daly p°eváºet jiné objekty (problematickou £ást konvexní kolizní obálky vyjad°uje p°eru²ovaná £ára na obrázku 6.1). Tento problém by °e²ilo sloºení z více objekt·. Dal²í omezení se týká typu pouºívaných objekt·. V sou£asné dob¥ je moºné pouºít tyto typy objekt·:

KAPITOLA 6.

47

REALIZACE

Obrázek 6.1: Kolizní obálka jednoduchého automobilu

• ColoringBook.Objects.Rectangle

Obdélník.

• ColoringBook.Objects.Ellipse

Elipsa.

• ColoringBook.Objects.Polygon

N-úhelník (denuje se seznam bod·).

• ColoringBook.Objects.Vehicle

Automobil (denuje se seznam bod· a kola).

• ColoringBook.Objects.Tire

Kolo automobilu.

V ideálním p°ípad¥ by totiº speciální druhy objekt· m¥ly být denovatelné extern¥, stejn¥ jako funk£ní logika scény. Tím by se dosáhlo dal²ího stupn¥ univerzálnosti. Pokud by autor scény narazil na problém, mohl by si vzhled nového objektu doprogramovat a nebyl by limitován objekty, které nabízí prost°edí omalovánek.

48

KAPITOLA 6.

REALIZACE

KAPITOLA 7.

49

TESTOVÁNÍ

7 Testování Testování Interaktivních omalovánek jsem rozd¥lil na dv¥ £ásti Testování samotného programu, které jsem provedl vyzkou²ením na více po£íta£ových sestavách s r·znými konguracemi, a dále uºivatelskou studii, ze které plynou zajímavé záv¥ry, jak program dále vylep²ovat. Testování správnosti implementace (

Unit testing jsem ve své práci pokládal za zbyte£né, protoºe

jsem nevyvíjel ºádné funkce, které by ho vyºadovaly.

7.1 Uºivatelská studie

Usability) produktu m·ºeme denovat jako míru, s jakou jsou lidé

Pouºitelnost (

(uºivatelé) schopni pomocí tohoto produktu plnit úkoly, ke kterým je ur£en. [16]

V mém p°ípad¥ se jedná o míru, jakou dokáºe uºivatel ovládat prost°edí omalovánek, a jak se v n¥m orientuje.

1

Program Interaktivní omalovánky otestovalo celkem 5 uºivatel· :

•

Dívka, 7 let, p°edchozí zku²enosti s po£íta£i

•

Dívka, 5 let, p°edchozí zku²enosti s po£íta£i

•

Chlapec, 7 let, minimální p°edchozí zku²enosti s po£íta£i

•

Chlapec, 4 roky, bez p°edchozích zku²eností s po£íta£i

•

ena, 39 let, p°edchozí zku²enosti s po£íta£i

7.1.1 Metodika uºivatelské studie Pomocí uºivatelské studie bylo pot°eba zjistit, jak uºivatel·m vyhovuje ovládání programu, jak reagují na jednotlivé scény a jaký v nich zanechávají záºitek. Metodiku jsem shrnul do n¥kolika bod·:

•

Práce uºivatele bez slovního zadání (Uºivatel bez p°edchozích pokyn· ví, co má d¥lat).

•

Práce po slovním vysv¥tlení úkolu.

•

Výb¥r barev.

•

Vybarvování.

•

Hodnocení jednotlivých scén.

P°i uºivatelské studii se pouºíval celoobrazovkový reºim, p°i kterém jsou plochy na vybarvování v¥t²í, a zárove¬ zabra¬uje chybnému klikání mimo program Interaktivních omalovánek. 1

Nebylo moºné provést jednotlivé testování d¥tí, a proto se testovaly najednou. Tím se zkreslily výsledky

individuální uºivatelské studie, protoºe d¥ti spolupracovaly. Na druhou stranu je moºná testování více bavilo, protoºe si mohly navzájem pomáhat.

50

KAPITOLA 7.

TESTOVÁNÍ

7.1.2 Testovací scény Pro testování uºivatel· i samotného programu jsem vytvo°il následující scény:

Velikono£ní scéna

Úkolem této scény je vybarvit vají£ka správnou barvou. Plo²inky pod

vají£ky lze vybarvovat libovoln¥. Vají£ka se po vybarvení rozkutálejí a spadnou k zají£kovi. Pokud k n¥mu spadnou v²echna, zazní záv¥re£ný zvuk a vají£ka s novými barvami se zobrazí na p·vodních místech. V²e se m·ºe opakovat. Obrázek scény je na obrázku B.1.

Scéna s vybarvováním cesty

V této scén¥ má uºivatel za úkol vybarvit barevné plo²inky

stejnou barvou, jako je jejich obrys. Pouze po vybarvených m·ºe kuli£ka dojet aº do dome£ku. Vybarveny musí být nap°ed v²echny plo²inky a kuli£ka aº na konec, protoºe se po vybarvení rozjede po plo²inkách. Pokud se kuli£ka dostane mimo scénu nebo se dostane do dome£ku, ozve se zvuk a v²e za£íná znovu. Obrázek scény je na obrázku B.2.

Scéna s automobilem

Tato jednoduchá scéna demonstruje moºnost tvorby vozidel v Inter-

aktivních omalovánkách. Úkolem uºivatele je vybarvit auto, a tím ho rozjet po plo²in¥. Auto po vybarvení vydá zvuk startujícího motoru. Pokud se auto dostane mimo scénu, v²e za£íná od za£átku. Obrázek scény je na obrázku B.3.

7.1.3 Vlastní testování Byly testovány jednotlivé scény v po°adí: Velikono£ní scéna, Scéna s vybarvováním cesty a nakonec Scéna s automobilem. U jednotlivých testování se uºivatelé st°ídali a ostatní radili v p°ípad¥, ºe se úkol neda°il.

7.1.3.1 Velikono£ní scéna Testování zahájil 7letý chlapec, který znal n¥které po£íta£ové programy. Ze za£átku nev¥d¥l, ºe se jedná o omalovánky. Po slovním zadání vybarvil v²echny plo²inky na £ervenou (výchozí) barvu. Po dal²í rad¥ správn¥ vybarvil vají£ka podle barvy obrys·. Dal²í testovaný byl 4letý chlapec, který m¥l, kv·li svému v¥ku, problémy s ovládáním my²i. Ostatní d¥ti mu pomáhaly. B¥hem testování vybarvil plo²inky jednou barvou, a potom je zkou²el p°ebarvovat. Dívky (7 let a 5 let) problémy s vybarvováním nem¥ly, protoºe mají p°edchozí zku²enosti s po£íta£i. ena (39 let) vybarvovala obdélníky dle barev vají£ek. Zkou²ela obarvit vají£ka, ale vºdy jinou barvou, a proto to jiº znovu nezkou²ela. Nev¥d¥la, co dál zkusit. P°ebarvovala obdélníky. Pak zkou²ela obarvit medvídka, mrak, p°ebarvovala plo²inky. . . Z testování vyplynuly následující problémy:

•

Z po£átku není p°íli² jasné, co se má d¥lat.

•

Tuºka (kurzor) nem¥ní barvu, takºe se d¥ti ²patn¥ orientují, jaká barva je vybraná.

•

P°i výb¥ru barvy d¥ti nechápaly, ºe musí pouºít ²pi£ku tuºky (kurzoru).

•

Ozna£ení vybrané barvy v palet¥ je nedostate£né (d¥tem chvíli trvalo, neº p°i²ly na to, ºe je vybraná barva ozna£ena bílým okrajem).

KAPITOLA 7.

TESTOVÁNÍ

•

Vybarvená vají£ka by se m¥la hromadit u zají£ka, a ne padat dol·.

•

Je matoucí, ºe se musí vybarvovat pouze vají£ka, a plo²inky nikoli.

•

Scéna se po dokon£ení rychle restartuje. Fanfára je p°íli² krátká.

51

7.1.3.2 Scéna s vybarvováním cesty Nyní testování zahájil chlapec (4 roky), který p°íli² nechápal výb¥r barev. Ostatní mu radili, kde jsou. M¥l problémy s rozli²ením n¥kterých odstín· barev. Ostatní d¥ti vybarvily scénu rychle na základ¥ p°edchozí zku²enosti. Dívka (5 let) vlastní hru, ve které jde o podobný princip, a tak jí ²lo vybarvování dob°e. ena (39 let) po zku²enostech s p°edchozí scénou vybarvila kouli. Dále nev¥d¥la, co dál, dokola obarvovala kouli, ta padala. Pak zkusila vybarvit cestu popo°ad¥ shora dol·. Z testování vyplynuly následující problémy:

•

N¥které odstíny pouºitých barev jsou si velmi podobné a ²patn¥ se rozli²ují.

•

Po zmizení kuli£ky ze scény by se m¥la objevit znovu. Nem¥l by nastat restart celé scény.

•

Scéna se po dokon£ení rychle restartuje. Fanfára je p°íli² krátká.

7.1.3.3 Scéna s automobilem Moºná práv¥ kv·li své jednoduchosti byla tato scéna d¥tmi nejlépe hodnocena. Nikdo z nich nem¥l problém scénu vybarvit. Chlapec (4 roky) zkou²el vybarvit mrak a m¥l problémy s drºením my²i. Chlapec (7 let) zkou²el p°ebarvit silnici. ena (39 let) m¥la drobné problémy s odli²ením odstín· barev. Z testování vyplynuly následující problémy:

•

N¥které odstíny pouºitých barev jsou si velmi podobné a ²patn¥ se rozli²ují.

7.1.4 Záv¥r testování Testování na reálných uºivatelích mi dalo konkrétní p°edstavy o tom, jak by m¥ly scény a uºivatelská rozhraní vypadat. P°edev²ím se jednalo o problém s rozli²ením správného odstínu barev. Tento problém je jednoduché vy°e²it pouhou úpravou sekce palety v XML souboru správnou volbou barev. Z uºivatelské studie vyplývá, ºe sou£asný systém výb¥ru barev je nevhodný. Kurzor my²i by m¥l m¥nit barvu podle výb¥ru, aby d¥ti m¥ly p°ehled o tom, kterou barvou vybarvují. Ozna£ení vybrané barvy v palet¥ je také nedostate£né. áste£né zmatení uºivatel·, kte°í Interaktivní omalovánky vid¥li poprvé, jsem vy°e²il p°idáním slovního komentá°e p°i startu scény, který vysv¥tluje, jaký je v dané scén¥ úkol. Ostatní problémy zji²t¥né uºivatelskou studií budou vy°e²eny v dal²í verzi Interaktivních omalovánek.

52

KAPITOLA 7.

TESTOVÁNÍ

7.2 Seznam otestovaného hardware Program Interaktivní omalovánky byl otestován na následujících konguracích a nikde nedo²lo k ºádným problém·m s chodem.

1. Notebook Prestigio Nobile 157

Procesor: Intel Pentium M 1,6 Ghz, L2 Cache 2MB Opera£ní pam¥´: 1024 MB Gracká karta: ATI Radeon Mobile 9700, 64 MB Opera£ní systém: Windows XP CZ, Service pack 3 2. Notebook ASUS A6VA

Procesor: Intel Pentium M 1,73 GHz Opera£ní pam¥´: 1,5 GB Gracká karta: ATI Mobility Radeon X700, 128 MB Opera£ní systém: Windows XP CZ, Service pack 2 3. Notebook Prestigio 1590W

Procesor: Intel Pentium M 740 / 1.733 GHz Opera£ní pam¥´: 2 GB Gracká karta: NVIDIA GeForce Go 6600, 256 MB RAM Opera£ní systém: Windows XP CZ, Service pack 2 4. Notebook ASUS F3J

Procesor: Intel CoreDuo / 2.0 GHz Opera£ní pam¥´: 2 GB Gracká karta: ATI Radeon X2300, 256MB Opera£ní systém: Windows Vista Home Premium CZ, Service pack 1 5. Stolní po£íta£

Procesor: AMD Sempron, 1600 MHz (8 x 200) 2600+ Opera£ní pam¥´: 703 MB Gracká karta: VIA/S3 UniChrome Pro Integrated,64 MB Opera£ní systém: Windows XP CZ, Service pack 2

KAPITOLA 8.

ZÁVR

53

8 Záv¥r 8.1 Diskuse nad výsledky práce Svou bakalá°skou práci Interaktivní omalovánky jsem pojal jako prezentaci my²lenky animací a fyzikálních simulací p°i b¥ºném vybarvování. Nejde tedy o nální produkt ur£ený d¥tem. Jeho formu budu p°izp·sobovat podle toho, jak bude práce pokra£ovat. V sou£asné verzi jsem jednotlivé scény pojal spí²e demonstrativn¥. Tento fakt se projevil na uºivatelské studii, ve které se nejvíce líbila scéna s automobilem, která je velmi jednoduchá. Ostatní scény by bylo dobré p°epracovat podle jejích výsledk·. P°i ur£ování správných vlastností mi nejvíce v po£átcích práce pomohla d¥tská psycholoºka Mgr. Na¤a Kravcinová. Mohl jsem se °ídit jejími radami. V samém záv¥ru byla velmi pou£ná uºivatelská studie, ale její výsledky se uº, bohuºel, v mé práci neprojevily.

8.2 Moºnosti roz²í°ení Práci by v budoucnu bylo moºné pom¥rn¥ hodn¥ roz²i°ovat. Pro zajímavost zde uvádím pár nápad·, kam by se moje práce mohla dál vyvíjet:

•

Úprava podle výsledk· uºivatelské studie.

•

Uºivatelské rozhraní obsahující výb¥r p°edloh, tisk a uloºení.

•

Objekt p·jde sloºit z více jednoduchých objekt·.

•

Pokro£ilej²í animace v rámci jednoho objektu.

•

Sloºit¥j²í fyzikální objekty (nap°. lano, ozubená kola, ...).

•

Zm¥na scény v £ase to£ení ozubených kol a sloºit¥j²ích mechanism·.

•

Moºnost vytvá°et fyzikální dopl¬ky prost°edí nap°. vodu, vzduchové víry, apod.

•

P°evedení desktopové aplikace do technologie Silverlight a umíst¥ní na web.

•

Vytvo°ení editoru p°edloh.

•

Webový repozitá° s p°edlohami.

•

Hudební doprovod.

•

Alternativní zp·soby ovládání, nap°. pomocí snímání polohy speciální k°ídy a promítání na plátno, apod.

•

Uº²í spolupráce s psychology a moºné nasazení v d¥tských lé£ebnách a podobných institucích.

8.3 Vyuºití práce Jak jsem jiº zmi¬oval v kapitole Popis, Interaktivní omalovánky jsou v podstat¥ univerzálním prost°edím, které plní logiku, jeº je denovaná v controlleru dané scény. Je tedy na tv·rci scény, co p°esn¥ bude mít za úkol uºivatel d¥lat.

54

KAPITOLA 8.

ZÁVR

Vyuºití bude hlavn¥ v zábav¥ pro d¥ti, které mohou vnímat fyzikální simulace jako prost°edek k pochopení vazby mezi p°edm¥ty v reálném sv¥t¥. Vybarvování m·ºe rozvíjet fantazii a barevné cít¥ní. V konzultaci s psychology a pedagogy by se mohl sestavit podrobný scéná° p°edloh, které by mohly rozvíjet logiku nebo pomoci ve výuce d¥tí.

8.4 Zhodnocení práce Program Interaktivní omalovánky prezentuje my²lenku, jak lépe vyuºívat výpo£etní techniku v zábav¥ ur£ené d¥tem. Klasické téma omalovánek obohacuje o fyzikální simulace, které, i podle d¥tského psychologa, mohou d¥tem poskytnou ur£itou formu, jak se u£it vztah·m mezi p°edm¥ty v reálném sv¥t¥. Vybarvování jako takové u£í d¥ti fantazii a barevnému cít¥ní. Ve své práci jsem vytvo°il 3 scény, které £áste£n¥ prezentují moºnosti Interaktivních omalovánek. Jedná se o velikono£ní scénu ur£enou malým d¥tem, kde mají za úkol pouze vybarvit vají£ka stejnou barvou. Dále scénu, kde je pot°eba nejprve vybarvit plo²inky a teprve poté kuli£ku, aby se po nich dostala do cílové oblasti. Na záv¥r jsem vytvo°il velmi jednoduchou scénu, ve které se jednoduchý automobil po vybarvení rozjede z naklon¥né plo²iny. V principu není sloºité ud¥lat scénu s jakoukoli funk£ností, protoºe její logika se na£ítá ze souboru a není napevno kompilovaná v kódu programu. Protoºe m¥ práce na Interaktivních omalovánkách bavila, v¥°ím, ºe na ní budu pokra£ovat i v budoucnu. Mám °adu nápad· jakým sm¥rem by se mohla práce dal vyvíjet a v kone£né fázi dostat k samotným d¥tem. Tím by splnila hlavní a nejd·leºit¥j²í £ást mé motivace.

KAPITOLA 9.

LITERATURA

9 Literatura [1] Hypercubed - Internetový Blog. http://blog.hypercubed.com/. [2] K336 info. http://info336.felk.cvut.cz. [3] K336 Info - pokyny pro psaní bakalá°ských prací. https://info336.felk.cvut.cz/clanek.php?id=504. [4] Microsoft Developer Network. http://msdn.microsoft.com/. [5] Newton Game Dynamics. http://www.newtondynamics.com/. [6] Newton Game Dynamics Wiki. http://newtondynamics.com/wiki/. [7] Otev°ená encyklopedie Wikipedia. http://www.wikipedia.org/. [8] Po£íta£ová hra The Incredible Machine, 2008. http://en.wikipedia.org/wiki/The_Incredible_Machine. [9] Apples4theteacher. Omalovánky na www.apples4theteacher.com, 2008. http://www.apples4theteacher.com/coloring-pages/. [10] M. a.s. Omalovánky na www.Alík.cz, 2008. http://www.alik.cz. [11] C. Cavanagh. Internetový Blog. http://chriscavanagh.wordpress.com/. [12] FISHER-PRICE. FISHER-PRICE Click and Color, 2008. http://www.sher-price.com/us/playtime/. [13] K. H. Foundation. Interaktivní omalovánky od Keith Haring Foundation, 2007. http://www.haringkids.com/coloringbook/index.html. [14] Kloonigames. Kloonigames (Crayon Physics) - Internetový Blog, 2008. http://www.kloonigames.com/blog/. [15] R. Kooima. Po£íta£ová hra Neverball, 2008. http://icculus.org/neverball/. [16] I. Malý. Pouºitelnost (webových) aplikací. 2006. [17] N. A. of Home Builders. National Association of Home Builders Omalovánky, 2008. http://www.nahb.org/coloringbook/book.aspx. [18] J. Rybi£ka.

LaTeX pro za£áte£níky. KONVOJ s.r.o, Brno, 3st edition, 2003. In Czech.

55

56

KAPITOLA 9.

LITERATURA

DODATEK A.

57

INSTALANÍ PÍRUKA

A Instala£ní p°íru£ka A.1 Minimální poºadavky •

Procesor: 400 MHz, 1 GHz a více doporu£eno

•

Opera£ní pam¥´: 96 MB, 256 MB a více doporu£eno

•

Opera£ní systém: Windows XP, Service Pack 2 a vy²²í

•

Zvuková karta doporu£ena

A.2 Instalace Instala£ní program obsahuje 2 soubory:

Setup.exe

a

InteractiveColoringBook.msi. Setup.exe.

Pro in-

stalaci programu Interaktivní omalovánky spusé soubor

Pokud v svém po£íta£i nemáte nainstalovaný .NET Framework 3.0 instala£ní program ho nejprve stáhne z Internetu a nainstaluje (Obrázky A.1, A.2, A.3). Po nainstalování .NET Frameworku se spustí vlastní instalátor Interaktivních omalovánek. Jednotlivé kroky potvrzujte kliknutím na tla£ítko

Next (Obrázky A.4, A.5, A.5, A.7) .

Program je nyní °ádn¥ nainstalován a zástupce k jeho spu²t¥ní m·ºete najít v nabídce Start: Start⇒Programy⇒Interactive Coloring Book (Obrázek A.8).

58

DODATEK A.

INSTALANÍ PÍRUKA

Obrázek A.1: Dotaz na instalaci .NET Frameworku 3.0

Obrázek A.2: Stahování .NET Frameworku 3.0 z Internetu

Obrázek A.3: Instalace .NET Frameworku 3.0

DODATEK A.

INSTALANÍ PÍRUKA

Obrázek A.4: Uvítací obrazovka instalátoru Interaktivních omalovánek

Obrázek A.5: Výb¥r umíst¥ní instalace

59

60

DODATEK A.

INSTALANÍ PÍRUKA

Obrázek A.6: Potvrzení instalace

Obrázek A.7: Pr·b¥h instalce

Obrázek A.8: Záv¥re£ný dialog instalace

DODATEK B.

UIVATELSKÁ PÍRUKA

61

B Uºivatelská p°íru£ka P°i instalaci program vytvo°í zástupce do nabídky Start: Start⇒Programy⇒Interactive Coloring Book.

• Easter scene

Velikono£ní scéna spu²t¥ná v okn¥.

• Easter scene - fullscreen • House demo scene •

Velikono£ní scéna spu²t¥ná p°es celou obrazovku.

Scéna s vybarvováním cesty spu²t¥ná v okn¥.

tt House demo scene - fullscreen Scéna s vybarvováním cesty spu²t¥ná p°es celou obrazovku.

• Vehicle demo scene

Scéna s automobilem spu²t¥ná v okn¥.

• Vehicle demo scene - fullscreen

Scéna s automobilem spu²t¥ná p°es celou obra-

zovku.

B.1 Velikono£ní scéna (Obrázek B.1) Úkolem této scény je vybarvit vají£ka správnou barvou. Plo²inky pod vají£ky lze vybarvovat libovoln¥. Vají£ka se po vybarvení rozkutálejí a spadnou k zají£kovi. Pokud k n¥mu spadnou v²echna, zazní záv¥re£ný zvuk a vají£ka s novými barvami se zobrazí na p·vodních místech. V²e se m·ºe opakovat.

B.2 Scéna s vybarvováním cesty (Obrázek B.2) V této scén¥ má uºivatel za úkol vybarvit barevné plo²inky stejnou barvou, jako je jejich obrys. Pouze po vybarvených m·ºe kuli£ka dojet aº do dome£ku. Vybarveny musí být nap°ed v²echny plo²inky a kuli£ka aº na konec, protoºe se po vybarvení rozjede po plo²inkách. Pokud se kuli£ka dostane mimo scénu nebo se dostane do dome£ku, ozve se zvuk a v²e za£íná znovu.

B.3 Scéna s automobilem (Obrázek B.3) Tato jednoduchá scéna demonstruje moºnost tvorby vozidel v Interaktivních omalovánkách. Úkolem uºivatele je vybarvit auto, a tím ho rozjet po plo²in¥. Auto po vybarvení vydá zvuk startujícího motoru. Pokud se auto dostane mimo scénu, v²e za£íná od za£átku.

62

DODATEK B.

UIVATELSKÁ PÍRUKA

Obrázek B.1: Snímek obrazovky velikono£ní scény

Obrázek B.2: Snímek obrazovky scény s vybarvováním cesty

DODATEK B.

UIVATELSKÁ PÍRUKA

Obrázek B.3: Snímek obrazovky scény s automobilem

63

64

DODATEK B.

UIVATELSKÁ PÍRUKA

DODATEK C.

OBSAH PILOENÉHO CD

65

C Obsah p°iloºeného CD

Soubor s instala£ní p°íru£kou a obsahem CD cd/ Adresá° s pomocnými soubory (obrázky) pro obsah CD docs/ Dokumentace diagrams/ Diagramy a zdrojový soubor programu Enterprise Architect help/ Generovaná dokumentace ke zdrojovým kód·m latex/ Zdrojové soubory této dokumentace programu LATEX install/ Instala£ní adresá° Setup.exe Instalátor Interaktivních omalovánek InteractiveColoringBook.msi Instala£ní soubor sources/ Zdrojvé kódy ColoringBook Zdrojové kódy Interaktivních omalovánek NewtonDynamics Zdrojové kódy obalující knihovny fyzikálního engine Newton Dynamics Scenes Zdrojové soubory jednotlivých scén SharpZipLib Knihovna pro ZIP kompresi text/ Elektronická verze dokumentace interactive_coloringbook.pdf Elektronická verze tohoto dokumentu

• index.html • •

•

•

•

66

DODATEK C.

OBSAH PILOENÉHO CD

Na tomto míst bude ociální zadání va²í práce

Recommend Documents