Hry v html5 ruský android. Vývoj hier HTML5 pre Android od začiatku do konca

Stratégia Briana McHarga na úspešný vývoj hier HTML5 naprieč prehliadačmi a na viacerých platformách.

HTML5: právoplatný následník trónu flashových hier. Skutočne vývoj naprieč platformami umožňuje, aby raz napísaný program bežal na počítači, tablete a smartfóne, bude fungovať aj na televízore Smart TV a na stolných a mobilných zariadeniach vrátane herné konzoly napríklad Xbox360 alebo PlayStation 3 prostredníctvom vstavaných prehliadačov. Je jasné, že je to veľmi atraktívne pre tých, ktorí chcú vyvíjať hry pre čo najviac zariadení a platforiem.

Samotný výraz HTML5, ako aj špecifikácie, ktoré predstavuje, majú rôzny význam v závislosti od toho, kto ho opisuje. Pre zákazníkov je to vývojová technológia, ktorá sľubuje skutočný svätý grál-a nákladovo efektívny vývoj na viacerých platformách.

Pre vývojárov je to súhrnné podstatné meno pre mnoho rôznych technológií: JavaScript, WebSockets, WebAudio, Canvas, CSS3 a WebGL je len niekoľko z nich, každý so svojimi vlastnými štandardmi, silnými slabými prekážkami medzi platformami.

A nakoniec to vyzerá ako to najdôležitejšie: pre používateľov! Tu záleží len na tom, aby používatelia chceli rovnaké skúsenosti a skúsenosti, na aké sú zvyknutí. A to je hlavná výzva pre vývojárov, najmä ak je ich cieľom implementovať hru na čo najväčšom počte platforiem.

PC versus mobilný q multiplatformový

Teraz všetci poznáme fantastické príklady hier HTML5, ktoré bežia v prehliadačoch PC. Autori prehliadačov ich často vytvárajú, aby to obzvlášť predviedli prednosti vlastné softvér alebo pre konkrétne rozhrania API, ktoré by chceli vidieť ratifikované v špecifikácii HTML5.

Hry ako Cutthe Rope a Contre Jour pre Internet Explorer alebo niektoré z vynikajúcich experimentov pre prehliadač Chrome ako Jam alebo Racer sú skvelými príkladmi. Pokiaľ ide o budúci potenciál, pozrite sa na knižnice ako three.js, nedávno vydaný open source Turbulenz alebo Epic HTML5 poháňaný nástrojom Unreal Engine.

Skúste sa však pozrieť na jeden z týchto príkladov v systéme Android s nainštalovaným OS2.3 (Gingerbread) a uvidíte úplne iný obrázok a v niektorých prípadoch neuvidíte vôbec nič. Áno, tento operačný systém je takmer tri roky starý, ale stále je nainštalovaný na tretine všetkých zariadení s Androidom a tento údaj môže byť ešte vyšší v závislosti od cieľového publika. A to sa deje nielen ďalej stará verzia Android. To isté môžete vidieť na Zariadenia Apple so systémom iOS 5 alebo menej výkonnými zariadeniami, ako je Kindle Fire. V skutočnosti teraz nenájdete ani jedno mobilné zariadenie, na ktorom by sa niektorý z vyššie uvedených programov zobrazoval správne.

Ako už bolo spomenuté, väčšina zákazníkov volí HTML 5 pre svoju hru prehliadača ako skutočne multiplatformovú. Ak vyvíjate hry iba pre PC, Unity a Flash sú skvelé možnosti, na ktoré si dať pozor. Oba majú vynikajúcu podporu prehliadača a možnosť exportovať do zariadení ako samostatné aplikácie, takže ich je možné portovať na smartfón alebo tablet s presným kódom, ktorý potrebujete.

Pri vývoji multiplatformovej hry v HTML5 existujú dva zrejmé problémy. Prvá je dôsledkom nejasného charakteru špecifikácie HTML5, pričom výsledkom je, že budúca podpora nie je oddelená podľa typu zariadenia, ale podľa typu prehliadača na každom z týchto zariadení. Druhým a pre vývojárov najťažším procesom je neustála zmena schopností mobilných zariadení, čo znamená, že aj pri rovnakom súbore funkcií sa hra na jednom zariadení bude veľmi líšiť od tej istej hry nainštalovanej na inom gadgete.

Ak chcete získať predstavu o tom, koľko možností existuje, jednoducho spustite jeden z mnohých benchmarkov JavaScriptu a otestujte výkon zariadenia. Napríklad odosielanie 100 snímok cez Canvas sa bude relatívne dobre prehrávať pri 60 snímkach za sekundu na zariadeniach, ako sú iPhone 4S alebo 5, Galaxy S3, Nexus 7 alebo Lumia 820. Skúste však rovnaký kód na iných zariadeniach, ako je HTC Desire(19 snímok za sekundu), Galaxy eso(7 snímok) alebo iPad 1 (9 snímok za sekundu), a musíte tvrdo pracovať, aby ste získali aspoň niečo ako životaschopnú hru.

