Igre na html5 ruskom androidu. Razvoj HTML5 igara za Android od nule do izdanja

Strategija Briana McHarga za uspješan razvoj cross-browser, cross-platform HTML5 igara.

HTML5: zakoniti prestolonaslednik flash igara. Zaista razvoj na više platformi omogućava da se jednom napisani program pokrene na računaru, tabletu i pametnom telefonu, a također će raditi i na Smart TV-u, te na stolnim i mobilnim uređajima, uključujući igraće konzole poput Xbox360 ili PlayStation 3 putem ugrađenih preglednika. Jasno je da je ovo vrlo atraktivno za one koji žele razvijati igre za što više uređaja i platformi.

Sam izraz HTML5, kao i specifikacije koje predstavlja, imaju različita značenja ovisno o tome ko ga opisuje. Za kupce, ovo je razvojna tehnologija koja obećava pravi Sveti gral-i isplativ razvoj na više platformi.

Za programere, to je zbirna imenica za mnoge različite tehnologije: JavaScript, WebSockets, WebAudio, Canvas, CSS3 i WebGL samo su neki od njih, svaki sa svojim standardima, jakim slabim ograničenjima između platformi.

I na kraju, izgleda kao najvažnija stvar: za korisnike! Ovdje je važno samo da korisnici žele isto iskustvo i iskustvo na koje su navikli. A ovo je glavni izazov za programere, posebno ako im je cilj implementirati igru na što više platformi.

PC nasuprot mobilnom q cross-platform

Sada svi znamo fantastične primjere HTML5 igara koje se izvode u računalnim preglednicima. Često ih stvaraju autori preglednika kako bi ih posebno demonstrirali snage vlastiti softvera, ili za određene API -je koje bi željeli vidjeti ratificirane u HTML5 specifikaciji.

Igre poput Cutthe Rope i Contre Jour za Internet Explorer ili neki od izvrsnih eksperimenata za preglednik Chrome poput Jam -a ili Racera odlični su primjeri. Za budući potencijal pogledajte biblioteke poput three.js, nedavno objavljenog otvorenog koda Turbulenz ili Epic HTML5 koji pokreće Unreal Engine.

Međutim, pokušajte pogledati jedan od ovih primjera na Androidu s instaliranim OS2.3 (Gingerbread) i vidjet ćete potpuno drugačiju sliku, a u nekim slučajevima nećete vidjeti baš ništa. Da, ovaj operativni sistem star je gotovo tri godine, ali je i dalje instaliran na trećini svih Android uređaja, a ta bi brojka mogla biti i veća ovisno o vašoj ciljnoj publici. I to se događa ne samo na stara verzija Android. Isto možete vidjeti na adresi Apple uređaji koji koriste iOS 5 ili manje moćne uređaje poput Kindle Fire. Zapravo, sada nećete pronaći niti jedan mobilni uređaj na kojem će se bilo koji od gore navedenih programa ispravno prikazati.

Kao što je ranije spomenuto, većina kupaca odabire HTML 5 da bi njihova igra preglednika bila istinski cross-platform. Ako razvijate igre samo za PC, Unity i Flash su odlične mogućnosti na koje morate paziti. Oboje imaju odličnu podršku za preglednike i mogućnost izvoza na uređaje kao zasebne aplikacije, pa se mogu prenijeti na pametni telefon ili tablet s točnim kodom koji vam je potreban.

Postoje dva očita problema pri razvoju igre za više platformi u HTML5. Prva je posljedica nejasne prirode HTML5 specifikacije, što rezultira time da se buduća podrška ne odvaja prema vrsti uređaja, već prema vrsti preglednika na svakom od tih uređaja. Drugi, i najteži za programere, je stalna promjena u mogućnostima mobilnih uređaja, što znači da će se čak i s istim skupom funkcija igra na jednom uređaju jako razlikovati od iste igre instalirane na drugom gadgetu.

Da biste stekli uvid u to koliko opcija postoji, jednostavno pokrenite jedno od mnogih JavaScript mjerila za testiranje performansi uređaja. Na primjer, slanje 100 sličica preko Canvas -a igrat će relativno dobro pri 60 sličica u sekundi na uređajima kao što su iPhone 4S ili 5, Galaxy S3, Nexus 7 ili Lumia 820. Ali pokušajte isti kod na drugim uređajima, poput HTC Desire(19 fps), Galaxy as(7 sličica) ili iPad 1 (9 fps), a morat ćete se jako potruditi da dobijete barem nešto poput održive igre.

