Západočeská univerzita v Plzni Fakulta aplikovaný ch vě d Katedra informatiky a vý poč etní techniky. Hra Dobble

Za´padoˇceska´ univerzita v Plzni Fakulta aplikovanyćh vˇed Katedra informatiky a vy´poˇcetn´ı techniky

Bakal´ aˇ rsk´ a pr´ ace Hra Dobble pro mobiln´ı zaˇ r´ızen´ı

Plzeˇ n 2014

Tomáˇs Bal´ıˇcek

Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze jsem bakaláˇrskou práci vypracoval samostatnˇe a v´ yhradnˇe s pouˇzit´ım citovan´ ych pramen˚ u. V Plzni dne 9. kvˇetna 2014 Tomáˇs Bal´ıˇcek

Podˇ ekov´ an´ı Dˇekuji Ing. Ladislavu Peˇsiˇckovi za odborné veden´ı mé bakaláˇrské práce a za cenné rady, které mi pomohly tuto práci vytvoˇrit. V Plzni, dne 9. kvˇetna 2014 Tomáˇs Bal´ıˇcek

Abstract Mobile applications and games made recently a big step forward. The demand for mobile devices is growing rapidly. Therefore, the development of mobile applications is becoming very interesting. In this area is necessary to examine the issue of game control on di↵erent types of mobile devices. Games can be single players or multiplayer. Mobile applications can be made natively for each platform separately or use a multiplatform tool.

This bachelor thesis mainly deals with programming multiplatform games written in HTML and specifically written in PhoneGap framework. The aim of this work is to program Android game with use this framework. It is card game called Dobble. The game consists in finding two identical symbols on two cards. This game is currently available only for Apple iOS (April 2014).

Abstrakt Aplikace potaˇzmo hry na mobiln´ıch zaˇr´ızen´ıch proˇsly v posledn´ıch letech velk´ ym rozmachem. Poptávka po mobiln´ıch zaˇr´ızen´ıch rychle roste. A d´ıky tomu se stává v´ yvoj aplikac´ı velice zaj´ımav´ y. V této oblasti je nutné prozkoumat problematiku ovládán´ı her na r˚ uzn´ ych typech mobiln´ıch zaˇr´ızen´ı, hry mohou b´ yt jednouˇzivatelské nebo pro v´ıce uˇzivatel˚ u. Aplikace je moˇzné psát nativnˇe pro kaˇzdou platformu zvláˇst’ nebo zvolit multiplatformn´ı nástroje.

Tato bakaláˇrská práce se zab´ yvá pˇreváˇznˇe programován´ım multiplatformn´ıch her psan´ ych v HTML a konkrétnˇe vyuˇzit´ı frameworku PhoneGap. C´ılem této práce je naprogramovat hru pro platformu Android. Jedná se o karetn´ı hru Dobble. Hra spoˇc´ıvá v hledán´ı dvou shodn´ ych symbol˚ u na dvou kartiˇckách. Hra je zat´ım pouze dostupná v karetn´ı podobˇe a pro platformu iOS (duben 2014).

Obsah ´ 1 Uvod

1

2 Interakce pro ovl´ ad´ an´ı mobiln´ı hry 2.1 Obyˇcejné telefony . . . . . . . . . . 2.1.1 Ovládán´ı . . . . . . . . . . . 2.2 Chytré telefony . . . . . . . . . . . 2.2.1 Gyroskop . . . . . . . . . . 2.2.2 Akcelerometr . . . . . . . . 2.2.3 Dotykov´ y displej . . . . . . 2.2.4 Shrnut´ı . . . . . . . . . . .

. . . . . . .

2 2 2 3 3 4 4 6

. . . .

7 7 7 7 8

3 Multiuˇ zivatelsk´ e hry 3.1 Jedno zaˇr´ızen´ı . . . . . . . . . . . . 3.2 Komunikace v´ıce zaˇr´ızen´ı . . . . . . 3.2.1 Bluetooth . . . . . . . . . . 3.2.2 Wi-Fi - S´ıt’ová komunikace .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

4 Pravidla hry 10 4.1 Single player . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 4.2 Multi player - jedno zaˇr´ızen´ı . . . . . . . . . . . . . . . . . . . 10 4.3 Multi player - v´ıce zaˇr´ızen´ı . . . . . . . . . . . . . . . . . . . . 10 5 Realizace hry 5.1 Klient . . . . . . . . . . . . . . . . . . 5.1.1 Kartiˇcky . . . . . . . . . . . . . 5.1.2 Rozpoznán´ı zvoleného obrázku . 5.1.3 PhoneGap . . . . . . . . . . . . 5.1.4 Pˇr´ıprava prostˇred´ı . . . . . . . . 5.1.5 Java . . . . . . . . . . . . . . . 5.1.6 Javascript . . . . . . . . . . . . 5.1.7 HTML5 a CSS3 . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

11 11 12 12 14 15 18 19 21

OBSAH 5.2 5.3

5.4

OBSAH Server . . . . . . . . . . . . . . . . . . . . . . Komunikaˇcn´ı protokol . . . . . . . . . . . . . 5.3.1 Zahájen´ı komunikace serveru . . . . . . 5.3.2 Zahájen´ı komunikace klienta . . . . . . 5.3.3 Komunikace mezi serverem a klientem ˇ Casovˇ e kritické u ´seky hry . . . . . . . . . . . 5.4.1 S ohledem na v´ ykonnost zaˇr´ızen´ı . . . 5.4.2 S ohledem na rychlost pˇripojen´ı . . . . 5.4.3 Moˇzná ˇreˇsen´ı . . . . . . . . . . . . . .

6 Uˇ zivatelsk´ a dokumentace 6.1 Single player . . . . . . . . . . . . . . 6.2 Multi player - o✏ine . . . . . . . . . 6.3 Multi player - online . . . . . . . . . 6.4 Pˇreloˇzen´ı aplikace a spuˇstˇen´ı aplikace

. . . .

. . . .

. . . .

. . . .

. . . .

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

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

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

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

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

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

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

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

. . . . . . . . .

23 24 24 25 25 26 27 27 27

. . . .

29 29 29 30 31

7 Distribuce hry

32

8 Testov´ an´ı 8.1 Lad´ıc´ı konzole Eclipse . . . . . . . . 8.2 Lad´ıc´ı nástroje v prohl´ıˇzeˇci . . . . . . 8.3 Emulátor . . . . . . . . . . . . . . . 8.4 Zaˇr´ızen´ı . . . . . . . . . . . . . . . . 8.5 Online verze . . . . . . . . . . . . . . 8.6 Test s ohledem na rychlost pˇripojen´ı 9 Z´ avˇ er

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

34 34 34 36 37 39 39 40

6

´ 1 Uvod Bakaláˇrská práce se zab´ yvá tématem multiplatformn´ıch aplikac´ı pro mobiln´ı zaˇr´ızen´ı. Bude potˇreba prozkoumat interakce pro ovládán´ı mobiln´ıch her na r˚ uzn´ ych typech telefon˚ u. U telefon˚ u, které nám nab´ız´ı ˇsirˇs´ı moˇznosti vyuˇzit´ı nalézt, které z jejich vyspˇel´ ych funkc´ı by se dali pouˇz´ıt pro ovládán´ı her. U multiuˇzivatelského reˇzimu bude potˇreba vhodné nalezen´ı a propojen´ı zaˇr´ızen´ı, které spolu budou komunikovat. V realizaci hry si projdeme konkrétn´ı framework pouˇzit´ y na v´ yvoj hry, která je tvoˇrena pˇreváˇznˇe pomoc´ı webov´ ych technologi´ı a pop´ıˇseme si pˇrevod do nativn´ı aplikace. D´ıky tomu z´ıskáme aplikace, které budou pˇrenosné na r˚ uzné mobiln´ı platformy, budou skvˇele vypadat a nav´ıc budou schopné vyuˇz´ıvat specifické vlastnosti konkrétn´ıch zaˇr´ızen´ı. U reˇzimu online bude probrána problematika komunikaˇcn´ıho serveru a popis komunikace mezi jednotliv´ ymi zaˇr´ızen´ımi a vhodné nalezen´ı spoluhráˇc˚ u. Po vytvoˇren´ı aplikace si ukáˇzeme, jak aplikaci vhodnˇe testovat v lad´ıc´ı konzoli a vyuˇz´ıvat lad´ıc´ı nástroje modern´ıch prohl´ıˇzeˇc˚ u. Poté bude aplikace nasazena do emulátoru a v posledn´ım kroku bude aplikace nasazena pˇr´ımo do fyzického zaˇr´ızen´ı pro otestován´ı r˚ uzn´ ych rozmˇer˚ u displeje a hardwarov´ ych poˇzadavk˚ u aplikace. Posledn´ım krokem v ˇzivotn´ım cyklu aplikace je distribuce aplikace do pˇr´ısluˇsného internetového obchodu. Ukáˇzeme konkrétn´ı pˇr´ıklad nasazen´ı naˇs´ı hry do Android Store spoleˇcnosti Google.

1

2 Interakce pro ovládán´ı mobiln´ı hry Moˇznosti ovládán´ı mobiln´ıch her m˚ uˇzeme rozdˇelit podle druhu mobiln´ıho zaˇr´ızen´ı:

2.1

Obyˇ cejn´ e telefony

Jedná se o kategorii telefon˚ u, které jsou vybaveny hardwarovou klávesnic´ı ve formˇe ˇc´ıslic 1-9 a nˇekolika dalˇs´ımi kontextov´ ymi tlaˇc´ıtky. Tyto zaˇr´ızen´ı jsou také oznaˇcována jakou hloupá zaˇr´ızen´ı nebo anglicky cell phone. Na zaˇr´ızen´ı tohoto typu nen´ı moˇzné instalovat dalˇs´ı aplikace. Jedná se o zaˇr´ızen´ı s minimáln´ımi funkcemi. Zaˇr´ızen´ı slouˇz´ı ve vˇetˇsinˇe pˇr´ıpad˚ u pouze k telefonován´ı, psan´ı SMS, popˇr´ıpadˇe MMS a novˇejˇs´ı typy tˇechto telefon˚ u byly vybaveny i kamerou. I kdyˇz se m˚ uˇze zdát, ˇze tato zaˇr´ızen´ı jsou dávnou histori´ı i v dneˇsn´ı dobˇe najdou urˇcité vyuˇzit´ı. Hlavn´ı v´ yhodou je jejich v´ ydrˇz, kdy bez pˇripojen´ı do nab´ıjeˇcky vydrˇz´ı nabité dlouhou dobu ve srovnán´ı s chytr´ ymi telefony. Jejich dalˇs´ı v´ yhodou je bytelnost, pˇri pádu z v´ yˇsky na zem vˇetˇsinou nedocház´ı k takovému poˇskozen´ı jako u chytr´ ych zaˇr´ızen´ı, jedno z nejchoulostivˇejˇs´ıch m´ıst b´ yvá displej a ten je vˇetˇsinou menˇs´ıch rozmˇer˚ u a ˇsasi telefonu z plastu. A nev´ yhody tˇechto zaˇr´ızen´ı m˚ uˇzou b´ yt pro urˇcitou skupinu lid´ı naopak v´ yhodou, protoˇze tyto telefony nejsou napˇr´ıklad vybaveny ani GPS senzory, takˇze doinstalovat aplikaci pro ˇspehován´ı zaˇr´ızen´ı pomoc´ı GPS senzoru m˚ uˇze b´ yt ponˇekud sloˇzité. V nab´ıdce od operátor˚ u je to napˇr´ıklad telefon Samsung E1200M Keystone 2, u kterého se cena pohybuje kolem 300,- Kˇc za kus.

2.1.1

Ovl´ ad´ an´ı

Pro tuto platformu jsou moˇznosti ovládán´ı omezené. Tento druh telefon˚ u se ovládá pomoc´ı hardwarové klávesnice, která má klasické rozvrˇzen´ı tlaˇc´ıtek 0 aˇz 9 nebo u novˇejˇs´ıch zaˇr´ızen´ı byla jiˇz QWERTY klávesnice. Pokud by byla hra naprogramována pro tento druh telefon˚ u, kaˇzd´ y obrázek by musel m´ıt své ˇc´ıselné oznaˇcen´ı a na hardwarové klávesnici by se tak jednoduˇse stisklo dané tlaˇc´ıtko, které by odpov´ıdalo obrázku. Ale vzhledem k tomu, ˇze i propozice samotného displeje nejsou na vysoké u ´rovni bylo by to prakticky nereálné.

2

Interakce pro ovládán´ı mobiln´ı hry

2.2

Chytré telefony

Chytr´ e telefony