Ak bol váš projekt zameraný na smartfón alebo tablet, a najmä ak zahŕňali staré alebo nízkoenergetické zariadenia, je veľmi dôležité vykonať testovanie a stanoviť štandardy v počiatočnom štádiu. Je to nevyhnutné na pochopenie obmedzení rozsahu zariadení a určenie technického prístupu a dizajnu hry, na ktorej budete pracovať.

Ak váš projekt nebol zameraný na smartfóny alebo tablety, pravdepodobne by ste mali svoje ciele prehodnotiť. Napríklad smartphony a tablety predstavujú takmer tretinu zobrazení stránky v Británii a toto číslo rastie tempom, ktoré v roku 2014 predbehne počet zobrazení PC. Napriek tomu, že v pracovnej dobe stále dominujú stolné zariadenia, vedú ráno mobilné zariadenia a tablety po večeroch, tieto dva časy sú ideálne na prehliadanie webu a hranie hier.

Vyberte si svoje bitky

Spoločnosť Chunk už dva roky vyvíja multiplatformové hry HTML5 pre vysielateľov a značky a pre klientov ako BBC a Disney vytvorila mobilné hry založené na prehliadačoch, ktoré bežia na všetkých zariadeniach, od HTC Desire po iPad4, od Nexus 7 po Xbox. 360.

Ako vývojári by bolo skvelé, keby sa rozhodli, do akej miery sa do tohto procesu zapoja, ale to závisí od ich cieľového publika a zariadení, ktoré používajú. Pri práci na značkách pre deti sa často ocitli pod nátlakom starších telefónov alebo lacných zariadení s nízkym výkonom, napriek tomu starostlivo navrhli a optimalizovali mnoho ďalších vecí, a tak stále veria, že je možné vyvinúť pôsobivé hry pre mobil. internet.

A čo sa z tejto skúsenosti dozvedeli? Ak by ste mali zostaviť zoznam 10 najlepších tipov pre vývojárov hier HTML5, vyzeralo by to takto:

1. Rozhodnite o svojom publiku

Pozrite sa na demografické údaje a na to, aké zariadenia používajú tí, pre ktorých sú vaše návrhy navrhnuté. Keď máte údaje k dispozícii, použite ich na identifikáciu hlavného rozsahu zariadení, ktoré vaši návštevníci používajú, a na tieto zariadenia zacieľte pri rozhodovaní.

2. Rozhodnite o dizajne z hľadiska technológie

Áno, vždy by to tak malo byť, ale kvôli obmedzeniam a fragmentácii v HTML5 je to ešte relevantnejšie. WebGL vám umožní vytvoriť vynikajúcu 3D strieľačku z pohľadu prvej osoby, ale je nepravdepodobné (čítať - vôbec nie), že bude fungovať na tabletoch, ak sú na vašom zozname cieľových platforiem.

3. Nájdite si priateľov na caniuse.com

Je to skvelý spôsob, ako rýchlo skontrolovať podporu pre všetky funkcie HTML5, ktoré by ste chceli použiť vo svojom vývoji - takmer pre všetky prehliadače a zariadenia.

4. Používajte zariadenia, nielen simulátory

Vezmite čo najviac do rúk rôzne zariadenia, spustite čo najviac rôznych verzií operačných systémov. Simulátory vám pomôžu pri vývoji, ale môžete získať iba presný obraz o tom, ako bude váš kód fungovať na skutočnom zariadení. Existuje obrovské množstvo laboratórií s testovacími zariadeniami, ako napríklad Open Device Lab, ktoré vám poskytnú prístup k obrovskému počtu zariadení. V opačnom prípade vyhľadajte zdroje ako eBay, aby ste našli staré telefóny a predstavili ich vo svojom testovacom prostredí.

5. Uvedomte si zmeny

Špecifikácia HTML5 sa neustále mení, rovnako ako podpora zariadení, takže so zmenami v týchto oblastiach musíte byť informovaní. To platí najmä v oblastiach, ako je zvuk, kde funkcie, ako napríklad WebAudio API, môžu radikálne zmeniť možnosti.

6. Buďte flexibilní počas celého vývoja.

To, čo funguje dnes, nemusí fungovať zajtra. To, čo je pre vás dnes nedostupné, môže byť k dispozícii zajtra. Doprajte si flexibilitu a prispôsobte sa zmenám, ktoré nastanú počas vašej práce.

7. Funkcia mierky

