Hry v html5 ruský android. Vývoj HTML5 her pro Android od nuly do vydání

Strategie Briana McHarga úspěšně vyvíjet hry HTML5 napříč prohlížeči a napříč platformami.

HTML5: právoplatný dědic trůnu flashových her. Skutečně vývoj napříč platformami umožňuje, aby jednou napsaný program běžel na PC, tabletu a smartphonu, bude fungovat také na Smart TV a na stolních a mobilních zařízeních, včetně herní konzole jako je Xbox360 nebo PlayStation 3 prostřednictvím vestavěných prohlížečů. Je jasné, že to je velmi atraktivní pro ty, kteří chtějí vyvíjet hry pro co nejvíce zařízení a platforem.

Samotný termín HTML5, stejně jako specifikace, které představuje, mají různé významy v závislosti na tom, kdo ho popisuje. Pro zákazníky je to vývojová technologie, která slibuje skutečný svatý grál-a nákladově efektivní vývoj napříč platformami.

Pro vývojáře je to souhrnné podstatné jméno pro mnoho různých technologií: JavaScript, WebSockets, WebAudio, Canvas, CSS3 a WebGL jsou jen některé z nich, každý s vlastními standardy, silnými slabými omezeními mezi platformami.

A nakonec to vypadá jako to nejdůležitější: pro uživatele! Zde záleží jen na tom, aby uživatelé chtěli stejné zkušenosti a zkušenosti, na jaké jsou zvyklí. A to je hlavní výzva pro vývojáře, zvláště pokud je jejich cílem implementovat hru na co nejvíce platforem.

PC versus mobilní q multiplatformní

Nyní všichni známe fantastické příklady her HTML5, které běží v prohlížečích PC. Často je vytvářejí zejména autoři prohlížečů silné stránky vlastní software, nebo pro konkrétní API, která by rádi viděli ratifikovanou ve specifikaci HTML5.

Hry jako Cutthe Rope a Contre Jour pro Internet Explorer nebo některé z vynikajících experimentů pro prohlížeč Chrome, jako je Jam nebo Racer, jsou skvělými příklady. Pokud jde o budoucí potenciál, podívejte se do knihoven, jako jsou three.js, nedávno vydaný open source Turbulenz nebo Epic HTML5 poháněný Unreal Engine.

Zkuste se však podívat na jeden z těchto příkladů na Androidu s nainstalovaným OS2.3 (Gingerbread) a uvidíte úplně jiný obrázek a v některých případech neuvidíte vůbec nic. Ano, tento operační systém je téměř tři roky starý, ale stále je nainstalován na třetině všech zařízení Android a toto číslo by mohlo být ještě vyšší v závislosti na cílovém publiku. A to se děje nejen dál stará verze Android. Totéž můžete vidět na Zařízení Apple se systémem iOS 5 nebo méně výkonnými zařízeními, jako je Kindle Fire. Ve skutečnosti nyní nenajdete jediné mobilní zařízení, na kterém by se některý z výše uvedených programů zobrazoval správně.

Jak již bylo zmíněno dříve, většina zákazníků volí HTML 5 pro svou hru prohlížeče jako skutečně multiplatformní. Pokud vyvíjíte hry pouze pro PC, Unity a Flash jsou skvělé možnosti, na které si dát pozor. Oba mají vynikající podporu prohlížeče a možnost exportu do zařízení jako samostatné aplikace, takže je lze přenést na smartphone nebo tablet s přesným kódem, který potřebujete.

Při vývoji hry napříč platformami v HTML5 existují dva zřejmé problémy. První je důsledkem fuzzy povahy specifikace HTML5, což má za následek, že budoucí podpora není rozdělena podle typu zařízení, ale podle typu prohlížeče na každém z těchto zařízení. Druhou a pro vývojáře nejobtížnější je neustálá změna možností mobilních zařízení, což znamená, že i při stejné sadě funkcí se hra na jednom zařízení bude velmi lišit od stejné hry nainstalované na jiném gadgetu.

Chcete -li získat představu o tom, kolik možností existuje, jednoduše spusťte jeden z mnoha benchmarků JavaScriptu a otestujte výkon zařízení. Například odeslání 100 snímků přes Canvas bude hrát relativně dobře rychlostí 60 snímků za sekundu na zařízeních, jako jsou iPhone 4S nebo 5, Galaxy S3, Nexus 7 nebo Lumia 820. Ale zkuste stejný kód na jiných zařízeních, jako je HTC Desire(19 snímků za sekundu), Galaktické eso(7 snímků) nebo iPad 1 (9 snímků za sekundu), a budete muset hodně pracovat, abyste získali alespoň něco jako životaschopnou hru.

