Mängud html5 vene androidis. HTML5 mängude väljatöötamine Androidile nullist väljalaskmiseni

Brian McHargi strateegia brauseritevaheliste platvormideüleste HTML5 mängude edukaks arendamiseks.

HTML5: välkmängude troonipärija. Tõeliselt platvormideülene arendus võimaldab kord kirjutatud programmi käivitada arvutis, tahvelarvutis ja nutitelefonis, see töötab ka nutiteleri ning laua- ja mobiilseadmetega, sh mängukonsoolid nagu Xbox360 või PlayStation 3 nende sisseehitatud brauserite kaudu. On selge, et see on väga atraktiivne neile, kes soovivad arendada mänge võimalikult paljude seadmete ja platvormide jaoks.

Terminil HTML5 ja selle spetsifikatsioonidel on erinev tähendus sõltuvalt sellest, kes seda kirjeldab. Klientide jaoks on see arendustehnoloogia, mis tõotab tõelist Püha Graali-ja tasuvat platvormideülest arendust.

Arendajate jaoks on see paljude erinevate tehnoloogiate kollektiivne nimisõna: JavaScript, WebSockets, WebAudio, Canvas, CSS3 ja WebGL on vaid mõned neist, millest igaühel on oma standardid ja tugevad nõrgad platvormidevahelised piirangud.

Ja lõpuks tundub see kõige olulisem: kasutajatele! Siin on oluline vaid see, et kasutajad sooviksid sama kogemust ja kogemust, millega nad on harjunud. Ja see on arendajatele peamine väljakutse, eriti kui nende eesmärk on mängu rakendamine võimalikult paljudel platvormidel.

PC versus mobiilne q platvormiülene

Nüüd me kõik teame fantastilisi näiteid HTML5 mängudest, mis töötavad arvuti brauserites. Neid loovad sageli brauseri autorid, et neid eriti näidata tugevused oma tarkvara või konkreetsete API -de puhul, mida nad sooviksid HTML5 spetsifikatsioonis ratifitseerida.

Sellised mängud nagu Cutthe Rope ja Contre Jour Internet Explorerile või mõned suurepärased Chrome'i katsed, nagu Jam või Racer, on suurepärased näited. Tuleviku potentsiaali leidmiseks vaadake selliseid teeke nagu kolm.js, hiljuti avaldatud avatud lähtekoodiga Turbulenz või Epic HTML5, mida toidab Unreal Engine.

Proovige aga vaadata mõnda neist näidetest Androidis, kuhu on installitud OS2.3 (piparkoogid), ja näete täiesti erinevat pilti ning mõnel juhul ei näe te üldse midagi. Jah, see operatsioonisüsteem on peaaegu kolm aastat vana, kuid see on endiselt installitud kolmandikule kõigist Android -seadmetest ja see arv võib sõltuvalt teie sihtrühmast olla veelgi suurem. Ja see juhtub mitte ainult vana versioon Android. Sama näete aadressil Apple'i seadmed töötab iOS 5 või vähem võimsate seadmetega, nagu Kindle Fire. Tegelikult ei leia te nüüd ühtegi mobiilseadet, millel mõnda ülaltoodud programmi õigesti kuvataks.

Nagu varem mainitud, valib enamik kliente HTML 5, et nende brauserimäng oleks tõeliselt platvormiülene. Kui arendate mänge ainult arvutile, on Unity ja Flash suurepärased võimalused, millele tähelepanu pöörata. Mõlemal on suurepärane brauseri tugi ja võimalus eksportida seadmetesse eraldiseisvate rakendustena, nii et neid saab teisaldada nutitelefoni või tahvelarvutisse täpselt vajaliku koodiga.

Platvormideülese mängu arendamisel HTML5-s on kaks ilmset probleemi. Esimene neist on HTML5 spetsifikatsiooni häguse olemuse tagajärg, mistõttu tulevane tugi ei ole eraldatud seadme tüübi, vaid iga seadme brauseri tüübi järgi. Teine ja arendajatele kõige raskem on mobiilseadmete võimaluste pidev muutmine, mis tähendab, et isegi sama funktsioonide komplekti korral erineb ühe seadme mäng suuresti teisest vidinale installitud mängust.

Seadmete jõudluse testimiseks käivitage üks paljudest JavaScripti võrdlusalustest, et saada aimu, kui palju võimalusi on. Näiteks 100 kaadri saatmine lõuendile mängib suhteliselt hästi kiirusega 60 kaadrit sekundis sellistes seadmetes nagu iPhone 4S või 5, Galaxy S3, Nexus 7 või Lumia 820. Kuid proovige sama koodi teistes seadmetes, näiteks HTC Desire(19 kaadrit sekundis), Galaxy äss(7 kaadrit) või iPad 1 (9 kaadrit sekundis) ja peate tegema kõvasti tööd, et saada vähemalt midagi elujõulist.