Umiestniť mobil na prvé miesto je užitočné nielen pre tradičný webový design. Pozrite sa, ako môžete vytvoriť niečo dobré pre smartfóny, a potom sa rozhodnite pre funkčnosť a výkon na iných platformách, ak to umožňujú. Pracujte pre zariadenia, ktoré používajú používateľské agenty alebo mediálne zariadenia, a aplikujte na ne svoje skúsenosti.

8. KISS (Keep It Simple, Stupid) - Nekomplikujte si život, hlúpi

Skúste definovať hranice a rozšíriť príležitosti všetkými prostriedkami, ale pamätajte na to, že pracujete s technológiou, ktorá je v plienkach, zvýšená zložitosť alebo nadhodnotené ambície projektu vašu situáciu iba zhoršia.

9. Rozhodnite sa o životnosti svojich návrhov

Funkcie sa neustále menia a váš obsah môže byť zastaraný príliš rýchlo vďaka novým funkciám, ktoré sú k dispozícii na zariadeniach. Ak vaša hra musí trvať dostatočne dlho, nájdite si čas na opravu chýb a aktualizáciu hry.

Ó áno. Skontrolujte svoje hry pre každého dostupné zariadenia tak často, ako sa len dá!

Gladiátor, jazdíš na mojom druhom signáli

HTML5 sa zdá byť neoficiálnou bežnou technológiou na vývoj multiplatformových hier pre rôzne prehliadače, o tom niet pochýb. Momentálne to nie je najbezpečnejšie miesto, ale pre technológiu v plienkach je to v poriadku. Ak chcete skontrolovať možnosti prehliadačov, stojí za to navštíviť stránky ako caniuse.com. Rovnako často kontrolujte svoje hry viac zariadení, ktoré máte k dispozícii, a buďte pragmatickí pri navrhovaní hier. Pomôže vám to vyhnúť sa problémom nielen teraz, ale bude tiež v lepšej pozícii, keď sa zlepší podpora zariadenia, čo je nevyhnutné.

Hry zadarmo v systéme Android. Vyrobené v html5, takže ich môžete hrať na telefóne a tablete. Okrem systému Android sú podporované systémy Windows, Linux, Mac a mobilné zariadenia od spoločnosti Apple. Hlavná vec je, že prehliadač je moderný a systém je nový. Ovládanie myšou alebo dotykovým displejom.

Hry pre Android sú ideálne. Môžete ich hrať na počítači a telefóne. Dajú sa stiahnuť (nainštalovať) pre rýchly prístup.

Ako si stiahnete hru HTML5 do telefónu

Prejdite na stránku hry na našom webe. Otvorte hru na celej obrazovke v modernom prehliadači, akým je Chrome. V prehliadači kliknite na tlačidlo s tromi bodkami, ktoré skryje príkazy ponuky pre prácu so stránkou. Posuňte sa nadol v zozname a vyberte možnosť „Pridať hru na hlavnú obrazovku“ (ak máte nerusifikovaný prehliadač Chrome). Potom sa hra zobrazí na obrazovke vášho telefónu a budete ju môcť spustiť priamym spustením bez spustenia prehliadača.

Táto operácia je k dispozícii pre telefóny a Tablety Android a Apple, ale ten druhý môže mať príkaz inde - v spodnej ponuke Safari.

Na spustenie hry môže byť potrebný internet (alebo nemusí byť požadovaný, v závislosti od funkcií konkrétnej hry - niekoľko hier je dostupných offline, ale teraz ich musíte skontrolovať.) Hra sa automaticky stiahne a uloží do telefónu, ale na sťahovanie online rebríčkov alebo iných funkcií môže byť potrebné pripojenie.

Inštalovať ako normálnu hru pre Android

Takmer každá hra HTML5 má verziu pre operačný systém Android alebo iOS. Ak vám inštalácia hry HTML5 na domovskú obrazovku nevyhovuje - povedzme, chcete hrať nepretržite, a nielen vtedy, keď je internet -, vyhľadajte ikonu v šetričoch obrazovky hier Google Play a AppStore. Aj keď sú hry pre zariadenia Apple vydávané menej často a častejšie môžete vidieť iba tlačidlá systému Android, ako napríklad:

Tlačidlo Inštalovať - hľadajte v hrách

V samotných hrách je tlačidlo oveľa menšie, tu je zväčšené, aby ste si ho zapamätali. Pozrite sa na snímku obrazovky hry nižšie - skúste tam nájsť to tlačidlo. Vedú k oficiálnemu obchodu Google Play, kde si ho môžete stiahnuť bezplatná verzia hry s pokročilými funkciami - napríklad možnosť hrať bez internetu.

Určené pre fanúšikov hry v systéme Android ...