Pokud byl váš projekt zaměřen na chytrý telefon nebo tablet, a zejména pokud obsahoval stará zařízení nebo zařízení s nízkým výkonem, je velmi důležité provést testování a stanovit standardy v rané fázi. To je nezbytné k pochopení omezení rozsahu zařízení a určení jak technického přístupu, tak designu hry, na které budete pracovat.

Pokud váš projekt nebyl zaměřen na smartphony nebo tablety, měli byste pravděpodobně své cíle přehodnotit. Například smartphony a tablety tvoří téměř třetinu zobrazení stránky ve Velké Británii a toto číslo roste tempem, které v roce 2014 překoná počet zobrazení na PC. Navzdory skutečnosti, že stolní zařízení stále dominují v pracovní době, vedou ráno mobilní zařízení a tablety ve večerních hodinách, tyto dva časy jsou ideální pro procházení webu a hraní her.

Vyberte si své bitvy

Společnost Chunk již dva roky vyvíjí multiplatformní hry HTML5 pro provozovatele vysílání a značky a pro klienty jako BBC a Disney vytvořila mobilní hry založené na prohlížeči, které běží na všech zařízeních, od HTC Desire po iPad4, od Nexus 7 po Xbox 360.

Jako vývojáři by pro ně bylo skvělé rozhodnout, jak hluboko se do tohoto procesu dostat, ale to je určeno jejich cílovým publikem a zařízeními, která používají. Při práci na značkách pro děti se často ocitli pod tlakem starších telefonů nebo levných zařízení s nízkou spotřebou, přesto pečlivě navrhli a optimalizovali mnoho dalších věcí, takže stále věří, že je možné vyvinout působivé hry pro mobil. internet.

A co se z této zkušenosti naučili? Pokud byste měli sestavit seznam 10 nejlepších tipů pro vývojáře her HTML5, vypadalo by to takto:

1. Rozhodněte o svém publiku

Podívejte se na demografické údaje a na to, jaká zařízení používají ti, pro které jsou vaše návrhy určeny. Jakmile budete mít data, použijte je k identifikaci hlavního rozsahu zařízení, která vaši návštěvníci používají, a při rozhodování na tato zařízení cílit.

2. Rozhodněte o designu z hlediska technologie

Ano, vždy by to tak mělo být, ale kvůli omezením a fragmentaci v HTML5 je to ještě důležitější. WebGL vám umožní vytvořit vynikající 3D střílečku z pohledu první osoby, ale je nepravděpodobné (číst - vůbec ne) bude fungovat na tabletech, pokud jsou na vašem seznamu cílových platforem.

3. Spřátelete se s caniuse.com

Je to skvělý způsob, jak rychle zkontrolovat podporu jakékoli funkce HTML5, kterou byste chtěli použít ve svém vývoji - téměř pro všechny prohlížeče a zařízení.

4. Používejte zařízení, nejen simulátory

Vezměte co nejvíce do svých rukou různá zařízení, spusťte co nejvíce různých verzí operačních systémů. Simulátory vám pomohou při vývoji, ale můžete získat pouze přesný obrázek o tom, jak bude váš kód fungovat na skutečném zařízení. Existuje obrovské množství laboratoří s testovacími zařízeními, jako je Open Device Lab, které vám umožní přístup k obrovskému počtu zařízení. Jinak prozkoumejte zdroje, jako je eBay, abyste našli staré telefony a představili je vašemu testovacímu prostředí.

5. Buďte si vědomi změn

Specifikace HTML5 se neustále mění, stejně jako podpora zařízení, takže se musíte informovat o změnách v těchto oblastech. To platí zejména v oblastech, jako je zvuk, kde funkce, jako je WebAudio API, mohou radikálně změnit možnosti.

6. Buďte flexibilní během vývoje.

Co funguje dnes, nemusí fungovat zítra. To, co je vám dnes nepřístupné, může být k dispozici zítra. Dovolte si být flexibilní a přizpůsobit se změnám, které během vaší práce nastanou.

7. Funkce škálování

Umístění mobilu na první místo je užitečné nejen pro tradiční webový design. Podívejte se, jak můžete vytvořit něco dobrého pro smartphony, a pak se rozhodněte pro funkčnost a výkon na jiných platformách, pokud to umožňují. Pracujte pro ta zařízení, která používají uživatelské agenty nebo mediální zařízení, a aplikujte na ně své zkušenosti.