Chytré telefony anglicky smartphone jsou zaˇr´ızen´ı, která jsou vybavena pokroˇcil´ ym mobiln´ım operaˇcn´ım systémem a aplikaˇcn´ı rozhran´ı nám umoˇzn ˇuje instalaci a vytváˇren´ı nov´ ych program˚ u. Jedná se napˇr´ıklad o operaˇcn´ı systémy: iOS, Android, Windows Phone, Firefox OS, BlackBerry OS a dalˇs´ı. V této kategorii mobiln´ıch telefon˚ u jsou moˇznosti ovládán´ı jiˇz pestˇrejˇs´ı. Chytré telefony maj´ı spoustu v´ yhod jako napˇr´ıklad: doinstalován´ı velkého mnoˇzstv´ı aplikac´ı, které jsou vˇetˇsinou ke staˇzen´ı zdarma popˇr´ıpadˇe za mal´ y poplatek, jsou vybaveny velk´ ym mnoˇzstv´ım senzor˚ u a hlavnˇe dotykov´ ym displejem. Pro ovládán´ı her se ˇcasto vyuˇz´ıvá gyroskop. Jedná se o senzor kter´ y detekuje pohyb i v tˇret´ı ose. Chytré telefony nám ale pˇrináˇs´ı také spousty nev´ yhod naproti obyˇcejn´ ym telefon˚ um: jednou z hlavn´ıch nev´ yhod je v´ ydrˇz baterie, zat´ımco obyˇcejné telefony vydrˇz´ı bez nab´ıjen´ı i t´ yden u chytr´ ych telefon˚ u je vˇetˇsinou potˇreba nab´ıjet kaˇzd´ y den, ale to je také dáno funkcemi telefonu, kter´ y jiˇz nen´ı vyuˇz´ıván jen pro telefonován´ı a psan´ı SMS. Pak jsou to urˇcitˇe rozmˇery, zat´ımco do pˇr´ıchodu chytr´ ych telefon˚ u bylo snahou vˇetˇsiny v´ yrobc˚ u co nejv´ıce sn´ıˇzit hmotnost a rozmˇery telefonu dnes je to právˇe naopak a vˇetˇsina v´ yrobc˚ u se pˇretahuje o to kdo bude m´ıt vˇetˇs´ı telefon potaˇzmo displej. A asi nejvˇetˇs´ı nebezpeˇc´ı chytr´ ych telefon˚ u jsou ˇskodlivé aplikace. Viry jsou spojeny s hlavn´ı v´ yhodou chytr´ ych telefon˚ u a to s instalac´ı vlastn´ıch aplikac´ı. S postupn´ ym nár˚ ustem tˇechto zaˇr´ızen´ı bude riziko stoupat. Nyn´ı jsou aplikace nahrávané do mobiln´ıch obchod˚ u velmi striktnˇe kontrolovány, takˇze k in-fikaci zaˇr´ızen´ı docház´ı velice zˇr´ıdka. Pokud se pod´ıváme do nab´ıdky operátor˚ u pˇrevaˇzuj´ı právˇe chytrá zaˇr´ızen´ı. Z tˇech nejlepˇs´ıch, které nyn´ı m˚ uˇzeme na trhu nalézt je to Samsung Galaxy S5 nebo Apple iPhone 5, kde cena tˇechto zaˇr´ızen´ı je podobná jako u lepˇs´ıho notebooku.

2.2.1

Gyroskop

Gyroskop [14] nám urˇc´ı v jaké poloze se telefon nacház´ı a pohyb kter´ y s telefonem provád´ıme. Prvn´ı kdo pouˇzil gyroskop v mobiln´ım zaˇr´ızen´ı byl Apple ve svém modelu iPhone 4 v roce 2010. Gyroskop je vlastnˇe setrvaˇcn´ık tvoˇren´ y tˇeˇzk´ ym kolem otáˇcej´ıc´ım se v loˇzisc´ıch s nepatrn´ ym tˇren´ım, kter´ y si po roztoˇcen´ı zachovává polohu osy své rotace v prostoru a dokáˇze tak urˇcit svou orientaci. Vetˇsinou je setrvaˇcn´ık uloˇzen v takzvan´ ych Cardanov´ ych závˇesech. Rozmach tˇechto zaˇr´ızen´ıch nastal v 70. letech kdy se zaˇcali pouˇz´ıvat v balistick´ ych raketách nebo torpédech a napˇr´ıklad také u letadel nebo navigace 3


Chytré telefony

lod´ı. V mobiln´ıch hrách má gyroskop také velké vyuˇzit´ı. Pouˇz´ıvá se napˇr´ıklad pro ovládán´ı her automobilov´ ych závod˚ u, kdy simulujeme natoˇcen´ım telefonu smˇer vlevo nebo vpravo. Dalˇs´ı hry, kde je gyroskop vyuˇz´ıván jsou napˇr´ıklad hry, kdy se snaˇz´ıme dostat kuliˇcku do c´ıle pˇres bludiˇstˇe na displeji. Gyroskop nám pom˚ uˇze k tomu, ˇze simulace na displeji je fyzikálnˇe odpov´ıdaj´ıc´ı skuteˇcnosti, kdy bychom mˇeli skuteˇcnou destiˇcku a na té kutáleli kuliˇcku.

Obrázek 2.1: Znázornˇen´ı gyroskopu [14]

2.2.2

Akcelerometr

Akcelerometr je zaˇr´ızen´ı, které slouˇz´ı ke zjiˇstˇen´ı zrychlen´ı pˇri pohybu telefonu. A m˚ uˇze také mˇeˇrit orientaci telefonu. To m˚ uˇzeme vyuˇz´ıt ve hrách pˇri r˚ uzn´ ych gestech. Nebo napˇr´ıklad v hudebn´ıch pˇrehrávaˇc´ıch, kdy se pˇri zatˇresen´ı pˇrepne na dalˇs´ı skladbu. Velké vyuˇzit´ı má akcelerometr napˇr´ıklad v krokomˇerech, kdy je vˇetˇsina modern´ıch telefon˚ u schopna pomoc´ı nˇejaké aplikace zaznamenat délku uˇslé trasy.

2.2.3

Dotykov´ y displej

Dotykové displeje m˚ uˇzeme dˇelit na dvˇe hlavn´ı kategorie, které se pouˇz´ıvaj´ı u mobiln´ıch zaˇr´ızen´ı a to: rezistivn´ı a kapacitn´ı. Vzhledem k tomu, ˇze v dneˇsn´ı dobˇe se pomoc´ı dotykov´ ych displej˚ u ovládá témˇeˇr vˇetˇsina mobiln´ıch zaˇr´ızen´ı jejich v´ yvoj pokroˇcil v posledn´ıch letech velice kupˇredu. Velk´ y boom 4


Chytré telefony

dotykov´ ych displej˚ u nastal v roce 2007 kdy Apple pˇredstavil sv˚ uj iPhone. Ale nebyl to zdaleka prvn´ı telefon s dotykov´ ym displejem toto prvenstv´ı si drˇz´ı Simon PDA cell phone, kter´ y v roce 1993 pˇredstavila spoleˇcnost BellSouth a IBM.

Rezistivn´ı displeje Rezistivn´ı neboli odporové displeje [12] m˚ uˇzeme ovládat prakticky ˇc´ımkoli. V okamˇziku kdy se displeje dotkneme, horn´ı dotyková vrstva se prohne a spoj´ı se se spodn´ı elektrovodivou vrstvou ˇc´ımˇz mezi nimi zaˇcne procházet ˇ ıd´ıc´ı a vyhodnocovac´ı modul následnˇe vyhodnot´ı polohu elektrick´ y proud. R´ a velikost bodu dotyku. U tˇechto displej˚ u se tedy velice ˇspatnˇe provád´ı gesta a horn´ı vrstva mus´ı b´ yt vyrobena z mˇekkého a pruˇzného materiálu, tud´ıˇz ˇcasto trp´ı poˇskrábán´ım a proto tento druh displej˚ u nahradily displeje kapacitn´ı.

Obrázek 2.2: Princip rezistivn´ıho displej [12]

Kapacitn´ı displeje Kapacitn´ı displeje [12] v dneˇsn´ı dobˇe ovládly trh s mobiln´ımi zaˇr´ızen´ımi. Jejich funkˇcnost spoˇc´ıvá ve vodivosti lidského tˇela. Jakmile se dotkneme displeje, naruˇs´ı se elektrostatické pole displeje a mezi jeho povrchem a ˇspiˇckou 5


Chytré telefony

prstu vznikne kapacita, která uzavˇre elektrick´ y obvod. V´ yhody kapacitn´ıch displej˚ u tedy jsou, vysoké rozliˇsen´ı displej˚ u, vysoká svˇetelná propustnost a dotyková plocha m˚ uˇze b´ yt vyrobena z vysoce pevn´ ych a odoln´ ych skel. Nev´ yhodou je, ˇze displeje reaguj´ı pouze na dotyk prstu nebo jiného vodivého pˇredmˇetu, takˇze napˇr´ıklad na dotek v rukavici displej nezareaguje. Ale nˇekteˇr´ı v´ yrobci doplˇ nuj´ı kapacitn´ı displej o dalˇs´ı super-citlivou vrstvu, d´ıky n´ı nen´ı problém ovládán´ı napˇr´ıklad nehty nebo v rukavic´ıch. Napˇr´ıklad jsou to Lumie od finského v´ yrobce Nokia.

2.2.4

Shrnut´ı

Dneˇsn´ı mobiln´ı zaˇr´ızen´ı potaˇzmo chytré telefony umoˇzn ˇuj´ı vyuˇzit´ı velkého mnoˇzstv´ı senzor˚ u a dalˇs´ıch pˇr´ısluˇsenstv´ı. Pro naˇsi hru vˇsak z˚ ustaneme u vyuˇzit´ı dotykového displeje a pˇripojen´ı k s´ıti. Dotykov´ y displej nám umoˇzn´ı vˇse co pro ovládán´ı hry potˇrebujeme v multiuˇzivatelské verzi i moˇznost pˇr´ıstupu dvou hráˇc˚ u, kde kaˇzd´ y bude vyuˇz´ıvat svoji polovinu displeje. S´ıt’ové pˇripojen´ı nám umoˇzn´ı realizovat multiuˇzivatelskou hru online, kde bude m´ıt kaˇzd´ y z hráˇc˚ u své zaˇr´ızen´ı a tyto zaˇr´ızen´ı spolu budou komunikovat pˇres s´ıt’.

6

3 Multiuˇzivatelské hry Multiuˇzivatelské hry na mobiln´ıch zaˇr´ızen´ıch m˚ uˇzeme rozdˇelit na hry, které se hraj´ı na jednom zaˇr´ızen´ı a hráˇci se o jedno zaˇr´ızen´ı stˇr´ıdaj´ı nebo hry pro dva a v´ıce hráˇc˚ u, kde kaˇzd´ y hraje na své polovinˇe zaˇr´ızen´ı. Dalˇs´ım typem jsou hry, kde kaˇzd´ y z hráˇc˚ u jiˇz hraje na svém zaˇr´ızen´ı a tato zaˇr´ızen´ı spolu mus´ı na dálku komunikovat.

3.1

Jedno zaˇ r´ızen´ı

Realizace této multiuˇzivatelské hry je velice jednoduchá, jedná se o takzvanou o✏ine hru, kdy nen´ı nutné navazovat napˇr´ıklad s´ıt’ová spojen´ı, pokud hra nemá dalˇs´ı nadstandardn´ı moˇznosti. Hráˇci se mohou o jedno zaˇr´ızen´ı stˇr´ıdat napˇr´ıklad po urˇcitém ˇcase nebo vˇzdy po odehraném kole. Ve hˇre Dobble jsem se rozhodl jako jeden z hern´ıch mód˚ u implementovat moˇznost, hrát na jednom zaˇr´ızen´ı souˇcasnˇe. Hra je urˇcena pro 2 hráˇce, z nichˇz kaˇzd´ y má k dispozici jednu polovinu displeje.

3.2

Komunikace v´ıce zaˇ r´ızen´ı

Pokud jsou ve hˇre zapojeny dvˇe a v´ıce zaˇr´ızen´ı, realizace této hry se znaˇcnˇe zkomplikuje. Jiˇz mus´ı b´ yt k dispozici nˇejaké spojen´ı pomoc´ı kterého budou dvˇe daná zaˇr´ızen´ı komunikovat mezi sebou. Jedná se o takzvanou online verzi. Máme na v´ ybˇer mnoho typ˚ u spojen´ı, která m˚ uˇzeme mezi zaˇr´ızen´ım navázat.

3.2.1

Bluetooth

Bluetooth [15] byl vytvoˇren firmou Ericsson v roce 1994. V dneˇsn´ı dobˇe ho nalezneme témˇeˇr v kaˇzdém chytrém telefonu. Tato technologie je definovaná standardem IEEE 802.15.1 a spadá do kategorie PAN, tzv. osobn´ıch poˇc´ıtaˇcov´ ych s´ıt´ı a to nám pˇrináˇs´ı velká omezen´ı. Aby mohli dva spoluhráˇci vytvoˇrit spojen´ı, mus´ı se nacházet v bl´ızkém okol´ı nejlépe jednoho pokoje. Udávan´ y dosah je 100 metr˚ u u Bluetooth 4.0 které je nasazováno do nejnovˇejˇs´ıch mo7

Multiuˇzivatelské hry

Komunikace v´ıce zaˇr´ızen´ı

biln´ıch zaˇr´ızen´ı. Tato technologie b´ yvá pro multiuˇzivatelské hry vyuˇz´ıvána velice zˇr´ıdka.

3.2.2

Wi-Fi - S´ıt’ov´ a komunikace

Wi-Fi je technologie, bez které se v dneˇsn´ı dobˇe neobejde ˇzádn´ y chytr´ y telefon. Slouˇz´ı pro bezdrátovou komunikaci v poˇc´ıtaˇcov´ ych s´ıt´ıch. S´ıt’ová komunikace nám jiˇz pˇrináˇs´ı mnohem vetˇs´ı moˇznosti. Zaˇr´ızen´ı jiˇz nejsou omezovány vzdálenost´ı, ve které se od sebe nacház´ı a nemus´ı spolu komunikovat na pˇr´ımo, ale pˇres nˇejak´ y komunikaˇcn´ı server. Tuto moˇznost vyuˇz´ıvám i v hern´ım multiuˇzivatelském online reˇzimu. Hráˇci se pˇripojuj´ı k serveru a komunikuj´ı viz obrázek 3.1. Má to samozˇrejmˇe i své nev´ yhody, kaˇzdé zaˇr´ızen´ı mus´ı m´ıt pˇripojen´ı k s´ıti popˇr´ıpadˇe k internetu a server mus´ı b´ yt spuˇstˇen´ y. Pokud tedy z nˇejakého d˚ uvodu server selˇze, nen´ı moˇzné ve hˇre pokraˇcovat ani vytvoˇrit hru novou.