Keď mi bolo povedané, že niečo také existuje, nevenoval som tomu veľkú pozornosť, pretože nie som veľkým fanúšikom všetkých týchto nových trendov. Potom som však zistil, že hry pre Android sú niečo ako hračky „plošinovky“ - okamžite som chcel vyskúšať, čo to je. Stále si pamätám, ako sa mi zdali fascinujúce hry pre „osembitovú“ konzolu Dandy alebo Sega. A tu civilizácia klesla k čomu - stačí si len myslieť, telefón bez tlačidiel a s funkciou, ktorá vám umožní hrať hry. Lákavé, nič nepovieš!

V skutočnosti je vo vašom telefóne nainštalovaná hra (alebo herný proces vykonáva sa výlučne prostredníctvom prehliadača - táto možnosť sa tiež zvažuje), pričom by ste mali venovať pozornosť tomu, ako môžete súťažiť nielen s umelou inteligenciou (tj. Osobný počítač), ale aj s ostatnými účastníkmi (celý proces prebieha online).

Zjavné výhody HTML5

Nie je žiadnym tajomstvom, že HTML5 nahrádza Flash a je oporou moderného webu. Z tohto dôvodu začali hry vytvorené na jeho základe fungovať na Internete - navyše dnes hry, ktoré umožňujú konkurovať iným používateľom, stále viac zaujímajú zákazníkov (najmä ak nie sú potrebné, stiahnite si ich a nainštalujte do počítača. ). Táto funkcia zase pomáha zbaviť sa mnohých malware ktoré vám bránia pracovať na počítači.

Všetky tieto hry pre Android a PC sú vytvorené pre moderné prehliadače a na svoju správnu funkciu vyžadujú iba JavaScript, Canvas a HTML5. V závislosti od toho, aké úlohy bude potrebné vykonať počas tejto hry, je obvyklé rozlišovať niektoré odrody:

Arkáda
hlavolam
Stratégie
Lietanie
Dobrodružstvá
Závod
Na stiahnutie
Prehliadač

Príklady online hier pre Android

Predtým ma hry na telefóne vôbec nezaujímali, ale všetko sa zmenilo potom, čo som sa dostal na stránku. Tam som sa zoznámil s tým, čo sú online hry pre Android, vyskúšal som obrovské množstvo rôznych „hračiek“. Pokiaľ ide o mňa, najlepšie hry pre Android uvedené na tomto webe (a nielen na tomto) sú mahjong a.

Prečo to hovorím? Všetko je veľmi jednoduché. Celý svoj život dávam prednosť hrám so strategickým zaujatím a s jasným odtieňom stredovekých tém, ako aj fantasy. Môžeme teda povedať, že som skutočne našiel to, čo sa mi páči. Ale o to ani nejde.

Najviac sa mi páčila táto stránka, pretože obsahuje najviac odlišné typy online hry a okrem toho - skutočne všetky veľmi málo vyžadujú softvér (v skutočnosti okrem JavaScript, Canvas a HTML5 na ich fungovanie nie je potrebné nič).

Bezplatné hry pre Android

Vďaka modelu Free2Play sú všetky hry pre Android uvedené na tomto webe bezplatné. Dajú sa hrať na celej obrazovke na počítači aj na tablete. Ale od flash hier ich odlišuje hlavne to, že sa dajú konečne hrať na telefóne.

Základná technológia, ktorá umožňuje hry HTML5, je kombinácia HTML a JavaScript. Hypertext Markup Language (HTML) bol súčasťou ranej internetovej diaľnice, ako ju vtedy nazývali, a dodnes sa používa na obsluhu všetkých webových stránok. JavaScript kód bol pridaný do prehliadačov druhej verzie ako Netscape 2.0 v roku 1995 a v priebehu rokov sa vyvíjal tak, aby bol príjemnejší na čítanie a písanie. V počiatkoch bol označovaný ako DHTML alebo dynamický HTML, pretože umožňoval interaktívny obsah bez obnovovania stránky. V ranej webovej ére však bolo ťažké sa naučiť používať a používať. V priebehu času Javascript pomocou Google chrome vývojári sa stali jedným z najrýchlejších skriptovacích jazykov. Má tiež viac voľne dostupných modulov, knižníc a skriptov ako ktorýkoľvek iný kódovací jazyk.

Počiatočné hry DHTML boli veľmi jednoduché. Niektoré príklady hier vtedy boli Tic-Tac-Toe a. Keďže hry vytvorené touto technológiou používajú otvorený štandard HTML5, tieto relatívne staré hry sa dajú stále hrať aj v modernom webovom prehliadači. Tieto technológie sa presťahovali do popredia prehliadačových hier, pretože nevyžadujú doplnky a sú bezpečnejšie na hranie ako staršie technológie. Hry HTML5 tiež podporujú a zlepšila sa schopnosť podporovať komplexné 2D a