8. KISS (Keep It Simple, Stupid) - Nedělejte si život těžkým, vy hloupí

Pokuste se definovat hranice a rozšiřovat příležitosti všemi prostředky, ale pamatujte, že pracujete s technologií, která je v plenkách, zvýšená složitost nebo nadhodnocené ambice projektu vaši situaci jen zhorší.

9. Rozhodněte o životnosti svých návrhů

Funkce se neustále mění a váš obsah může být zastaralý příliš rychle díky novým funkcím dostupným na zařízeních. Pokud vaše hra potřebuje dost dlouho, věnujte čas opravám chyb a aktualizaci hry.

Ach ano. Zkontrolujte své hry pro každého dostupná zařízení tak často, jak je to možné!

Gladiátore, jedeš na mém druhém signálu

Zdá se, že HTML5 je neoficiální mainstreamová technologie pro vývoj multiplatformních her pro různé prohlížeče, o tom není pochyb. Momentálně to není nejbezpečnější prostor, ale to je v pořádku pro technologii v plenkách. Chcete -li zkontrolovat možnosti prohlížečů, stojí za to se podívat na stránky jako caniuse.com. Pravidelně kontrolujte své hry více zařízení, která máte k dispozici, a buďte pragmatičtí s herním designem. To vám pomůže vyhnout se problémům nejen nyní, ale také mít lepší pozici, když se zlepší podpora zařízení, což je nevyhnutelné.

Hry zdarma na Androidu. Vyrobeno v html5, takže je můžete hrát na telefonu a tabletu. Kromě systému Android jsou podporována Windows, Linux, Mac a mobilní zařízení od společnosti Apple. Hlavní věc je, že prohlížeč je moderní a systém je nový. Ovládání myší nebo dotykovým displejem.

Hry pro Android jsou ideální. Můžete je hrát na počítači a telefonu. Lze je stáhnout (nainstalovat) pro rychlý přístup.

Jak stáhnout hru HTML5 do telefonu

Přejděte na stránku hry na našem webu. Otevřete hru na celé obrazovce v moderním prohlížeči, jako je Chrome. V prohlížeči klikněte na tlačítko se třemi tečkami, které skrývá příkazy nabídky pro práci se stránkou. Procházejte seznamem dolů a vyberte „Přidat hru na hlavní obrazovku“ (pokud máte nerusifikovaný Chrome). Poté se hra zobrazí na obrazovce vašeho telefonu a bude možné ji spustit přímým spuštěním bez spuštění prohlížeče.

Tato operace je k dispozici pro telefony a Tablety Android a Apple, ale ten druhý může mít příkaz jinde - ve spodní nabídce Safari.

Hra může ke svému fungování vyžadovat internet (nebo nemusí, v závislosti na vlastnostech konkrétní hry - řada her je k dispozici offline, ale nyní ji musíte zkontrolovat.) Hra se automaticky stáhne a uloží na telefonu, ale ke stahování online žebříčků nebo jiných funkcí může být nutné připojení.

Nainstalujte si jako normální hru pro Android

Téměř každá hra HTML5 má verzi pro operační systém Android nebo iOS. Pokud vám instalace hry HTML5 na domovskou obrazovku nevyhovuje - řekněme, chcete hrát neustále, a nejen když je k dispozici internet -, vyhledejte ikonu ve spořičích obrazovky her Google Play a AppStore. Přestože jsou hry vydávány méně často pro zařízení Apple, častěji můžete vidět pouze tlačítka pro Android, jako je tato:

Tlačítko Instalovat - hledejte ve hrách

V samotných hrách je tlačítko mnohem menší, zde je zvětšené, abyste si ho pamatovali. Podívejte se na snímek obrazovky hry níže - zkuste tam najít to tlačítko. Vedou k oficiálnímu Google Play, kde si můžete stáhnout bezplatná verze hry s pokročilými funkcemi - například možnost hrát bez internetu.

Věnováno fanouškům hry na Androidu ...