Obrázek 3.1: Komunikace zaˇr´ızen´ı pˇres server

8

Multiuˇzivatelské hry

Komunikace v´ıce zaˇr´ızen´ı

Nalezen´ı spoluhr´ aˇ ce Nalezen´ı je moˇzné ˇreˇsit v´ıce r˚ uzn´ ymi zp˚ usoby. Napˇr´ıklad ve hˇre Dobble je omezen´ı, ˇze v kaˇzdé hˇre mohou b´ yt souˇcasnˇe maximálnˇe 2 spoluhráˇci. Po pˇripojen´ı hráˇce k serveru je mu nab´ıdnuto jestli chce vytvoˇrit novou hru nebo se pˇripojit do nˇejaké jiˇz vytvoˇrené. Pokud si uˇzivatel vybere pˇripojen´ı do jiˇz vytvoˇrené hry jsou tu dvˇe moˇznosti. Zaprvé mu nab´ıdnout vˇsechny hry, do kter´ ych je moˇzno se momentálnˇe se pˇripojit nebo zadat nˇejaké ID, které jasnˇe identifikuje danou hru. Pokud je tedy ve hˇre poˇzadovan´ y poˇcet spoluhráˇc˚ u, hra m˚ uˇze zaˇc´ıt.

9

4 Pravidla hry Hra Dobble spoˇc´ıvá v hledán´ı stejn´ ych obrázk˚ u na dvou r˚ uzn´ ych kartiˇckách. Pˇriˇcemˇz obrázky na kaˇzdé z kartiˇcek jsou r˚ uznˇe velké. Po nalezen´ı stejného obrázku se na dan´ y obrázek klikne a hra vyhodnot´ı jestli se obrázek opravdu shoduje. Nyn´ı jsou 3 r˚ uzné hern´ı reˇzimy:

4.1

Single player

V tomto reˇzimu se hráˇc snaˇz´ı nasb´ırat co nejvyˇsˇs´ı skóre, dokud mu nedojdou ˇzivoty. Na zaˇca´tku hry má hráˇc 3 ˇzivoty. Hra je rozdˇelena na jednotlivá kola a v kaˇzdém následuj´ıc´ım kole se sn´ıˇz´ı ˇcas na uhodnut´ı stejného obrázku. V kaˇzdém kole je potˇreba nasb´ırat 5 správn´ ych uhodnut´ı, aby se postoupilo do dalˇs´ıho kola. Pˇri postupu do dalˇs´ıho kola je hráˇci pˇridán jeden nov´ y ˇzivot. Pokud hráˇc vybere ˇspatn´ y obrázek nebo mu dojde ˇcas na nalezen´ı obrázku je mu odebrán jeden ˇzivot. Hra je ukonˇcena po odebrán´ı vˇsech ˇzivot˚ u.

4.2

Multi player - jedno zaˇ r´ızen´ı

V tomto reˇzimu mohou hrát dva hráˇci proti sobˇe. Kaˇzdému hráˇci patˇr´ı jedna ze dvou kartiˇcek. Pˇred zahájen´ım hry se mus´ı nastavit poˇcet bod˚ u, kter´ y je nutn´ y pro dosaˇzen´ı v´ıtˇezstv´ı plus si kaˇzd´ y hráˇc m˚ uˇze zvolit barvu své kartiˇcky a zadat své jméno. Opˇet pˇri zvolen´ı správného obrázku je danému hráˇci pˇriˇcten jeden bod a pˇri ˇspatném pokusu jeden bod odeˇcten.

4.3

Multi player - v´ıce zaˇ r´ızen´ı

V tomto reˇzimu se hraje na dvou r˚ uzn´ ych zaˇr´ızen´ıch po s´ıti. Pˇred zaˇca´tkem hry se opˇet zvol´ı kolik bod˚ u je nutné pro celkové v´ıtˇezstv´ı. Po dosaˇzen´ı zvolen´ ych bod˚ u se hra ukonˇc´ı a kaˇzdému hráˇci je oznámeno jestli vyhrál nebo naopak prohrál. Poté se hra m˚ uˇze opakovat.

10

5 Realizace hry Na realizaci celé hry bylo pouˇzito velké mnoˇzstv´ı technologi´ı. Server je napsán v n´ızko´ urovˇ novém jazyce C. Nativn´ı jazyk Androidu je Java a proto rozˇs´ıˇren´ı, která zde potˇrebujeme pro s´ıt’ovou komunikaci jsou napsána v Javˇe a o obsluhu WebView tedy o GUI celé aplikace se stará znaˇckovac´ı jazyk HTML5 s kaskádov´ ymi styly CSS3 a jsou obsluhovány multiplatformn´ım, objektovˇe orientovan´ ym skriptovac´ım jazykem Javascript. V´ ysledná práce je vidˇet na obrázku 5.1.

Obrázek 5.1: Hra Dobble v1.0

5.1

Klient

Pro v´ yvoj mobiln´ı aplikace jsem pouˇzil framework PhoneGap [6], kter´ y umoˇzn ˇuje napsat aplikaci pomoc´ı HTML5, Javascriptu a CSS3. Velká v´ yhoda tohoto frameworku je, ˇze aplikace bude jen s mal´ ymi u ´pravami multiplatformn´ı.

11

Realizace hry

5.1.1

Klient

Kartiˇ cky

Ve hˇre je celkem 55 r˚ uzn´ ych kartiˇcek a na kaˇzdé z nich je 8 obrázk˚ u. Kaˇzdé dvˇe kartiˇcky maj´ı jeden obrázek spoleˇcn´ y, ale obrázek nemus´ı b´ yt stejnˇe velk´ y a nav´ıc r˚ uznˇe natoˇcen´ y viz obrázek 5.2. Kartiˇcky byly pˇrevzaty z pap´ırové podoby hry Dobble. Znamená to, ˇze jednotlivé kartiˇcky byly jedna po druhé naskenovány a poté upravovány v programu Photoshop do poˇzadované velikosti, podoby a pr˚ uhledného pozad´ı. Pr˚ uhledné pozad´ı je poˇzadováno proto, aby si hráˇc mohl zvolit libovolnou barvu. Na kartiˇckách je celkem 57 r˚ uzn´ ych obrázk˚ u, které se r˚ uznˇe stˇr´ıdaj´ı, aby byla dodrˇzena logika hry a opravdu kaˇzdá kartiˇcka mˇela s kaˇzdou právˇe jeden shodn´ y obrázek. Musel jsem tedy vypracovat matici o velikosti 55 x 55, kde je zaznamenán shodn´ y obrázek kaˇzd´ ych dvou kartiˇcek. Pokud tedy uˇzivatel klikne na nˇejak´ y z obrázk˚ u, my v´ıme ˇc´ısla kartiˇcek, mezi kter´ ymi hledá shodn´ y obrázek a ˇc´ıslo daného obrázku, které zjist´ıme z mapy kaˇzdé kartiˇcky viz dále. Poté se tedy m˚ uˇzeme pod´ıvat do naˇs´ı matice, kde ˇrádek matice bude ˇc´ıslo jedné kartiˇcky a sloupec ˇc´ıslo druhé kartiˇcky a pokud hodnota na tomto m´ıstˇe bude rovna ˇc´ıslu zvoleného obrázku, uˇzivatel zvolil správnˇe. Pokud se hodnota bude liˇsit, hned v´ıme, ˇze uˇzivatel zvolil ˇspatn´ y obrázek a m˚ uˇzeme zobrazit chybovou hláˇsku.

5.1.2

Rozpozn´ an´ı zvolen´ eho obr´ azku

Jak jiˇz v´ıme po stisknut´ı displeje potˇrebujeme identifikovat, na kter´ y z obrázk˚ u bylo kliknuto. Kaˇzdá kartiˇcka má tedy vygenerované polygony a kaˇzd´ y polygon odpov´ıdá jednomu obrázku na kartiˇcce, kter´ y chceme zvolit. Pˇri doteku displeje si tedy zjist´ıme pˇresné souˇradnice kam bylo kliknuto. Jelikoˇz je hra pˇrenosná na v´ıce zaˇr´ızen´ı, mus´ı se ˇreˇsit problém s r˚ uzn´ ym rozliˇsen´ım displej˚ u. Pokud klikneme uprostˇred displeje na zaˇr´ızen´ıch z r˚ uzn´ ym rozliˇsen´ım dostaneme pokaˇzdé jiné souˇradnice. Souˇradnice polygon˚ u jsou na kartiˇckách o velikosti 1000px x 1000px pokud je tedy ˇs´ıˇrka displeje také 1000px nemus´ı se pˇrepoˇc´ıtávat nic. Pokud je napˇr´ıklad pouze 500px je tedy o polovinu menˇs´ı t´ım pádem vynásob´ıme dvakrát x souˇradnici bodu, kde se uˇzivatel dotkl. Nyn´ı v´ıme kam pˇresnˇe uˇzivatel klikl a m˚ uˇzeme, tak zjistit o jaké ˇc´ıslo obrázku se jedná. Proto má kaˇzdá kartiˇcka vygenerovanou souˇradnicovou mapu polygon˚ u a kaˇzd´ y polygon má pˇriˇrazeno ˇc´ıslo od 1 do 57, jak bylo zm´ınˇeno v´ yˇse 57 je poˇcet vˇsech obrázk˚ u, které se v této hˇre nacházej´ı. Pokud se tedy bod, kam uˇzivatel klikl nacház´ı v nˇejakém z polygon˚ u kartiˇcky, v´ıme tedy jaké ˇc´ıslo obrázku to je a nic nám nebrán´ı v tom zjistit, jestli se uˇzivatel m´ yl´ı nebo se trefil a zvolil shodn´ y obrázek na zobrazen´ ych kartiˇckách. 12

Realizace hry

Klient

Obrázek 5.2: Ukázka shodn´ ych obrázk˚ u na kartiˇckách Generov´ an´ı polygon˚ u Na generován´ı tˇechto polygon˚ u pouˇz´ıvám online nástroj Summer [10]. Do tohoto online nástroje si nahrajeme obrázek, kter´ y nám bude slouˇzit jako podklad. Po u ´spˇeˇsném nahrán´ı obrázku jiˇz m˚ uˇzeme zaˇc´ıt generovat polygony na zvoleném pozad´ı. Pˇrepneme se tedy do moˇznosti generovat polygony a zaˇcneme generovat jednotlivé polygony viz obrázek 5.3. Pokud máme zvoleny vˇsechny polygony na dané kartiˇcce, m˚ uˇzeme z tohoto náhledu vygenerovat html kód, kter´ y je klasická HTML mapa viz obrázek 5.4. V tagu map jsou tagy area, kde v atributu coords nalezneme souˇradnice námi poˇzadovan´ ych polygon˚ u.

13

Realizace hry

Klient

Obrázek 5.3: Generován´ı polygon˚ u jedné kartiˇcky

Obrázek 5.4: Vygenerovaná HTML mapa

5.1.3

PhoneGap

PhoneGap je webová stránka zabalená jako nativn´ı aplikace, byl navrˇzen firmou Nitobi a v roce 2011 zakoupen firmou Adobe Systems. V souˇcasné dobˇe se tˇeˇs´ı velké popularitˇe a je pouˇzit pro velké mnoˇzstv´ı mobiln´ıch aplikac´ı. Nativn´ı aplikace pro jednotlivé platformy budou vˇzdy pravdˇepodobnˇe lepˇs´ı z hlediska rychlosti a vzhledu odpov´ıdaj´ıc´ıho dané platformˇe. Ale vzhledem k tomu, ˇze aplikace pro jednotlivé platformy je nutné vyv´ıjet kaˇzdou zvláˇst’, bude to vˇzdy velice nákladné ˇreˇsen´ı. Prvn´ım krokem je tedy napsat webovou aplikaci v HTML5, CSS, JS a po14

Realizace hry

Klient