Namiesto úvodu.
Keď som strávil niekoľko dní v rade (bez prestávky na spánok) štúdiom podpory HTML5 všetkými svojimi obľúbenými gadgetmi pre Android, rozhodol som sa, že tejto téme by som mal venovať pozornosť. V článku sa pokúsim krok za krokom odhaliť všetky fázy (samozrejme, základné / kľúčové / hlavné) vytvárania hernej aplikácie HTML5 od nápadu až po samotné vydanie. Súbor APK.
Možno ctihodným vývojárom neotvorím nič nové, ale pre začiatočníkov sa pokúsim popísať všetko čo najjednoduchšie, pomocou snímok obrazovky a vysvetlení.

Pozývam tých, ktorí sa chcú dozvedieť viac pod kat.

Nápad
Vo všeobecnosti môžete veľa hovoriť o potenciáli systému Android, o vývoji HTML5 a o ich interakcii. Toto neurobím. Takže priamo k veci.

Myšlienka vytvorenia hry pre Android pravdepodobne leží v hlavách desiatok stoviek vývojárov a tých, ktorí sa za nich považujú. Nie som výnimka.

Prečo HTML5? - Nativita. Píšete hru v JS a potom pre úplne akýkoľvek operačný systém vytvoríte obálku vo vhodnej forme a v akomkoľvek jazyku.

Celý proces bude rozdelený do niekoľkých krokov a konečná aplikácia bude pozostávať z dvoch častí:
- Zábal (v tento prípad pre Android)
- Hra

Krok 1. Napísanie samotnej hry
Ďalšou výhodou písania hry v HTML5 je skutočnosť, že nevyžaduje veľa spustené programy, IDE, emulátory a tak ďalej. Stačí vám prehliadač (v mojom prípade je to Chromium) a textový editor(BlueFish)

Hra bude jednoduchá: ak je modrý obdĺžnik zeleným obdĺžnikom. Úlohou hráča je pretiahnuť modrý obdĺžnik na zelený, pričom obíde červený, ktorý sa pohybuje po hracom poli ľubovoľným smerom.

Na vývoj hry použijem J2ds (herný engine)

Hotový kód hry:

index.html

Demo hra na J2ds v.0

Kvalitu kódu hry môžete ignorovať, pretože to nie je účelom článku. Aj keď, samozrejme, môžete optimalizovať, koľko chcete, tento proces je vo všeobecnosti pravdepodobne nekonečný.

Krok 2. Android Studio... Vytvorenie obalu pre hru
Nechcem s nikým merať chlad toho alebo onoho IDE pre vývoj Androidu, ale ukážem vám to Príklad systému AndroidŠtúdio. Na prácu potrebujeme:
- Stroj Java (OpenJDK je vhodný pre môj Linux)
- Distribučná súprava Android Studio.

Stiahni, nainštaluj.
Akonáhle je všetko nainštalované (Tieto dva programy stačia), spustite Android Studio.

Otvorí sa štartovacie okno (ak prvé spustenie), ak nie prvé, tak sa otvorí samotné IDE, ale to nič nemení na podstate, poďme na SDK Manager:

Tu musíte odškrtnúť potrebné verzie Androidu, s ktorými budete pracovať, v mojom prípade je to Android 4.4.2, môžete si vybrať aspoň všetky naraz.

Hlavná vec je, že musíte vybrať „Nástroje“ a „Extra“ a kliknúť na „nainštalovať balíky“.

Hneď ako budete mať všetko stiahnuté, IDE začne s matným sivým pozadím a niekoľkými tlačidlami, stlačte prvé a vytvorte nový projekt. Ak IDE začalo okamžite v prevádzkyschopnom stave, potom: „Súbor-> Nový-> Nový projekt“

Vyplňte povinné polia a kliknite na Ďalej

Vyberte požadovanú verziu systému Android a Ďalej

Tu vyberieme prázdnu aktivitu (prázdna šablóna s Hello, World!)

V nasledujúcom okne vyplňte údaje pre vytváranie tried, kvôli prehľadnosti sa nezmením:

Slávnostne stlačíme Finicha a počkáme, kým IDE nakonfiguruje a pripraví všetko na prácu.

Otvorí sa okno s návrhárom formulárov. Nie je to rovnaké ako v Lazare, Delphi, ale niečo podobné je stále k dispozícii:

Neponáhľajte sa niečo zmeniť alebo na niečo kliknúť, nastavenie ešte neskončilo.
Emulátor nakonfigurujete tak, že otvoríte „Mýto-> Android-> AVD Manager“.

Ak nič neexistuje, stlačíme „Cereate Virtual Device“, ak existuje, nemôžete vytvoriť nové, už som to mal, pretože „Klopýtal“ som na to, kým som na to prišiel. Ak potrebujete vytvoriť nový emulátor, potom je všetko jednoduché:
1. Vyberte veľkosť obrazovky a model telefónu
2. Vyberte verziu systému Android (mám 4.4.2)
3. Konfigurácia zariadenia.