Ako je vaš projekt bio usmjeren na pametni telefon ili tablet, a posebno ako su uključivali stare ili uređaje male snage, vrlo je važno provesti testiranje i odrediti standarde u ranoj fazi. To je potrebno kako biste razumjeli ograničenja raspona uređaja i odredili i tehnički pristup i dizajn igre na kojoj ćete raditi.

Ako vaš projekt nije bio usmjeren na pametne telefone ili tablete, vjerojatno biste trebali preispitati svoje ciljeve. Na primjer, pametni telefoni i tableti čine gotovo trećinu pregleda stranica u Velikoj Britaniji, a ta brojka raste brzinom koja će prestići preglede računara 2014. godine. Uprkos činjenici da desktop uređaji i dalje dominiraju tokom radnog vremena, oni vode ujutro mobilnim uređajima i tableti u večernjim satima, ova dva puta su idealni za pregledavanje weba i igranje igara.

Odaberite svoje bitke

Chunk već dvije godine razvija cross-platform HTML5 igre za emitere i robne marke, te je stvorio mobilne igre zasnovane na pregledniku za klijente poput BBC-a i Disneya koji se izvode na svim uređajima, od HTC Desire do iPad4, od Nexusa 7 do Xboxa 360.

Kao programeri, bilo bi sjajno da odluče koliko će duboko ući u ovaj proces, ali to određuje njihova ciljna publika i uređaji koje koriste. Radeći na robnim markama za djecu, često su se morali naći u ograničenjima starijih telefona ili jeftinih uređaja male snage, a ipak pažljivo dizajnirati i optimizirati mnoge druge aspekte, pa i dalje vjeruju da je moguće razviti impresivne igre za mobitel putem interneta.

I šta su naučili iz ovog iskustva? Pa, kad biste morali sastaviti listu 10 najboljih savjeta za programere HTML5 igara, to bi izgledalo ovako:

1. Odlučite se za svoju publiku

Pogledajte demografske podatke i koje uređaje koriste oni kojima su dizajnirani. Kad dobijete podatke, upotrijebite ih za identifikaciju glavnog raspona uređaja koje vaši posjetitelji koriste i ciljajte te uređaje u vašim odlukama.

2. Odlučite o dizajnu u smislu tehnologije

Da, uvijek bi trebalo biti tako, ali ograničenja i fragmentacija u HTML5 čine ovo još relevantnijim. WebGL će vam omogućiti da napravite odličnu 3D pucačinu iz prvog lica, ali malo je vjerojatno (čitaj - uopće ne) da će raditi na tabletima ako su na vašoj listi ciljnih platformi.

3. Sprijateljite se sa caniuse.com

Ovo je sjajan način da brzo provjerite podršku za bilo koju HTML5 funkciju koju želite koristiti u svom razvoju - za gotovo sve preglednike i uređaje.

4. Koristite uređaje, a ne samo simulatore

Uzmite što više možete u ruke raznih uređaja, pokrenuti što je moguće više različitih verzija operativnih sistema. Simulatori će vam pomoći tokom razvoja, ali možete dobiti samo tačnu sliku o tome kako će vaš kod raditi na stvarnom uređaju. Postoji veliki broj laboratorija s ispitnim uređajima poput Open Device Lab -a koji će vam omogućiti pristup ogromnom broju uređaja. U suprotnom, istražite resurse poput eBaya kako biste pronašli stare telefone i predstavili ih svom testnom okruženju.

5. Budite svjesni promjena

Specifikacije HTML5 se stalno mijenjaju, kao i podrška za uređaje, pa morate biti u toku s promjenama u ovim područjima. Ovo je posebno istinito u područjima kao što je audio, gdje funkcije kao što je WebAudio API mogu radikalno promijeniti mogućnosti.

6. Budite fleksibilni tokom razvoja.

Ono što radi danas, možda neće raditi sutra. Ono što vam je danas nedostupno, sutra može postati dostupno. Dozvolite sebi da budete fleksibilni i prilagodite se promjenama koje se dešavaju tokom vašeg rada.

7. Funkcionalnost skale

Stavljanje mobilnih uređaja na prvo mjesto korisno je za više od tradicionalnog web dizajna. Pogledajte kako možete stvoriti nešto dobro za pametne telefone, a zatim se odlučite za funkcionalnost i performanse na drugim platformama, ako to dopuštaju. Radite za one uređaje koji koriste korisničke agente ili medijske uređaje i na njih primjenjuju svoje iskustvo.