kud chceme, aby se aplikace podobala co nejv´ıce nativn´ı, tak je dobré pouˇz´ıt framework, kter´ y má jiˇz pˇredpˇripravené komponenty s co nejv´ıce nativn´ım vzhledem napˇr´ıklad jQuery mobile. Za druhé je potˇreba zabalen´ı celé webové aplikace do nativn´ı pomoc´ı PhoneGap. Tu si lze pˇredstavit, jako pˇredpˇripravené nativn´ı aplikace pro jednotlivé platformy, které maj´ı pˇres celou plochu webov´ y prohl´ıˇzeˇc, kam se naˇcte právˇe webová aplikace. Hlavn´ı v´ yhodou oproti bˇeˇznému prohl´ıˇzeˇci je to, ˇze m˚ uˇzeme danou aplikaci odeslat do App Store, Google Play nebo WP Store a také máme pˇr´ıstup ke vˇsem systémov´ ym API jako tˇreba geolokaci, fotoaparátu, kontakt˚ um nebo filesystému. Dalˇs´ı v´ yhodou je velké mnoˇzstv´ı plugin˚ u, které pro v´ yvoj m˚ uˇzeme pouˇz´ıt a pokud nám nˇejak´ y scház´ı, je moˇzné si ho pro danou platformu v nativn´ım jazyce napsat. Na obrázku 5.5 je vidˇet, ˇze na vˇsech nejrozˇs´ıˇrenˇejˇs´ıch platformách máme jiˇz implementován pˇr´ıstup ke vˇsem bˇeˇzn´ ym vlastnostem, které mobiln´ı zaˇr´ızen´ı nab´ızej´ı. PhoneGap je nyn´ı moˇzné pouˇz´ıt na vˇsechny momentálnˇe známé operaˇcn´ı systémy chytr´ ych telefon˚ u. Od Amazon Fire OS, Firefox OS, Ubuntu aˇz po iOS, Android, Windows Phone potaˇzmo Windows 8. Psát tedy aplikace jako webové se vyplat´ı. Jen pokud by byla aplikace nároˇcnˇejˇs´ı a jednalo se o akˇcn´ı hru, asi je lepˇs´ı pˇrem´ yˇslet o nativn´ı aplikaci. Ale vzhledem k tomu, ˇze v´ yvoj webov´ ych prohl´ıˇzeˇc˚ u a webov´ ych technologi´ı jde velk´ ym tempem kupˇredu, urˇcitˇe je to dobrá volba do budoucna. Jiˇz pomalu zaˇc´ınaj´ı nˇekteré browsery podporovat potˇrebná API pro pˇr´ıstup k vlastnostem mobiln´ıch zaˇr´ızen´ı.

5.1.4

Pˇ r´ıprava prostˇ red´ı

Abychom mohli naˇs´ı aplikaci zaˇc´ıt vyv´ıjet je zapotˇreb´ı m´ıt nainstalované prostˇred´ı Eclipse, které je volnˇe ke staˇzen´ı na stránkách http://eclipse.org. Pro v´ yvoj naˇs´ı aplikace stáhneme verzi Eclipse pro Java v´ yvojáˇre, kterou nainstalujeme klasick´ ym zp˚ usobem. Pro v´ yvoj mobiln´ıch aplikac´ı je potˇreba doinstalovat Android SDK a ADT. D´ıky tomuto pluginu z´ıskáme kompletn´ı IDE pro v´ yvoj Android aplikac´ı. To znamená, ˇze z´ıskáme i Android emulátor, ve kterém budeme moci aplikaci spouˇstˇet a testovat.

15

Realizace hry

Klient

Obrázek 5.5: Tabulka podporovan´ ych vlastnost´ı jednotliv´ ych platforem Zaloˇ zen´ı prvn´ıho projektu Pˇred t´ım neˇz zaloˇz´ıme nov´ y projekt si jeˇstˇe mus´ıme stáhnout PhoneGap plugin, kter´ y nalezneme na http://phonegap.com/download, kde si m˚ uˇzeme zvolit v závislosti na operaˇcn´ım systému jak´ y bal´ıˇcek chceme. Staˇzen´ y soubor si po staˇzen´ı rozbal´ıme na disku. Zaloˇzen´ı nového projektu prob´ıhá stejnˇe jako u standardn´ı nativn´ı Android aplikace, zvol´ıme tedy z menu New Project a ze zobrazené nab´ıdky vybereme Android -> android Application Project poté si zadáme jméno naˇs´ı aplikace, minimáln´ı verzi API, na kterém bude moˇzné naˇs´ı aplikaci spustit a pˇrejdeme na stránku, kde si zvol´ıme ikonku naˇs´ı aplikace. V posledn´ım kroku si vytvoˇr´ıme Prázdnou MainActivity a m˚ uˇzeme pokraˇcovat s pˇridán´ım frameworku PhoneGap. Celá struktura aplikace je vidˇet na obrázku 5.6. V adresáˇri assets/www/ jsou kompletn´ı zdrojové kódy webové aplikace s pˇridanou JavaScriptovou knihovnou PhoneGap, kterou bychom pro spuˇstˇen´ı na standardn´ım webu nepotˇrebovali. Hlavn´ım souborem je samozˇrejmˇe index.html, kter´ y je poté zavolán v hlavn´ı aktivitˇe aplikace viz kapitola 5.1.5. ´ Uprava souboru AndroidManifest.xml Aby naˇse aplikace mohla pˇristupovat napˇr´ıklad k internetu, je potˇreba nejdˇr´ıve definovat pˇr´ıstup v rámci souboru AndroidManifest.xml. Moˇznosti nastaven´ı jsou pomˇernˇe ˇsiroké, tak si ukáˇzeme alespoˇ n základn´ı, která jsem pouˇzil v 16

Realizace hry

Klient

Obrázek 5.6: Struktura Android aplikace s pˇridan´ ym frameworkem PhoneGap aplikaci Dobble nebo taková, která by mohla b´ yt alespoˇ n vyuˇzita. Základn´ım oprávnˇen´ım, které potˇrebujeme pro hran´ı verze multiplayer online je oprávnˇen´ı INTERNET. Pokud zapomeneme pˇridat ˇrádek s t´ımto oprávnˇen´ım, budeme marnˇe zkoumat, proˇc se naˇs´ı aplikaci nedaˇr´ı pˇripojit k s´ıti. Dalˇs´ı oprávnˇen´ı, které je v aplikaci vyuˇz´ıváno je VIBRATE. Pˇri docházej´ıc´ım ˇcase v reˇzimu single player je uˇzivatel upozornˇen v posledn´ıch 3 sekundách prodluˇzuj´ıc´ımi se vibracemi. V budoucnosti by se mohlo hodit napˇr´ıklad oprávnˇen´ı k z´ıskán´ı polohy uˇzivatele z toho d˚ uvodu, abychom mohli v reˇzimu multiplayer online nab´ıdnout hráˇce z nejbliˇzˇs´ıho okol´ı. Moˇznosti geolokace jsou dvˇe a to ACCESS COARSE LOCATION a ACCESS FINE LOCATION na prvn´ı pohled m˚ uˇzou b´ yt zamˇen ˇovány, ale je dobré pˇresnˇe vˇedˇet, která se na co hod´ı. Rozd´ıly mezi tˇemito oprávnˇen´ımi je ten, ˇze z´ıskán´ı pˇresné polohy GPS m˚ uˇze b´ yt velice ˇcasovˇe nároˇcné, pokud jsme napˇr´ıklad v zabydlené oblasti nebo pˇr´ımo v budovˇe, kde nen´ı pˇr´ım´ y v´ yhled na oblohu. Proto lze pouˇz´ıt prvn´ı zmiˇ novan´ y zp˚ usob geolokace ACCESS COARSE LOCATION, na základˇe s´ıt’ové geolokace. Tento zp˚ usob je zpravidla rychlejˇs´ı, ale ménˇe pˇresn´ y a je zaloˇzen´ y na z´ıskávan´ı polohy z pozemn´ıch vys´ılaˇc˚ u mobiln´ıch operátor˚ u a Wi-Fi s´ıt´ı. Druh´ y zp˚ usob ACCESS FINE LOCATION umoˇzn ˇuje pˇri-

17

Realizace hry

Klient

stupovat k pˇresné poloze zaloˇzené na GPS ˇcipu v zaˇr´ızen´ı.

5.1.5

Java

V´ ykonn´ y kód klienta je napsán v jazyce Java ve v´ yvojovém prostˇred´ı Eclipse s pluginem Android SDK Manager. Pˇr´ıj´ımán´ı a odes´ılán´ı zpráv serveru se zajiˇst’uje právˇe zde. O funkˇcnost se staraj´ı 4 tˇr´ıdy.

Tˇ r´ıda MainActivity V´ ychoz´ı tˇr´ıda celého frameworku PhoneGap, která se stará o vytvoˇren´ı webového okna pro zobrazen´ı aplikace. Hlavn´ı a jediná metoda této tˇr´ıdy je onCreate(), která je vidˇet na obrázku 5.7. Této metodˇe zadáme cestu k souboru, ve kterém se nacház´ı hlavn´ı soubor webové aplikace.

Obrázek 5.7: Metoda onCreate(), která je srdcem celé aplikace

Tˇ r´ıda ConnectionPlugin ConnectionPlugin je tˇr´ıda, která zachytává poˇzadavky, které pˇricház´ı z webového rozhran´ı a jsou urˇceny pro komunikaci se serverem. V této tˇr´ıdˇe se nacház´ı dvˇe metody execute() a callJavaScript(). Metoda execute() zachytává poˇzadavky z WebView a dále je zpracovává a druhá metoda je urˇcena pro komunikaci z nativn´ıho prostˇred´ı do WebView. Pokud je tedy zaslán v multiuˇzivatelské hˇre online poˇzadavek na vytvoˇren´ı nové hry, je nejprve zaslán poˇzadavek z WebView, kde ho metoda execute() zpracuje a odeˇsle potˇrebné informace na server, kter´ y po zpracován´ı a vytvoˇren´ı nové hry vrát´ı ID hry. A metoda callJavaScript() zaˇsle dan´ y v´ ysledek do WebView, kde je o tom informován dan´ y uˇzivatel.

18

Realizace hry

Klient

Tˇ r´ıda TCP Connection a ListenThread Tyto dvˇe tˇr´ıdy jsou um´ıstˇeny v souboru TCP Connection.java a maj´ı za u ´kol vytvoˇren´ı a udrˇzován´ı komunikace se serverem. Po vytvoˇren´ı nové instance se v konstruktoru tˇr´ıdy TCP Connection vytvoˇr´ı nové vlákno tˇr´ıdy ListenThread, která se stará o pˇr´ıjem paket˚ u ze serveru a pˇredává je dále na WebView, kde pˇrijatá data dále zpracovává Javascript.

5.1.6

Javascript

WebView klienta bylo napsáno v prostˇred´ı programu PHPStorm. Pro lepˇs´ı práci s Javaskriptem [3] je pouˇzita knihovna jQuery [7] a jQuery mobile [8]. Dále bylo nutné oˇsetˇrit prodlen´ı pˇri kliknut´ı pomoc´ı knihovny fastclick [11] a pro v´ ybˇer barev kartiˇcek je vyuˇzita knihovna spectrum [9] O obsluhu WebView se staraj´ı 3 hlavn´ı soubory. a) connectionPlugin.js tento soubor má na starosti komunikaci s Javou. Po pˇrijet´ı zprávy ji zpracuje a zavolá pˇr´ısluˇsné metody uloˇzené v souboru main.js b) main.js je hlavn´ı soubor, kter´ y má na starosti obsluhovat události vˇsech tlaˇc´ıtek a pˇrij´ımat zprávy od souboru connectionPlugin.js c) cards.js V tomto souboru jsou uloˇzeny kombinace jednotliv´ ych karet a dalˇs´ı potˇrebné funkce pro obsluhu kartiˇcek. Dále má kaˇzdá kartiˇcka sv˚ uj Javascriptov´ y soubor, kde je uloˇzen polygon kaˇzdého obrázku generovan´ y pomoc´ı online aplikace Summer [10]. Ukázka vytvoˇren´ı mapy jedné konkrétn´ı kartiˇcky je na obrázku 5.3. Po kliknut´ı je tedy pomoc´ı tohoto konkrétn´ıho souboru moˇzno zjistit, na jak´ y obrázek uˇzivatel skuteˇcnˇe klikl. Kartiˇcek je ve hˇre celkem 55 a na kaˇzdé je 8 obrázk˚ u. Z ˇcehoˇz kaˇzdé dvˇe kartiˇcky maj´ı jeden stejn´ y obrázek. Nav´ıc jsou obrázky na kaˇzdé kartiˇcce r˚ uznˇe velké.

19

Realizace hry

Klient

Knihovna jQuery jQuery [7] je JavaScriptová knihovna, která nám usnadˇ nuje psan´ı v JavaScriptu a je optimalizována pro velké mnoˇzstv´ı prohl´ıˇzeˇc˚ u. jQuery je otevˇren´ y a svobodn´ y software pod licenc´ı MIT, kter´ y se v posledn´ıch nˇekolika letech velice rozˇs´ıˇril. V celé aplikaci tedy pro práci s JavaScriptem pouˇz´ıvám tuto knihovnu.

Knihovna jQuery mobile jQuery mobile [2] je knihovna, která nám pom˚ uˇze vytvoˇrit responzivn´ı design, kter´ y se jednoduˇse pˇrizp˚ usob´ı na r˚ uzné velikosti displeje. jQuery mobile vyuˇz´ıvá ke své práci knihovnu jQuery. Pyˇsn´ı se podporou vˇsech modern´ıch desktopov´ ych prohl´ıˇzeˇc˚ u, smartphon˚ u, tablet˚ u a e-ˇcteˇcek. jQuery Mobile nab´ız´ı pˇet barevn´ ych schémat. Pokud nám ˇza´dné nevyhovuje, m˚ uˇzeme si vzhled kompletnˇe navrhnout znovu – pomoc´ı ThemeRolleru [13], kter´ y v´ yvojáˇri pˇripravili speciálnˇe pro jQuery Mobile. Práce s n´ım je velice jednoduchá a instinktivn´ı, pro navrˇzen´ı ˇsablony se standardnˇe pouˇzije HTML5 a konkrétn´ı prvky jQuery mobile se uvádˇej´ı do atributu data. Na obrázku 5.8 m˚ uˇzete vidˇet pouˇzit´ı jQuery mobile v aplikaci Dobble. Knihovnu pouˇzijeme, tak ˇze do atributu data vloˇz´ıme potˇrebné informace, pokud napˇr´ıklad chceme nˇejakému elementu pˇriˇradit roli, jednoduˇse do data-role vloˇz´ıme hodnotu poˇzadované role navbar. Dalˇs´ı moˇznost´ı je zvolit si barevné schéma tlaˇc´ıtka tak, ˇze do atributu data-theme vloˇz´ıme jednu z pˇreddefinovan´ ych barevn´ ych schémat A aˇz E.