Kui teie projekt oli suunatud nutitelefonile või tahvelarvutile ja eriti kui need hõlmasid vanu või vähese energiatarbega seadmeid, siis on väga oluline testimine läbi viia ja standardid varakult kindlaks määrata. See on vajalik selleks, et mõista seadmete valiku piiranguid ja määrata nii tehniline lähenemisviis kui ka mängu kujundus, millega töötate.

Kui teie projekt ei olnud suunatud nutitelefonidele või tahvelarvutitele, peaksite tõenäoliselt oma eesmärgid uuesti läbi vaatama. Näiteks nutitelefonid ja tahvelarvutid moodustavad peaaegu kolmandiku Ühendkuningriigi lehtede vaatamistest ning see näitaja kasvab kiirusega, mis ületab 2014. aastal arvutite vaatamisi. Hoolimata asjaolust, et tööajal domineerivad endiselt lauaarvutid, juhivad nad hommikul mobiilseadmed ja tahvelarvutitega õhtuti - need kaks aega sobivad ideaalselt veebisirvimiseks ja mängimiseks.

Valige oma lahingud

Chunk on juba kaks aastat arendanud ringhäälinguorganisatsioonidele ja kaubamärkidele platvormideüleseid HTML5-mänge ning loonud brauseripõhiseid mobiilimänge klientidele nagu BBC ja Disney, mis töötavad kõikides seadmetes, alates HTC Desirest kuni iPad4-ni, Nexus 7-st Xboxini 360.

Arendajatena oleks neil suurepärane otsustada, kui sügavalt sellesse protsessi süveneda, kuid selle määravad nende sihtrühm ja kasutatavad seadmed. Lastele mõeldud kaubamärkide kallal töötades sattusid nad sageli vanemate telefonide või odavate ja väikese energiatarbega seadmete piirangutesse, kuid kavandasid ja optimeerisid hoolikalt ka palju muud, nii et nad usuvad endiselt, et on võimalik välja töötada muljetavaldavaid mänge Internet.

Ja mida nad sellest kogemusest õppisid? Noh, kui koostate HTML5 mängude arendajatele kümne parima näpunäite nimekirja, näeks see välja selline:

1. Otsustage oma vaatajaskonna üle

Vaadake demograafilist teavet ja seda, milliseid seadmeid kasutavad need, kelle jaoks teie kujundus on mõeldud. Kui olete andmed saanud, kasutage neid, et tuvastada külastajate peamine seadmete valik ja sihtida neid seadmeid oma otsustes.

2. Otsustage disaini osas tehnoloogia osas

Jah, see peaks alati nii olema, kuid HTML5 piirangud ja killustatus muudavad selle veelgi asjakohasemaks. WebGL võimaldab teil teha suurepärase 3D esimese inimese laskuri, kuid on ebatõenäoline (loe - mitte üldse), et see töötaks tahvelarvutites, kui need on teie sihtplatvormide loendis.

3. Tee sõpru saidiga caniuse.com

See on suurepärane võimalus kiiresti kontrollida toetust mis tahes HTML5 -funktsioonile, mida soovite oma arenduses kasutada - peaaegu kõigi brauserite ja seadmete jaoks.

4. Kasutage seadmeid, mitte ainult simulaatoreid

Võtke nii palju kui võimalik oma kätesse erinevaid seadmeid, käivitage võimalikult palju erinevaid operatsioonisüsteemide versioone. Simulaatorid aitavad teid arendamise ajal, kuid saate ainult täpse pildi sellest, kuidas teie kood reaalses seadmes töötab. Seal on tohutul hulgal laboreid, millel on sellised testimisseadmed nagu Open Device Lab, mis annavad teile juurdepääsu tohutule hulgale seadmetele. Vastasel juhul uurige ressursse nagu eBay, et leida vanu telefone ja tutvustada neid oma testkeskkonda.

5. Ole teadlik muudatustest

HTML5 spetsifikatsioonid muutuvad pidevalt, nagu ka seadme tugi, nii et peate olema kursis muutustega nendes valdkondades. See kehtib eriti sellistes valdkondades nagu heli, kus sellised funktsioonid nagu WebAudio API võivad võimeid radikaalselt muuta.

6. Ole paindlik kogu arengu vältel.

See, mis töötab täna, ei pruugi homme töötada. See, mis on teile täna kättesaamatu, võib homme kättesaadavaks saada. Luba endal olla paindlik ja kohaneda töö käigus toimuvate muutustega.

7. Skaala funktsionaalsus