V treťom kroku podrobnejšie:

T.K. hra je natiahnutá horizontálne, musíte vybrať režim na šírku.

Keď sú zadané všetky nastavenia, kliknite na zelený trojuholník a spustite emulátor. Po spustení čakáme na úplné spustenie zariadenia a spustenie operačného systému:

Toto okno nezatvárajte, bude v ňom prebiehať emulácia. Teraz sa môžete vrátiť k editoru a zmeniť orientáciu v návrhárovi formulárov:

Môžete bežať! Teraz je to určite možné.
Ak sa zobrazí výzva na výber emulátora, môžete začiarknuť políčko nižšie:

Gratulujem! Všetko funguje, skontrolované!

Minimalizujeme náš emulátor (ale nezatvárame ho!) A choďte do editora, tam je všetko trochu komplikovanejšie (trochu).
Musíte sa prepnúť do režimu „Text“. Vo vašej skupine activity_main sú popísané všetky prvky, ktoré sú vo formulári. Vrátane samotného formulára. A už vôbec to nie je forma =).

Pretože vyrábame hru v HTML5 a tu máme iba obálku pre hru, odstráňte všetok text a vložte nasledujúci text:

Ak teraz prepnete späť na dizajn, bude to vyzerať inak:

Ako vidíte, teraz sa namiesto „Hello, World“ zobrazuje natiahnutá obrazovka na celú obrazovku - WebView. Tento objekt je našim „oknom“ do herného sveta.

Môžete dokonca bežať a zistiť, či bude biela obrazovka. Pohni sa.

A potom musíme prejsť na náš projekt, vľavo preto otvorte pole „Projekt“ a vyberte kartu „Android“, ak nie je vybratá:

Táto karta zobrazuje štruktúru projektu a všetky jeho interné súbory a zdroje.

Hlavička spojlera

Musíme nájsť súbor „manifest“ a do definície pridať „aplikáciu“ ďalší riadok:
android: hardwareAccelerated = "true"

Je čas zapracovať na funkčnosti nášho „prehliadača“, pretože to je ono! Otvorte triedu „MainActivity.java“ a odstráňte všetky nepotrebné veci a ponechajte iba tie hlavné:

Hlavička spojlera