Obrázek 5.8: Pouˇzit´ı jQuery mobile v aplikaci Dobble

Knihovna FastClick FastClick je easy-to-use knihovna pro odstranˇen´ı 300ms prodlevy pˇri klepnut´ı na displej. Jelikoˇz je hra napsána ve frameworku PhoneGap, znamená to ve 20

Realizace hry

Klient

skuteˇcnosti, ˇze hra je bˇeˇz´ı v mobiln´ım prohl´ıˇzeˇci. A to sebou pˇrináˇs´ı své v´ yhody, napˇr´ıklad pˇrenositelnost mezi zaˇr´ızen´ımi, ale také nev´ yhody napˇr´ıklad 3OO milisekundovou prodlevu pˇri doteku displeje. Tato prodleva má samozˇrejmˇe své opodstatnˇen´ı. Pokud si v bˇeˇzném prohl´ıˇzeˇci zobraz´ıte stránku, která nen´ı optimalizována pro mobiln´ı zaˇr´ızen´ı, je vidˇet velice neˇcitelnˇe. Proto staˇc´ı dvakrát kliknout na displej a prohl´ıˇzeˇc automaticky pˇribl´ıˇz´ı zobrazen´ y obsah. A právˇe dan´ y dvojit´ y klik zp˚ usobuje tuto prodlevu. Aby prohl´ıˇzeˇc rozpoznal, ˇze jsme skuteˇcnˇe poklepali na displej zaˇr´ızen´ı dvakrát, mus´ı po prvn´ım kliknut´ı poˇckat 300 milisekund jestli nepˇrijde i druh´ y klik, kter´ y by znamenal pˇribl´ıˇzen´ı zobrazeného obsahu. Ale hra Dobble je optimalizována pro mobiln´ı zaˇr´ızen´ı, takˇze dvojit´ y klik pro pˇribl´ıˇzen´ı nepotˇrebujeme. Pˇrináˇs´ı nám tedy jen zpoˇzdˇen´ı po kliknut´ı a vytváˇr´ı iluzi zpomalenosti. Tato knihovna tedy dokonale ˇreˇs´ı náˇs problém. Odstraˇ nuje moˇznost dvoj´ıho kliknut´ı na displej a proto zaˇr´ızen´ı po prvn´ım doteku displeje provede událost spojenou s kliknut´ım a neˇceká 300 milisekund na druhé kliknut´ı.

5.1.7

HTML5 a CSS3

HTML5 a CSS3 [4] jsou v´ıce neˇz jen dva nové standardy pˇredstavené W3C. Slouˇz´ı hlavnˇe k tomu, aby nám pomohli tvoˇrit nové lepˇs´ı modern´ı webové aplikace. Aplikace tvoˇrené HTML5 se snadnˇeji vyv´ıjej´ı a spravuj´ı a také jsou pˇr´ıvˇetivˇejˇs´ı k uˇzivatel˚ um. HTML5 obsahuje nové elementy a CSS3 poskytuje nové pokroˇcilé selektory, grafická vylepˇsen´ı a lepˇs´ı podporu font˚ u. Proto nen´ı jiˇz nutné jednoduˇsˇs´ı animace implementovat pomoc´ı javascriptu. ´ ziˇ a) Uloˇ stˇ e Aby bylo moˇzné vytváˇret plnohodnotné aplikace, které funguj´ı pouze na stranˇe klienta, nesm´ı chybˇet u ´loˇziˇstˇe, ve kterém si m˚ uˇzeme uchovat data. V HTML5 m˚ uˇzeme vyuˇz´ıvat webové SQL databáze, nebo localStorage. Lokáln´ı SQL databáze v Dobble vyuˇzity nejsou, ale localStorage nám slouˇz´ı napˇr´ıklad pro ukládán´ı nastaven´ı. LocalStorage ukládá data v párech kl´ıˇc/hodnota.

b) Formul´ aˇ re Dˇr´ıve jsme museli pouˇz´ıvat JavaScript a CSS k vytvoˇren´ı posuvn´ ych jezdc˚ u, kalendáˇre pro v´ ybˇer data a kapátka pro v´ ybˇer barvy. Vˇsechny tyto prvky 21

Realizace hry

Klient

jsou nyn´ı reálnˇe definovány elementy HTML5, podobnˇe jako v´ ybˇerové nab´ıdky, zatrhávac´ı pol´ıˇcka nebo pˇrep´ınaˇce. Dalˇs´ım pˇr´ınosem jsou formuláˇre typu email, ˇc´ıslo, telefon nebo url. Pˇrináˇs´ı nám to napˇr´ıklad velkou v´ yhodu právˇe u mobiln´ıch zaˇr´ızen´ı, protoˇze prohl´ıˇzeˇc nám m˚ uˇze zobrazit pouze ˇc´ıselnou klávesnici pro zadán´ı telefonn´ıho ˇc´ısla a nav´ıc se formuláˇre automaticky validuj´ı a nedovol´ı odeslán´ı formuláˇre, pokud nen´ı zadan´ y napˇr´ıklad validn´ı email ve formuláˇri typu email.

c) Pokroˇ cil´ e CSS selektory CSS3 obsahuje nové selektory, které nám umoˇzn ˇuj´ı napˇr´ıklad identifikovat liché a sudé ˇra´dky tabulky, vˇsechna vybraná zaˇskrtávac´ı pol´ıˇcka, nebo dokonce posledn´ı odstavec ve skupinˇe. Proto nen´ı jiˇz nutné ”obcházet”CSS3, abychom se dostali v efekt˚ um, které potˇrebujeme z´ıskat. Bylo potˇreba pouˇz´ıt JavaScript nebo bylo nutné pˇridávat tˇr´ıdy do HTML, které se poté stylovaly.

d) Vizu´ aln´ı efekty a animace St´ıny za obrázky, tlaˇc´ıtky nebo texty pomáhaj´ı dostat do aplikac´ı hloubku a pˇrechody také mohou pˇridat na efektu prostoru. CSS3 nám umoˇzn ˇuje pˇridávat st´ıny a pˇrechody element˚ um bez nutnosti spoléhat na obrázky. Nav´ıc je moˇzné pouˇz´ıvat transformace k vytváˇren´ı kulat´ ych roh˚ u nebo ke zkosen´ı ˇci otoˇcen´ı element˚ u. Kulaté kartiˇcky jsou právˇe vytvoˇreny pomoc´ı tˇechto prvk˚ u. Jedná se o element div, kter´ y má nastaven´ y border-radius na vysokou hodnotu, takˇze maximáln´ı zkosen´ı roh˚ u zp˚ usob´ı, ˇze v´ ysledn´ y tvar je kruh. Vytvoˇren´ı animac´ı je nyn´ı s CSS3 také velice jednoduché, napˇr´ıklad pokud klikneme v naˇs´ı hˇre na ˇspatn´ y obrázek, tak vyvoláme efekt, kter´ y zp˚ usob´ı ,ˇze pozad´ı se rozbliká ˇcervenˇe. K tomuto efektu staˇcilo pár ˇrádek v CSS3 viz obrázek 5.9. Na obrázku m˚ uˇzeme vidˇet animaci, která je vázána na tˇr´ıdu hightlight-error prvn´ı parametr je název animace, která se má vykonat a druh´ y parametr, jak dlouho animace bude trvat. Definice animace se uvád´ı v procentech. Znamená to v jakém u ´seku se maj´ı dané pˇr´ıkazy vykonat. V naˇs´ı ukázkové animaci to tedy znamená, ˇze ihned po spuˇstˇen´ı se nastav´ı barva pozad´ı na ˇcervenou a v 5% celkového ˇcasu animace se nastav´ı na zcela pr˚ uhlednou a tak dále. Takˇze v celkovém v´ ysledku vyvolá v´ ystraˇzn´ y blikaj´ıc´ı efekt, kter´ y je pro nás d˚ uleˇzit´ y pokud uˇzivatel klikne na ˇspatn´ y obrázek.

22

Realizace hry

Server

Obrázek 5.9: Znázornˇen´ı animace v CSS3

5.2

Server

Server nám slouˇz´ı pro komunikaci mezi zaˇr´ızen´ımi. Je tedy potˇreba, pokud se hráˇc rozhodne spustit multiuˇzivatelskou hru online. Pro dalˇs´ı dva hern´ı módy potˇreba nen´ı. Server byl napsán v rámci semestráln´ı práce pˇredmˇetu KIV/UPS - u ´vod do poˇc´ıtaˇcov´ ych s´ıt´ı a dále poupraven a doladˇen v rámci bakaláˇrské práce. Je naprogramován v jazyce C, kódován a odladˇen ve v´ yvojovém prostˇred´ı Xcode viz obrázek 5.10 od firmy Apple. Po pˇripojen´ı nového klienta se vytvoˇr´ı nové vlákno, které se po celou dobu spojen´ı o tohoto klienta stará. Pro ukládán´ı jednotliv´ ych her je pouˇz´ıvá nov´ y datov´ y typ Game a jednotlivé hry jsou uloˇzeny v spojovém seznamu. Pokud se odpojuje posledn´ı hráˇc ze hry, daná hra se odstran´ı ze spojového seznamu a jiˇz nen´ı moˇzné do n´ı vstoupit. Server má tˇri hlavn´ı soubory .c a ke kaˇzdému hlaviˇckov´ y soubor .h s hlaviˇckami metod. V souboru main.h jsou includovány potˇrebné knihovny a vytvoˇreny nové datové typy.

a) Hlavn´ı soubor main.c kde se nacház´ı metoda main. A metoda pro vytvoˇren´ı nového vlákna a obsluhu klienta. b) Soubor game.c kde jsou um´ıstˇeny metody pro práci se hrou. Vytvoˇren´ı, odstranˇen´ı nové hry. Pˇridán´ı a odstranˇen´ı hráˇce ze hry. c) V souboru function.c se nacház´ı pomocné metody. Napˇr´ıklad metoda pro parsován´ı ˇretˇezce, metoda pro tisk nápovˇedy, metoda pro zpracován´ı parametr˚ u. 23

Realizace hry

Komunikaˇcn´ı protokol

Obrázek 5.10: V´ yvojové prostˇred´ı Xcode

5.3

Komunikaˇ cn´ı protokol

Pro komunikaci mezi klientem a serverem je pouˇzit TCP protokol (Transmission Control Protocol). D´ıky tomuto protokolu m˚ uˇze server a klient mezi sebou vytvoˇrit spojen´ı pˇres které poté pˇrenáˇs´ı data. TCP zaruˇcuje spolehlivé doruˇcen´ı a doruˇcen´ı ve správném poˇrad´ı.

5.3.1

Zah´ ajen´ı komunikace serveru

a) socket - Vytvoˇr´ı socket daného typu. Socket nen´ı asociován s ˇza´dn´ ym portem. b) bind - Naváˇze socket se jménem. Pouˇz´ıvá pouze server. c) listen - Slouˇz´ı k nastaven´ı socketu do stavu ˇcekán´ı na pˇr´ıchoz´ı spojen´ı. d) accept - Funkce vrát´ı parametry prvn´ıho spojen´ı ve frontˇe a nov´ y socket, kter´ y slouˇz´ı ke komunikaci s druhou stranou. P˚ uvodn´ı spojen´ı ve frontˇe a nov´ y socket, kter´ y slouˇz´ı ke komunikaci. e) recv - Pˇr´ıjem zpráv ze socketu. f) send - Odeslán´ı zprávy. 24

Realizace hry

5.3.2

Komunikaˇcn´ı protokol

Zah´ ajen´ı komunikace klienta

a) socket - Vytvoˇr´ı socket daného typu. Socket nen´ı asociován s ˇza´dn´ ym portem. b) connect - Pro navázán´ı spojen´ı. Pouˇz´ıvá pouze klient. c) send - Odeslán´ı zprávy. lze pouˇz´ıt pouze pokud je soket ve stavu pˇripojen. d) recv - Pˇr´ıjem zpráv ze soketu. e) close - Uzavˇren´ı soketu.

5.3.3

Komunikace mezi serverem a klientem

Klient a server se dorozum´ıvaj´ı pomoc´ı ˇc´ıseln´ ych signál˚ u viz následuj´ıc´ı tabulka. Pokud je potˇreba pˇrijmout nebo odeslat nˇejak´ y parametr, tak za ˇc´ıseln´ ym kódem oddˇeleno stˇredn´ıkem je um´ıstˇen dalˇs´ı parametr. Napˇr´ıklad pokud server pos´ılá informaci o novˇe vygenerovan´ ych kartách, kód kter´ y pˇrijde klientovi vypadá následovnˇe 3;16;43 prvn´ı ˇc´ıslo urˇcuje, o kter´ y signál se jedná a druhá dvˇe ˇc´ısla jsou jiˇz parametry tedy ˇc´ıslo karty 1 a ˇc´ıslo karty 2. Pˇrehled zas´ılan´ ych kód˚ u: Klient -> Server 1 - vytvoˇren´ı nové hry;poˇcet v´ıtˇezstv´ı na hru 2 - Pˇripojen´ı se do jiˇz vytvoˇrené hry podle ;ID hry 3 - Zaslan´ı informace o správné odpovˇedi 4 - Zaslán´ı informace o ˇspatné odpovˇedi 5 - Hráˇc je pˇripraven ke hˇre 6 - Hráˇc nen´ı pˇripraven ke hˇre 7 - Odpojit hráˇce ze hry Server -> Klient 1 - Vytvoˇren´ı nové hry probˇehlo v poˇra´dku ;ID hry;karta 1;karta 2 25