Když mi bylo řečeno, že něco takového existuje, nevěnoval jsem tomu velkou pozornost, protože nejsem velkým fanouškem všech těchto nových trendů. Poté jsem si však uvědomil, že hry pro Android jsou něco jako hračky „plošinovek“ - hned jsem chtěl vyzkoušet, co to je. Dodnes si pamatuji, jak fascinující hry mi připadaly pro „osmibitovou“ konzoli Dandy nebo Sega. A tady civilizace klesla k čemu - jen si pomyslete, telefon bez tlačítek a s funkcí, která vám umožní hrát hry. Lákavé, nic neřekneš!

Ve skutečnosti je ve vašem telefonu nainstalována hra (nebo proces hry provádí výhradně prostřednictvím prohlížeče - tato možnost je také zvažována), přičemž věnujte pozornost tomu, že můžete soutěžit nejen s umělou inteligencí (tj. Osobní počítač), ale také s dalšími účastníky (celý proces probíhá online).

Zjevné výhody HTML5

Pro nikoho není žádným tajemstvím, že HTML5 nahrazuje Flash a je oporou moderního webu. Z tohoto důvodu začaly hry vytvořené na jeho základě fungovat na internetu - navíc dnes hry, které umožňují soutěžit s ostatními uživateli, stále více zajímají zákazníky (zvláště pokud to není nutné, stáhněte si a nainstalujte do svého počítač). Tato funkce zase pomáhá zbavit se mnoha malware které vám brání v práci na počítači.

Všechny tyto hry pro Android a PC jsou vytvořeny pro moderní prohlížeče a ke své úspěšné funkci vyžadují pouze JavaScript, Canvas a HTML5. V závislosti na tom, jaké úkoly bude třeba během této hry provést, je obvyklé rozlišovat některé odrůdy:

Pasáž
hlavolam
Strategie
Letící
Dobrodružství
Závod
Ke stažení
Prohlížeč

Příklady online her pro Android

Dříve mě hry na telefonu vůbec nezajímaly, ale vše se změnilo poté, co jsem se dostal na stránky. Tam jsem se seznámil s tím, co jsou online hry pro Android, vyzkoušel obrovské množství různých „hraček“. Pokud jde o mě, nejlepší hry pro Android uvedené na tomto webu (a nejen na tomto) jsou mahjong a.

Proč to říkám? Všechno je velmi jednoduché. Celý život dávám přednost hrám se strategickým zaujetím a jasným odstínem středověkých témat, stejně jako fantasy. Můžeme tedy říci, že jsem opravdu našel to, co se mi líbí. Ale o to ani nejde.

Nejvíce se mi tato stránka líbila, protože obsahuje nejvíce odlišné typy online hry a kromě toho - ve skutečnosti všechny vyžadují velmi málo softwaru (ve skutečnosti kromě JavaScriptu, Canvas a HTML5 není pro jejich fungování nutné nic).

Hry zdarma pro Android

Díky modelu Free2Play jsou všechny hry pro Android uvedené na tomto webu zdarma. Lze je přehrávat na celé obrazovce na počítači i tabletu. Od flashových her je ale odlišuje hlavně to, že je lze konečně hrát na telefonu.

Základní technologie, která umožňuje hry HTML5, je kombinace HTML a JavaScript. Hypertext Markup Language (HTML) byl součástí rané internetové superdálnice, jak se jim tehdy říkalo, a stále se používá k obsluze všech dnešních webových stránek. JavaScript kód byl přidán do prohlížečů druhé verze, jako je Netscape 2.0, v roce 1995 a během let se vyvíjel, aby byl příjemnější pro čtení i psaní. V počátcích byl označován jako DHTML nebo dynamický HTML, protože umožňoval interaktivní obsah bez aktualizace stránky. V rané webové éře však bylo obtížné se učit a používat. Postupem času Javascript s pomocí Google Chrome vývojáři se stali jedním z nejrychlejších skriptovacích jazyků. Má také více volně dostupných modulů, knihoven a skriptů než jakýkoli jiný kódovací jazyk.

Počáteční hry DHTML byly velmi jednoduché. Některé příklady her tehdy byly Tic-Tac-Toe a. Jelikož hry vytvořené pomocí této technologie používají otevřený standard HTML5, lze tyto relativně staré hry hrát i dnes v moderním webovém prohlížeči. Tyto technologie se přesunuly do popředí prohlížečových her, protože nevyžadují doplňky a jejich hraní je bezpečnější než u starších technologií. Hry HTML5 také podporují a zlepšila se schopnost podporovat komplexní 2D a