Mobiili esikohale seadmine on kasulik rohkem kui lihtsalt traditsiooniline veebidisain. Vaadake, kuidas saate nutitelefonidele midagi head luua, ja seejärel otsustage teiste platvormide funktsionaalsuse ja jõudluse üle, kui nad seda lubavad. Töötage nende seadmetega, mis kasutavad kasutajaagende või meediumiseadmeid, ja rakendage neile oma kogemusi.

8. KISS (Keep It Simple, Rull) - Ära tee oma elu raskeks, rumalad

Proovige piirid piiritleda ja võimalusi avardada kõigi vahenditega, kuid pidage meeles, et töötate tehnoloogiaga, mis on algusjärgus, suurenenud keerukus või projekti ülehinnatud ambitsioonid muudavad teie olukorra ainult hullemaks.

9. Otsustage oma disainilahenduste eluiga

Funktsioonid muutuvad kogu aeg ja teie sisu võib seadmetes saadaolevate uute funktsioonide tõttu liiga kiiresti aeguda. Kui teie mäng peab piisavalt kaua kestma, võtke aega vigade parandamiseks ja mängu värskendamiseks.

Oh jah. Kontrollige oma mänge kõigi jaoks saadaolevaid seadmeid nii tihti kui võimalik!

Gladiaator, sa sõidad mu teise signaaliga

HTML5 näib olevat mitteametlik peavoolu tehnoloogia platvormidevaheliste mängude arendamiseks erinevatele brauseritele, selles pole kahtlust. See pole praegu kõige turvalisem ruum, kuid tehnoloogiaga on see lapsekingades okei. Brauserite võimaluste kontrollimiseks tasub vaadata selliseid saite nagu caniuse.com. Kontrollige oma mänge regulaarselt rohkem saadaolevaid seadmeid ja olge mängu kujundamisel pragmaatiline. See aitab teil probleeme vältida mitte ainult praegu, vaid ka paremas olukorras, kui seadme tugi paraneb, mis on vältimatu.

Tasuta mängud Androidis. Valmistatud html5 -s, nii et saate neid mängida oma telefonis ja tahvelarvutis. Lisaks Android -süsteemile toetatakse Windowsi, Linuxi, Maci ja Apple'i mobiilseadmeid. Peaasi, et brauser oleks kaasaegne ja süsteem uus. Hiire või puuteekraani juhtimine.

Androidi mängud on ideaalsed. Saate neid mängida oma arvutis ja telefonis. Neid saab kiireks juurdepääsuks alla laadida (installida).

Kuidas HTML5 -mängu oma telefoni alla laadida

Minge meie veebisaidi mängu lehele. Avage mäng täisekraanil kaasaegses brauseris, nagu Chrome. Klõpsake oma brauseris kolme punktiga nuppu, mis peidab lehega töötamise menüükäsud. Kerige loendit alla ja valige „Lisa mäng põhiekraanile” (kui teil on mittevenestunud Chrome). Pärast seda ilmub mäng teie telefoni ekraanile ja seda on võimalik käivitada otse, ilma brauserit käivitamata.

See toiming on saadaval telefonidele ja Androidi tahvelarvutid ja Apple, kuid viimasel võib olla käsk mujal - Safari alumises menüüs.

Mäng võib nõuda Interneti toimimist (või seda ei pruugita, olenevalt konkreetse mängu omadustest - mitmed mängud on võrguühenduseta saadaval, kuid nüüd peate seda kontrollima.) Mäng laaditakse automaatselt alla ja salvestatakse telefoni, kuid võrgu edetabelite või muude funktsioonide allalaadimiseks võib olla vajalik ühendus.

Installige tavalise Android -mänguna

Peaaegu igal HTML5 mängul on oma versioon operatsioonisüsteem Android või iOS. Kui HTML5 -mängu installimine avakuvale teile ei sobi - näiteks soovite pidevalt mängida ja mitte ainult Interneti -ühenduse korral -, siis otsige mängude ekraanisäästjatest ikooni Google Play ja AppStore. Kuigi õunaseadmete mänge antakse välja harvemini ja sagedamini näete ainult androidi nuppe, tehke järgmist.

Installi nupp - otsige seda mängudest

Mängudes endas on nupp palju väiksem, siin on seda suurendatud, et see meelde jääks. Vaadake allolevat mängu ekraanipilti - proovige seda nuppu sealt leida. Need viivad ametlikku Google Playsse, kust saate alla laadida tasuta versioon täiustatud funktsioonidega mängud - näiteks võimalus mängida ilma Internetita.

Pühendatud mängu fännidele Androidis ...