ˇ Casovˇ e kritické u ´seky hry

Realizace hry 2 - Vytvoˇren´ı nové hry se nezdaˇrilo

3 - Pˇripojen´ı do nové hry probˇehlo v poˇrádku ;karta 1;karta 2 4 - Pˇripojen´ı do nové hry se nezdaˇrilo - tato hra neexistuje 5 - Pˇripojen´ı do nové hry se nezdaˇrilo - ˇzádné hry nejsou vytvoˇreny 6 - Chyba volaná sluˇzba neexistuje 7 - Pˇripojen´ı do nové hry se nezdaˇrilo - hra je obsazena 8 - Do hry se pˇripojil protihráˇc 9 - Pˇripojen´ı do nové hry se nezdaˇrilo - poˇcet hráˇc˚ u ve hˇre je vyˇcerpán (hra nemá voln´ y socket) 10 - Protihráˇc se odpojil z této hry 12 - Spojen´ı bylo navázáno 14 - Spojen´ı se nepodaˇrilo vytvoˇrit 15 - Spojeni se serverem selhalo 16 - Vytvoˇren´ı nebo pˇripojen´ı k nové hˇre se nezdaˇrilo Klient je jiˇz v nˇejaké hˇre pˇripojen;ID hry 17 - Nové skóre já ;skóre 18 - Nové skóre protivn´ık ;skóre 19 - Nová ˇc´ısla karet, nové skóre já ;skóre;karta 1;karta 2 20 - Nová ˇc´ısla karet, nové skóre protivn´ık ;skóre;karta 1;karta 2 21 - Oba hráˇci ready - start hry 22 - Konec hry já jsem vyhrál 23 - Konec hry protivn´ı vyhrál

5.4

ˇ Casovˇ e kritick´ eu ´ seky hry

ˇ Casovˇ e kritické u ´seky hry mohou nastat pouze v hern´ım reˇzimu multiplayer online. Ve verzi o✏ine, kdy uˇzivatelé hraj´ı na jednom zaˇr´ızen´ı budou m´ıt vˇzdy stejné podm´ınky. Pokud bereme v u ´vahu rychlost odezvy systému nebo dobu potˇrebnou na vyhodnocen´ı správnosti kliknut´ı. Kdyˇz se pod´ıváme na hru online, kde kaˇzd´ y uˇzivatel má své vlastn´ı zaˇr´ızen´ı, je zde jiˇz nˇekolik aspekt˚ u, které by nám mohli hru ovlivˇ novat.

26


Realizace hry

5.4.1

S ohledem na v´ ykonnost zaˇ r´ızen´ı

Prvn´ı by mohla b´ yt v´ ykonnost daného zaˇr´ızen´ı, která by mohla prodlouˇzit dobu potˇrebnou pro zjiˇstˇen´ı, na kter´ y obrázek bylo kliknuto a porovnán´ı jestli je zvolené rozhodnut´ı správnˇe. Ale vzhledem k tomu, ˇze tyto u ´kony jsou opravdu velice rychlé, tak v´ ykonnost zaˇr´ızen´ı je zanedbatelná a v´ ysledek hry nám prakticky neovlivn´ı, pokud to nebude extrémnˇe pomalé zaˇr´ızen´ı. Hra byla testována i na emulátoru, kter´ y bych nazval opravdu extrémnˇe pomal´ y a pomalejˇs´ı reálné zaˇr´ızen´ı budeme hledat sloˇzitˇe. Pˇresto byla hra hratelná a rozd´ıl v porovnán´ı s v´ ykonnˇejˇs´ım reáln´ ym zaˇr´ızen´ım je urˇcitˇe znát, ale stále to je v pˇrijatelné m´ıˇre.

5.4.2

S ohledem na rychlost pˇ ripojen´ı

Druh´ ym a v´ yraznˇe závaˇznˇejˇs´ım problémem m˚ uˇze b´ yt rychlost pˇripojen´ı k s´ıti. Data, která se pˇrenáˇs´ı mezi serverem a zaˇr´ızen´ım jsou minimalizována a jak bylo zm´ınˇeno v´ yˇse jedná se pouze o ˇc´ıslo zprávy, které se má vykonat. Kdybychom vzali v u ´vahu, ˇze jeden z uˇzivatel˚ u bude v nejrychlejˇs´ı s´ıti LTE, kde se rychlost stahován´ı pohybuje pr˚ umˇernˇe v ˇrádech des´ıtek Mb/s a druh´ y uˇzivatel v odlehlejˇs´ı oblasti s pokryt´ım EDGE s pr˚ umˇernou rychlost´ı stahován´ı cca 150 kb/s. Tento problém nám jiˇz m˚ uˇze pˇrinést znaˇcné komplikace. Pokud vezmeme v u ´vahu, ˇze oba hráˇci se dotknou displeje zaˇr´ızen´ı souˇcasnˇe, tak je dá oˇcekávat, ˇze hráˇc s rychlejˇs´ım pˇripojen´ım k s´ıti z´ıská urˇcitou v´ yhodu. V této situaci by se dal tento hendikep jeˇstˇe zanedbat, protoˇze k naprosto totoˇznému stisknut´ı displeje doj´ıt prakticky nem˚ uˇze. M˚ uˇze nastat, ale závaˇznˇejˇs´ı situace. Hráˇc s pomalejˇs´ım pˇripojen´ım vid´ı správnou odpovˇed’ dˇr´ıve, ale neˇz doputuje jeho správná odpovˇed’ k serveru pˇredstihne ho druh´ y hráˇc s rychlejˇs´ım pˇripojen´ım. Toto uˇz je mnohem závaˇznˇejˇs´ı problém a v následuj´ıc´ı kapitolce se pod´ıváme na jeho moˇzná ˇreˇsen´ı.

5.4.3

Moˇ zn´ aˇ reˇ sen´ı

Jedn´ım z ˇreˇsen´ı by mohlo b´ yt zas´ılán´ı ˇcasov´ ych znaˇcek spolu s odeslán´ım odpovˇedi na server. Zde ale naraz´ıme na synchronizaci ˇcasu obou zaˇr´ızen´ı. Synchronizace by se dala vyˇreˇsit tak, ˇze pˇri pˇripojen´ı klienta na server by mu server zpˇet zaslal sv˚ uj aktuáln´ı ˇcas, od kterého by se poté nová hra odv´ıjela. Pokud bychom pˇreˇsli na takovéto ˇreˇsen´ı, server by po pˇrijet´ı zprávy 27


Realizace hry

uloˇzil ˇcas správné odpovˇedi a pokud by pˇriˇsla zpráva od druhého uˇzivatele se stejn´ ymi daty ke stejn´ ym kartám se správnou odpovˇed´ı, ale s niˇzˇs´ı ˇcasovou znaˇckou body by se pˇriˇcetli hráˇci, od kterého pˇriˇsla odpovˇed’ na server déle, ale vzhledem k ˇcasové znaˇcce byla odeslána z daného zaˇr´ızen´ı dˇr´ıve. To znamená, ˇze uˇzivatel byl rychlejˇs´ı, ale prodlen´ı nebylo zp˚ usobeno jeho vinnou, ale rychlost´ı pˇripojen´ı a to je pro nás d˚ uleˇzit´ y aspekt.

28

6 Uˇzivatelská dokumentace Hra Dobble se ovládá pouze dotyky displeje. Po spuˇstˇen´ı hry je defaultnˇe nastaven layout portrét, tedy zobrazen´ı na v´ yˇsku. Na událost pˇreklopen´ı na ˇs´ıˇrku tedy zaˇr´ızen´ı nijak nereaguje.

Obrázek 6.1: Single player

6.1

Single player

Dan´ y popis se vztahuje k obrázku 6.1 a) Pˇred spuˇstˇen´ım hry je moˇzné si nastavit barvu kartiˇcek a jméno hráˇce. b) Hráˇc vstoup´ı do 1 levelu, kde je nastaven maximáln´ı ˇcasov´ y limit a v kaˇzdém dalˇs´ım kole se zrychluje. c) Po 5 správn´ ych uhodnut´ı stejn´ ych obrázk˚ u na zobrazen´ ych kartiˇckách hráˇc postoup´ı do dalˇs´ıho kola

6.2

Multi player - o✏ine

a) Pˇred zahájen´ım hry se nastav´ı poˇcet bod˚ u, které je potˇreba z´ıskat k v´ıtˇezstv´ı ve hˇre, jména jednotliv´ ych hráˇc˚ u a barvy kartiˇcek 29

Uˇzivatelská dokumentace

Multi player - online

b) Hráˇc, kter´ y nejdˇr´ıve nasb´ırá stanoven´ y poˇcet bod˚ u, vyhrává.

Obrázek 6.2: Postup vytvoˇren´ı nové online hry

6.3

Multi player - online

Spuˇstˇen´ı hry prob´ıhá následovnˇe viz obrázek 6.2. ´ a) Uvodn´ ı stránka po spuˇstˇen´ı aplikace Dobble 30

Uˇzivatelská dokumentace

Pˇreloˇzen´ı aplikace a spuˇstˇen´ı aplikace

b) Nastaven´ı IP adresy a portu serveru c) Záloˇzka nastaven´ı online hry - Zde je moˇznost nastavit si barvu kartiˇcek d) Vytvoˇren´ı nebo pˇripojen´ı do nové hry, moˇznost nastaven´ı maximáln´ıho poˇctu v´ıtˇezstv´ı na jednu hru - V horn´ı ˇca´sti okna mus´ı b´ yt ˇcerven´ y nápis Connection OK pokud je tam napˇr´ıklad Connection Error nepodaˇrilo se pˇripojit k serveru a t´ım pádem nep˚ ujde vytvoˇrit nová hra ani se k jiné hˇre pˇripojit. ˇ an´ı na pˇripojen´ı protihráˇce - Po pˇripojen´ı protihráˇce se tlaˇc´ıtko e) Cek´ start pˇrepne do samo do stavu actived a je moˇzné na nˇej kliknout a zahájit novou hru. f) Samotná hra Dobble - Klikán´ı na obrázky je umoˇznˇeno pouze na spodn´ı kartiˇcce na obrázky ˇc´ıslo 4 tedy ˇcervené.

6.4

Pˇ reloˇ zen´ı aplikace a spuˇ stˇ en´ı aplikace

Pˇreloˇzen´ı serveru je velice snadné pomoc´ı make. Je k dispozici i make clean pro smazán´ı jiˇz vytvoˇreného spustitelného souboru. Poté se vygenerovan´ y skript spust´ı ./název skriptu. K dispozici jsou následuj´ıc´ı parametry. -help pro vypsán´ı nápovˇedy, -port pro nastaven´ı ˇc´ısla portu a -ip pro nastaven´ı ip adresy. Pro spuˇstˇen´ı klienta se mus´ı nainstalovat pˇriloˇzen´ y bal´ıˇcek s pˇr´ıponou .apk, tedy standardn´ı instalaˇcn´ı soubor pro zaˇr´ızen´ı s OS Android.

31

7 Distribuce hry Abychom mohli nˇejakou mobiln´ı aplikaci pro Android distribuovat, potˇrebujeme ji nejdˇr´ıve exportovat do apk souboru. Pokud tedy chceme náˇs aplikaˇcn´ı soubor vyexportovat pro pouˇzit´ı na jin´ ych zaˇr´ızen´ıch, pom˚ uˇze nám k tomu Eclipse. Z nab´ıdky zvol´ıme poloˇzku Android Tools -> Export Unsigned Application Package, která nám umoˇzn´ı exportovat soubor do námi zvoleného um´ıstˇen´ı. Tento soubor nebude digitálnˇe podepsan´ y, proto nebude moˇzná instalace na zaˇr´ızen´ı, které nebudou m´ıt v telefonu povolenou volbu povolit instalaci z neovˇeˇren´ ych zdroj˚ u.

Vytvoˇ ren´ı certifik´ atu Pokud bychom chtˇeli aplikaci um´ıstit do android marketu, je nutné ji m´ıt digitálnˇe podepsanou tzn. mus´ıme vytvoˇrit tzv. keysotre certifikát. Kter´ ym naˇs´ı aplikaci podep´ıˇseme a bude nám umoˇznˇeno nahrát ji do Android marketu. Postup pro vytvoˇren´ı certifikátu je následuj´ıc´ı. 1) Prav´ ym tlaˇc´ıtkem myˇsi klikneme na ikonku naˇseho projektu. 2) Z nab´ıdky zvol´ıme Android Tools -> Export Signed Application Package. 3) Poté uˇz jen zvol´ıme náˇs projekt a vypln´ıme um´ıstˇen´ı, heslo a u ´daje o sobˇe jak ukazuje obrázek 7.1 T´ımto jsme vygenerovali digitálnˇe podepsan´ y apk soubor, kter´ y jiˇz m˚ uˇzeme nahrát do Android marketu.