Místo úvodu.
Poté, co jsem strávil několik dní v řadě (bez přestávky na spánek) studiem podpory HTML5 všemi mými oblíbenými gadgety pro Android, rozhodl jsem se, že tomuto tématu je třeba věnovat pozornost. V článku se pokusím krok za krokem odhalit všechny fáze (samozřejmě základní / klíčové / hlavní) vytváření aplikace HTML5 Game pro Android od nápadu až po samotné vydání Soubor APK.
Možná ctihodným vývojářům neotevřu nic nového, ale pro začátečníky se pokusím popsat vše co nejjednodušeji, pomocí screenshotů a vysvětlení.

Zvu ty, kteří se chtějí dozvědět více pod kat.

Idea
Obecně můžete hodně mluvit o potenciálu Androidu, o vývoji HTML5 a o jejich interakci. To neudělám. Takže rovnou k věci.

Myšlenka vytvořit hru pro Android pravděpodobně sedí v hlavách desítek stovek vývojářů a těch, kteří se za ně považují. Nejsem výjimkou.

Proč HTML5? - Narození. Napíšete hru v JS a pak pro naprosto jakýkoli operační systém vytvoříte wrapper ve vhodné formě a v jakémkoli jazyce.

Celý proces bude rozdělen do několika kroků a konečná aplikace se bude skládat ze dvou částí:
- Zabalit (v tento případ pro Android)
- Hra

Krok 1. Psaní samotné hry
Další plus psaní hry v HTML5 je skutečnost, že nevyžaduje spoustu spuštěné programy, IDE, emulátory a tak dále. Vše, co potřebujete, je prohlížeč (v mém případě je to Chromium) a textový editor(BlueFish)

Hra bude jednoduchá: pokud je modrý obdélník zeleným obdélníkem. Úkolem hráče je přetáhnout modrý obdélník na zelený a obejít tak červený, který se pohybuje po hracím poli libovolným směrem.

Pro vývoj hry použiji J2ds (herní engine)

Kód hotové hry:

index.html

Demo hra na J2ds v.0

Kvalitu herního kódu můžete ignorovat, protože to není účelem článku. Ačkoli samozřejmě můžete optimalizovat, kolik chcete, tento proces je obecně obecně nekonečný.

Krok 2. Android Studio... Vytvoření obalu pro hru
S nikým nebudu měřit chlad toho či onoho IDE pro vývoj Androidu, ale ukážu vám to Příklad pro Android Studio. Pro práci potřebujeme:
- Stroj Java (OpenJDK je vhodný pro můj Linux)
- Distribuční sada Android Studio.

Stáhněte, nainstalujte.
Jakmile je vše nainstalováno (stačí tyto dva programy), spusťte Android Studio.

Otevře se úvodní okno (pokud jde o první spuštění), když ne první, tak se otevře samotné IDE, ale to nemění podstatu, pojďme ke Správci SDK:

Zde je třeba zaškrtnout potřebné verze Androidu, se kterými budete pracovat, v mém případě je to Android 4.4.2, vybrat si můžete alespoň všechny najednou.

Hlavní věc je, že musíte vybrat „Nástroje“ a „Doplňky“ a kliknout na „nainstalovat balíčky“.

Jakmile budete mít vše staženo, IDE začne s matným šedým pozadím a několika tlačítky, stiskněte první a vytvořte nový projekt. Pokud IDE začalo okamžitě v provozuschopném stavu, pak: „Soubor-> Nový-> Nový projekt“

Vyplňte požadovaná pole a klikněte na Další

Vyberte požadovanou verzi systému Android a klepněte na Další

Zde vybereme prázdnou aktivitu (prázdná šablona s Hello, World!)

V dalším okně vyplňte údaje pro vytváření tříd, pro přehlednost se nezměním:

Slavnostně stiskneme Finicha a čekáme, až IDE nakonfiguruje a připraví vše na práci.

Otevře se okno s návrhářem formulářů. Není to stejné jako v Lazarus, Delphi, ale něco podobného je stále k dispozici:

Nespěchejte něco změnit nebo na něco kliknout, nastavení ještě neskončilo.
Emulátor nakonfigurujete otevřením „Tolls-> Android-> AVD Manager“.

Zde, pokud nic není, klikněte na „Cereate Virtual Device“, pokud existuje, nemůžete vytvořit nové, již jsem to měl, protože „Narazil“ jsem na to, když jsem na to přišel. Pokud potřebujete vytvořit nový emulátor, pak je vše jednoduché:
1. Vyberte velikost obrazovky a model telefonu
2. Vyberte verzi systému Android (mám 4.4.2)
3. Konfigurace zařízení.