8. POLJUBAC (Neka bude jednostavno, glupo) - Nemojte sebi otežavati život, blesavi

Pokušajte definirati granice i proširiti mogućnosti na svaki način, ali zapamtite da radite s tehnologijom koja je u povojima, povećana složenost ili precijenjene projektne ambicije samo će pogoršati vašu situaciju.

9. Odlučite se o životnom vijeku vaših dizajna

Funkcije se stalno mijenjaju i vaš sadržaj može prerano zastarjeti zahvaljujući novim funkcijama dostupnim na uređajima. Ako vaša igra mora trajati dovoljno dugo, odvojite vrijeme da popravite greške i ažurirate igru.

Oh da. Provjerite svoje igre za svakoga dostupni uređajišto je moguće češće!

Gladijatore, jašiš moj drugi signal

Čini se da je HTML5 neslužbena mainstream tehnologija za razvoj cross-platform igara za različite preglednike, u to nema sumnje. Trenutno nije najsigurniji prostor, ali to je u redu za tehnologiju u povojima. Da biste provjerili mogućnosti preglednika, vrijedi provjeriti web lokacije poput caniuse.com. Redovno provjeravajte svoje igre za isto toliko više uređaja koji su vam dostupni i budite pragmatični u dizajnu igara. To će vam pomoći da ne samo sada izbjegnete probleme, već ćete i biti u boljoj poziciji kada se poboljša podrška uređaja, što je neizbježno.

Besplatne igre na Androidu. Napravljene u html5 pa ih možete reproducirati na telefonu i tabletu. Osim Android sistema, podržani su Windows, Linux, Mac i mobilni uređaji kompanije Apple. Glavna stvar je da je pretraživač moderan, a sistem nov. Kontrola mišem ili ekranom osetljivim na dodir.

Igre na Androidu su idealne. Možete ih reproducirati na računaru i telefonu. Mogu se preuzeti (instalirati) za brzi pristup.

Kako preuzeti HTML5 igru na telefon

Idite na stranicu igre na našoj web stranici. Otvorite igru na cijelom ekranu u modernom pregledniku poput Chromea. U pregledaču kliknite na dugme sa tri tačke koje skriva komande menija za rad sa stranicom. Pomaknite se prema dolje po popisu i odaberite "Dodaj igru na glavni zaslon" (ako imate Chrome koji nije rusificiran). Nakon toga igra će se pojaviti na ekranu vašeg telefona i bit će je moguće pokrenuti izravnim pokretanjem, bez pokretanja preglednika.

Ova je operacija dostupna za telefone i Android tableti i Apple, ali potonji mogu imati naredbu na drugom mjestu - u donjem meniju Safarija.

Igra može zahtijevati rad Interneta (ili možda neće biti potrebna, ovisno o karakteristikama određene igre - brojne igre su dostupne offline, ali sada morate to provjeriti.) Igra se automatski preuzima i sprema na vaš telefon, ali možda će biti potrebna veza za preuzimanje internetskih tablica s najboljim rezultatima ili drugih funkcija.

Instalirajte kao normalnu Android igru

Gotovo svaka HTML5 igra ima svoju verziju operativni sistem Android ili iOS. Ako vam instaliranje HTML5 igre na početni ekran ne odgovara - recimo, želite se igrati stalno, a ne samo kada postoji internet - tada potražite ikonu u čuvarima zaslona Google play i AppStore. Iako se igre za Apple uređaje objavljuju rjeđe, a sve češće možete vidjeti samo android tipke, poput ove:

Gumb za instalaciju - potražite ga u igrama

U samim igrama gumb je mnogo manji, ovdje je uvećan tako da ga se sjećate. Pogledajte snimak ekrana igre ispod - pokušajte pronaći to dugme tamo. Vode do službenog Google Playa, gdje ga možete preuzeti besplatna verzija igre s naprednim funkcijama - poput mogućnosti igranja bez interneta.

Posvećeno ljubiteljima igre na Androidu ...

Kad su mi upravo rekli da tako nešto postoji, nisam obraćao mnogo pažnje, jer uopće nisam veliki obožavatelj svih ovih novonastalih trendova. Međutim, tada sam shvatio da su igre na Androidu nešto poput „platformer“ igračaka - odmah sam htio isprobati šta je to. Još se sjećam kako su mi se činile uzbudljive igre za "osmobitnu" konzolu Dandy ili Sega. I ovdje je civilizacija potonula u ono - zamislite, telefon bez dugmadi i sa funkcijom koja vam omogućava igranje igara. Primamljivo, nećete ništa reći!

