1 MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY Multiplatformní vývoj v HTML5 BAKALÁŘSKÁ PRÁCE Michal Škoula Brno, jaro 20142 Prohlášení Prohlašuji, že ta...
Prohlášení Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj.
Poděkování Chtěl bych poděkovat mému vedoucímu RNDr. Bc. Jonáši Ševčíkovi za jeho podporu a cenné rady při psaní této práce. Dále také rodině a přátelům za podporu při studiu.
Licence Dílo podléhá licenci Creative Commons Michal Škoula 3.0 Česká republika
Vedoucí práce: RNDr. Bc. Jonáš Ševčík
Shrnutí Cílem práce je shrnout možnosti multiplatformního vývoje a navrhnout a vytvořit multiplatformní hybridní aplikaci - hru s pomocí technologie HTML5 a Javascriptu. K vývoji byl použit framework Apache Cordova. Hra je dostupná na mobilních platformách Android a Windows Phone, stejně tak v běžném prohlížeči s potenciální možností expanze na další platformy. Hra funguje jak v online režimu s možností přihlášení uživatelů, tak i offline bez připojení na internet.
Klíčová slova HTML5, multiplatformní vývoj, hybridní vývoj, Javascript, tvorba her, Android
Obsah
1. Úvod ...................................................................................................................................... 1 2. Vývoj multiplatformních aplikací ..................................................................................... 2 2.1 Nativní vývoj.................................................................................................................. 2 2.2 Webový HTML5 vývoj ................................................................................................. 3 2.3 Hybridní vývoj............................................................................................................... 4 2.4 Dostupné frameworky pro hybridní HTML5 vývoj ................................................ 4 2.4.1
2.5 Využitelné novinky jazyka HTML5............................................................................ 7 2.5.1 Plátno........................................................................................................................ 8 2.5.2 Audio, Video ........................................................................................................... 9 2.5.3 Strukturální elementy .......................................................................................... 10 2.5.4 Nové formulářové elementy ............................................................................... 11 2.5.5 Lokální úložiště..................................................................................................... 11 3. Ukázková aplikace – hra .................................................................................................. 13 3.1 Funkční požadavky hry.............................................................................................. 13 3.2 Uživatelské rozhraní ................................................................................................... 14 3.3 Zvolené technologie .................................................................................................... 15 3.4 Použití frameworku Cordova .................................................................................... 17 3.4.1 Instalace a vytvoření projektu ............................................................................ 17 3.4.2 SDK platforem ...................................................................................................... 18
3.4.3 Zásuvné moduly ................................................................................................... 18 3.4.4 Použití API ............................................................................................................ 19 3.4.5 Příprava projektů platforem ............................................................................... 19 3.5 Klientská část hry ........................................................................................................ 20 3.5.1 Základní stránka hry a načítání.......................................................................... 20 3.5.2 Použité Javascriptové knihovny......................................................................... 21 3.5.3 Multimediální soubory ........................................................................................ 22 3.5.4 Vlastní objekty ...................................................................................................... 25 3.6 Serverová část hry ....................................................................................................... 26 3.6.1 Modely ................................................................................................................... 28 3.6.2 Controllery ............................................................................................................ 28 3.7 Distribuce hry .............................................................................................................. 29 3.7.1 Distribuce hry skrz oficiální obchody platforem ............................................. 29 3.7.2 Alternativní metody distribuce aplikací ........................................................... 30 3.7.2 Monetizace............................................................................................................. 30 4. Závěr ................................................................................................................................... 31 5. Literatura ............................................................................................................................ 32
1. Úvod Cílem práce je popsat možnosti tvorby a praktické vytvoření jednoduché hry pomocí webových technologií tak, aby fungovala na různých platformách, zejména na mobilních telefonech a tabletech s operačním systémem Android, Windows Phone, Windows 8 a Windows desktop. Stejným způsobem by se daly obsáhnout další platformy podporující webový a hybridní vývoj – iOS, Ubuntu, Tizen atd. Vývoj pomocí webových technologií znamená zejména použití HTML5, CSS a hlavně Javascriptu. Touto kombinací se dá docílit velké míry multiplatformnosti díky široké podpoře webových standardů na všech moderních platformách. Naopak při nativním vývoji by bylo nutné použití primárních jazyků daných platforem pro vývoj celé aplikace
nebo
minimálně
její
grafické
nadstavby,
pokud
bychom
jádro
naprogramovali např. v jazyku C. To by znamenalo opakované programování jedné aplikace pro každou platformu zvlášť, včetně následných úprav a aktualizací. Dalším cílem práce je popis aspektů průběhu tvorby multiplatformní hry – herního mechanismu, návrhu uživatelského rozhraní, její serverové části a také distribuce her napříč platformami.
1
2. Vývoj multiplatformních aplikací V této kapitole se zaměříme na srovnání možností vývoje aplikací, s důrazem na mobilní platformy. Shrneme tři hlavní způsoby - nativní, webový a hybridní.
2.1 Nativní vývoj Při nativním vývoji se aplikace tvoří zejména v primárním programovacím jazyce daného systému. U Androidu je to Java, u iOS Objective-C a na Windows Phone se vyvíjí hlavně v jazyce C#. Rozdílné jsou nejen programovací jazyky, ale i struktura projektů, přístup k funkcím zařízení pomocí API a také platform guidelines1, které by měl vývojář dané platformy dodržovat. Další charakteristikou nativních aplikací je jejich distribuce v internetových obchodech jednotlivých platforem. Každá platforma má svůj obchod, který je primárním zdrojem, někdy i jediným oficiálním, ze kterého si uživatel může stahovat a instalovat aplikace do svého zařízení. V operačním systému Android je to většinou Google Play, v případě iOS je to App Store a Windows Phone má obchod s názvem Windows Phone Store. Přítomnost aplikace v takovém obchodě je jednou z největších výhod nativního vývoje oproti webovému, ať už pro šíření aplikace nebo pro její monetizaci. Uživatelé jsou navyklí na stahování aplikací právě z obchodů a na jednoduchý způsob platby. Výhodou nativního vývoje je vyšší výkon oproti webovému nebo hybridnímu. „V roce 2012 Mark Zuckerberg uvedl, že největší chybou Facebooku byla sázka na mobilní webovou aplikaci namísto nativní. Do té doby byla Facebook aplikace hybridní s HTML jádrem; v roce 2012 byla nahrazena skutečně nativní aplikací.“2 (1) Relativně
Principy designu a uživatelského rozhraní dané platformy. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app. 1 2
2
vysokého výkonu nativních aplikací je dosaženo absencí běhového prostředí Javascriptu, nejsou spouštěny skrz jádro webového prohlížeče, ale přímo v systému. Existují projekty, které umožňují psát aplikace nativně v jednom jazyce a přesto je spouštět na vícero platformách. Zástupcem je např. Xamarin3, který umožňuje psát aplikace nativně v C# a spouštět je na operačních systémech Android, iOS, Mac OS X, Windows Phone a Windows.
2.2 Webový HTML5 vývoj Webový vývoj naopak poskytuje přenositelnost mezi platformami. Aplikace je, stejně jako webová stránka, naprogramována pouze jednou a případně je přizpůsobena tak, aby fungovala na všech požadovaných platformách. Aplikace se vyvíjí jako běžné webové stránky s využitím HTML5, CSS a Javascriptu a uživatel k nim přistupuje přes webový prohlížeč svého zařízení. Ke svému fungování tedy potřebují internetové připojení4. Výhodou webových aplikací je nenáročnost na prostor, aplikace včetně dat je uložena na vzdáleném serveru, na kterém navíc mohou probíhat i některé výpočty. To znamená také jednoduché řešení aktualizací - stačí pouze nahrát novou verzi aplikace na server. Nevýhodou tohoto způsobu je absence přístupu k systémovému API a s tím spojené omezené využití funkcí zařízení, jako je fotoaparát, GPS senzor apod.5 Další nevýhodou je možná nekonzistence uživatelského rozhraní v porovnání s nativními aplikacemi, případně náročnější přizpůsobení rozhraní nativnímu vzoru.
Xamarin . Aplikace mohou díky HTML5 fungovat i offline, pokud se nejprve uloží do cache prohlížeče. 5 Některé nejnovější prohlížeče tyto funkce již podporují, ale v omezenější míře než nabízí plnohodnotné systémové API a v běžném použití se na ně nelze spoléhat. 3 4
3
2.3 Hybridní vývoj Hybridní vývoj spojuje oba přístupy, nativní i webový. Aplikace se skládá z nativního rámce, ve kterém se nachází webview6 s webovou aplikací. Ta je součástí aplikace, případně se může načítat vzdáleně přes internet. Klady a zápory hybridních aplikací plynou z povahy obou přístupů, které hybridní vývoj spojuje. Výhodou hybridních aplikací oproti webovým je možnost publikace v oficiálních obchodech platforem. Uživatel je instaluje a spouští vedle klasických nativních aplikací. Další klíčovou výhodou oproti klasickým webovým aplikacím je možnost využití frameworků, které zajistí propojení webové aplikace běžící ve webview se systémem. Můžeme tak využívat systémové API a přistupovat k němu přímo z Javascriptu. Toto API je navíc stejné pro všechny platformy, které framework podporuje, liší se pouze množstvím funkcí, které nám na dané platformě povoluje vykonávat. Nevýhodou hybridních aplikací je z principu menší výkon oproti nativním, protože fungují, stejně jako webové aplikace, na základě webového jádra. Další nevýhodou je nutnost optimalizace rozhraní pro každou platformu zvlášť. To platí zejména u aplikací, ale v menší míře také u her, minimálně v oblasti přizpůsobení velikosti a poměru stran obrazovky.
2.4 Dostupné frameworky pro hybridní HTML5 vývoj Frameworků, které se dají použít pro hybridní HTML vývoj, existuje celá řada. Liší se přístupem k vývoji, možnostmi, které poskytují, cenovou politikou a dalšími parametry. Tato oblast informatiky je velmi mladá a probíhá v ní rychlý vývoj, tudíž se často objevují frameworky nové a ty stávající mění své principy. Obsahem této kapitoly je srovnání tří nejpopulárnějších frameworků – Apache Cordova,
6
Nativní komponenta schopná zobrazit webovou stránku.
4
Appcelerator Titanium a Telerik Appbuilder, z nichž každý reprezentuje odlišný přístup k vývoji.
2.4.1 Apache Cordova (Adobe PhoneGap) Apache Cordova je open source projekt určený pro hybridní vývoj aplikací pomocí HTML5, CSS a Javascriptu. Jeho součástí není IDE, ale jen nástroj pro kompilaci. Nabízí jednotné API pro podporované systémy (Android, iOS, Windows Phone, Windows 7 a 8, BlackBerry, Tizen, Ubuntu a Firefox OS). Podpora dílčích API se liší a pomalu se rozšiřuje.
Obrázek 1: podpora API u jednotlivých platforem (2).
Instalace probíhá z příkazové řádky skrz NPM balíčkovací systém, který funguje na serveru Node.js7 a který zajistí i správu pluginů a budoucí aktualizace. Cordova
7
Javascriptová platforma používaná jako server založený na Chrome JavaScript runtime.
5
reprezentuje klasický přístup hybridního vývoje, kdy se použije webview pro zobrazení webové aplikace. Programátor má k dispozici několik rozhraní, pomocí kterých může komunikovat s operačním systémem z Javascriptu. Mezi tyto rozhraní patří hlavně přístup k akcelerometru, fotoaparát, kontakty uživatele, souborový systém, GPS senzor, přehrávání audia a videa a notifikace. PhoneGap je derivátem Cordovy, který zastřešuje společnost Adobe. Oproti Cordově nabízí kompilaci aplikací v cloudu pomocí služby PhoneGap Build, která je v omezené míře zdarma a také další napojení na cloudové služby Adobe. Vývojář tak nemusí mít nainstalované SDK na svém počítači, ale build aplikace provede vzdáleně přes server. Takovým způsobem se lze vyhnout například nutnosti vlastnit počítač Apple s operačním systémem OS X. Jádro mají oba projekty prakticky totožné, stejně tak jako dokumentaci. Jakým způsobem se budou nadále odlišovat, ukáže až čas.
2.4.2 Appcelerator Titanium Titanium je, stejně jako Cordova, open source aplikační framework určený pro hybridní vývoj aplikací. Podporuje mobilní operační systémy iOS, Android, Windows Phone, BlackBerry a Tizen. Hlavním rozdílem oproti frameworku Cordova je přístup k vývoji. Aplikace v Titaniu jsou primárně aplikace nativní, které se ale píší v Javascriptu a s nativními komponentami komunikují skrze API. HTML a CSS se tak pro stavbu uživatelského rozhraní používat nemusí, můžeme použít i nativní komponenty. Přístup Titania tak můžeme charakterizovat jako spojení nativního a hybridního vývoje. Nejsou to tedy nutně webové aplikace zobrazované ve webview, i když i takový přístup je možný. Základem frameworku je Titanium SDK, sada nástrojů pro kompilaci zdrojových kódů z Javascriptu do nativních projektů jednotlivých platforem. K vývoji může programátor použít Titanium Studio, proprietární IDE založené na open source projektu Eclipse. Titanium Studio má již integrované moduly pro práci s SDK a 6
verzovací systém Git, případně můžeme využít konzolové rozhraní a libovolné IDE či textový editor. Další součástí Titania je Alloy, MVC8 framework, který může vývojář použít pro lepší organizaci a znovupoužití zdrojových kódů aplikace. Framework Alloy je plně implementován do Titanium Studia.
2.4.3 Telerik AppBuilder AppBuilder, framework dříve známý jako Icenium, je součástí cloudové platformy Telerik, ale může být používán i samostatně. Přístup k systémovému API je realizován pomocí frameworku Apache Cordova. Pro vývoj aplikací může vývojář použít nativní aplikaci pro Windows, online webové IDE přímo v prohlížeči, plugin pro Visual Studio nebo přímo příkazovou řádku. AppBuilder je dostupný ve verzi zdarma s omezením na dva projekty, případně za měsíční nebo roční poplatek ve vyšších verzích. Z cloudové povahy AppBuilderu vyplívá, že vývojář si nemusí instalovat SDK všech platforem, které chce pokrýt, ale kompilace probíhá na vzdálených serverech. Výhodou AppBuilderu je možnost publikování hotových aplikací do jednotlivých obchodů platforem přímo z vývojového prostředí. Součástí je, stejně jako v případě Titania, verzovací systém založený na nástroji Git.
2.5 Využitelné novinky jazyka HTML5 „HTML5 je posledním standardem HTML. Minulá verze HTML 4.01 byla vydána v roce 1999 a internet se od té doby značně proměnil. HTML5 bylo speciálně navrženo, aby zajistilo bohatý obsah bez potřeby dalších doplňků.“9 (3)
Model – View – Controler je architektonický vzor softwarového inženýrství, který odděluje datovou, prezentační a řídící logiku aplikace. 9 HTML5 is the latest standard for HTML. The previous version of HTML, HTML 4.01, came in 1999, and the internet has changed significantly since then. It was specially designed to deliver rich content without the need for additional plugins. 8
7
Při webovém a hybridním vývoji aplikací nebo her je vhodné využít některé nové elementy, které nabízí jazyk HTML5. Kromě strukturálních elementů, které se zatím v praxi příliš nerozšířily, je možno použít zejména elementy plátno (canvas), audio a video. Tyto elementy nám zjednoduší nebo přímo umožní dodat aplikaci bohatý obsah v podobě dynamického kreslení na plátno nebo přehrávání videí, zvuků a hudby. Nemusíme přitom využívat cizí doplňky prohlížečů 10, ale můžeme se spolehnout přímo na jádro prohlížeče, případně využít doplňky jako alternativní metodu, pokud prohlížeč nepodporuje HTML5 verzi. K těmto elementům poté přistupujeme a ovládáme je pomocí Javascriptu a metod k tomu určených.
2.5.1 Plátno „Plátno neboli také canvas je element HTML5, který umožňuje vykreslování objektů a manipulaci s bitmapami na nízké úrovni. Na element plátna je možné nahlížet jako na dynamický element obrázku.“11 (4 str. 20) Plátno se chová jako běžný HTML element, můžeme jej stylovat pomocí CSS a manipulovat s ním pomocí DOM12. Element plátno vypadá v základní podobě v HTML5 dokumentu následovně:
Atributy width a height nevyjadřují nutně skutečnou velikost elementu na webové stránce (ta se dá změnit pomocí CSS). Vyjadřují počet bodů, které můžeme využít při kreslení na plátno. Pokud elementu změníme velikost pomocí CSS, obrázek se stane pravděpodobně rozmazaným.
Například Flash nebo Silverlight. Canvas is an HTML5 element that provides drawing shapes and bitmap manipulation functions in low level. We can imagine the Canvas element as a dynamic image tag. 12 Document Object Model – „Objektově orientovaná reprezentace XML nebo HTML dokumentu. DOM je API umožňující přístup či modifikaci obsahu, struktury nebo stylu dokumentu či jeho částí.“ (6 str. 237) 10 11
8
Na plátno můžeme kreslit pomocí několika metod. Pro kreslení ale nepoužijeme přímo element plátno, ale jeho atribut, 2D context. Ten získáme následujícím způsobem: var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");
Mezi metody pro práci s plátnem patří např. drawImage(image,x1,y1,x2,y2) pro kreslení obrázku, metoda fillRect(x1,y1,x2,y2), která vykreslí obdélník s výplní, fillText(text,x,y) pro kreslení zadaného textu a clearRect(x1,y1,x2,y2), která slouží pro vymazání dané části plátna. Pozor si musíme dát na metodu drawImage, která může mít tři až devět parametrů13. Pokud chceme kreslit obrázek na plátno, musí být již načtený. V opačném případě se nic nevykreslí. Načítání obrázků se dále věnujeme v kapitole 3.5.1 Základní stránka hry a načítání.
2.5.2 Audio, Video HTML5 nám umožňuje vložit do stránky elementy audio a video, které zajišťují přehrávání zvuků a videí přímo ve stránce. Kód audio elementu vypadá následovně, atribut controls značí zobrazení ovládacích prvků přehrávače. Pokud bychom tento atribut neuvedli, přehrávač by se v prohlížeči graficky nezobrazil a byl by přístupný jen skrze Javascript.
V současné době se užití těchto elementů liší v závislosti na podporovaných formátech multimediálních souborů webovými prohlížeči. Ty se liší i v grafickém znázornění ovládacích prvků přehrávačů, pokud je chceme zobrazit. Tabulka 1 ukazuje podporu formátů zvuků v nejpoužívanějších prohlížečích, Obrázek 2 pak grafické znázornění elementu v prohlížeči Chrome. Jak lze vidět, v praxi musíme použít formáty zvuku
13
Podrobný popis metody drawImage .
9
minimálně dva, abychom pokryli všechny možnosti. Použije se první uvedený v seznamu elementů source, který je podporován daným prohlížečem.
PROHLÍŽEČ
OGG
MP3
WAV
FIREFOX 3.6+
Ano
-
Ano
SAFARI 5+
-
Ano
Ano
CHROME
Ano
Ano
-
OPERA 10.5+
Ano
-
Ano
INTERNET EXPLORER
-
Ano
Ano
Tabulka 1: Podpora formátu zvuků v prohlížečích (4).
Obrázek 2: Ovládací prvek elementu audio v prohlížeči Google Chrome.
2.5.3 Strukturální elementy Strukturální elementy jako header, footer, article, section, nav a další mají sémantický význam, protože prezentují logickou stavbu dokumentu. Neříkají nic o své přesné pozici nebo vzhledu. Jejich využití při vývoji hybridních aplikací je sporné, žádný přímý přínos oproti použití klasických elementů jako div, stylovaných pomocí CSS, nenastane. Své využití najdou zejména na webu, díky svému sémantickému významu. Tělo (body) zjednodušeného HTML5 dokumentu využívajícího strukturální elementy může vypadat následovně:
Nadpis
10
<section> <article>Článek 1 <article>Článek 2
Nadpis
2.5.4 Nové formulářové elementy Při vývoji webových a hybridních aplikací HTML5 nabízí nové formulářové prvky přizpůsobené konkrétním potřebám. Podpora v současných prohlížečích je různá a nemůžeme se na ni všeobecně spoléhat. Mezi nové HTML5 prvky patří formulářový element pro zadávání barvy. Například v prohlížeči Chrome se po kliknutí zobrazí standardní dialogové okno Windows pro výběr barvy. Dalším použitelným elementem je výběr data skrz kalendář, element pro validaci emailu, jezdec14 nebo speciální pole pro zadání čísla. Na mobilních telefonech můžeme například docílit toho, aby se při zadávání telefonního čísla upravilo rozložení klávesnice. Každý prohlížeč ale tyto elementy interpretuje a zobrazuje jinak, případně vůbec. Ukázka několika takových HTML5 elementů následuje. Jsou to klasické elementy input s odlišným atributem type. Pokud prohlížeč daný typ elementu nepodporuje, zobrazí se textové pole (použije se defaultní type="text").
type="color" name="barva"> type="date" name="datum"> type="email" name="email"> type="range" name="hodnota" min="1" max="10"> type="tel" name="telefon">
2.5.5 Lokální úložiště „Lokální úložiště je další z řady nových funkcí HTML5. Umožňuje webům ukládat data do lokálního prohlížeče a později k nim opět přistupovat.“15 (4 str. 205)
Ang. slider, reprezentovaný elementem range. Local storage is a new specification from HTML5. It allows a website to store information in the browser locally and access the stored data later. 14 15
11
Před příchodem HTML5 bylo prakticky jedinou možností, jak ukládat na webové stránce data o uživateli, využití omezených cookies. Lokální úložiště v HTML5 oproti cookies dovoluje ukládat větší objem dat (5MB oproti 4KB16) a data se také nepřenášejí na server s každým http dotazem. Lokální úložiště funguje jako pár klíč – hodnota, z nichž obě části jsou vždy řetězce. Ukládání a načítání dat funguje pomocí dvou metod, setItem a getItem: localStorage.setItem("key", "value"); localStorage.getItem("key");
Existují další způsoby, jak přistupovat k lokálnímu úložišti. Jeden z nich je přístup k údajům jako k asociativnímu poli a druhý z nich jako k atributům objektu. Tyto zápisy jsou kratší, příklad ukládání dat: localStorage["key"] = "value"; localStorage.key = "value";
16
HTML5 Web Storage .
12
3. Ukázková aplikace – hra Cílem praktické části této práce je popis vývoje multiplatformní hry v HTML5. Nejprve je nutné ujasnit si požadavky na to, jak má hra vypadat a fungovat. Následně provedeme návrh uživatelského rozhraní a vybereme vhodné technologie a až poté můžeme aplikaci realizovat. Všechny zdrojové kódy hry jsou ke stažení na GitHubu https://github.com/MichalSkoula/kitty.
3.1 Funkční požadavky hry Bude se jednat o tzv. plošinovku. Hra se bude ovládat pouze dotykem prstu/klikem myši kamkoliv mimo ovládací prvky menu. Po tomto kliku hlavní hrdina vyskočí. Pohyb dopředu, respektive z leva doprava je realizován automaticky a s herním průběhem se postupně hra zrychluje, jedná se o tzv. autorunner hru. Ve hře bude několik objektů, které můžeme rozdělit na objekty s interakcí a bez interakce. Jejich strukturu znázorňuje následující seznam:
Objekty s interakcí o Nepřátelé – při kontaktu s hráčem mu odebírají zdraví. Jsou čtyři druhy nepřátel a generují se podle předem vytvořených vzorů, z nichž se vybírá náhodně. o Mince – hráč je může sbírat a později si za ně kupovat vylepšení. Při použití vylepšení „double coins“ se jejich hodnota zdvojnásobí. Generují se náhodně. o Lahve mléka – při kontaktu s hráčem mu přidávají zdraví. Při použití vylepšení „milky way“ se jejich výskyt zdvojnásobuje. Generují se náhodně.
Objekty bez interakce o Pozadí – pohybuje se zprava doleva a v čase se náhodně mění. o Oblaka – generují se náhodně a plynou s pozadím.
13
Uživatel bude mít možnost, ne však povinnost registrace a přihlášení, po kterém se zpřístupní sdílení skóre na internet a obchod s vylepšeními. To zároveň poskytuje do budoucna další, sociální možnosti zapojení uživatelů do herního ekosystému.
3.2 Uživatelské rozhraní Při návrhu uživatelského rozhraní se nemusíme řídit guidelines jednotlivých platforem, protože vytváříme hru a u těch je jejich návrh a grafické ztvárnění plně v rukou tvůrců. Díky tomu nám stačí vytvořit jednotný návrh pro všechny platformy a zařízení, který se bude ve finále jen přizpůsobovat aktuálnímu rozlišení. Návrh uživatelského rozhraní počítá s menu, které je fixně umístěno do dolní části obrazovky a je viditelné kdykoliv při běhu aplikace. Toto menu se mění v závislosti na tom, zda je uživatel přihlášen či nikoli. Obrázek 3 ukazuje stav po přihlášení, který navíc obsahuje tlačítko Market pro vstup do herního obchodu, který je přístupný pouze přihlášeným uživatelům. Kočka znázorňuje postavu hráče, psi jsou nepřátelé, kterým je třeba se vyhnout.
Obrázek 3: návrh uživatelského rozhraní v programu Balsamiq17.
17
Online nástroj pro tvorbu uživatelského rozhraní Balsamiq .
14
Kromě menu hra neobsahuje žádné další ovládací prvky. Hra se odvíjí sama a postupně zrychluje, úlohou hráče je tedy pomocí skoků uhýbat nepřátelům. Díky absenci jiných ovládacích prvků můžeme předpokládat, že herní princip je srozumitelný, snadno pochopitelný a nepotřebuje dalších vysvětlení. Role tlačítek v menu je intuitivní, tlačítko Start zahajuje hru od začátku. Po kliknutí na tlačítko Score hra nabídne lightbox18 přes celou stránku, jehož obsahem bude vzdáleně načítané skóre, rozdělené na tři sekce – skóre hráče, globální skóre platformy a globální skóre všech platforem. Options nabízí volby pro vypnutí a zapnutí zvuku, vibrací a efektů. Volba About zobrazí stručné informace o hře, jejím příběhu, autorovi a herních elementech. Konečně tlačítko Market nabídne uživateli zakoupení jednorázových vylepšení, které si může zakoupit za virtuální měnu, kterou ve hře sbírá. Mezi tyto vylepšení patří zdvojnásobení hodnoty sesbíraných mincí, nesmrtelnost, zrychlení pro prvních 10 vteřin hry a zdvojnásobení počtů lékárniček ve hře. Tyto vylepšení se aktivují automaticky při dalším startu hry.
3.3 Zvolené technologie Abychom mohli hru publikovat na různých platformách, bude mít hybridní charakter, využívající výhody nativního i webového vývoje. V kapitole 2.4 jsme představili tři frameworky – Apache Cordova, Appcelerator Titanium a Telerik AppBuilder. Využijeme frameworku Apache Cordova, protože se k vývoji aplikací oproti Titaniu používá primárně HTML5, takže můžeme hru distribuovat i jako webovou aplikaci bez nutnosti instalace. Dalším důvodem je skutečnost, že i třetí jmenovaný – AppBuilder, je na Cordově založen. Další výhodou Cordovy je relativně snadné použití API k přístupu k nativním funkcím. Cordovu použijeme pro zpřístupnění API k funkcím systému a k přípravě projektů pro jednotlivá vývojová prostředí platforem, ze kterých ve finále zkompilujeme instalační balíčky. Je to jeden z možných způsobů
Lightbox je obecné označení Javascriptové knihovny, která plní funkci výrazného dialogového okna. „Lightbox draws the user's attention to a dialog box, error message, or other design element in the middle of the screen by dimming the rest of the screen“ (7). 18
15
vývoje, stejného výsledku bychom ale dosáhli použitím i jiných frameworků. Více o praktickém použití frameworku Cordova pojednáme v následující kapitole 3.4 Použití frameworku Cordova. Uživatelské rozhraní a vzhled bude definován v HTML5 a CSS. Pro zápis kaskádových stylů použijeme preprocesor LESS19. Ten nám umožní efektivnější zápis stylů, obohacený o proměnné (využitelné pro definici a opakované použití barev), pojmenované sady pravidel – tzv. mixins, vnořená pravidla, vkládání dalších LESS souborů apod. Samotná hra bude využívat ve větší míře Javascriptový framework jQuery20 a několik dalších Javascriptových knihoven, které jsou popsány v dalších podkapitolách, přímo při jejich použití. Hra bude mít Javascriptový frontend, vložený do webview aplikace, který bude komunikovat skrz AJAX21 a formát JSON22 se serverovým backendem, sloužícím pro registraci do hry, přihlášení a ukládání skóre hráče. Pro serverovou část zvolíme open source server Apache23, jako skriptovací jazyk pak PHP a framework Code Igniter24. Data budeme ukládat na open source databázovém serveru MySQL. Obojí jsme zvolili kvůli jednoduché implementaci a obecnému rozšíření. Herní logika hry bude uložena v Javascriptových entitách neboli objektech. Javascript nemá sám o sobě třídy, můžeme je ale pro náš účel napodobit připravenými konstruktory objektů.
CSS preprocesor LESS: . jQuery: . 21 AJAX - Asynchronous JavaScript and XML – obecná technologie pro asynchronní komunikaci. 22 JSON - JavaScript Object Notation, formát souboru pro přenášení dat. 23 Apache: . 24 Code Igniter: . 19 20
16
3.4 Použití frameworku Cordova Jako stěžejní technologii jsme vybrali framework Cordova pro rozhraní mezi hrou v Javascriptu a systémem. V této části popíšeme jeho praktické použití včetně instalace, využití zásuvných modulů, přípravy projektu.
3.4.1 Instalace a vytvoření projektu Před použitím frameworku Cordova je potřeba nainstalovat open source server Node.js, který již obsahuje oficiální balíčkovací systém pro tuto platformu, NPM. Node.js je k dispozici jak pro systémy Windows, tak i Mac OS X, Linux a Sun OS. Instalaci Cordovy25 pak provedeme následujícím příkazem v terminálu: $ npm install -g cordova
Následně se přesuneme do adresáře, kde chceme vytvořit náš projekt a zavoláme další příkaz, který vytvoří projekt a jeho adresářovou strukturu. Důležitý je podadresář www, ve kterém bude uložena naše webová aplikace, tedy HTML, CSS, Javascript atd. První parametr hello je název projektu, následuje nepovinný identifikátor v obráceném doménovém pořadí26 a za ním opět nepovinný parametr s titulkem naší aplikace. Všechny tři parametry se dají později změnit v konfiguračních souborech. $ cordova create hello com.example.hello HelloWorld
V dalším kroku je nutno přidat platformy, pro které chceme vyvíjet. Vytvoří se jako podadresáře v adresáři platforms. Jejich nabídka se liší v závislosti na operačním systému, na kterém pracujeme. Zatímco platformy Android, Amazon FireOS, Blackberry 10 a Firefox OS můžeme přidat do projektu na Windows i Mac OS X, u ostatních jsme omezeni. Na Mac OS X tedy můžeme navíc přidat platformu iOS a na Windows můžeme logicky přidat Windows 8 a Windows Phone 7 a 8. Příkaz pro přidání platformy Android: $ cordova platform add android
Instalace je podrobně popsána v dokumentaci: . 26 Reverse domain-style identifier, způsob pojmenování balíčků, např. v Javě. 25
17
3.4.2 SDK platforem Před přidáním platforem do našeho projektu je potřeba mít nainstalované SKD27 pro každou platformu, kterou chceme přidat. SDK pak bude sloužit pro přípravu projektů a na konci nám, jako součást vývojového prostředí, umožní hru vyexportovat jako instalační balíček. Pro operační systém Android je k dispozici oficiální multiplatformní Android SDK28, open source vývojové prostředí založené na Eclipse a také Android Studio29, založené na IntelliJ Idea, které obsahuje i SDK a emulátor a umožňuje dodatečné stažení různých verzí Androidu pro účely testování. Pro vývoj aplikací na platformách Windows 7, 8 a Windows Phone existuje Microsoft Visual Studio 30 v různých edicích. Visual Studio je kompatibilní jen se systémem Windows. Vývoj pro iOS a Mac OS X probíhá ve vývojovém prostředí XCode31, které je opět dostupné jen v operačním systému OS X.
3.4.3 Zásuvné moduly K tomu abychom mohli používat jednu z klíčových vlastností frameworku Cordova, přístup k systémovému API, je nutné si do projektu přidat odpovídající zásuvné moduly, tzv. pluginy. Tyto moduly zajišťují základní integraci a je možné si naprogramovat své vlastní, které by zajistili individuální požadavky na propojení Javascriptové aplikace se systémem. Moduly se do projektu přidávají následujícím příkazem. V příkladu konkrétně se přidá modul pro zpřístupnění fotoaparátu, pokud jím zařízení disponuje. $ cordova plugin add org.apache.cordova.camera
Software Development Kit, definice: . Android SDK Bundle . 29 Android Studio . 30 Visual Studio . 31 XCode . 27 28
18
Mezi další dostupné zásuvné moduly patří např. modul pro práci s vibracemi, přehrávačem médií, kontakty, informacemi o zařízení, akcelerometrem, systémovými dialogy, paměťovým zařízením a další. Každý zásuvný modul ale zpomaluje celou aplikaci, což může být znatelné zejména na slabších a starších mobilních zařízeních, proto je vhodné používat jen nezbytně nutné moduly. Stačí ve výše uvedeném příkazu změnit klíčové slovo add za remove: $ cordova plugin remove org.apache.cordova.camera
3.4.4 Použití API Jako příklad přístupu k nativním systémovým funkcím skrze API frameworku Cordova si ukážeme použití vibrací (Vibration API). Vibraci spustíme příkazem: navigator.notification.vibrate(time);
Přičemž parametr time je délka vibrace v milisekundách. Tento parametr je ignorován v systému iOS. Globální objekt navigator je ustanoven po připojení Cordovy k zařízení metodou onDeviceReady a využívá se i v dalších API.
3.4.5 Příprava projektů platforem Vývoj hybridních aplikací probíhá z větší části podobně jako u webových stránek nebo aplikací. Náš kód hry bude uložen v projektovém podadresáři www. Hru můžeme z časových důvodů průběžně testovat v některém z prohlížečů s podporou HTML5, je ale nutné ji otestovat i na reálném zařízení nebo alespoň v emulátoru, abychom odhalili chyby způsobené rozdílností prohlížečů na různých platformách a otestovali přístup k API platforem. K tomu musíme změny, které proběhly v adresáři www, promítnout i do adresářů s projekty platforem. To provedeme příkazem: $ cordova prepare android
Tento příkaz aktualizuje projektové soubory projektu pro Android verzi naší hry. Stačí změnit poslední parametr například na „wp8“ a připraví se nám projekt pro Windows Phone. Při aktualizaci se ale nahradí všechny soubory naší hry, takže případné úpravy v projektových souborech by byly ztraceny. Toto řeší adresář merge, který je podobně 19
jako adresář platforms rozdělen dle zvolených platforem. Pokud do tohoto adresáře umístíme nějaký soubor, bude mít větší prioritu než zrcadlový soubor v pracovním adresáři www. Tímto způsobem se dají vyřešit odlišnosti mezi platformami. Příkladem využití může být jiný konfigurační soubor pro každou platformu. Dále máme dvě možnosti. První z nich je otevření projektu ve vývojovém prostředí (například v Android Developer Tools v případě Androidu nebo ve Visual Studiu v případě Windows Phone atd.) a spuštění v emulátoru, v lepším případě na reálném zařízení. Druhým způsobem je spuštění dvojice příkazů, z nichž první projekt zkompiluje a druhý aplikaci spustí v emulátoru: $ cordova compile android $ cordova emulate android
Z vývojových prostředí pak digitálně podepíšeme a vyexportujeme instalační balíček, který můžeme nahrát do obchodů nebo dále distribuovat jinými cestami.
3.5 Klientská část hry Naše hra se skládá ze dvou částí, klientské a serverové. Klientská část hry je klíčová, probíhá v ní herní logika. V této kapitole popíšeme klíčové prvky její tvorby.
3.5.1 Základní stránka hry a načítání Základní stránka, index.html, má strukturu běžného HTML5 dokumentu. Element obsahuje načítání CSS a Javascriptových souborů. Důležitým prvkem je <meta> element viewport, který zakazuje uživatelské přibližování a oddalování stránky na mobilních telefonech. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, minimum-scale=1.0, user-scalable=no" />
Element pak obsahuje definici viditelných elementů na stránce, zejména plátna, na které se vykresluje celá hra a tlačítek menu ve spodní části. Soubor js/init.js obsahuje jQuery metodu $(document).ready, která se zavolá po načtení kompletního dokumentu, včetně CSS a Javascriptových souborů. V této metodě probíhají přípravné
20
procedury, jako například definice globálních proměnných (_game, _cat, _images, _sounds, _math) a načtení herních obrázků a zvukových souborů. Seznam obrázků a zvuků je obsažen v souboru config/files.json. U obrázků je uveden název souboru a jeho velikosti v pixelech. U zvukových souborů je to název MP3 a OGG souboru. Načítání obrázků do globálního pole _images můžeme realizovat následovně: var filesCount = 0; _images = new Object(); $.each(jsonFiles.images, function(index, value){ _images[index] = new Image(); _images[index].onload = function() { filesCount++; }; _images[index].src = "img/" + value.url; _images[index].originalWidth = parseInt(value.width); _images[index].originalHeight = parseInt(value.height); });
Nakonec se ještě přesvědčíme, že jsou všechny obrázky načteny. V intervalu 500 milisekund testujeme, zda se proměnná filesCount rovná počtu obrázků v souboru config/files.json. Pokud je tato podmínka splněna, vytvoří se nový herní objekt _game, obraz se přizpůsobí velikosti obrazovky, inicializuje se hráč, vykreslí se hlavní menu a vše je připraveno na hráčovy pokyny.
3.5.2 Použité Javascriptové knihovny Pro usnadnění a urychlení vývoje použijeme již připravené, volně dostupné Javascriptové knihovny. Ty nám poskytnou potřebnou rozšiřující funkcionalitu. Popis těch nejdůležitějších následuje.
Audio5js32 je knihovna pro práci s HTML5 Audiem. Podrobněji o použití této knihovny v kapitole 3.5.3.2 Hudba.
Alertify.js33 umožňuje zobrazování dialogových oken jako přizpůsobitelnou náhradu za nativní Javascriptové metody alert a confirm. Další výhodou je stejný vzhled napříč platformami.
32 33
Audio5js . Alertify.js .
21
Fastclick34 je drobný ale u hry klíčový doplněk, který řeší problém s opožděným rozpoznáváním dotyků u zařízení s dotykovou obrazovkou. Toto opoždění je způsobeno účelovým vyčkáváním, zda uživatel neprovede dvojdotek.
jQuery je framework poskytující metody pro zjednodušení práce s DOM a provázání HTML dokumentu s Javascriptem.
Tinybox.js35 je knihovna umožňující zobrazování lightboxů. Ve hře ji využijeme pro zobrazení dalších obrazovek kromě herní, například pro zobrazení skóre nebo nastavení.
3.5.3 Multimediální soubory Hra bude obsahovat kromě zdrojových kódu a knihoven také multimediální soubory. Jsou to obrázky, hudba a lze mezi ně zařadit i písma. S každým médiem se v HTML5 pracuje odlišně.
3.5.3.1 Obrázky Obrázky budeme ve hře zobrazovat dvěma způsoby. Prvním, v našem případě častějším a preferovaným způsobem, je vykreslení obrázku na plátno, druhým je zobrazení pomocí klasického HTML elementu img. Práci s plátnem jsme popsali v kapitole 2.5.1 Plátno. U některých obrázků lze dosáhnout animovaného efektu jednoduchým způsobem. Do souboru uložíme obrázek dvakrát, vedle sebe a na jedné straně ho mírně upravíme. Vytvoříme tak vlastně sprite sheet o dvou snímcích. V případě hlavního hrdiny, kočky (Obrázek 4.), na jedné straně posuneme jazyk a překreslíme uši.
34 35
Fastclick . Tinybox.js .
22
Obrázek 4: Herní obrázek kočky uzpůsobený pro dosažení animovaného efektu.
Při vykreslování pak střídavě vykreslujeme levou a pravou polovinu obrázku. Docílíme tím jednoduché a efektní animace.
3.5.3.2 Hudba Přehrávání hudby a zvuků pomocí HTML5 jsme popsali již v kapitole 2.5.2 Audio, Video. Tímto způsobem bychom ale museli pro každý zvuk vytvořit zvláštní audio element. Lepším způsobem je využití některé z open source knihoven určených pro přehrávání zvuků na webových stránkách, např. Howler.js36, který ve výchozím nastavení používá modernější Web Audio API a až pokud toto selže, použije se HTML5 Audio. Další možností je knihovna Audio5js37, které spoléhá přímo na HTML5 Audio, případně se zkusí přepnout do Flash režimu. Pro naše účely jednoduchého přehrávání hudby a zvuků se jeví jako výhodnější řešení použití knihovny Audio5js. Tato knihovna disponuje základními metodami, jako je load, play, pause, volume a seek. Přehrávat můžeme soubory různých formátů, např. MP3, OGG Vorbis, Opus, WebM nebo MP4. V praxi stačí použít ztrátové formáty MP3 a OGG Vorbis pro zajištění přehrávání ve všech prohlížečích. Vzhledem k velikosti hry je vhodné použít menší kvalitu zvuku pro mobilní zařízení. Můžeme použít adresář merge, popsaný v kapitole 3.4.5 Příprava projektů platforem. Příklad načtení zvuku, definice více souborů s různými kodeky a jeho okamžité přehrání: var audio = new Audio5js({ codecs: ['vorbis', 'mp3'], ready: function () {
Situace je však problematická u mobilních telefonů, kde je podpora HTML5 Audia nejistá. Např. Windows Phone 8 nepodporuje přehrávání více než jedné zvukové stopy současně, takže si musíme na této platformě vybrat, zda dáme přednost herní hudbě nebo zvukům. Upřednostníme první verzi. V různých verzích Androidu HTML5 Audio funguje také nespolehlivě. Samotnou hudbu a zvuky můžeme získat ze specializovaných stránek, např. z Open Game Art38, která se zaměřuje na sbírání obrázků, hudby a zvuků pro volné užití v hrách. Vždy je nutné dát si pozor na licenci, pod kterou jsou dané soubory uvolněny. Ve většině případů stačí kontaktovat autora, případně ho zmínit v sekci autorů.
3.5.3.3 Písma Abychom se nemuseli omezit pouze na běžná písma, která jsou dostupná ve všech systémech, použijeme písmo Renegade Master Font39, deklarované skrze CSS. Písmo je na webu dostupné zdarma ke stažení ve formátu True Type (TTF), který však nepodporují všechny prohlížeče. Je nutné deklaraci doplnit o další formáty, jako je Embedded OpenType (EOT), Web Open Font Format (WOFF) a také písmo ve formátu Scalable Vector Graphics (SVG).
38 39
Open Game Art . Renegade Master Font .
24
Obrázek 5: Písmo Renegade Master Font.
Konverzi mezi formáty můžeme provést online např. pomocí služby Font Squirrel 40, kde nahrajeme již zmíněné písmo Renegade Master Font a získáme písma v dalších alternativních formátech, které zajistí zvýšení kompatibility a přímo i CSS zápis jejich použití: @font-face { font-family: 'renegade_masternormal'; src: url('../fonts/renegade_master-webfont.eot'); src: url('../fonts/renegade_master-webfont.eot?#iefix') format('embeddedopentype'), url('../fonts/renegade_master-webfont.woff') format('woff'), url('../fonts/renegade_master-webfont.ttf') format('truetype'), url('../fonts/renegade_master-webfont.svg#renegade_masternormal') format('svg'); font-weight: normal; font-style: normal; }
Další možností, jak se vyhnout omezení na běžná systémová písma, která se navíc liší na každé platformě, je využití online služeb, díky kterým můžeme načítat písma vzdáleně. Jednou z takových služeb je Google Fonts41. Jeho použití je jednodušší, než v případě konverze písem a jejich místního uložení. Pro offline hraní je ale nutné mít písma uložená lokálně, navíc tím docílíme rychlejšího načítání.
3.5.4 Vlastní objekty V
Javascriptu
neexistují
třídy,
tento
mechanismus
se
v
něm
nahrazuje
prototypováním. Vytvoříme si několik definic objektů - konstruktorů, které budou jejich roli simulovat. Jejich stručný popis následuje.
gameObject – reprezentuje instanci hry. Obsahuje metody sloužící pro start, přerušení a konec hry, přizpůsobení herního plátna rozlišení obrazovky, dále
40 41
Font Squirrel – Webfont Generator . Google Fonts .
25
zobrazení lightboxu se skóre, přihlášením, registrací a nastavením, zobrazení a práci s obchodem. Důležitou metodou je tick, která se volá periodicky z hlavního herního cyklu a spouští stejnojmenné metody v prakticky všech objektech, které se starají o pohyb a vykreslování.
catObject – objekt hráče, obsahuje metody draw pro vykreslení, jump pro skok, deleteItem, která odstraňuje vylepšení z hráčova inventáře a metodu tick. Ta zjišťuje a řeší, mimo jiné, kolize hráče s nepřáteli nebo jinými interaktivními objekty.
enemyObject – interaktivní objekt nepřátel. Definuje chování a podobu různých typů nepřátel, obsahuje metody draw a tick.
backgroundObject – neinteraktivní objekt obsahující metody draw a tick. Zajišťuje posun a náhodné střídání pozadí.
cloudObject – neinteraktivní objekt s metodami move, draw a tick.
emitorObject – ve hře reprezentovaný jako jetpack nebo komín lokomotivy. Emituje částice – particleObject. Obsahuje metody pro zapnutí a vypnutí emitace, draw pro volání vykreslení pole částic, emit pro vytvoření nové částice a tick pro odstranění, pohyb a přidávání částic.
particleObject
- objekt částice, obsahující metody draw a move, volané
z emitorObject.
coinObject – interaktivní objekt mince s metodami draw a tick.
milkObject – prakticky identický jako coinObject, reprezentuje láhev mléka.
3.6 Serverová část hry Serverová část hry se bude skládat ze dvou hlavních částí. Jednou z nich je registrace a přihlašování uživatelů, druhou je práce se skóre. Uživatel bude mít možnost registrace, tím se mu vytvoří v databázovém serveru záznam, který bude držet informace o hráčově přezdívce, heslu, emailu, o sumě herních peněz a o vylepšeních, které má aktuálně zakoupeny.
26
Jako databázový server zvolíme open source server MySQL. Entity-relationship diagram databázového schématu se skládá ze čtyř entit. Entita user reprezentuje uživatele, k němu mohou existovat záznamy s jeho skóre v entitě score a také seznam vylepšení, reprezentovaný entitou item2user propojují uživatele s vylepšeními z tabulky item.
Obrázek 6: ER diagram schéma databáze.
Aplikační logika bude vytvořena v programovacím jazyku PHP s využitím frameworku Code Igniter. Tento framework využívá softwarové architektury MVC42. Vzhledem k tomu, že nám serverová část bude sloužit jen pro komunikaci s hrou skrz AJAX, prezentační vrstvu naše aplikace nebude potřebovat a vystačíme si s modelem
Model – View – Controller je architektonický vzor oddělující logiku aplikace od její prezentační a datové vrstvy. 42
27
a controllerem. Pokud budeme chtít využít instanci Code Igniteru nejen pro serverovou komunikaci s klientskou hrou, ale i např. pro vytvoření webových stránek hry, můžeme si vytvořit další controllery a k nim prezentační views. Tím se ale v této práci zabývat nebudeme.
3.6.1 Modely Práci s databází bude naše aplikace provádět skrz tři modely – User_model, který bude obstarávat registraci uživatele, jeho přihlašování a nákup vylepšení z obchodu, dále Score_model pro přidávání a vracení skóre a Market_model pro načítání obsahu obchodu. Tyto modely budou přistupovat k databázovému serveru MySQL skrz jazyk SQL, případně přes jeho aplikační nadstavbu Active Record Class 43, pokud to bude výhodné, která je přítomna přímo v Code Igniteru.
3.6.2 Controllery Jak jsme naznačili v kapitole 3.5. Klientská část hry, se serverem budeme komunikovat skrze http požadavky GET. K tomu účelu vytvoříme tři controllery. Prvním z nich bude Auth zajišťující registraci a přihlašování. Bude obsahovat metody signIn pro přihlášení pomocí přezdívky a hesla, signUp pro přihlášení pomocí přezdívky, hesla a nepovinného emailu. Další metoda signInByToken zajistí přihlášení pomocí id hráče a tokenu, který bude uložen v HTML5 úložišti. Tímto způsobem bude hráč ušetřen nutnosti opakovaně se přihlašovat pokaždé, když zapne hru. Druhým důležitým controllerem bude Cat s metodou gameOver, která se zavolá po konci hry. Má na starost publikování skóre a aktualizaci hráčových peněz. Dalšími metodami jsou buyItem a sellItem, které zajišťují kupování a prodávání vylepšení v obchodě. Metoda useItem jednoduše vymaže vylepšení z hráčova záznamu. Volá se hned po začátku hry, ve které se vylepšení použije.
43
Využití objektového přístupu k databázi na úkor psaní SQL příkazů.
28
Dalšími controllery jsou Market, který načítá informace o dostupných vylepšeních a Score, které vrací požadované skóre buď hráče, nebo globální skóre, případně skóre rozdělené dle platforem, na kterých bylo nahráno.
3.7 Distribuce hry 3.7.1 Distribuce hry skrz oficiální obchody platforem Nejvíc přímočarým způsobem šíření aplikací a her na moderních, zejména mobilních platformách, je publikace skrz oficiální obchody daného systému. V těch můžeme publikovat aplikace nativní a hybridní, které se šíří klasickou cestou instalačních balíčků. Výhodou je, kromě jednoduché distribuce, snadná aktualizace, která může probíhat automaticky nebo s uživatelskou kontrolou. Nejprve si vývojář musí vytvořit vývojářský účet. V případě Google Play44, obchodu pro Android je nutné zaplatit jednorázový registrační poplatek $25. U Windows Phone Store45 tento poplatek činí $19 a platí se ročně. Vývojářský účet je pak společný i pro Windows 8. Studenti jsou od tohoto poplatku osvobozeni, firmy naopak platí ročně $99. Vývojáři aplikací pro iOS46 musí platit ročně $99. Tyto poplatky jsou primárně určeny pro omezení výskytu nekvalitních aplikací a spamu, když zvětšují bariéru nutnou pro publikaci. Jednotlivé obchody se liší i schvalovacím procesem. Zatímco v Google Play se aplikace schvalují automaticky, v případě Windows Store a App Store aplikace procházejí manuální kontrolou.
Google Play Developer Console: . Windows Phone Dev Center: . 46 iOS Developer Center: . 44 45
29
3.7.2 Alternativní metody distribuce aplikací Aplikace můžeme, zejména v případě desktopových Windows a Androidu, distribuovat také jinými, klasickými cestami. Jednou z nich je distribuce stahovatelných instalačních balíčků, které publikujeme na relevantních serverech. Další možností je využití alternativních obchodů a služeb typu Steam47. „Steam je platforma společnosti Valve Corporation určená k digitální distribuci her a softwaru a zajištění multiplayerového a komunikačního zázemí pro hráče.“ (5) Publikovat hru ve službě Steam může každý vývojář, hra ale nejprve musí projít schvalovacím procesem na stránkách Steam Greenlight48, na kterých uživatelé a fanoušci rozhodují svými hlasy o hrách, které se dostanou přímo do Steamu. Jinou cestou je obvyklé vydání aplikace nebo hry v krabicové verzi na fyzickém médiu. Je to finančně nejnáročnější záležitost vhodná pouze pro velké projekty, které mají zastřešení a finanční podporu vydavatele.
3.7.2 Monetizace Aplikaci můžeme nabídnout buď zdarma, nebo za poplatek. Oficiální obchody si za zprostředkování prodeje ponechají určité procento z ceny, obecně je to 30 %49. Dalším způsobem monetizace jsou vnitřní mikroplatby, kdy si může uživatel dokupovat součásti aplikace nebo herní předměty přímo v ní. A poslední cestou jsou vhodně umístěné reklamy. Reklamy se dále mohou spojit i s mikroplatbami, třeba způsobem, kdy se uživateli po zaplacení určité částky reklamy skryjí a dále jej neruší.
Steam: . Steam Greenlight: . 49 Google Play Transaction Fees: . 47 48
30
4. Závěr Praktickým výsledkem této bakalářské práce je multiplatformní akční hra. Funguje v internetových prohlížečích s podporou HTML5 a byla otestována na mobilních zařízeních s Android 4.2, 4.4 a Windows Phone 8. Hra se skládá z klientské části vytvořené v HTML5 a ze serverové části, vytvořené v PHP. Mezi hlavní použité frameworky patří Cordova a Code Igniter. Zdrojové kódy jsou k dispozici na GitHubu - https://github.com/MichalSkoula/kitty. Praktická část hry ukázala určité nevýhody hybridního, potažmo webového vývoje. Je to zejména nejistá podpora standardů HTML5 napříč zejména mobilními zařízeními, příkladem může být přehrávání zvuků. V desktopových prohlížečích je podpora HTML5 na lepší úrovni a nic nebrání jeho používání. V teoretické části byly popsány možné způsoby multiplatformního vývoje a dostupné frameworky, pomocí níž lze realizovat hybridní vývoj v HTML5 a Javascriptu. Obsažena je i kapitola s novinkami a jejich použitím v jazyce HTML5, které se dají využít při tvorbě aplikací. Hra by se dala rozšířit o propojení se sociálními sítěmi, přes které by se realizovalo přihlašování uživatelů a sdílení dosažených výsledků. Dalšími vylepšeními by mohli být noví nepřátelé, herní objekty a vylepšení v obchodě. Hra se díky svému multiplatformnímu charakteru dá s minimálními úpravami přenést na další platformy, zejména iOS, Windows 8, Ubuntu atd.
31
5. Literatura 1. BUDIU, RALUCA. Mobile: Native Apps, Web Apps, and Hybrid Apps. Nielsen Norman Group. [Online] 14. 9 2013. http://www.nngroup.com/articles/mobile-nativeapps/. 2. Platform Support. Apache Cordova Documentation. [Online] [Citace: 21. Březen 2014.] http://cordova.apache.org/docs/en/3.4.0/guide_support_index.md.html. 3. HTML5 Introduction. w3schools. [Online] w3schools.com. [Citace: 24. Březen 2014.] http://www.w3schools.com/html/html5_intro.asp. 4. Makzan. HTML5 games development by examplebeginner's guide. Birmingham : Packt Pub, 2011. 9781849691277. 5.
Wikipedia
-
Steam.
Wikipedia
.
[Online]
[Citace:
14.
Duben
2014.]
http://cs.wikipedia.org/wiki/Steam. 6. Vávrů, Jiří. jQuery Mobile. Brno : Computer Press, 2013. 978-80-251-3811-3. 7. Nielsen, Jakob. 10 Best Application UIs. Nielsen Norman Group. [Online] [Citace: 22. Duben 2014.] http://www.nngroup.com/articles/10-best-application-uis/.