Balíček com.soft.skaner.demogamehtml5; importovať android.support.v7.app.AppCompatActivity; import android.os.Bundle; verejná trieda MainActivity rozširuje AppCompatActivity (@Override protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Ak ste nezabudli, do súboru activity_main sme pridali WebView, dávajte pozor na riadok zvýraznený tučným písmom:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: clickable = "true"
android: scrollbars = "žiadny" />

Potrebujeme deklarovať objekt triedy WebView.

Za týmto účelom pridajte do zoznamu dovozov:

Importovať android.webkit.WebView;

A potom deklarujeme náš objekt myWeb v triede MainActivity:

Chránený WebView myWeb;

Teraz, po riadku setContentView (R.layout.activity_main); vložte nasledujúci kód:

/ * Nájsť náš prehliadač * / myWeb = (WebView) findViewById (R.id.webView); / * Nastaviť náš prehliadač * / myWeb.getSettings (). SetUseWideViewPort (true); myWeb.setInitialScale (1); myWeb.getSettings (). setJavaScriptEnabled (true); / * Načítajte stránku */myWeb.loadUrl ("súbor: ///android_asset/index.html");

Tu je to, čo som dostal v editore:

A tu je to, čo je v emulátore:

Ak urobíte to isté - sme na dobrej ceste!

Zostáva len málo práce:
Keď stránku načítame do nášho prehliadača, cesta k súboru vyzerá takto: „súbor: ///android_asset/index.html“
Je potrebné poznamenať, že do našej hry môžeme uložiť akékoľvek súbory, ktoré k nim majú prístup.

V našom prípade kľúčový priečinok: „android_asset“, vytvoríme ho (áno, v predvolenom nastavení sa v projekte nenachádza):
„Súbor -> Nový -> Priečinok -> Priečinok s majetkom“, otvorí sa okno, v ktorom stačí súhlasiť s IDE.
Všimli ste si? V projekte sa objavil nový priečinok:

Kliknite naň pravým tlačidlom myši -> „Zobraziť v súboroch“, otvorí sa prieskumník systému (v mojom prípade Nautilus), dávajte pozor na cestu k priečinku. Majte tiež na pamäti, že priečinok má názov „majetok“, ale je prístupný prostredníctvom „android_asset“.

Potom je všetko celkom jednoduché - skopírujte našu hru do priečinka s materiálmi:

Súbor index.html je rovnaký index ako na začiatku tohto článku. Skúsme to rozbehnúť!

Malá rada: je najlepšie testovať na skutočnom zariadení cez USB, aby boli výsledky testov jasnejšie a ovládanie myši nie je práve najpohodlnejšou možnosťou, nehovoriac o viacnásobnom kliknutí.

Krok 3. Android Studio. Vytvorte aplikáciu a podpíšte ju

Keď je hra od vás úplne odladená (v prehliadači alebo na emulátore), je modul wrapper úplne pripravený a všetky fázy vývoja sa skončili, môžete aplikáciu vytvoriť. Android Studio vám umožňuje vytvárať aplikácie a podpisovať ich pomocou klávesov.

Na vytvorenie kľúčov má toto IDE špeciálna pomôcka„KeyTool“.

Pokračujme k vytvoreniu spustiteľného súboru aplikácie („Build -> Generate Signed APK“):

Ak ste predtým nevytvorili kľúče a aliasy, kliknite na „Vytvoriť nový“
Polia môžete vyplniť podľa vlastného uváženia, presnosť údajov závisí výlučne od vás.

Prvé pole je cesta k priečinku, do ktorého bude kľúč uložený.
Po kliknutí na tlačidlo OK sa formulár vyplní automaticky:

Pri následných aplikáciách nie je potrebné vytvárať nové kľúče, ostatné aplikácie môžete podpisovať svojim kľúčom, presne na to slúži tlačidlo „Vybrať existujúce“.
V ďalšom kroku vás IDE požiada o zadanie hesla znova a potom zadajte priečinok na uloženie súboru APK.
admin v nadpise Nezaradené. Záložka.

Keď som strávil niekoľko dní v rade (bez prestávky na spánok) štúdiom podpory HTML5 všetkými svojimi obľúbenými gadgetmi pre Android, rozhodol som sa, že tejto téme by som mal venovať pozornosť. V článku sa pokúsim krok za krokom odhaliť všetky fázy (samozrejme, základné / kľúčové / hlavné) vytvárania aplikácie HTML5 Game pre Android od myšlienky až po vydanie samotného súboru APK. Možno ctihodným vývojárom neotvorím nič nové, ale pre začiatočníkov sa pokúsim popísať všetko čo najjednoduchšie, pomocou snímok obrazovky a vysvetlení.

Pozývam tých, ktorí sa chcú dozvedieť viac pod kat.

Nápad

Vo všeobecnosti môžete veľa hovoriť o potenciáli systému Android, o vývoji HTML5 a o ich interakcii. Toto neurobím. Takže priamo k veci.

Myšlienka vytvorenia hry pre Android pravdepodobne leží v hlavách desiatok stoviek vývojárov a tých, ktorí sa za nich považujú. Nie som výnimka.

Celý proces bude rozdelený do niekoľkých krokov a konečná aplikácia bude pozostávať z dvoch častí:
- Wrapper (v tomto prípade pre Android)
- Hra

Krok 1. Napísanie samotnej hry

Ďalšou výhodou písania hry v HTML5 je skutočnosť, že testovanie nevyžaduje veľa spustených programov, IDE, emulátorov a podobne. Všetko, čo potrebujete, je prehliadač (v mojom prípade je to Chromium) a textový editor (BlueFish)

Hra nebude náročná: je tu modrý obdĺžnik a zelený obdĺžnik. Úlohou hráča je pretiahnuť modrý obdĺžnik na zelený, pričom obíde červený, ktorý sa pohybuje po hracom poli ľubovoľným smerom.

Na vývoj hry použijem J2ds (engine hry).

Hotový kód hry:

index.html

Demo hra na J2ds v.0

Kvalitu kódu hry môžete ignorovať, pretože to nie je účelom článku. Aj keď, samozrejme, môžete optimalizovať, koľko chcete, tento proces je vo všeobecnosti pravdepodobne nekonečný.

Krok 2. Android Studio. Vytvorenie obalu pre hru

Nechcem s nikým merať chlad toho alebo onoho IDE pre vývoj Androidu, ale ukážem to na príklade Android Studia. Na prácu potrebujeme:
- stroj Java (OpenJDK je vhodný pre môj Linux);
- Distribučná súprava Android Studio.

Stiahni, nainštaluj.

Akonáhle je všetko nainštalované (Tieto dva programy stačia), spustite Android Studio.

Otvorí sa štartovacie okno (ak prvé spustenie), ak nie prvé, tak sa otvorí samotné IDE, ale to nič nemení na podstate, poďme na SDK Manager:

Tu musíte odškrtnúť potrebné verzie Androidu, s ktorými budete pracovať, v mojom prípade je to Android 4.4.2, môžete si vybrať aspoň všetky naraz.

Hlavná vec je, že musíte vybrať „Nástroje“ a „Extra“ a kliknúť na „nainštalovať balíky“.

Vyplňte povinné polia a kliknite na Ďalej

Vyberte požadovanú verziu systému Android a Ďalej

Tu vyberieme prázdnu aktivitu (prázdna šablóna s Hello, World!)

V nasledujúcom okne vyplňte údaje pre vytváranie tried, kvôli prehľadnosti sa nezmením:

Slávnostne stlačíme Finicha a počkáme, kým IDE nakonfiguruje a pripraví všetko na prácu.

Otvorí sa okno s návrhárom formulárov. Nie je to rovnaké ako v Lazare, Delphi, ale niečo podobné je stále k dispozícii:

Neponáhľajte sa niečo zmeniť alebo na niečo kliknúť, nastavenie ešte neskončilo. Emulátor nakonfigurujete tak, že otvoríte „Mýto-> Android-> AVD Manager“.

Tu, ak nič nie je, stlačíme „Vytvoriť virtuálne zariadenie“, ak existuje, nemôžete vytvoriť nové, už som to mal. „Klopýtal“ som na to, kým som na to prišiel. Ak potrebujete vytvoriť nový emulátor, potom je všetko jednoduché:
1. Vyberte veľkosť obrazovky a model telefónu
2. Vyberte verziu systému Android (mám 4.4.2)
3. Konfigurácia zariadenia.

V treťom kroku podrobnejšie:

T.K. hra je natiahnutá horizontálne, musíte vybrať režim na šírku.

Keď sú zadané všetky nastavenia, kliknite na zelený trojuholník a spustite emulátor. Po spustení čakáme na úplné spustenie zariadenia a spustenie operačného systému:

Toto okno nezatvárajte, bude v ňom prebiehať emulácia. Teraz sa môžete vrátiť k editoru a zmeniť orientáciu v návrhárovi formulárov:

Môžete bežať! Teraz je to určite možné.

Ak sa zobrazí výzva na výber emulátora, môžete začiarknuť políčko nižšie:

Gratulujem! Všetko funguje, skontrolované!

Pretože vyrábame hru v HTML5 a tu máme iba obálku pre hru, odstráňte všetok text a vložte nasledujúci text:

Ak teraz prepnete späť na dizajn, bude to vyzerať inak:

Ako vidíte, teraz sa namiesto „Hello, World“ zobrazuje natiahnutá obrazovka na celú obrazovku - WebView. Tento objekt je našim „oknom“ do herného sveta.

Môžete dokonca bežať a zistiť, či bude biela obrazovka. Pohni sa.

Táto karta zobrazuje štruktúru projektu a všetky jeho interné súbory a zdroje.

Vysvetlenie

Musíme nájsť súbor „manifest“ a do definície „aplikácie“ pridať nasledujúci riadok:
android: hardwareAccelerated = "true"

Je čas zapracovať na funkčnosti nášho „prehliadača“, pretože to je ono! Otvorte triedu „MainActivity.java“ a odstráňte všetky nepotrebné veci a ponechajte iba tie hlavné:

Vysvetlenie

balík com.soft.skaner.demogamehtml5; importovať android.support.v7.app.AppCompatActivity; import android.os.Bundle; verejná trieda MainActivity rozširuje AppCompatActivity (@Override protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Potrebujeme deklarovať objekt triedy WebView.

Za týmto účelom pridajte do zoznamu dovozov:

Importovať android.webkit.WebView;
A potom deklarujeme náš objekt myWeb v triede MainActivity:

Chránený WebView myWeb;
Teraz, po riadku setContentView (R.layout.activity_main); vložte nasledujúci kód:

Tu je to, čo som dostal v editore:

A tu je to, čo je v emulátore:

Ak urobíte to isté - sme na dobrej ceste!

Súbor index.html je rovnaký index ako na začiatku tohto článku. Skúsme to rozbehnúť!

Krok 3. Android Studio. Zostavte aplikáciu a podpíšte ju

Na vytvorenie kľúčov v tomto IDE existuje špeciálny nástroj „KeyTool“.

Pokračujme k vytvoreniu spustiteľného súboru aplikácie („Build -> Generate Signed APK“):

Ak ste predtým nevytvorili žiadne kľúče alebo aliasy, kliknite na „Vytvoriť nový“. Polia môžete vyplniť podľa vlastného uváženia, presnosť údajov závisí výlučne od vás.

Prvé pole je cesta k priečinku, do ktorého bude kľúč uložený. Po kliknutí na tlačidlo OK sa formulár vyplní automaticky:

Pri ďalších aplikáciách nie je potrebné vytvárať nové kľúče, ale môžete pomocou neho podpisovať aj ďalšie aplikácie, a preto je k dispozícii tlačidlo „Vybrať existujúce“.

V nasledujúcom kroku vás IDE požiada o zadanie hesla znova a potom zadajte priečinok na uloženie súboru APK.