U stvari, igra je instalirana na vašem telefonu (ili proces igre provodi se isključivo putem preglednika - ova se opcija također razmatra), obraćajući pažnju na koju se možete natjecati ne samo s umjetnom inteligencijom (što znači PC), ali i s drugim sudionicima (cijeli se proces odvija na mreži).

Očigledne prednosti HTML5

Nije tajna da HTML5 zamjenjuje Flash i da je glavni oslonac modernog Weba. Iz tog razloga igre koje su nastale na njegovoj osnovi počele su funkcionirati na Internetu - štoviše, danas igre koje omogućuju natjecanje s drugim korisnicima sve više zanimaju kupce (pogotovo ako nije potrebno preuzeti i instalirati na vaše računalo ). Ova funkcija pak pomaže da se riješite mnogih malware koji sprečavaju rad na računaru.

Sve ove igre na Androidu i računaru stvorene su za savremeni pretraživači a za uspješno funkcioniranje potrebni su samo JavaScript, Canvas i HTML5. Ovisno o tome koji će se zadaci morati obaviti tijekom ove igre, uobičajeno je razlikovati neke sorte:

Arcade
mozgalica
Strategije
Letenje
Avanture
Race
Preuzimanje
Pretraživač

Primjeri online igara za Android

Ranije me igre na telefonu uopće nisu zanimale, ali sve se promijenilo nakon što sam došao na stranicu. Tamo sam upoznao šta su internetske igre za Android, isprobao ogroman broj različitih "igračaka". Što se mene tiče, najbolje Android igre predstavljene na ovoj web stranici (i ne samo na ovoj) su mahjong i.

Zašto to kažem? Sve je vrlo jednostavno. Cijelog života dajem prednost igrama sa strateškim predrasudama, s jasnom nijansom srednjovjekovnih tema, kao i fantazijom. Tako da možemo reći, zaista sam pronašao ono što mi se sviđa. Ali to nije ni poenta.

Najviše mi se svidjela ova stranica zbog činjenice da je sadrži najviše različite vrste mrežne igre, a osim toga - doista, sve one zahtijevaju vrlo malo u smislu softvera (u stvarnosti, osim JavaScripta, Canvasa i HTML5, za njihovo funkcioniranje nije potrebno ništa).

Besplatne igre za Android

Zahvaljujući modelu Free2Play, sve Android igre predstavljene na ovoj web stranici su besplatne. Mogu se reproducirati na cijelom ekranu i na računaru i na tabletu. Ali ono što ih razlikuje od flash igara je to što se konačno mogu igrati na telefonu.

Osnovna tehnologija koja omogućuje HTML5 igre kombinacija je HTML -a i JavaScript -a. Jezik za označavanje hiperteksta (HTML) bio je dio ranog Internet autoputa kako su ga tada zvali i nastavio se koristiti za opsluživanje svake web stranice i danas. JavaScript kôd je dodan u druge verzije pretraživača poput Netscape 2.0 1995. godine i s godinama je postao sve ugodniji za čitanje i pisanje. U prvim danima nazivali su ga DHTML ili dinamički HTML jer su dopuštali interaktivni sadržaj bez osvježavanja stranice. Međutim, bilo je teško naučiti i koristiti u ranoj eri weba. Vremenom, Javascript uz pomoć Google chrome programeri su postali jedan od najbržih skriptnih jezika. Takođe ima slobodnije dostupne module, biblioteke i skripte od bilo kojeg drugog jezika za kodiranje.

Prve DHTML igre bile su vrlo jednostavne. Neki primjeri tadašnjih igara bili su Tic-Tac-Toe i. Kako igre napravljene ovom tehnologijom koriste otvoreni standard HTML5, ove relativno stare igre i danas se mogu igrati u modernom web pregledniku. Ove tehnologije prešle su na čelo igara u preglednicima jer ne zahtijevaju dodatke i sigurnije su za igranje od starijih tehnologija. HTML5 igre također podržavaju, a mogućnosti su poboljšane za podršku složenim 2D i