Upload aplikace do Android marketu Pokud chceme hru publikovat na Android marketu, mus´ıme b´ yt registrovan´ y Android v´ yvojáˇr a to vyˇzaduje zaplatit poplatek ve v´ yˇsi 25$ a m´ıt vlastn´ı Google u ´ˇcet. Cel´ y proces je relativnˇe jednoduch´ y, mus´ıme souhlasit s licenˇcn´ımi podm´ınkami a zaplatit v´ yˇse zm´ınˇen´ y poplatek skrze Google checkout. Samotn´ y upload je velice jednoduch´ y. Aplikaci ovˇeˇruje intern´ı automatick´ y systém a aplikaci je moˇzno do Android marketu dostat bˇehem nˇekolika minut. Postup nahrán´ı aplikace je následuj´ıc´ı: 32

Distribuce hry 1) Pˇrejdeme na adresu http://market.android.com 2) Klikneme na tlaˇc´ıtko Upload Application, kde do pˇr´ısluˇsného formuláˇre vypln´ıme informace o aplikaci a pˇriloˇz´ıme samotnou aplikaci. Maximáln´ı velikost nahrávané aplikace je 50MB. 3) Android market vyˇzaduje minimálnˇe dva screenshoty naˇs´ı aplikace, pak ikonku aplikace a dalˇs´ı náleˇzitosti, které se budou zobrazovat v rámci Android marketu 4) Pˇred nahrán´ım aplikace je potˇreba nastavit atribut android:debuggable na false. Pokud bychom na to zapomnˇeli, pˇri nahráván´ı budeme upozornˇeni. 5) Po u ´spˇeˇsném nahrán´ı se aplikace objev´ı v Android marketu bˇehem chv´ıle.

Obrázek 7.1: Vyplnˇen´ı u ´daj˚ u pro nov´ y keystore

33

8 Testován´ı Pokud vytváˇr´ıme nˇejakou sloˇzitˇejˇs´ı aplikaci, dˇr´ıve nebo pozdˇeji naraz´ıme na otázku jak efektivnˇe aplikaci testovat. Pˇri v´ yvoji pro PhoneGap m˚ uˇzeme pracovat s velkou ˇradou testovac´ıch nástroj˚ u já jsem vyuˇz´ıval následuj´ıc´ı.

8.1

Lad´ıc´ı konzole Eclipse

V Eclipse jsem vyuˇz´ıval moˇznost logován´ı do lad´ıc´ı konzole pomoc´ı pˇr´ıkaz˚ u viz obrázek 8.1. Toto nen´ı u ´plnˇe nejlepˇs´ı zp˚ usob testován´ı, ale na základn´ı vˇeci to dostaˇcuje. V´ yhodou tˇechto v´ ypis˚ u je, ˇze se zobrazuj´ı pouze do konzole Eclipse a nemus´ı se pˇri vystaven´ı ostré verze z kódu nijak odstraˇ novat. Tyto pˇr´ıkazy si m˚ uˇzeme filtrovat v rámci nástroje LogCat, na kter´ y se m˚ uˇzeme pˇrepnout zvolen´ım jiné perspektivy v Eclipse a zvolen´ım poloˇzky DDMS.

Obrázek 8.1: Lad´ıc´ı v´ ypisy konzole Eclipse

8.2

Lad´ıc´ı n´ astroje v prohl´ıˇ zeˇ ci

M˚ uˇzeme vyuˇz´ıt hlavn´ı v´ yhodu PhoneGap a to, ˇze se jedná o webovou aplikaci a testovat pˇr´ımo v prohl´ıˇzeˇc´ıch viz obrázek 8.3. Pro testován´ı jsem pouˇz´ıval prohl´ıˇzeˇc Google Chrome. Chrome nab´ız´ı mnoho v´ yvojáˇrsk´ ych nástroj˚ u a pro programován´ı, respektive testován´ı webov´ ych aplikac´ı, je podle mého názoru zdaleka nejlepˇs´ı. Velkou v´ yhodu vid´ım hlavnˇe v tom, ˇze webov´ y prohl´ıˇzeˇc se nacház´ı v kaˇzdém PC a bez ˇza´dn´ ych sloˇzit´ ych instalac´ı, nám poskytuje hodnˇe moˇznost´ı. M˚ uˇzeme se snadno d´ıvat na obsah jednotliv´ ych element˚ u, pˇridávat zaráˇzky pro debugován´ı kódu. Jedna z hlavn´ıch v´ yhod, kterou jsem pro testován´ı vyuˇz´ıval je emulace mobiln´ıho zaˇr´ızen´ı, kde se po aktivaci prohl´ıˇzeˇc chová jako mobiln´ı zaˇr´ızen´ı. M˚ uˇzeme si zde vybrat z velkého mnoˇzstv´ı zaˇr´ızen´ı jako napˇr´ıklad Apple iPad, Apple iPhone, Amazon Kindle, Sony Xperia, 34

Testován´ı

Lad´ıc´ı nástroje v prohl´ıˇzeˇci

HTC, LG a velké mnoˇzstv´ı telefon˚ u od Korejského v´ yrobce Samsung Galaxy. Na obrázku 8.3 m˚ uˇzeme vidˇet emulaci mobiln´ıho zaˇr´ızen´ı Apple iPhone 4. Pokud si zvol´ıme pˇr´ımo konkrétn´ı zaˇr´ızen´ı, Chrome za nás nastav´ı viewPort i User Agenta. Pokud ale nechceme konkrétn´ı zaˇr´ızen´ı, m˚ uˇzeme si vˇsechny parametry nastavit sami. V záloˇzce screen si m˚ uˇzeme nastavit rozliˇsen´ı, které poˇzadujeme a device pixel ratio takzvan´ y pixelov´ y pomˇer. V záloˇzce user agent si m˚ uˇzeme nastavit konkrétn´ı ˇretˇezec a v záloˇzce sensors geolokaci a akcelerometr.

Emulace viewPortu a device pixel ratio V záloˇzce screen si m˚ uˇzeme nastavit hodnotu rozliˇsen´ı podle naˇs´ı libosti. A tak si snadno testovat, jak se naˇse aplikace chová v zaˇr´ızen´ıch s r˚ uzn´ ym rozliˇsen´ım. Device pixel ratio je takzvan´ y pomˇer mezi fyzick´ ym a abstraktn´ım rozliˇsen´ım zaˇr´ızen´ı. Pokus´ım se to vysvˇetlit na pˇr´ıkladu. Vezmeme si Samsung Galaxy S4, kter´ y má rozliˇsen´ı Full HD 1920x1080px, tud´ıˇz má vysoké DPI neboli poˇcet zobrazen´ ych bod˚ u na jednotku jednoho palce. Mus´ı se toto vysoké rozliˇsen´ı nˇejak´ ym zp˚ usobem redukovat a k tomu nám slouˇz´ı v´ yˇse zm´ınˇené device pixel ratio. Je to ˇc´ıseln´ yu ´daj, kter´ y udává kolikrát má b´ yt fyzické rozliˇsen´ı zmenˇseno. Pokud tedy vezmeme v u ´vahu S4 od Samsungu má rozliˇsen´ı na ˇs´ıˇrku 1080px a device pixel ratio má hodnotu 3. To znamená, ˇze zaˇr´ızen´ı bude zobrazovat obsah jako by mˇel rozliˇsen´ı 360px. Nastává tedy otázka, proˇc v´ yrobci dˇelaj´ı takto vysoké rozliˇsen´ı, které nakonec nen´ı ani vyuˇzito. Vysvˇetlen´ı je jednoduché, i kdyˇz vysoké rozliˇsen´ı nen´ı fyzicky vyuˇzito, tak je to na displeji opravdu znát, pokud se na nˇej pod´ıváme zbl´ızka, na prvn´ı pohled poznáme, ˇze displej má vysoké rozliˇsen´ı. Zobrazen´ı na displeji je opravdu jemné a kvalitn´ı. D˚ ukazem jsou vysoce kvalitn´ı displeje retina od firmy Apple. Napˇr´ıklad od 13 palcového macBooku Pro umist’uj´ı displej retina s rozliˇsen´ım 2560x1600. Takové rozliˇsen´ı nemá v dneˇsn´ı dobˇe ani vˇetˇsina vyrábˇen´ ych televizor˚ usu ´hlopˇr´ıˇckou pˇres 100cm. Ve PhoneGapu nebo webov´ ych aplikac´ıch m˚ uˇzeme práci s rozliˇsen´ım velice dobˇre vyuˇz´ıt, pokud napˇr´ıklad dˇeláme responzivn´ı webdesign. Jednoduˇse ˇreˇceno chceme aplikaci, která se bude pˇeknˇe zobrazovat jak na 25 palcovém monitoru, tak na telefonu s velikost´ı displeje 4 palce. Pro práci pouˇzijeme takzvané CSS media queries. Jsou to dotazy na urˇcité parametry. Pomoc´ı tˇechto dotaz˚ u si snadno m˚ uˇzeme zjistit napˇr´ıklad to, jestli je rozliˇsen´ı menˇs´ı neˇz 400px a upravit podle toho vzhled a pˇrizp˚ usobit ho mobiln´ım zaˇr´ızen´ım. Pokud se dotazujeme právˇe na rozliˇsen´ı, je jiˇz zpracováno pomoc´ı v´ yˇse zm´ınˇeného device pixel ratio. Takˇze velice snadno zjist´ıme, jestli se jedná o mobiln´ı zaˇr´ızen´ı. 35

Testován´ı

Emulátor

Emulace user agenta User agent je ˇretˇezec, kter´ y se odes´ılá v hlaviˇcce poˇzadavku o nˇejaká data na server. Z tohoto ˇretˇezce rozpoznáme nˇekolik d˚ uleˇzit´ ych informac´ı o zaˇr´ızen´ı, ˇ ezec m˚ které o data ˇzádá. Retˇ uˇze vypadat napˇr´ıklad takto: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36 Z tohoto ˇretˇezce poznáme, ˇze se jedná o PC s operaˇcn´ım systémem Mac OS X 10.9.2 a pouˇz´ıvá prohl´ıˇzeˇc Google Chrome 34.0.1847.116, kter´ y má jádro AppleWebKit.

Emulace geolokace a akcelerometru V posledn´ı záloˇzce máme moˇznost si nastavit geolokaci a souˇradnice akcelerometru. U geolokace si m˚ uˇzeme nastavit pˇresné souˇradnice, kde se nacház´ıme nebo zaˇskrtnout, ˇze je pozice nedostupná, abychom si otestovali, jak se dané zaˇr´ızen´ı bude chovat, pokud napˇr´ıklad v pr˚ ubˇehu ztrat´ı signál. Dalˇs´ı velice zaj´ımavou moˇznost´ı pro testován´ı, je nastaven´ı souˇradnic akcelerometru, které m˚ uˇzeme vidˇet na obrázku 8.2. Zde si m˚ uˇzeme dobˇre nasimulovat naklonˇen´ı zaˇr´ızen´ı a snadno tak otestovat chován´ı aplikace. Pokud v naˇs´ı aplikaci tento senzor vyuˇz´ıváme.

Obrázek 8.2: Ukázka nastaven´ı souˇradnic akcelerometru

8.3

Emul´ ator

Testován´ı v emulátoru je ponˇekud zdlouhavé z d˚ uvodu vysoké nároˇcnosti na hardware. Emulátor byl spouˇstˇen na platformˇe s unixov´ ym jádrem Mac 36

Testován´ı

Zaˇr´ızen´ı

Obrázek 8.3: Emulace zaˇr´ızen´ı Apple iPhone 4 v prohl´ıˇzeˇci Google Chrome OS X obrázek 8.4, i na Windowsech. Pokud testujeme v emulátoru, m˚ uˇzeme vyuˇz´ıvat lad´ıc´ı konzoli Eclipse a testovat jiˇz plnou funkˇcnost hry.

8.4

Zaˇ r´ızen´ı

Testován´ı v reálném zaˇr´ızen´ı je o hodnˇe sviˇznˇejˇs´ı neˇz v emulátoru. Pouze prvn´ı spuˇstˇen´ı je komplikovanˇejˇs´ı. Pˇred nahrán´ım na reáln´ y telefon se mus´ı provést nˇekolik krok˚ u. Pokud chceme hru testovat na zaˇr´ızen´ı Android, nemus´ıme m´ıt placen´ y v´ yvojáˇrsk´ y certifikát, jako je tomu napˇr´ıklad u iPhone. U OS Android tedy provedeme následuj´ıc´ı nastaven´ı: V nastaven´ı telefonu pˇrejdeme do karty Aplikace -> V´ yvoj a zatrhneme volbu Ladˇen´ı USB (text se m˚ uˇze drobnˇe liˇsit v závislosti na verzi). 37

Testován´ı

Zaˇr´ızen´ı

Obrázek 8.4: Hra Dobble spuˇstˇená v emulátoru na platformˇe OS X 10.9 Mavericks

Poté staˇc´ı jiˇz jen propojit telefon USB kabelem s PC a doinstalovat potˇrebné ovladaˇce. Pˇri spuˇstˇen´ı aplikace v Eclipse by nám mˇel dát na v´ ybˇer jestli chceme aplikaci spustit v emulátoru nebo na reálném zaˇr´ızen´ı.

Testovan´ a zaˇ r´ızen´ı Testován´ı aplikace prob´ıhalo na následuj´ıc´ıch reáln´ ych zaˇr´ızen´ıch: Samsung Galaxy SI i9000 - verze API 2.3.6 rozliˇsen´ı 800x480 Samsung Galaxy SIII i9300 - verze API 4.0, rozliˇsen´ı 1280x720px. 38