Ve třetím kroku podrobněji:

T.K. hra je natažena vodorovně, musíte vybrat režim na šířku.

Po zadání všech nastavení klikněte na zelený trojúhelník a spusťte emulátor. Po spuštění čekáme na úplné spuštění zařízení a spuštění operačního systému:

Toto okno nezavírejte, proběhne v něm emulace. Nyní se můžete vrátit zpět do editoru a změnit orientaci v návrháři formulářů:

Můžeš běžet! Nyní je to rozhodně možné.
Pokud budete vyzváni k výběru emulátoru, můžete zaškrtnout následující políčko:

Moje gratulace! Všechno funguje, zkontrolováno!

Minimalizujeme náš emulátor (ale nezavírejte ho!) A jděte do editoru, tam je vše trochu komplikovanější (trochu).
Musíte přepnout do režimu „Text“. Ve vaší activity_main jsou popsány všechny prvky, které jsou ve formuláři. Včetně samotného formuláře. A už vůbec to není forma =).

Protože děláme hru v HTML5 a zde máme pouze obal pro hru, odstraníme veškerý text a vložíme následující:

Když teď přepnete zpět na design, bude to vypadat jinak:

Jak vidíte, místo „Hello, World“ se nyní zobrazuje natažená obrazovka na celou obrazovku - WebView. Tento objekt je naším „oknem“ do herního světa.

Můžete dokonce běžet a zjistit, zda bude bílá obrazovka. Pokračujte.

A pak musíme jít do našeho projektu, proto vlevo otevřete pole „Projekt“ a vyberte kartu „Android“, pokud není vybrána:

Tato karta zobrazuje strukturu projektu a všechny jeho interní soubory a prostředky.

Hlavička spoileru

Musíme najít soubor „manifest“ a do definice přidat „aplikaci“ další řádek:
android: hardwareAccelerated = "true"

Je čas zapracovat na funkčnosti našeho „prohlížeče“, protože to je ono! Otevřete třídu „MainActivity.java“ a odstraňte všechny nepotřebné věci, ponechte pouze ty hlavní:

Hlavička spoileru