Umesto uvoda.
Nakon što sam proveo nekoliko dana zaredom (bez pauze za san) proučavajući HTML5 podršku svih mojih omiljenih Android uređaja, odlučio sam da ovoj temi treba posvetiti pažnju. U članku ću pokušati korak po korak otkriti sve faze (naravno, osnovne / ključne / glavne) stvaranja HTML5 igre za Android od ideje do same objave APK datoteka.
Možda poštovanim programerima neću otvoriti ništa novo, ali za početnike ću pokušati sve opisati što jednostavnije, sa snimkama zaslona i objašnjenjima.

Pozivam one koji žele naučiti više pod mačkom.

Ideja
Općenito, možete puno pričati o potencijalu Androida, o razvoju HTML5 i o njihovoj interakciji. Neću ovo učiniti. Dakle, direktno na stvar.

Ideja o stvaranju igre za Android vjerojatno je u glavama desetina stotina programera i onih koji sebe smatraju takvim. Nisam izuzetak.

Zašto HTML5? - Zavičajnost. Pišete igru u JS -u, a zatim za apsolutno bilo koji OS stvarate omot u prikladnom obliku i na bilo kojem jeziku.

Cijeli proces bit će podijeljen u nekoliko koraka, a konačna prijava sastojat će se od dva dijela:
- Zamotajte (in ovaj slučaj za Android)
- Igra

Korak 1. Pisanje same igre
Još jedan plus pisanja igre u HTML5 je činjenica da ne zahtijeva hrpu pokretanje programa, IDE, emulatori i tako dalje. Sve što trebate je preglednik (u mom slučaju to je Chromium) i uređivač teksta(BlueFish)

Igra će biti jednostavna: ako je plavi pravokutnik zeleni pravokutnik. Zadatak igrača je povući plavi pravokutnik na zeleni, zaobilazeći crveni, koji se kreće po igralištu u proizvoljnom smjeru.

Za razvoj igre koristit ću J2ds (engine za igre)

Šifra gotove igre:

index.html

Demo igra na J2ds v.0

Možete zanemariti kvalitetu koda igre, jer ovo nije svrha članka. Iako, naravno, možete optimizirati koliko god želite, ovaj proces je općenito vjerovatno beskrajan.

Korak 2. Android Studio... Kreiranje omota za igru
Neću ni sa kim mjeriti hladnoću ovog ili onog IDE -a za Android razvoj, ali pokazat ću vam dalje Primjer Androida Studio. Za rad nam je potrebno:
- Java mašina (OpenJDK je pogodan za moj Linux)
- Android Studio distribucijski komplet.

Preuzmite, instalirajte.
Nakon što je sve instalirano (ova dva programa su dovoljna), pokrenite Android Studio.

Otvorit će se prozor za početak (ako je prvo pokretanje), ako ne i prvo, otvorit će se sam IDE, ali to ne mijenja suštinu, idemo na SDK Manager:

Ovdje morate označiti potrebne verzije Androida s kojima ćete raditi, u mom slučaju to je Android 4.4.2, možete odabrati barem sve odjednom.

Glavna stvar je da morate odabrati "Alati" i "Dodaci" i kliknuti na "instaliraj pakete".

Čim sve preuzmete, IDE će početi s dosadnom sivom pozadinom i nekoliko gumba, pritisnite prvo i stvorite novi projekt. Ako se IDE odmah pokrenuo u ispravnom stanju, tada: "Datoteka-> Novi-> Novi projekat"

Popunite obavezna polja i kliknite Dalje

Odaberite željenu verziju Androida i Dalje

Ovdje odabiremo Blank Activity (prazan predložak sa Hello, World!)

U sljedećem prozoru unesite podatke za kreiranje klasa, neću mijenjati radi jasnoće:

Svečano pritisnemo Finich i čekamo dok IDE konfigurira i pripremi sve za rad.

Otvorit će se prozor s dizajnerom obrazaca. Nije isto kao u Lazarusu, Delphi, ali nešto slično je još uvijek dostupno:

Ne žurite s promjenom bilo čega ili klikom na nešto, postavljanje još nije završeno.
Otvorite "Naplate-> Android-> AVD Manager" za konfiguriranje emulatora.

Ovdje, ako nema ništa, kliknite "Kreiraj virtualni uređaj", ako postoji, ne možete stvoriti novi, već sam ga imao, jer "Spotaknuo sam se" dok sam to shvatio. Ako trebate stvoriti novi emulator, tamo je sve jednostavno:
1. Odabir veličine ekrana i modela telefona
2. Odaberite verziju androida (imam 4.4.2)
3. Konfiguriranje uređaja.