Kui mulle just öeldi, et selline asi on olemas, ei pööranud ma sellele erilist tähelepanu, sest ma pole üldse kõigi nende uute suundumuste suur fänn. Siis aga mõistsin, et Androidi mängud on midagi "platvormmängu" sarnast - tahtsin kohe proovida, mis see on. Mäletan siiani, kui põnevad mängud tundusid mulle "kaheksa bitise" konsooli Dandy või Sega jaoks. Ja siin on tsivilisatsioon vajunud millekski - mõelge vaid, telefon ilma nuppudeta ja funktsiooniga, mis võimaldab mänge mängida. Ahvatlev, sa ei ütle midagi!

Tegelikult on teie telefoni installitud mäng (või mänguprotsess teostatakse eranditult brauseri kaudu - seda võimalust kaalutakse ka), pöörates tähelepanu sellele, et saate konkureerida mitte ainult tehisintellektiga (st Personaalarvuti), aga ka teiste osalejatega (kogu protsess toimub veebis).

HTML5 ilmsed eelised

Kellelegi pole saladus, et HTML5 asendab Flashi ja on kaasaegse veebi alustala. Just sel põhjusel hakkasid selle alusel loodud mängud Internetis toimima - pealegi pakuvad tänapäeval klientidele üha enam huvi mängud, mis võimaldavad teiste kasutajatega konkureerida (eriti kui seda pole vaja arvutisse alla laadida ja installida) ). See funktsioon aitab omakorda paljudest lahti saada pahavara mis takistavad teil arvutiga töötamist.

Kõik need Androidi ja arvuti mängud on loodud kaasaegsed brauserid ja nende edukaks toimimiseks on vaja ainult JavaScripti, lõuendit ja HTML5 -d. Sõltuvalt sellest, milliseid ülesandeid tuleb selle mängu ajal täita, on tavaks eristada mõnda sorti:

Arkaad
ajurünnak
Strateegiad
Lendamine
Seiklused
Rass
Allalaaditav
Brauser

Androidi võrgumängude näited

Varem ei huvitanud mind telefonimängud üldse, kuid pärast saidile jõudmist muutus kõik. Seal tutvusin Androidi võrgumängudega, proovisin tohutul hulgal erinevaid "mänguasju". Minu jaoks on sellel saidil (ja mitte ainult sellel saidil) esitatud parimad Android -mängud mahjong ja.

Miks ma seda ütlen? Kõik on väga lihtne. Olen kogu oma elu eelistanud mänge, millel on strateegiline eelarvamus ja keskaegsed teemad ning fantaasia. Seega võime öelda, et leidsin tõesti selle, mis mulle meeldib. Aga see pole isegi mõte.

Mulle meeldis see sait kõige rohkem tänu sellele, et see sisaldab kõige rohkem erinevad tüübid võrgumänge ja pealegi - tõepoolest, need kõik nõuavad tarkvara osas väga vähe (tegelikkuses pole nende toimimiseks midagi peale JavaScripti, lõuendi ja HTML5 vaja).

Tasuta mängud Androidile

Tänu Free2Play mudelile on kõik sellel saidil esitatavad Androidi mängud tasuta. Neid saab mängida täisekraanil nii arvutis kui ka tahvelarvutis. Kuid peamine asi, mis neid flash -mängudest eristab, on see, et neid saab lõpuks telefoniga mängida.

HTML5 -mänge võimaldav tehnoloogia on HTML -i ja JavaScripti kombinatsioon. Hüperteksti märgistuskeel (HTML) oli osa varasest Interneti -kiirteest, nagu nad seda toona nimetasid, ja seda kasutatakse tänapäeval iga veebisaidi teenindamiseks. JavaScripti kood lisati teise versiooni brauseritesse, nagu Netscape 2.0, 1995. aastal ja on aastatega arenenud, muutudes meeldivamaks lugeda ja kirjutada. Esimestel päevadel nimetati seda DHTML -iks või dünaamiliseks HTML -iks, kuna see võimaldas interaktiivset sisu ilma lehe värskendamiseta. Kuid varajasel veebiajastul oli seda raske õppida ja kasutada. Aja jooksul Javascript abiga Google chrome arendajatest sai üks kiiremaid skriptikeeli. Samuti on sellel vabamalt saadaval mooduleid, teeke ja skripte kui ühelgi teisel kodeerimiskeelel.

Varased DHTML -mängud olid väga lihtsad. Mõned näited tolleaegsetest mängudest olid Tic-Tac-Toe ja. Kuna selle tehnoloogiaga tehtud mängud kasutavad HTML5 avatud standardit, on need suhteliselt iidsed mängud tänapäevases veebibrauseris mängitavad. Need tehnoloogiad on liikunud brauserimängude esiplaanile, kuna need ei vaja pistikprogramme ja on ohutumad mängida kui vanemad tehnoloogiad. Samuti toetavad HTML5 -mängud ning võimekus on paranenud, et toetada keerulisi 2D- ja