Testován´ı

Online verze

Samsung Galaxy S4 i9505 - verze API 4.2, rozliˇsen´ı 1920x1080px HTC One V - Verze API 4.0.3, rozliˇsen´ı 800x480 Na vˇsech v´ yˇse uveden´ ych zaˇr´ızen´ıch hra fungovala bez problém˚ u. Hra byla jiˇz pˇredvedena v rámci Dne otevˇren´ ych dveˇr´ı na fakultˇe FAV katedry informatiky a návˇstˇevn´ıci ji mˇeli zpˇr´ıstupnˇenou, jak ve formˇe emulátoru, tak na reálném zaˇr´ızen´ı.

8.5

Online verze

Testován´ı online verze poˇzaduje nav´ıc spuˇstˇen´ y server. Aby testován´ı bylo opravdu d˚ ukladné, bylo by potˇreba vetˇs´ı mnoˇzstv´ı zaˇr´ızen´ı. Testy serveru prob´ıhali na ˇskoln´ıch stroj´ıch, konkrétnˇe students.kiv.zcu.cz, na které je moˇzno pˇristupovat z vnˇejˇs´ı s´ıtˇe. Po spuˇstˇen´ı serveru jsem postupnˇe pˇripojoval zaˇr´ızen´ı a testoval r˚ uzné kombinace a propojen´ı jednotliv´ ych zaˇr´ızen´ı. Testy dopadly v´ ybornˇe, hra byla plnˇe hratelná.

8.6

Test s ohledem na rychlost pˇ ripojen´ı

Rychlost pˇripojen´ı byla testována na dvou zaˇr´ızen´ıch, kde jedno bylo pˇripojeno do s´ıtˇe pomoc´ı Wi-Fi a druhé pomoc´ı pomalejˇs´ıho mobiln´ıho pˇripojen´ı. I pˇres r˚ uzné rychlosti pˇripojen´ı se nepovedlo nasimulovat, aby hráˇc s pomalejˇs´ım zaˇr´ızen´ım byl znev´ yhodnˇen. Prodlevy odpovˇed´ı ze serveru byly opravdu zanedbatelné, takˇze znev´ yhodnˇen´ı pomalejˇs´ıho pˇripojen´ı se nepovedlo prokázat.

39

9 Závˇer C´ılem této bakaláˇrské práce bylo navrˇzen´ı, realizace a nakonec samotné ovˇeˇren´ı funkcionality hry Dobble. Do souˇcasné doby nebyla tato hra dostupná pro prostˇred´ı Android, ale pouze pro iOS a to bez hern´ıho módu multiplayer online. V prvn´ıch kapitolách jsem se vˇenoval prozkoumáván´ı jednotliv´ ych mobiln´ıch zaˇr´ızen´ı a jejich moˇznému pouˇzit´ı pro mobiln´ı hry, potaˇzmo multiuˇzivatelské hry online. Dále byla hra navrˇzena po vzoru pap´ırové verze hry Dobble a realizována pomoc´ı multiplatformn´ıho frameworku PhoneGap. Nakonec, aby byla ovˇeˇrena funkcionalita, bylo potˇreba hru otestovat na r˚ uzn´ ych zaˇr´ızen´ıch s rozd´ılnou verz´ı API a rozliˇsen´ım displeje. Funkcionalita hry byla ovˇeˇrena ve vˇsech 3 uveden´ ych hern´ıch scénáˇr´ıch a to jak v emulátoru, tak v reáln´ ych zaˇr´ızen´ıch. Jak uˇz bylo zm´ınˇeno velkou v´ yhodou hry je, ˇze je napsána ve frameworku PhoneGap, proto ji m˚ uˇzeme snadno pˇrenést na dalˇs´ı platformy. V praxi se ukázalo, ˇze pomoc´ı multiplatformn´ıch nástroj˚ u se dá vyvinout plnohodnotná aplikace, potaˇzmo hra. Webové technologie ˇceká d´ıky HTML5 a CSS3 v následuj´ıc´ıch letech dalˇs´ı pokrok, proto i v oblasti multiplatformn´ıch her m˚ uˇzeme oˇcekávat novinky. V bl´ızké dobˇe plánuji dalˇs´ı u ´pravy, v prvé ˇradˇe umoˇznit hrát hru i uˇzivatel˚ um iPhone a také pˇr´ımo ve webovém prohl´ıˇzeˇci. Za dalˇs´ı dodˇelat statistiky pro single player, kde by bylo vidˇet nejv´ yˇse nahrané skóre a dalˇs´ı zaj´ımavé informace. Dále moˇznost zadáván´ı jména kaˇzdého hráˇce a sledován´ı statistiky mezi jednotliv´ ymi hráˇci. A nakonec pˇrihlaˇsován´ı hráˇc˚ u pomoc´ı Facebooku, Twitteru popˇr´ıpadˇe Google+.

40

Seznam obr´ azk˚ u 2.1

Znázornˇen´ı gyroskopu [14] . . . . . . . . . . . . . . . . . . . .

4

2.2

Princip rezistivn´ıho displej [12] . . . . . . . . . . . . . . . . .

5

3.1

Komunikace zaˇr´ızen´ı pˇres server . . . . . . . . . . . . . . . . .

8

5.1

Hra Dobble v1.0 . . . . . . . . . . . . . . . . . . . . . . . . . . 11

5.2

Ukázka shodn´ ych obrázk˚ u na kartiˇckách . . . . . . . . . . . . 13

5.3

Generován´ı polygon˚ u jedné kartiˇcky . . . . . . . . . . . . . . . 14

5.4

Vygenerovaná HTML mapa . . . . . . . . . . . . . . . . . . . 14

5.5

Tabulka podporovan´ ych vlastnost´ı jednotliv´ ych platforem . . . 16

5.6

Struktura Android aplikace s pˇridan´ ym frameworkem PhoneGap 17

5.7

Metoda onCreate(), která je srdcem celé aplikace . . . . . . . 18

5.8

Pouˇzit´ı jQuery mobile v aplikaci Dobble . . . . . . . . . . . . 20

5.9

Znázornˇen´ı animace v CSS3 . . . . . . . . . . . . . . . . . . . 23

5.10 V´ yvojové prostˇred´ı Xcode . . . . . . . . . . . . . . . . . . . . 24 6.1

Single player . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

6.2

Postup vytvoˇren´ı nové online hry . . . . . . . . . . . . . . . . 30

41

7.1

Vyplnˇen´ı u ´daj˚ u pro nov´ y keystore . . . . . . . . . . . . . . . . 33

8.1

Lad´ıc´ı v´ ypisy konzole Eclipse . . . . . . . . . . . . . . . . . . 34

8.2

Ukázka nastaven´ı souˇradnic akcelerometru . . . . . . . . . . . 36

8.3

Emulace zaˇr´ızen´ı Apple iPhone 4 v prohl´ıˇzeˇci Google Chrome

8.4

Hra Dobble spuˇstˇená v emulátoru na platformˇe OS X 10.9 Mavericks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

37

Pˇ rehled pouˇ zit´ ych zkratek a znaˇ cen´ı API

Application Programming Interface. Rozhran´ı pro v´ yvoj aplikac´ı.

Bluetooth

Standard pro bezdrátovou komunikaci.

HTML

HyperText Markup Language. Jazyk pro tvorbu webov´ ych stránek.

CSS (CSS3)

Cascading Style Sheets. Kaskádové styly jsou jazyk pro popis zobrazen´ı webov´ ych stánek.

IEEE

Institute of Electrical and Electronics Engineers. Je mezinárodn´ı nezisková profesn´ı organizace usiluj´ıc´ı o vzestup technologie souvisej´ıc´ı s elektrotechnikou.

Wi-Fi

Bezdrátová komunikace v poˇc´ıtaˇcov´ ych s´ıt´ıch.

W3C

Word Wide Web Consortium, jehoˇz ˇclenové vyv´ıjej´ı webové standardy pro Word Wide Web.

PAN

Personal Area Network. Jsou s´ıtˇe s nejmenˇs´ı rozlehlost´ı, pouˇz´ıvané pro propojen´ı osobn´ıch elektronick´ ych zaˇr´ızen´ı typu mobiln´ı telefon, laptop nebo PDA.

Cardan˚ uv závˇes

závˇes se dvˇema kruhy volnˇe pohybliv´ ymi kolem os k sobˇe kolm´ ych.

GUI

Graphical User Interface. Uˇzivatelské rozhran´ı, které umoˇzn ˇuje ovládat poˇc´ıtaˇc pomoc´ı interaktivn´ıch grafick´ ych ovládac´ıch prvk˚ u.

JS

JavaScript. Multiplatformn´ı, objektovˇe orientovan´ y skriptovac´ı jazyk.

WP Store

Windows Phone Store. Obchod s aplikacemi pro uˇzivatele zaˇr´ızen´ı na platfomˇe Windows Phone.

OS

Operaˇcn´ı systém. Základn´ı programové vybaven´ı poˇc´ıtaˇce.

SDK

Software development kit. Sada softwarov´ ych v´ yvojov´ ych nástroj˚ u, která nám umoˇzn ˇuje vytváˇret jisté aplikace.

ADT

Android Development Tools. Jedná se o plugin pro Eclipse pomoc´ı, kterého z´ıskáme prostˇred´ı pro v´ yvoj Android aplikac´ı.

IDE

Integrated Development Environment. Prostˇred´ı pro v´ yvoj aplikac´ı vˇetˇsinou zamˇeˇrené na konkrétn´ı jazyk.

TCP

Transmission Control Protocol. Základn´ı spolehliv´ y pˇrenosov´ y protokol transportn´ı vrstvy.

IP

Internet Protocol. Základn´ı protokol pracuj´ıc´ı na s´ıt’ové vrstvˇe.

DPI

´ Dots per inch. Udaj urˇcuj´ıc´ı, kolik obrazov´ ych bod˚ u se vejde do délky jednoho palce.

USB

Universal Serial Bus. Modern´ı zp˚ usob pˇripojen´ı periferi´ı k poˇc´ıtaˇci.

QWERTY

Normalizované rozloˇzen´ı kláves na klávesnici.

LTE

3GPP Long Term Evolution - technologie pro vysokorychlostn´ı internet v mobiln´ıch s´ıt´ıch.

EDGE

Enhanced Data rates for GSM Evolution - technologie pro pˇrenos dat v s´ıt´ıch GSM.

GSM

Globáln´ı Systém pro Mobiln´ı komunikaci.

iOS

je mobiln´ı operaˇcn´ı systém vytvoˇren´ y spoleˇcnost´ı Apple Inc.

Literatura [1] JMiroslav Ujbányai Programujeme pro Android Grada Publishing, a.s., 2012. ISBN 978-80-247-3995-3. [2] Jiˇr´ı Vávr˚ u jQuery Mobile Computer Press, a.s., 2013. ISBN 978-80-2513811-3. [3] Den Odell JavaScript Computer Press, a.s., 2010. ISBN 978-80-2512733-9. [4] Brian P. Hogan HTML 5 a CSS 3 Computer Press, a.s., 2011. ISBN 978-80-251-3576-1. [5] Ondˇrej Baˇse jQuery pro neprogramátory Pr˚ uvodce vyuˇzit´ım knihovny jQuery UI Computer Press, a.s., 2012. ISBN 978-80-251-3750-5. [6] Adobe Systems Inc. Framework pro mobiln´ı zaˇr´ızen´ı [online]. 2014. [cit. 6.1.2014]. Dostupné z: http://phonegap.com. [7] The jQuery Foundation. FKnihovna pro usnadnˇen´ı práce s javascriptem [online]. 2014. [cit. 22.3.2014]. Dostupné z: http://jquery.com. [8] The jQuery Foundation. User interface pro responzivn´ı webové stránky [online]. 2014. [cit. 22.3.2014]. Dostupné z: http://jquerymobile.com. [9] Brian Grinstead. Knihovna pro moˇznost výbˇeru barvy [online]. [cit. 5.4.2014]. Dostupné z: http://bgrins.github.io/spectrum. [10] Vera Lobacheva. Webová aplikace pro vytvoˇren´ı souˇradnicové mapy [online]. [cit. 5.4.2014]. Dostupné z: https://github.com/summerstyle/summer. [11] FT Labs. Knihovna pro sn´ıˇzen´ı odezvy pˇri kliknut´ı na displej [online]. [cit. 29.3.2014]. Dostupné z: https://github.com/ftlabs/fastclick.

[12] mobilmania.cz. Uˇz v´ım, jak funguj´ı dotykové pleje 2004 [online]. [cit. 27.2.2014]. Dostupné http://www.mobilmania.cz/uz-vim-jak-funguji-dotykovedispleje/a-1108570/default.aspx.

disz:

[13] jQuery mobile. Pˇrizp˚ usoben´ı barevného proveden´ı jQuery mobile [online]. [cit. 4.5.2014]. Dostupné z: http://themeroller.jquerymobile.com/. [14] mobilenet.cz. Senzory mobiln´ıch zaˇr´ızen´ı 2013 [online]. [cit. 16.3.2014]. Dostupné z: http://mobilenet.cz/clanky/techbox-vas-telefon-je -prospikovany-senzory-12496. [15] Bluetooth.org. Bluetooth specifikace [online]. [cit. 7.5.2014]. Dostupné z: https://www.bluetooth.org/en-us/specification/adoptedspecifications.

Západočeská univerzita v Plzni Fakulta aplikovaný ch vě d Katedra informatiky a vý poč etní techniky. Hra Dobble

Recommend Documents