U trećem koraku, detaljnije:

T.K. igra se vodoravno razvlači, morate odabrati pejzažni način.

Kada unesete sve postavke, kliknite na zeleni trokut i pokrenite emulator. Nakon pokretanja, čekamo da se uređaj potpuno pokrene i pokrene OS:

Ne zatvarajte ovaj prozor, u njemu će se odvijati emulacija. Sada se možete vratiti uređivaču i promijeniti orijentaciju u dizajneru obrazaca:

Možeš trčati! Sada je to definitivno moguće.
Ako se od vas zatraži da odaberete emulator, možete označiti okvir ispod:

Moje čestitke! Sve radi, provjereno!

Smanjujemo naš emulator (ali ga ne zatvarajte!) I idemo u uređivač, tamo je sve malo složenije (pomalo).
Morate se prebaciti u način rada "Tekst". U vašem activity_main -u su opisani svi elementi koji se nalaze na obrascu. Uključujući i sam obrazac. I to uopće nije obrazac =).

Jer pravimo igru u HTML5, a ovdje imamo samo omot za igru, izbrišite sav tekst i umetnite sljedeće:

Sada, ako se vratite na dizajn, izgledat će drugačije:

Kao što vidite, sada se umjesto "Hello, World" prikazuje rastegnuti na cijeli zaslon - WebView. Ovaj objekt je naš "prozor" u svijet igara.

Možete čak i trčati, vidjeti hoće li biti bijelog ekrana. Pomakni se.

I onda moramo otići na naš projekt, za to, s lijeve strane, otvorite polje "Projekt" i odaberite karticu "Android", ako nije odabrana:

Ova kartica prikazuje strukturu projekta i sve njegove interne datoteke i resurse.

Spoiler header

Moramo pronaći datoteku "manifest" i definiciji dodati "aplikaciju" sljedeći red:
android: hardwareAccelerated = "true"

Vrijeme je da poradite na funkcionalnosti našeg "preglednika", jer to je to! Otvorite klasu "MainActivity.java" i uklonite sve nepotrebne stvari, ostavljajući samo glavne:

Spoiler header

Paket com.soft.skaner.demogamehtml5; uvoz android.support.v7.app.AppCompatActivity; import android.os.Bundle; javna klasa MainActivity proširuje AppCompatActivity (@Override zaštićena void onCreate (Bundle savedInstanceState) (super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);))

Ako niste zaboravili, dodali smo WebView u datoteku activity_main, obratite pažnju na red označen podebljanim slovima:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: clickable = "true"
android: scrollbars = "none" />

Moramo deklarirati objekt klase WebView.

Da biste to učinili, dodajte listi uvoza:

Uvoz android.webkit.WebView;

Zatim deklariramo naš objekt myWeb unutar klase MainActivity:

Zaštićeni WebView myWeb;

Sada, nakon reda setContentView (R.layout.activity_main); unesite sledeći kod:

/ * Pronađite naš pretraživač * / myWeb = (WebView) findViewById (R.id.webView); / * Postavite naš pretraživač * / myWeb.getSettings (). SetUseWideViewPort (true); myWeb.setInitialScale (1); myWeb.getSettings (). setJavaScriptEnabled (true); / * Učitajte stranicu */myWeb.loadUrl ("datoteka: ///android_asset/index.html");

Evo šta sam dobio u uređivaču:

A evo šta se nalazi u emulatoru:

Ako učinite isto - na dobrom smo putu!

Ostalo je još malo za učiniti:
Tamo gdje učitavamo stranicu u naš preglednik, putanja datoteke izgleda ovako: "file: ///android_asset/index.html"
Treba napomenuti da možemo pohraniti sve datoteke unutar naše igre, imajući im pristup.

U našem slučaju, ključna mapa: "android_asset", kreirajmo je (da, prema zadanim postavkama nije u projektu):
"Datoteka -> Novo -> Mapa -> Mapa sredstava", otvorit će se prozor u kojem se samo trebate složiti s IDE -om.
Jeste li primijetili? Nova mapa se pojavila u projektu:

Kliknite desnim gumbom miša na njega -> "Prikaži u datotekama", otvorit će se istraživač sistema (u mom slučaju Nautilus), obratite pažnju na put do mape. Također imajte na umu da se mapa naziva "imovina", ali joj se pristupa putem "android_asset".

Tada je sve vrlo jednostavno - kopirajte našu igru u folder sa sredstvima:

Datoteka index.html isti je indeks s početka ovog članka. Pa, pokušajmo to pokrenuti!

Mali savjet: najbolje je testirati na stvarnom uređaju putem USB -a, tako će rezultati testa biti jasniji, a upravljanje mišem nije najpogodnija opcija, a kamoli višestruki klikovi.

Korak 3. Android Studio. Napravite aplikaciju i potpišite je

Kada potpuno otklonite pogreške u igri (u pregledniku ili na emulatoru), omot je potpuno spreman i sve faze razvoja su završene, možete izgraditi aplikaciju. Android Studio omogućuje vam izradu aplikacija i njihovo potpisivanje ključevima.

Ovaj IDE ima za kreiranje ključeva poseban uslužni program"KeyTool".

Nastavimo s kreiranjem izvršne datoteke aplikacije ("Build -> Generate Signed APK"):

Ako prije niste kreirali ključeve i pseudonime, kliknite "Kreiraj novi"
Polja možete popuniti prema vlastitom nahođenju, točnost podataka u potpunosti ovisi o vama.

Prvo polje je put do mape u kojoj će se ključ spremiti.
Nakon što pritisnete U redu, obrazac će se automatski popuniti:

Za sljedeće aplikacije nije potrebno stvarati nove ključeve, drugim ključem možete potpisati druge aplikacije, upravo za to služi gumb "Odaberi postojeće".
U sljedećem koraku IDE će od vas tražiti da ponovo unesete lozinku, a zatim odredite mapu za spremanje APK datoteke.
admin u naslovu Nekategorisano. Bookmark.

Nakon što sam proveo nekoliko dana zaredom (bez pauze za san) proučavajući HTML5 podršku svih mojih omiljenih Android uređaja, odlučio sam da ovoj temi treba posvetiti pažnju. U članku ću pokušati objasniti korak po korak sve faze (naravno, osnovne / key / main) stvaranja HTML5 Game aplikacije za Android od ideje do objavljivanja same APK datoteke. Možda poštovanim programerima neću otvoriti ništa novo, ali za početnike ću pokušati sve opisati što jednostavnije, sa snimkama zaslona i objašnjenjima.

Pozivam one koji žele naučiti više pod mačkom.

Ideja

Općenito, možete puno pričati o potencijalu Androida, o razvoju HTML5 i o njihovoj interakciji. Neću ovo učiniti. Dakle, direktno na stvar.

Ideja o stvaranju igre za Android vjerojatno je u glavama desetina stotina programera i onih koji sebe smatraju takvim. Nisam izuzetak.

Cijeli proces bit će podijeljen u nekoliko koraka, a konačna prijava sastojat će se od dva dijela:
- Omotač (u ovom slučaju za Android)
- Igra

Korak 1. Pisanje same igre

Još jedan plus pisanja igre u HTML5 je činjenica da testiranje ne zahtijeva gomilu pokrenutih programa, IDE -ova, emulatora itd. Sve što trebate je preglednik (u mom slučaju to je Chromium) i uređivač teksta (BlueFish)

Igra neće biti teška: postoji plavi pravokutnik i zeleni pravokutnik. Zadatak igrača je povući plavi pravokutnik na zeleni, zaobilazeći crveni, koji se kreće po igralištu u proizvoljnom smjeru.

Za razvoj igre koristiću J2ds (engine za igre).

Šifra gotove igre:

index.html

Demo igra na J2ds v.0

Možete zanemariti kvalitetu koda igre, jer ovo nije svrha članka. Iako, naravno, možete optimizirati koliko god želite, ovaj proces je općenito vjerovatno beskrajan.

Korak 2. Android Studio. Kreiranje omota za igru

Neću ni sa kim mjeriti hladnoću ovog ili onog IDE -a za razvoj Androida, ali pokazat ću to koristeći Android Studio kao primjer. Za rad nam je potrebno:
- Java mašina (OpenJDK je pogodan za moj Linux);
- Android Studio distribucijski komplet.

Preuzmite, instalirajte.

Nakon što je sve instalirano (ova dva programa su dovoljna), pokrenite Android Studio.

Otvorit će se prozor za početak (ako je prvo pokretanje), ako ne i prvo, otvorit će se sam IDE, ali to ne mijenja suštinu, idemo na SDK Manager:

Ovdje morate označiti potrebne verzije Androida s kojima ćete raditi, u mom slučaju to je Android 4.4.2, možete odabrati barem sve odjednom.