Sissejuhatuse asemel.
Olles veetnud mitu päeva järjest (ilma puhkepausita) kõigi oma lemmik -Android -vidinate HTML5 -toe uurimisega, otsustasin, et sellele teemale tuleks tähelepanu pöörata. Artiklis püüan samm -sammult paljastada kõik Android5 jaoks mõeldud HTML5 mängurakenduse loomise etapid (muidugi põhi / võti / põhi) ideest kuni avaldamiseni APK fail.
Võib -olla ei ava ma auväärsetele arendajatele midagi uut, kuid algajatele püüan kirjeldada kõike võimalikult lihtsalt, ekraanipiltide ja selgitustega.

Kutsun neid, kes soovivad kassi alt rohkem teada saada.

Idee
Üldiselt saate palju rääkida Androidi potentsiaalist, HTML5 arendamisest ja nende suhtlusest. Ma ei tee seda. Niisiis, otse asja juurde.

Idee luua mäng Androidile istub ilmselt kümnete sadade arendajate ja nende endi peas. Ma pole erand.

Miks just HTML5? - Sünnipärasus. Kirjutate mängu JS -is ja seejärel loote absoluutselt kõigi OS -ide jaoks ümbrise mugavas vormis ja mis tahes keeles.

Kogu protsess jaguneb mitmeks etapiks ja lõplik taotlus koosneb kahest osast:
- Pakkimine (sisse sel juhul Androidi jaoks)
- Mäng

Samm 1. Mängu enda kirjutamine
Teine pluss mängu kirjutamisest HTML5 -s on asjaolu, et see ei nõua hunnikut programmide käivitamine, IDE, emulaatorid ja nii edasi. Kõik, mida vajate, on brauser (minu puhul on see Chromium) ja tekstiredaktor(BlueFish)

Mäng on lihtne: kui sinine ristkülik on roheline ristkülik. Mängija ülesanne on tõmmata sinine ristkülik rohelisele, mööda punast, mis liigub mööda mänguvälja suvalises suunas.

Mängu arendamiseks kasutan J2ds -i (mängumootorit)

Valmis mängu kood:

index.html

Demomäng J2ds v.0

Võite ignoreerida mängukoodi kvaliteeti, sest see pole artikli eesmärk. Kuigi loomulikult saate optimeerida nii palju kui soovite, on see protsess üldiselt lõputu.

2. samm. Android Studio... Mängu jaoks ümbrise loomine
Ma ei hakka kellegagi mõõtma selle või selle IDE jahedust Androidi arendamiseks, kuid näitan teile Androidi näide Stuudio. Tööks vajame:
- Java -masin (OpenJDK sobib minu Linuxile)
- Android Studio levituskomplekt.

Laadige alla, installige.
Kui kõik on installitud (nendest kahest programmist piisab), käivitage Android Studio.

Avaneb algusaken (kui esimene käivitamine), kui mitte esimene, avaneb IDE ise, kuid see ei muuda olemust, läheme SDK halduri juurde:

Siin peate märkima vajalikud Androidi versioonid, millega töötate, minu puhul on see Android 4.4.2, saate valida vähemalt kõik korraga.

Peamine on see, et peate valima "Tööriistad" ja "Lisad" ning klõpsama nuppu "installi paketid".

Niipea, kui olete kõik alla laadinud, alustab IDE tuhmhalli tausta ja mitme nupuga, vajutage esimest ja looge uus projekt. Kui IDE algas kohe töökorras, siis: "Fail-> Uus-> Uus projekt"

Täitke nõutud väljad ja klõpsake nuppu Edasi

Valige androidi soovitud versioon ja järgmine

Siin valime tühja tegevuse (tühi mall Tere, maailm!)

Järgmises aknas täitke klasside loomise andmed, selguse huvides ma ei muuda:

Vajutame pidulikult Finichi ja ootame, kuni IDE seadistab ja valmistab kõik tööks ette.

Avaneb vormi kujundajaga aken. See pole sama, mis Lazarus, Delfis, kuid midagi sarnast on siiski saadaval:

Ärge kiirustage midagi muutma ega midagi klõpsama, seadistamine pole veel lõppenud.
Emulaatori seadistamiseks avage "Tollid-> Android-> AVD Manager".

Siin, kui midagi pole, vajutame nuppu „Cereate Virtual Device”, kui see on olemas, ei saa te uut luua, mul oli see juba olemas, sest "Komistasin" selle välja selgitamise ajal. Kui teil on vaja luua uus emulaator, on seal kõik lihtne:
1. Ekraani suuruse ja telefoni mudeli valimine
2. Valige Androidi versioon (mul on 4.4.2)
3. Seadme seadistamine.