Balíček com.soft.skaner.demogamehtml5; importovat android.support.v7.app.AppCompatActivity; import android.os.Bundle; veřejná třída MainActivity rozšiřuje AppCompatActivity (@Override protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Pokud jste nezapomněli, přidali jsme WebView do souboru activity_main, věnujte pozornost řádku zvýrazněnému tučně:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: clickable = "true"
android: scrollbars = "žádný" />

Potřebujeme deklarovat objekt třídy WebView.

Chcete -li to provést, přidejte do seznamu importů:

Importovat android.webkit.WebView;

A pak deklarujeme náš objekt myWeb uvnitř třídy MainActivity:

Chráněný WebView myWeb;

Nyní, po řádku setContentView (R.layout.activity_main); vložte následující kód:

/ * Najděte náš prohlížeč * / myWeb = (WebView) findViewById (R.id.webView); / * Nastavit náš prohlížeč * / myWeb.getSettings (). SetUseWideViewPort (true); myWeb.setInitialScale (1); myWeb.getSettings (). setJavaScriptEnabled (true); / * Načíst stránku */myWeb.loadUrl ("soubor: ///android_asset/index.html");

Zde je to, co jsem dostal v editoru:

A tady je to, co je v emulátoru:

Pokud uděláte to samé - jsme na správné cestě!

Zbývá udělat jen málo:
Když stránku načteme do prohlížeče, cesta k souboru vypadá takto: „file: ///android_asset/index.html“
Je třeba poznamenat, že do naší hry můžeme ukládat jakékoli soubory a mít k nim přístup.

V našem případě je klíčová složka „android_asset“, vytvořme ji (ano, ve výchozím nastavení není v projektu):
„Soubor -> Nový -> Složka -> Složka aktiv“, otevře se okno, kde stačí souhlasit s IDE.
Všiml sis? V projektu se objevila nová složka:

Klikněte na něj pravým tlačítkem myši -> „Zobrazit v souborech“, otevře se průzkumník systému (v mém případě Nautilus), věnujte pozornost cestě ke složce. Mějte také na paměti, že složka se nazývá „aktiva“, ale je přístupná pomocí „android_asset“.

Pak je vše celkem jednoduché - zkopírujte naši hru do složky aktiv:

Soubor index.html je stejný index od začátku tohoto článku. Zkusme to spustit!

Malý tip: nejlepší je testovat na skutečném zařízení přes USB, takže výsledky testů budou přehlednější a ovládání myši není nejpohodlnější možností, nemluvě o vícenásobném kliknutí.

Krok 3. Android Studio. Vytvořte aplikaci a podepište ji

Když je hra plně odladěna vámi (v prohlížeči nebo na emulátoru), wrapper je zcela připraven a všechny fáze vývoje jsou u konce, můžete aplikaci sestavit. Android Studio vám umožňuje vytvářet aplikace a podepisovat je pomocí klíčů.

K vytvoření klíčů má toto IDE speciální utilita„KeyTool“.

Přejdeme k vytvoření spustitelného souboru aplikace („Build -> Generate Signed APK“):

Pokud jste dosud nevytvořili klíče a aliasy, klikněte na „Vytvořit nový“
Pole můžete vyplnit podle svého uvážení, přesnost údajů je zcela na vás.

První pole je cesta ke složce, kam bude klíč uložen.
Po kliknutí na Ok se formulář vyplní automaticky:

U následných aplikací není nutné vytvářet nové klíče, ostatní aplikace můžete svým klíčem podepisovat, přesně k tomu slouží tlačítko „Vybrat existující“.
V dalším kroku vás IDE vyzve k opětovnému zadání hesla a poté určete složku pro uložení souboru APK.
admin v záhlaví Nezařazeno. Záložka do knihy.

Poté, co jsem strávil několik dní v řadě (bez přestávky na spánek) studiem podpory HTML5 všemi mými oblíbenými gadgety pro Android, rozhodl jsem se, že tomuto tématu je třeba věnovat pozornost. V článku se pokusím krok za krokem vysvětlit všechny fáze (samozřejmě základní / klíčové / hlavní) vytváření aplikace HTML5 Game pro Android od nápadu až po vydání samotného souboru APK. Možná ctihodným vývojářům neotevřu nic nového, ale pro začátečníky se pokusím popsat vše co nejjednodušeji, pomocí screenshotů a vysvětlení.

Zvu ty, kteří se chtějí dozvědět více pod kat.

Idea

Obecně můžete hodně mluvit o potenciálu Androidu, o vývoji HTML5 a o jejich interakci. To neudělám. Takže rovnou k věci.

Myšlenka vytvořit hru pro Android pravděpodobně sedí v hlavách desítek stovek vývojářů a těch, kteří se za ně považují. Nejsem výjimkou.

Celý proces bude rozdělen do několika kroků a konečná aplikace se bude skládat ze dvou částí:
- Wrapper (v tomto případě pro Android)
- Hra

Krok 1. Psaní samotné hry

Další výhodou psaní hry v HTML5 je skutečnost, že testování nevyžaduje spoustu spuštěných programů, IDE, emulátorů atd. Vše, co potřebujete, je prohlížeč (v mém případě je to Chromium) a textový editor (BlueFish)

Hra nebude obtížná: je zde modrý obdélník a zelený obdélník. Úkolem hráče je přetáhnout modrý obdélník na zelený a obejít tak červený, který se pohybuje po hracím poli libovolným směrem.

Pro vývoj hry použiji J2ds (herní engine).

Kód hotové hry:

index.html

Demo hra na J2ds v.0

Kvalitu herního kódu můžete ignorovat, protože to není účelem článku. Ačkoli samozřejmě můžete optimalizovat, kolik chcete, tento proces je obecně obecně nekonečný.

Krok 2. Android Studio. Vytvoření obalu pro hru

Nechci s nikým měřit chlad toho či onoho IDE pro vývoj Androidu, ale ukážu to pomocí Android Studia jako příkladu. Pro práci potřebujeme:
- stroj Java (OpenJDK je vhodný pro můj Linux);
- Distribuční sada Android Studio.

Stáhněte, nainstalujte.

Jakmile je vše nainstalováno (stačí tyto dva programy), spusťte Android Studio.

Otevře se úvodní okno (pokud jde o první spuštění), když ne první, tak se otevře samotné IDE, ale to nemění podstatu, pojďme ke Správci SDK:

Zde je třeba zaškrtnout potřebné verze Androidu, se kterými budete pracovat, v mém případě je to Android 4.4.2, vybrat si můžete alespoň všechny najednou.

Hlavní věc je, že musíte vybrat „Nástroje“ a „Doplňky“ a kliknout na „nainstalovat balíčky“.

Vyplňte požadovaná pole a klikněte na Další

Vyberte požadovanou verzi systému Android a klepněte na Další

Zde vybereme prázdnou aktivitu (prázdná šablona s Hello, World!)

V dalším okně vyplňte údaje pro vytváření tříd, pro přehlednost se nezměním:

Slavnostně stiskneme Finicha a čekáme, až IDE nakonfiguruje a připraví vše na práci.

Otevře se okno s návrhářem formulářů. Není to stejné jako v Lazarus, Delphi, ale něco podobného je stále k dispozici:

Nespěchejte něco změnit nebo na něco kliknout, nastavení ještě neskončilo. Emulátor nakonfigurujete otevřením „Tolls-> Android-> AVD Manager“.

Zde, pokud nic není, klikněte na „Vytvořit virtuální zařízení“, pokud existuje, nemůžete vytvořit nové, již jsem to měl, protože „Narazil“ jsem na to, když jsem na to přišel. Pokud potřebujete vytvořit nový emulátor, pak je vše jednoduché:
1. Vyberte velikost obrazovky a model telefonu
2. Vyberte verzi systému Android (mám 4.4.2)
3. Konfigurace zařízení.

Ve třetím kroku podrobněji:

T.K. hra je natažena vodorovně, musíte vybrat režim na šířku.

Po zadání všech nastavení klikněte na zelený trojúhelník a spusťte emulátor. Po spuštění čekáme na úplné spuštění zařízení a spuštění operačního systému:

Toto okno nezavírejte, proběhne v něm emulace. Nyní se můžete vrátit zpět do editoru a změnit orientaci v návrháři formulářů:

Můžeš běžet! Nyní je to rozhodně možné.

Pokud budete vyzváni k výběru emulátoru, můžete zaškrtnout následující políčko:

Moje gratulace! Všechno funguje, zkontrolováno!

Protože děláme hru v HTML5 a zde máme pouze obal pro hru, odstraníme veškerý text a vložíme následující:

Když teď přepnete zpět na design, bude to vypadat jinak:

Jak vidíte, místo „Hello, World“ se nyní zobrazuje natažená obrazovka na celou obrazovku - WebView. Tento objekt je naším „oknem“ do herního světa.

Můžete dokonce běžet a zjistit, zda bude bílá obrazovka. Pokračujte.

Tato karta zobrazuje strukturu projektu a všechny jeho interní soubory a prostředky.

Vysvětlení

Musíme najít soubor „manifest“ a do definice „aplikace“ přidat následující řádek:
android: hardwareAccelerated = "true"

Je čas zapracovat na funkčnosti našeho „prohlížeče“, protože to je ono! Otevřete třídu „MainActivity.java“ a odstraňte všechny nepotřebné věci, ponechte pouze ty hlavní:

Vysvětlení

balíček com.soft.skaner.demogamehtml5; importovat android.support.v7.app.AppCompatActivity; import android.os.Bundle; veřejná třída MainActivity rozšiřuje AppCompatActivity (@Override protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Potřebujeme deklarovat objekt třídy WebView.

Chcete -li to provést, přidejte do seznamu importů:

Importovat android.webkit.WebView;
A pak deklarujeme náš objekt myWeb uvnitř třídy MainActivity:

Chráněný WebView myWeb;
Nyní, po řádku setContentView (R.layout.activity_main); vložte následující kód:

Zde je to, co jsem dostal v editoru:

A tady je to, co je v emulátoru:

Pokud uděláte to samé - jsme na správné cestě!

Soubor index.html je stejný index od začátku tohoto článku. Zkusme to spustit!

Krok 3. Android Studio. Vytvořte aplikaci a podepište ji

K vytvoření klíčů v tomto IDE existuje speciální nástroj „KeyTool“.

Přejdeme k vytvoření spustitelného souboru aplikace („Build -> Generate Signed APK“):

Pokud jste dosud nevytvořili žádné klíče nebo aliasy, klikněte na „Vytvořit nový“. Pole můžete vyplnit podle svého uvážení, přesnost údajů je zcela na vás.

První pole je cesta ke složce, kam bude klíč uložen. Po kliknutí na Ok se formulář vyplní automaticky:

U následných aplikací není nutné vytvářet nové klíče, můžete klíčem podepisovat i jiné aplikace, proto je zde tlačítko „Vybrat existující“.

V dalším kroku vás IDE vyzve k opětovnému zadání hesla a poté určete složku pro uložení souboru APK.