Glavna stvar je da morate odabrati "Alati" i "Dodaci" i kliknuti na "instaliraj pakete".

Popunite obavezna polja i kliknite Dalje

Odaberite željenu verziju Androida i Dalje

Ovdje odabiremo Blank Activity (prazan predložak sa Hello, World!)

U sljedećem prozoru unesite podatke za kreiranje klasa, neću mijenjati radi jasnoće:

Svečano pritisnemo Finich i čekamo dok IDE konfigurira i pripremi sve za rad.

Otvorit će se prozor s dizajnerom obrazaca. Nije isto kao u Lazarusu, Delphi, ali nešto slično je još uvijek dostupno:

Ne žurite s promjenom bilo čega ili klikom na nešto, postavljanje još nije završeno. Otvorite "Naplate-> Android-> AVD Manager" za konfiguriranje emulatora.

U trećem koraku, detaljnije:

T.K. igra se vodoravno razvlači, morate odabrati pejzažni način.

Kada unesete sve postavke, kliknite na zeleni trokut i pokrenite emulator. Nakon pokretanja, čekamo da se uređaj potpuno pokrene i pokrene OS:

Ne zatvarajte ovaj prozor, u njemu će se odvijati emulacija. Sada se možete vratiti uređivaču i promijeniti orijentaciju u dizajneru obrazaca:

Možeš trčati! Sada je to definitivno moguće.

Ako se od vas zatraži da odaberete emulator, možete označiti okvir ispod:

Moje čestitke! Sve radi, provjereno!

Jer pravimo igru u HTML5, a ovdje imamo samo omot za igru, izbrišite sav tekst i umetnite sljedeće:

Sada, ako se vratite na dizajn, izgledat će drugačije:

Kao što vidite, sada se umjesto "Hello, World" prikazuje rastegnuti na cijeli zaslon - WebView. Ovaj objekt je naš "prozor" u svijet igara.

Možete čak i trčati, vidjeti hoće li biti bijelog ekrana. Pomakni se.

Ova kartica prikazuje strukturu projekta i sve njegove interne datoteke i resurse.

Objašnjenje

Moramo pronaći datoteku "manifest" i dodati sljedeći redak definiciji "aplikacije":
android: hardwareAccelerated = "true"

Vrijeme je da poradite na funkcionalnosti našeg "preglednika", jer to je to! Otvorite klasu "MainActivity.java" i uklonite sve nepotrebne stvari, ostavljajući samo glavne:

Objašnjenje

paket com.soft.skaner.demogamehtml5; uvoz android.support.v7.app.AppCompatActivity; import android.os.Bundle; javna klasa MainActivity proširuje AppCompatActivity (@Override zaštićena void onCreate (Bundle savedInstanceState) (super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);))

Moramo deklarirati objekt klase WebView.

Da biste to učinili, dodajte listi uvoza:

Uvoz android.webkit.WebView;
Zatim deklariramo naš objekt myWeb unutar klase MainActivity:

Zaštićeni WebView myWeb;
Sada, nakon reda setContentView (R.layout.activity_main); unesite sledeći kod:

Evo šta sam dobio u uređivaču:

A evo šta se nalazi u emulatoru:

Ako učinite isto - na dobrom smo putu!

Datoteka index.html isti je indeks s početka ovog članka. Pa, pokušajmo to pokrenuti!

Mali savjet: najbolje je testirati na stvarnom uređaju putem USB -a, tako će rezultati testa biti jasniji, a upravljanje mišem nije najpogodnija opcija, a kamoli višestruki klikovi.

Korak 3. Android Studio. Napravite aplikaciju i potpišite je

Za kreiranje ključeva u ovom IDE -u postoji poseban uslužni program "KeyTool".

Nastavimo s kreiranjem izvršne datoteke aplikacije ("Build -> Generate Signed APK"):

Ako prije niste kreirali ključeve ili pseudonime, kliknite "Kreiraj novi". Polja možete popuniti prema vlastitom nahođenju, točnost podataka u potpunosti ovisi o vama.

Prvo polje je put do mape u kojoj će se ključ spremiti. Nakon što pritisnete U redu, obrazac će se automatski popuniti:

Za sljedeće aplikacije nije potrebno stvarati nove ključeve, ključem možete potpisati i druge aplikacije, upravo za to služi gumb "Odaberi postojeće".

U sljedećem koraku IDE će od vas tražiti da ponovo unesete lozinku, a zatim odredite mapu za spremanje APK datoteke.