Kolmandas etapis üksikasjalikumalt:

T.K. mäng venitatakse horisontaalselt, peate valima maastiku režiimi.

Kui kõik seaded on sisestatud, klõpsake rohelist kolmnurka ja käivitage emulaator. Pärast käivitamist ootame seadme täielikku käivitamist ja OS -i käivitamist:

Ärge sulgege seda akent, selles toimub jäljendamine. Nüüd saate naasta redaktorisse ja muuta vormi kujundaja suunda.

Võite joosta! Nüüd on see kindlasti võimalik.
Kui teil palutakse valida emulaator, saate märkida alloleva ruudu:

Minu õnnesoovid! Kõik töötab, kontrollitud!

Me minimeerime oma emulaatori (kuid ei sulge seda!) Ja läheme toimetusse, seal on kõik natuke keerulisem (natuke).
Peate lülituma režiimile "Tekst". Funktsioonis activity_main kirjeldatakse kõiki vormil olevaid elemente. Kaasa arvatud vorm ise. Ja see pole üldse vorm =).

Sest teeme mängu HTML5 -s ja siin on meil ainult mängu ümbris, kustutage kogu tekst ja sisestage järgmine:

Kui nüüd disainile tagasi minna, näeb see välja teisiti:

Nagu näete, kuvatakse nüüd "Tere, maailm" asemel täisekraanile sirutatud - WebView. See objekt on meie "aken" mängumaailma.

Võite isegi joosta, vaadata, kas ekraan on valge. Liigu edasi.

Ja siis peame minema oma projekti juurde, selleks avage vasakul väli "Projekt" ja valige vahekaart "Android", kui see pole valitud:

See vahekaart näitab projekti struktuuri ning kõiki selle sisemisi faile ja ressursse.

Spoileri päis

Peame leidma faili "manifest" ja lisama määratlusele "rakenduse" järgmine rida:
android: hardwareAccelerated = "true"

On aeg töötada meie "brauseri" funktsionaalsusega, sest see on see! Avage klass "MainActivity.java" ja eemaldage kõik mittevajalikud asjad, jättes ainult peamised:

Spoileri päis

Pakett com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; avalik klass MainActivity laiendab AppCompatActivity (@Orride protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Kui te pole unustanud, lisasime faili aktiivsus_main WebView, pöörake tähelepanu paksus kirjas esile tõstetud reale:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: klikitav = "tõsi"
android: scrollbars = "puudub" />

Peame deklareerima WebView klassi objekti.

Selleks lisage impordiloendisse:

Importige android.webkit.WebView;

Ja siis deklareerime oma myWebi objekti klassis MainActivity:

Kaitstud WebView myWeb;

Nüüd, pärast rida setContentView (R.layout.activity_main); sisestage järgmine kood:

/ * Leia meie brauser * / myWeb = (WebView) findViewById (R.id.webView); / * Seadistage meie brauser * / myWeb.getSettings (). SetUseWideViewPort (true); myWeb.setInitialScale (1); myWeb.getSettings (). setJavaScriptEnabled (true); / * Laadige leht */myWeb.loadUrl ("fail: ///android_asset/index.html");

Siin on toimetaja:

Ja emulaator sisaldab järgmist:

Kui teete sama - oleme õigel teel!

Teha on vähe:
Kui laadime lehe oma brauserisse, näeb failitee välja selline: "file: ///android_asset/index.html"
Tuleb märkida, et saame oma mängu salvestada kõik failid, millel on neile juurdepääs.

Meie puhul on võtmekaust "android_asset", loome selle (jah, vaikimisi pole seda projektis):
"Fail -> Uus -> Kaust -> Varade kaust", avaneb aken, kus peate lihtsalt IDE -ga kokku leppima.
Kas olete märganud? Projektis on ilmunud uus kaust:

Klõpsake seda hiire parema nupuga -> "Näita failides", avaneb süsteemiuurija (minu puhul Nautilus), pöörake tähelepanu kausta teele. Samuti pidage meeles, et kausta nimetatakse "varadeks", kuid sellele pääseb juurde "android_asset" kaudu.

Siis on kõik üsna lihtne - kopeerige meie mäng varade kausta:

Fail index.html on sama indeks selle artikli algusest. Noh, proovime seda käivitada!

Väike nõuanne: kõige parem on testida tõelise seadmega USB kaudu, nii on testitulemused selgemad ja hiire juhtimine pole just kõige mugavam variant, rääkimata mitmest klõpsust.

Samm 3. Android Studio. Looge rakendus ja allkirjastage see

Kui olete mängu täielikult silunud (brauseris või emulaatoril), on ümbris täielikult valmis ja kõik arendusetapid on lõppenud, saate rakenduse luua. Android Studio võimaldab teil rakendusi luua ja neile oma võtmetega alla kirjutada.

Võtmete loomiseks on sellel IDE -l olemas eriline utiliit"KeyTool".

Jätkame rakenduse käivitatava faili loomisega ("Ehitamine -> Loo allkirjastatud APK"):

Kui te pole varem võtmeid ja varjunimesid loonud, klõpsake nuppu "Loo uus"
Välju saate täita oma äranägemise järgi, andmete täpsus on täielikult teie otsustada.

Esimene väli on tee kausta, kuhu võti salvestatakse.
Pärast nuppu OK klõpsamist täidetakse vorm automaatselt:

Järgnevate rakenduste jaoks ei ole vaja uusi võtmeid luua, saate oma võtmega allkirjastada teisi rakendusi, selleks on nupp "Vali olemasolev".
Järgmises etapis palub IDE teil parooli uuesti sisestada ja seejärel määrata kaust APK -faili salvestamiseks.
admin rubriigis Uncategorized. Järjehoidja.

Olles veetnud mitu päeva järjest (ilma puhkepausita) kõigi oma lemmik -Android -vidinate HTML5 -toe uurimisega, otsustasin, et sellele teemale tuleks tähelepanu pöörata. Artiklis püüan samm -sammult selgitada kõiki Android5 jaoks mõeldud HTML5 mängurakenduse loomise etappe (muidugi põhi / võti / põhi) ideest kuni APK -faili enda avaldamiseni. Võib -olla ei ava ma auväärsetele arendajatele midagi uut, kuid algajatele püüan kirjeldada kõike võimalikult lihtsalt, ekraanipiltide ja selgitustega.

Kutsun neid, kes soovivad kassi alt rohkem teada saada.

Idee

Üldiselt saate palju rääkida Androidi potentsiaalist, HTML5 arendamisest ja nende suhtlusest. Ma ei tee seda. Niisiis, otse asja juurde.

Idee luua mäng Androidile istub ilmselt kümnete sadade arendajate ja nende endi peas. Ma pole erand.

Kogu protsess jaguneb mitmeks etapiks ja lõplik taotlus koosneb kahest osast:
- ümbris (antud juhul Androidi jaoks)
- Mäng

Samm 1. Mängu enda kirjutamine

Teine pluss mängu kirjutamisel HTML5 -s on asjaolu, et testimine ei nõua hulga töötavaid programme, IDE -sid, emulaatoreid jne. Kõik, mida vajate, on brauser (minu puhul on see Chromium) ja tekstiredaktor (BlueFish)

Mäng ei saa olema raske: seal on sinine ristkülik ja roheline ristkülik. Mängija ülesanne on tõmmata sinine ristkülik rohelisele, mööda punast, mis liigub mööda mänguvälja suvalises suunas.

Mängu arendamiseks kasutan J2ds -i (mängumootorit).

Valmis mängu kood:

index.html

Demomäng J2ds v.0

Võite ignoreerida mängukoodi kvaliteeti, sest see pole artikli eesmärk. Kuigi loomulikult saate optimeerida nii palju kui soovite, on see protsess üldiselt lõputu.

Samm 2. Android Studio. Mängu jaoks ümbrise loomine

Ma ei hakka kellegagi mõõtma selle või selle IDE jahedust Androidi arendamiseks, kuid näitan seda Android Studio abil. Tööks vajame:
- Java -masin (OpenJDK sobib minu Linuxile);
- Android Studio levituskomplekt.

Laadige alla, installige.

Kui kõik on installitud (nendest kahest programmist piisab), käivitage Android Studio.

Avaneb algusaken (kui esimene käivitamine), kui mitte esimene, avaneb IDE ise, kuid see ei muuda olemust, läheme SDK halduri juurde:

Siin peate märkima vajalikud Androidi versioonid, millega töötate, minu puhul on see Android 4.4.2, saate valida vähemalt kõik korraga.

Peamine on see, et peate valima "Tööriistad" ja "Lisad" ning klõpsama nuppu "installi paketid".

Niipea, kui olete kõik alla laadinud, alustab IDE tuhmhalli tausta ja mitme nupuga, vajutage esimest ja looge uus projekt. Kui IDE algas kohe töökorras, siis: "Fail-> Uus-> Uus projekt"

Täitke nõutud väljad ja klõpsake nuppu Edasi

Valige androidi soovitud versioon ja järgmine

Siin valime tühja tegevuse (tühi mall Tere, maailm!)

Järgmises aknas täitke klasside loomise andmed, selguse huvides ma ei muuda:

Vajutame pidulikult Finichi ja ootame, kuni IDE seadistab ja valmistab kõik tööks ette.

Avaneb vormi kujundajaga aken. See pole sama, mis Lazarus, Delfis, kuid midagi sarnast on siiski saadaval:

Ärge kiirustage midagi muutma ega midagi klõpsama, seadistamine pole veel lõppenud. Emulaatori seadistamiseks avage "Tollid-> Android-> AVD Manager".

Siin, kui midagi pole, klõpsake "Loo virtuaalne seade", kui see on olemas, ei saa te uut luua, mul oli see juba olemas, sest "Komistasin" selle välja selgitamise ajal. Kui teil on vaja luua uus emulaator, on seal kõik lihtne:
1. Ekraani suuruse ja telefoni mudeli valimine
2. Valige Androidi versioon (mul on 4.4.2)
3. Seadme seadistamine.

Kolmandas etapis üksikasjalikumalt:

T.K. mäng venitatakse horisontaalselt, peate valima maastiku režiimi.

Kui kõik seaded on sisestatud, klõpsake rohelist kolmnurka ja käivitage emulaator. Pärast käivitamist ootame seadme täielikku käivitamist ja OS -i käivitamist:

Ärge sulgege seda akent, selles toimub jäljendamine. Nüüd saate naasta redaktorisse ja muuta vormi kujundaja suunda.

Võite joosta! Nüüd on see kindlasti võimalik.

Kui teil palutakse valida emulaator, saate märkida alloleva ruudu:

Minu õnnesoovid! Kõik töötab, kontrollitud!

Sest teeme mängu HTML5 -s ja siin on meil ainult mängu ümbris, kustutage kogu tekst ja sisestage järgmine:

Kui nüüd disainile tagasi minna, näeb see välja teisiti:

Nagu näete, kuvatakse nüüd "Tere, maailm" asemel täisekraanile sirutatud - WebView. See objekt on meie "aken" mängumaailma.

Võite isegi joosta, vaadata, kas ekraan on valge. Liigu edasi.

See vahekaart näitab projekti struktuuri ning kõiki selle sisemisi faile ja ressursse.

Selgitus

Peame leidma faili "manifest" ja lisama "rakenduse" määratlusele järgmise rea:
android: hardwareAccelerated = "true"

On aeg töötada meie "brauseri" funktsionaalsusega, sest see on see! Avage klass "MainActivity.java" ja eemaldage kõik mittevajalikud asjad, jättes ainult peamised:

Selgitus

pakett com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; avalik klass MainActivity laiendab AppCompatActivity (@Orride protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Peame deklareerima WebView klassi objekti.

Selleks lisage impordiloendisse:

Importige android.webkit.WebView;
Ja siis deklareerime oma myWebi objekti klassis MainActivity:

Kaitstud WebView myWeb;
Nüüd, pärast rida setContentView (R.layout.activity_main); sisestage järgmine kood:

Siin on toimetaja:

Ja emulaator sisaldab järgmist:

Kui teete sama - oleme õigel teel!

Fail index.html on sama indeks selle artikli algusest. Noh, proovime seda käivitada!

Väike nõuanne: kõige parem on testida tõelise seadmega USB kaudu, nii on testitulemused selgemad ja hiire juhtimine pole just kõige mugavam variant, rääkimata mitmest klõpsust.

Samm 3. Android Studio. Looge rakendus ja allkirjastage see

Kui olete mängu täielikult silunud (brauseris või emulaatoril), on ümbris täielikult valmis ja kõik arendusetapid on lõppenud, saate rakenduse luua. Android Studio võimaldab teil luua rakendusi ja neile oma võtmetega alla kirjutada.

Võtmete loomiseks selles IDE -s on spetsiaalne utiliit "KeyTool".

Jätkame rakenduse käivitatava faili loomisega ("Ehitamine -> Loo allkirjastatud APK"):

Kui te pole varem ühtegi võtit ega varjunime loonud, klõpsake "Loo uus". Välju saate täita oma äranägemise järgi, andmete täpsus on täielikult teie otsustada.

Esimene väli on tee kausta, kuhu võti salvestatakse. Pärast nupul OK klõpsamist täidetakse vorm automaatselt:

Järgnevate rakenduste jaoks ei ole vaja uusi võtmeid luua, saate oma võtmega allkirjastada ka teisi rakendusi, seetõttu on olemas nupp "Vali olemasolev".

Järgmises etapis palub IDE teil parooli uuesti sisestada ja seejärel määrata kaust APK -faili salvestamiseks.