Jocuri în html5 Android rus. Dezvoltarea de jocuri HTML5 pentru Android de la zero până la lansare

Strategia lui Brian McHarg de a dezvolta cu succes jocuri cross-browser, cross-platform HTML5.

HTML5: moștenitorul de drept al tronului jocurilor flash. Dezvoltarea cu adevărat pe mai multe platforme permite odată ce programul scris să ruleze pe un computer, tabletă și smartphone, va funcționa și pe Smart TV și pe desktop și dispozitive mobile, inclusiv console de jocuri precum Xbox360 sau PlayStation 3 prin browserele lor încorporate. Este clar că acest lucru este foarte atractiv pentru cei care doresc să dezvolte jocuri pentru cât mai multe dispozitive și platforme posibil.

Termenul HTML5 în sine, precum și specificațiile pe care le reprezintă, au semnificații diferite în funcție de cine îl descrie. Pentru clienți, aceasta este o tehnologie de dezvoltare care promite un adevărat Sfânt Graal - și dezvoltare rentabilă pe mai multe platforme.

Pentru dezvoltatori, este substantivul colectiv pentru multe tehnologii diferite: JavaScript, WebSockets, WebAudio, Canvas, CSS3 și WebGL sunt doar câteva dintre ele, fiecare cu propriile standarde, constrângeri puternice slabe de la platformă la platformă.

Și, în sfârșit, pare cel mai important lucru: pentru utilizatori! Tot ceea ce contează aici este că utilizatorii doresc aceeași experiență și experiență cu care sunt obișnuiți. Și aceasta este principala provocare pentru dezvoltatori, mai ales dacă scopul lor este de a implementa jocul pe cât mai multe platforme posibil.

PC versus mobil q multiplataforma

Acum știm cu toții exemple fantastice de jocuri HTML5 care rulează în browserele PC. Ele sunt adesea create de autorii browserului pentru a demonstra în special puncte forte proprii software sau pentru anumite API-uri pe care ar dori să le ratifice în specificația HTML5.

Jocuri precum Cutthe Rope și Contre Jour pentru Internet Explorer sau unele dintre experimentele excelente pentru browserul Chrome precum Jam sau Racer sunt exemple excelente. Pentru potențialul viitor, consultați biblioteci precum three.js, Turbulenz open source recent lansat sau Epic HTML5 alimentat de Unreal Engine.

Cu toate acestea, încercați să căutați unul dintre aceste exemple pe Android cu OS2.3 (Turtă dulce) instalat și veți vedea o imagine complet diferită și, în unele cazuri, nu veți vedea deloc nimic. Da, acest sistem de operare are aproape trei ani, dar este încă instalat pe o treime din toate dispozitivele Android și această cifră ar putea fi chiar mai mare în funcție de publicul țintă. Și acest lucru se întâmplă nu numai pe versiune veche Android. Puteți vedea același lucru la Dispozitive Apple care rulează dispozitive iOS 5 sau mai puțin puternice precum Kindle Fire. De fapt, acum nu veți găsi un singur dispozitiv mobil pe care oricare dintre programele de mai sus va fi afișat corect.

Așa cum am menționat anterior, majoritatea clienților aleg HTML 5 pentru ca jocul lor de browser să fie cu adevărat multiplataforma. Dacă dezvolți jocuri numai pentru PC, Unity și Flash sunt opțiuni excelente de care trebuie să fii atent. Ambele au suport excelent pentru browser și capacitatea de a exporta pe dispozitive ca aplicații separate, astfel încât să poată fi portate pe un smartphone sau tabletă cu codul exact de care aveți nevoie.

Există două probleme evidente atunci când dezvoltăm un joc multiplataforma în HTML5. Prima este o consecință a naturii neclare a specificațiilor HTML5, rezultând că suportul viitor nu este separat de tipul de dispozitiv, ci de tipul de browser de pe fiecare dintre aceste dispozitive. Al doilea, și cel mai dificil pentru dezvoltatori, este schimbarea constantă a capacităților dispozitivelor mobile, ceea ce înseamnă că, chiar și cu același set de funcții, jocul de pe un dispozitiv va fi foarte diferit de același joc instalat pe un alt gadget.

Pentru a vă face o idee despre câte opțiuni există, pur și simplu rulați unul dintre numeroasele repere JavaScript pentru a testa performanța dispozitivului. De exemplu, trimiterea a 100 de cadre peste Canvas se va juca relativ bine la 60 de cadre pe secundă pe dispozitive precum iPhone 4S sau 5, Galaxy S3, Nexus 7 sau Lumia 820. Dar încercați același cod pe alte dispozitive precum HTC Desire(19 fps), Galaxy as(7 cadre) sau iPad 1 (9 fps) și va trebui să lucrați foarte mult pentru a obține cel puțin ceva de genul unui joc viabil.

Dacă proiectul dvs. a vizat un smartphone sau o tabletă, și mai ales dacă au inclus dispozitive vechi sau cu consum redus de energie, atunci este foarte important să efectuați teste și să stabiliți standardele într-un stadiu incipient. Acest lucru este necesar pentru a înțelege limitările gamei de dispozitive și pentru a determina atât abordarea tehnică, cât și designul jocului la care veți lucra.

Dacă proiectul dvs. nu a fost destinat smartphone-urilor sau tabletelor, atunci probabil că ar trebui să vă reconsiderați obiectivele. De exemplu, smartphone-urile și tabletele reprezintă aproape o treime din vizualizările de pagină din Marea Britanie, iar această cifră crește într-un ritm care va depăși vizualizările PC-ului în 2014. În ciuda faptului că dispozitivele desktop domină încă în timpul orelor de lucru, ele conduc dimineața dispozitive mobileși tablete seara, aceste două ori sunt ideale pentru navigarea pe web și jocuri.

Alege-ți luptele

Chunk dezvoltă de doi ani jocuri multiplataforme HTML5 pentru radiodifuzori și mărci și a construit jocuri mobile bazate pe browser pentru clienți precum BBC și Disney care rulează pe toate dispozitivele de la HTC Desire la iPad4, Nexus 7 și Xbox. 360.

În calitate de dezvoltatori, ar fi minunat pentru ei să decidă cât de adânc să intre în acest proces, dar acest lucru este determinat de publicul țintă și de dispozitivele pe care le folosesc. În timp ce lucrau la mărci pentru copii, aceștia s-au trezit adesea sub constrângerile telefoanelor mai vechi sau a dispozitivelor low-cost, cu consum redus de energie, totuși proiectează cu atenție și optimizează multe alte aspecte, așa că încă cred că este posibil să dezvolți jocuri impresionante pentru mobil.Internet.

Și ce au învățat din această experiență? Ei bine, dacă ar trebui să compilați o listă cu primele 10 sfaturi pentru dezvoltatorii de jocuri HTML5, ar arăta astfel:

1. Decideți-vă publicul

Uitați-vă la datele demografice și la ce dispozitive sunt utilizate de cei pentru care sunt proiectate proiectele dvs. Odată ce aveți datele, utilizați-le pentru a identifica gama principală de dispozitive pe care vizitatorii dvs. le folosesc și pentru a viza aceste dispozitive în deciziile dvs.

2. Decideți proiectarea în termeni de tehnologie

Da, ar trebui să fie întotdeauna așa, dar limitările și fragmentarea în HTML5 fac acest lucru și mai relevant. WebGL vă va permite să creați un shooter 3D excelent la prima persoană, dar este puțin probabil (citiți - deloc) va funcționa pe tablete dacă acestea se află pe lista dvs. de platforme țintă.

3. Imprieteneste-te cu caniuse.com

Acesta este un mod excelent de a verifica rapid asistența pentru orice caracteristică HTML5 pe care doriți să o utilizați în dezvoltarea dvs. - pentru aproape toate browserele și dispozitivele.

4. Folosiți dispozitive, nu doar simulatoare

Ia cât mai mult posibil în mâinile tale diverse dispozitive, rulați cât mai multe versiuni diferite de sisteme de operare. Simulatoarele vă vor ajuta în timpul dezvoltării, dar puteți obține doar o imagine exactă a modului în care va funcționa codul dvs. pe un dispozitiv real. Există un număr foarte mare de laboratoare cu dispozitive de testare, cum ar fi Open Device Lab, care vă vor oferi acces la un număr mare de dispozitive. În caz contrar, căutați resurse precum eBay pentru a găsi telefoane vechi și a le introduce în mediul dvs. de testare.

5. Fiți conștienți de schimbări

Specificațiile HTML5 sunt în continuă schimbare, la fel ca și suportul dispozitivului, deci trebuie să fiți la curent cu modificările din aceste zone. Acest lucru este valabil mai ales în domenii precum audio, unde funcții precum API-ul WebAudio pot schimba radical capacitățile.

6. Fii flexibil pe tot parcursul dezvoltării.

Ceea ce funcționează astăzi s-ar putea să nu funcționeze mâine. Ceea ce vă este inaccesibil astăzi poate deveni disponibil mâine. Permiteți-vă să fiți flexibili și să vă adaptați la schimbările care apar în timpul lucrului.

7. Funcționalitatea scalării

Punerea pe mobil în primul rând este utilă pentru mai mult decât simpla proiectare web tradițională. Uitați-vă la modul în care puteți crea ceva bun pentru smartphone-uri, apoi decideți funcționalitatea și performanța pe alte platforme, dacă le permit. Lucrați pentru acele dispozitive care utilizează agenți de utilizator sau dispozitive media și aplicați-vă experiența.

8. SĂRUT (Keep It Simple, Stupid) - Nu vă faceți viața grea, prostilor

Încercați să definiți granițele și să extindeți oportunitățile din toate punctele de vedere, dar amintiți-vă că lucrați cu o tehnologie aflată la început, complexitatea crescută sau ambițiile supraestimate ale proiectului nu vor face decât să vă înrăutățească situația.

9. Decideți durata de viață a proiectelor dvs.

Funcțiile se schimbă tot timpul, iar conținutul dvs. poate deveni expirat prea repede datorită noilor funcții disponibile pe dispozitive. Dacă jocul dvs. trebuie să dureze suficient de mult, acordați timp pentru a remedia erorile și a actualiza jocul.

O da. Verifică-ți jocurile pentru toată lumea dispozitive disponibile cât mai des posibil!

Gladiator, tu călărești al doilea semnal

HTML5 pare a fi tehnologia mainstream neoficială pentru dezvoltarea jocurilor multiplataforma pentru diferite browsere, fără îndoială. Nu este cel mai sigur spațiu în acest moment, dar este în regulă pentru tehnologie încă de la început. Pentru a verifica capacitățile browserelor, merită să vizitați site-uri precum caniuse.com. Verifică-ți regulat jocurile la fel de mult Mai mult dispozitive disponibile și fiți pragmatic cu designul jocului. Acest lucru vă va ajuta să evitați problemele nu numai acum, ci și să fiți într-o poziție mai bună atunci când suportul dispozitivului se îmbunătățește, ceea ce este inevitabil.

Jocuri gratuite pe Android. Realizat în html5, astfel încât să le puteți reda pe telefon și tabletă. Pe lângă sistemul Android, sunt acceptate Windows, Linux, Mac și dispozitivele mobile de la Apple. Principalul lucru este că browserul este modern și sistemul este nou. Control mouse sau ecran tactil.

Jocurile pe Android sunt ideale. Le puteți reda pe computer și pe telefon. Pot fi descărcate (instalate) pentru acces rapid.

Cum să descărcați un joc HTML5 pe telefon

Accesați pagina jocului de pe site-ul nostru. Deschide jocul pe ecran complet într-un browser modern precum Chrome. În browserul dvs., faceți clic pe butonul cu trei puncte care ascunde comenzile de meniu pentru lucrul cu pagina. Derulați în jos lista și selectați „Adăugați un joc pe ecranul principal” (dacă aveți un Chrome nerusificat). După aceea, jocul va apărea pe ecranul telefonului dvs. și va fi posibil să îl lansați prin lansare directă, fără a lansa browserul.

Această operație este disponibilă pentru telefoane și Tablete Androidși Apple, dar acesta din urmă poate avea o comandă în altă parte - în meniul de jos al Safari.

Jocul poate necesita internetul pentru a funcționa (sau poate nu este necesar, în funcție de caracteristicile unui anumit joc - mai multe jocuri sunt disponibile offline, dar acum trebuie să îl verificați.) Jocul este descărcat automat și salvat pe telefonul dvs., dar poate fi necesară o conexiune pentru a descărca clasamentele online sau alte funcții.

Instalați ca un joc Android normal

Aproape fiecare joc HTML5 are o versiune pentru sistem de operare Android sau iOS. Dacă instalarea unui joc HTML5 pe ecranul de pornire nu vă convine - să spuneți, doriți să jucați în mod constant și nu numai atunci când există internet - atunci căutați pictograma în ecranele de protecție ale jocurilor Google Playși AppStore. Deși jocurile pentru dispozitive Apple sunt lansate mai rar, și mai des puteți vedea doar butoane Android, ca acesta:

Butonul de instalare - căutați-l în jocuri

În jocurile în sine, butonul este mult mai mic, aici este mărit, astfel încât să vă amintiți. Aruncați o privire la captura de ecran a jocului de mai jos - încercați să găsiți acel buton acolo. Acestea duc la Google Play oficial, de unde puteți descărca versiune gratuită jocuri cu funcții avansate - cum ar fi posibilitatea de a juca fără internet.

Dedicat fanilor jocului pe Android ...

Când mi s-a spus doar că există așa ceva, nu am acordat prea multă atenție, deoarece nu sunt deloc un mare fan al tuturor acestor tendințe noi. Cu toate acestea, atunci mi-am dat seama că jocurile pe Android sunt ceva de genul jucăriilor „platformer” - am vrut imediat să încerc ce este. Îmi amintesc încă cât de fascinante mi s-au părut jocuri pentru consola „opt-bit” Dandy sau Sega. Și aici civilizația a scăzut la ceea ce - doar gândiți-vă, un telefon fără butoane și cu o funcție care vă permite să jucați jocuri. Ispititor, nu vei spune nimic!

De fapt, un joc este instalat pe telefon (sau procesul de joc efectuată exclusiv prin intermediul browserului - se ia în considerare și această opțiune), acordând atenție la care puteți concura nu numai cu inteligența artificială (adică Calculator personal), dar și cu alți participanți (întregul proces are loc online).

Avantajele evidente ale HTML5

Nu este un secret faptul că HTML5 înlocuiește Flash și este elementul principal al web-ului modern. Din acest motiv, jocurile create pe baza sa au început să funcționeze în cadrul internetului - mai mult, astăzi jocurile care fac posibilă concurența cu alți utilizatori sunt din ce în ce mai interesante pentru clienți (mai ales dacă nu este necesară descărcarea și instalarea pe computerul dvs. ). La rândul său, această caracteristică ajută să scapi de multe malware care vă împiedică să lucrați pe computer.

Toate aceste jocuri pe Android și PC sunt create pentru browsere moderneși necesită doar JavaScript, Canvas și HTML5 pentru a funcționa cu succes. În funcție de sarcinile care trebuie îndeplinite în timpul acestui joc, se obișnuiește să distingem unele soiuri:

Arcadă
joc de inteligență
Strategii
Zbor
Aventuri
Rasă
Descărcabil
Browser

Exemple de jocuri online pentru Android

Anterior, nu mă interesa deloc jocurile de pe telefon, dar totul s-a schimbat după ce am ajuns pe site. Acolo m-am familiarizat cu ce sunt jocurile online pentru Android, am încercat un număr imens de „jucării” diferite. În ceea ce mă privește, cele mai bune jocuri Android prezentate pe acest site (și nu numai pe acesta) sunt mahjong și.

De ce spun asta? Totul este foarte simplu. Toată viața mea am preferat jocurile cu o părtinire strategică și cu o nuanță clară de teme medievale, precum și fantezie. Așa că putem spune, am găsit cu adevărat ceea ce îmi place. Dar nici măcar asta nu este ideea.

Cel mai mult mi-a plăcut acest site datorită faptului că acesta conține cel mai mult tipuri diferite jocuri online și, pe lângă acestea - într-adevăr, toate necesită foarte puțin în ceea ce privește software-ul (în realitate, în afară de JavaScript, Canvas și HTML5, nu este necesar nimic pentru ca acestea să funcționeze).

Jocuri gratuite pentru Android

Datorită modelului Free2Play, toate jocurile Android prezentate pe acest site sunt gratuite. Acestea pot fi redate pe ecran complet atât pe computer, cât și pe tabletă. Dar principalul lucru care îi deosebește de jocurile flash este că pot fi jucate în cele din urmă pe telefon.

Tehnologia de bază care face posibilă jocurile HTML5 este o combinație de HTML și JavaScript. Hypertext Markup Language (HTML) a făcut parte din prima autostradă pe Internet așa cum o numeau pe atunci și a continuat să fie folosită pentru a servi fiecare site web astăzi. Codul JavaScript a fost adăugat browserelor a doua versiune precum Netscape 2.0 în 1995 și a evoluat de-a lungul anilor pentru a deveni mai plăcut de citit și scris. În primele zile, acesta a fost denumit DHTML sau HTML dinamic, deoarece a permis conținutul interactiv fără o reîmprospătare a paginii. Cu toate acestea, a fost dificil de învățat și de utilizat la începutul erei web. De-a lungul timpului, Javascript cu ajutorul Google Chrome dezvoltatorii au devenit unul dintre cele mai rapide limbaje de scriptare. De asemenea, are module, biblioteci și scripturi mai libere decât orice alt limbaj de codare.

Primele jocuri DHTML erau foarte simple. Câteva exemple de jocuri de atunci erau Tic-Tac-Toe și. Întrucât jocurile realizate cu această tehnologie utilizează standardul deschis al HTML5, aceste jocuri relativ vechi sunt redate și astăzi într-un browser web modern. Aceste tehnologii s-au mutat în prim-planul jocurilor de browser, deoarece nu necesită pluginuri și sunt mai sigure de jucat decât tehnologiile mai vechi.

În loc de introducere.
După ce am petrecut câteva zile la rând (fără o pauză de somn) studiind suportul HTML5 de toate gadgeturile mele Android preferate, am decis că acest subiect ar trebui să fie acordat atenție. În articol, voi încerca să dezvăluie pas cu pas toate etapele (desigur, de bază / cheie / principală) ale creării unei aplicații de joc HTML5 pentru Android, de la idee până la lansare Fișier APK.
Poate că nu voi deschide nimic nou pentru venerabilii dezvoltatori, dar pentru începători voi încerca să descriu totul cât mai simplu posibil, cu capturi de ecran și explicații.

Îi invit pe cei care doresc să învețe mai multe sub pisica.

Idee
În general, puteți vorbi multe despre potențialul Android, despre dezvoltarea HTML5 și despre interacțiunea lor. Nu voi face asta. Deci, direct la subiect.

Ideea de a crea un joc pentru Android stă probabil în mintea a zeci de sute de dezvoltatori și a celor care se consideră a fi astfel. Nu sunt o excepție.

De ce HTML5? - Nativitate. Scrii un joc în JS și apoi pentru absolut orice sistem de operare creezi un wrapper într-o formă convenabilă și în orice limbă.

Întregul proces va fi împărțit în mai mulți pași, iar aplicația finală va consta din două părți:
- Wrap (în acest caz pentru Android)
- Jocul

Pasul 1. Scrierea jocului în sine
Un alt plus al scrierii unui joc în HTML5 este faptul că nu necesită o grămadă de rularea programelor, IDE, emulatoare și așa mai departe. Tot ce aveți nevoie este un browser (în cazul meu, este Chromium) și editor de text(BlueFish)

Jocul va fi simplu: dacă dreptunghiul albastru este dreptunghiul verde. Sarcina jucătorului este de a trage dreptunghiul albastru pe cel verde, ocolindu-l pe cel roșu, care se deplasează de-a lungul terenului de joc într-o direcție arbitrară.

Pentru dezvoltarea jocului voi folosi J2ds (motor de joc)

Cod joc finalizat:

index.html

Demo Game pe J2ds v.0

Puteți ignora calitatea codului jocului, deoarece acest lucru nu este scopul articolului. Deși, desigur, puteți optimiza cât doriți, acest proces este, probabil, nesfârșit în general.

Pasul 2. Android Studio... Crearea unui wrapper pentru joc
Nu am de gând să măsoare răceala acestui IDE pentru dezvoltarea Android cu nimeni, dar vă voi arăta mai departe Exemplu Android Studio. Pentru muncă avem nevoie de:
- Mașină Java (OpenJDK este potrivit pentru Linux-ul meu)
- Set de distribuție Android Studio.

Descărcați, instalați.
Odată ce totul este instalat (aceste două programe sunt suficiente), lansați Android Studio.

Se va deschide fereastra de pornire (dacă este prima lansare), dacă nu prima, atunci IDE-ul în sine se va deschide, dar nu schimbă esența, să mergem la SDK Manager:

Aici trebuie să bifați versiunile Android de care aveți nevoie cu care veți lucra, în cazul meu este Android 4.4.2, puteți alege cel puțin dintr-o dată.

Principalul lucru este că trebuie să selectați „Instrumente” și „Extras” și să faceți clic pe „instalați pachete”.

De îndată ce ați descărcat totul, IDE va începe cu un fundal gri plictisitor și mai multe butoane, apăsați primul și creați un proiect nou. Dacă IDE a început imediat în stare de funcționare, atunci: „Fișier-> Nou-> Proiect nou”

Completați câmpurile obligatorii și faceți clic pe Următorul

Selectați versiunea dorită de Android și Next

Aici selectăm Activitate necompletată (șablon necompletat cu Hello, World!)

În fereastra următoare, completați datele pentru crearea de clase, nu mă voi schimba pentru claritate:

Apăsăm solemn Finich și așteptăm în timp ce IDE configurează și pregătește totul pentru muncă.

Se va deschide o fereastră cu un designer de formulare. Nu este același lucru ca în Lazarus, Delphi, dar ceva similar este încă disponibil:

Nu vă grăbiți să schimbați nimic sau să faceți clic pe ceva, configurarea nu s-a terminat încă.
Deschideți „Tolls-> Android-> AVD Manager” pentru a configura emulatorul.

Aici, dacă nu există nimic, apăsăm „Cereate Virtual Device”, dacă există, nu puteți crea unul nou, l-am avut deja, pentru că L-am „împiedicat” în timp ce mi-am dat seama. Dacă trebuie să creați un nou emulator, atunci totul este simplu acolo:
1. Alegeți dimensiunea ecranului și modelul telefonului
2. Selectați versiunea de Android (am 4.4.2)
3. Configurarea dispozitivului.

În al treilea pas, mai detaliat:

T.K. jocul este întins orizontal, trebuie să selectați modul peisaj.

Când sunt introduse toate setările, faceți clic pe triunghiul verde și lansați emulatorul. După pornire, așteptăm ca dispozitivul să pornească complet și să pornească sistemul de operare:

Nu închideți această fereastră, emularea va avea loc în ea. Acum puteți să vă întoarceți la editor și să schimbați orientarea în proiectantul formularului:

Poți fugi! Acum este cu siguranță posibil.
Dacă vi se solicită să selectați un emulator, puteți bifa caseta de mai jos:

Felicitarile mele! Totul funcționează, verificat!

Ne minimalizăm emulatorul (dar nu îl închidem!) Și mergem la editor, totul este puțin mai complicat acolo (puțin).
Trebuie să treceți la modul „Text”. În activitatea dvs. principală, sunt descrise toate elementele care se află pe formular. Inclusiv formularul în sine. Și nu este deloc o formă =).

pentru că facem un joc în HTML5 și aici avem doar un wrapper pentru joc, ștergem tot textul și inserăm următoarele:

Acum, dacă reveniți la design, acesta va arăta diferit:

După cum puteți vedea, acum, în loc de „Hello, World”, un ecran întins până la ecran complet - WebView - arată complet. Acest obiect este „fereastra” noastră către lumea jocurilor.

Puteți chiar să alergați, să vedeți dacă va exista un ecran alb. Mergi mai departe.

Și atunci trebuie să mergem la proiectul nostru, pentru aceasta, în stânga, deschidem câmpul „Proiect” și selectăm fila „Android”, dacă nu este selectată:

Această filă arată structura proiectului și toate fișierele și resursele sale interne.

Antetul spoilerului

Trebuie să găsim fișierul „manifest” și să adăugăm „aplicație” la definiție următoarea linie:
android: hardwareAccelerated = "true"

Este timpul să lucrăm la funcționalitatea „browserului” nostru, pentru că asta este! Deschideți clasa „MainActivity.java” și eliminați toate lucrurile inutile, lăsând doar cele principale:

Antetul spoilerului

Pachetul com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extinde AppCompatActivity (@Override protected void onCreate (Bundle savedInstanceState) (super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);))

Dacă nu ați uitat, am adăugat un WebView în fișierul activity_main, acordați atenție liniei evidențiate cu caractere aldine:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: clickable = "true"
android: scrollbars = "none" />

Trebuie să declarăm un obiect al clasei WebView.

Pentru a face acest lucru, adăugați la lista importurilor:

Importați android.webkit.WebView;

Și apoi declarăm obiectul nostru myWeb în clasa MainActivity:

WebView protejat myWeb;

Acum, după linie setContentView (R.layout.activity_main); introduceți următorul cod:

/ * Găsiți browserul nostru * / myWeb = (WebView) findViewById (R.id.webView); / * Configurați browserul nostru * / myWeb.getSettings (). SetUseWideViewPort (adevărat); myWeb.setInitialScale (1); myWeb.getSettings (). setJavaScriptEnabled (adevărat); / * Încărcați pagina * / myWeb.loadUrl ("fișier: ///android_asset/index.html");

Iată ce am primit în editor:

Iată ce conține emulatorul:

Dacă faci același lucru - suntem pe drumul cel bun!

Mai este puțin de făcut:
În cazul în care încărcăm pagina în browserul nostru, calea fișierului arată astfel: „file: ///android_asset/index.html”
Trebuie remarcat faptul că putem stoca orice fișier în interiorul jocului nostru, având acces la acestea.

În cazul nostru, folderul cheie este „android_asset”, haideți să-l creăm (da, implicit nu se află în proiect):
„Fișier -> Nou -> Dosar -> Dosar active”, se va deschide o fereastră în care trebuie doar să fiți de acord cu IDE.
Ai observat? Un nou folder a apărut în proiect:

Faceți clic pe el cu butonul din dreapta al mouse-ului -> „Afișați în fișiere”, se va deschide exploratorul de sistem (în cazul meu Nautilus), acordați atenție căii către folder. De asemenea, rețineți că dosarul se numește „active”, dar este accesat prin „android_asset”.

Atunci totul este destul de simplu - copiați jocul nostru în folderul active:

Fișierul index.html este același index de la începutul acestui articol. Ei bine, să încercăm să-l rulăm!

Un mic sfat: cel mai bine este să testați pe un dispozitiv real prin USB, astfel încât rezultatele testelor vor fi mai clare, iar controlul mouse-ului nu este cea mai convenabilă opțiune, ca să nu mai vorbim de mai multe clicuri.

Pasul 3. Android Studio. Construiți aplicația și semnați-o

Când jocul este complet depanat de dvs. (în browser sau pe emulator), wrapper-ul este complet gata și toate etapele de dezvoltare s-au încheiat, puteți construi aplicația. Android Studio vă permite să creați aplicații și să le semnați cu cheile.

Pentru a crea chei, acest IDE are utilitate specială„KeyTool”.

Să trecem la crearea fișierului executabil al aplicației („Build -> Generate Signed APK”):

Dacă nu ați creat chei și aliasuri înainte, faceți clic pe „Creați nou”
Puteți completa câmpurile la discreția dvs., exactitatea datelor aparține în totalitate dvs.

Primul câmp este calea către folderul în care va fi salvată cheia.
După ce faceți clic pe Ok, formularul va fi completat automat:

Pentru aplicațiile ulterioare, nu este necesar să creați chei noi, puteți să semnați alte aplicații cu cheia dvs., tocmai pentru asta este butonul „Alegeți existent”.
În pasul următor, IDE vă va cere să introduceți parola din nou, apoi să specificați folderul pentru salvarea fișierului APK.
admin în rubrica Uncategorized. Marcaj.

După ce am petrecut câteva zile la rând (fără o pauză de somn) studiind suportul HTML5 de toate gadgeturile mele Android preferate, am decis că acest subiect ar trebui să fie acordat atenție. În articol, voi încerca să explic pas cu pas toate etapele (desigur, de bază / cheie / principală) ale creării unei aplicații de joc HTML5 pentru Android, de la idee până la lansarea fișierului APK în sine. Poate că nu voi deschide nimic nou pentru venerabilii dezvoltatori, dar pentru începători voi încerca să descriu totul cât mai simplu posibil, cu capturi de ecran și explicații.

Îi invit pe cei care doresc să învețe mai multe sub pisica.

Idee

În general, puteți vorbi multe despre potențialul Android, despre dezvoltarea HTML5 și despre interacțiunea lor. Nu voi face asta. Deci, direct la subiect.

Ideea de a crea un joc pentru Android stă probabil în mintea a zeci de sute de dezvoltatori și a celor care se consideră a fi astfel. Nu sunt o excepție.

Întregul proces va fi împărțit în mai mulți pași, iar aplicația finală va consta din două părți:
- Wrapper (în acest caz pentru Android)
- Jocul

Pasul 1. Scrierea jocului în sine

Un alt plus al scrierii unui joc în HTML5 este faptul că testarea nu necesită o grămadă de programe care rulează, IDE, emulatoare și așa mai departe. Tot ce aveți nevoie este un browser (în cazul meu, este Chromium) și un editor de text (BlueFish)

Jocul nu va fi dificil: există un dreptunghi albastru și există un dreptunghi verde. Sarcina jucătorului este de a trage dreptunghiul albastru pe cel verde, ocolindu-l pe cel roșu, care se deplasează de-a lungul terenului de joc într-o direcție arbitrară.

Pentru dezvoltarea jocului voi folosi J2ds (motor de joc).

Cod joc finalizat:

index.html

Demo Game pe J2ds v.0

Puteți ignora calitatea codului jocului, deoarece acest lucru nu este scopul articolului. Deși, desigur, puteți optimiza cât doriți, acest proces este, probabil, nesfârșit în general.

Pasul 2. Android Studio. Crearea unui wrapper pentru joc

Nu am de gând să măsoară răceala acestui IDE sau a altui IDE pentru dezvoltarea Android cu nimeni, dar îl voi arăta folosind Android Studio ca exemplu. Pentru muncă avem nevoie de:
- Mașină Java (OpenJDK este potrivit pentru Linux-ul meu);
- Set de distribuție Android Studio.

Descărcați, instalați.

Odată ce totul este instalat (aceste două programe sunt suficiente), lansați Android Studio.

Se va deschide fereastra de pornire (dacă este prima lansare), dacă nu prima, atunci IDE-ul în sine se va deschide, dar nu schimbă esența, să mergem la SDK Manager:

Aici trebuie să bifați versiunile Android de care aveți nevoie cu care veți lucra, în cazul meu este Android 4.4.2, puteți alege cel puțin dintr-o dată.

Principalul lucru este că trebuie să selectați „Instrumente” și „Extras” și să faceți clic pe „instalați pachete”.

Completați câmpurile obligatorii și faceți clic pe Următorul

Selectați versiunea dorită de Android și Next

Aici selectăm Activitate necompletată (șablon necompletat cu Hello, World!)

În fereastra următoare, completați datele pentru crearea de clase, nu mă voi schimba pentru claritate:

Apăsăm solemn Finich și așteptăm în timp ce IDE configurează și pregătește totul pentru muncă.

Se va deschide o fereastră cu un designer de formulare. Nu este același lucru ca în Lazarus, Delphi, dar ceva similar este încă disponibil:

Nu vă grăbiți să schimbați nimic sau să faceți clic pe ceva, configurarea nu s-a terminat încă. Deschideți „Tolls-> Android-> AVD Manager” pentru a configura emulatorul.

Aici, dacă nu există nimic, apăsăm pe „Creați dispozitiv virtual”, dacă există, nu puteți crea unul nou, l-am avut deja. L-am „împiedicat” în timp ce mi-am dat seama. Dacă trebuie să creați un nou emulator, atunci totul este simplu acolo:
1. Alegeți dimensiunea ecranului și modelul telefonului
2. Selectați versiunea de Android (am 4.4.2)
3. Configurarea dispozitivului.

În al treilea pas, mai detaliat:

T.K. jocul este întins orizontal, trebuie să selectați modul peisaj.

Nu închideți această fereastră, emularea va avea loc în ea. Acum puteți să vă întoarceți la editor și să schimbați orientarea în proiectantul formularului:

Poți fugi! Acum este cu siguranță posibil.

Dacă vi se solicită să selectați un emulator, puteți bifa caseta de mai jos:

Felicitarile mele! Totul funcționează, verificat!

pentru că facem un joc în HTML5 și aici avem doar un wrapper pentru joc, ștergem tot textul și inserăm următoarele:

Acum, dacă reveniți la design, acesta va arăta diferit:

După cum puteți vedea, acum, în loc de „Hello, World”, un ecran întins până la ecran complet - WebView - arată complet. Acest obiect este „fereastra” noastră către lumea jocurilor.

Puteți chiar să alergați, să vedeți dacă va exista un ecran alb. Mergi mai departe.

Această filă arată structura proiectului și toate fișierele și resursele sale interne.

Explicaţie

Trebuie să găsim fișierul „manifest” și să adăugăm următoarea linie la definiția „aplicației”:
android: hardwareAccelerated = "true"

Explicaţie

pachet com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extinde AppCompatActivity (@Override protected void onCreate (Bundle savedInstanceState) (super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);))

Trebuie să declarăm un obiect al clasei WebView.

Pentru a face acest lucru, adăugați la lista importurilor:

Importați android.webkit.WebView;
Și apoi declarăm obiectul nostru myWeb în clasa MainActivity:

WebView protejat myWeb;
Acum, după linie setContentView (R.layout.activity_main); introduceți următorul cod:

Iată ce am primit în editor:

Iată ce conține emulatorul:

Dacă faci același lucru - suntem pe drumul cel bun!

Fișierul index.html este același index de la începutul acestui articol. Ei bine, să încercăm să-l rulăm!

Pasul 3. Android Studio. Construiți aplicația și semnați-o

Pentru a crea chei în acest IDE există un utilitar special „KeyTool”.

Să trecem la crearea fișierului executabil al aplicației („Build -> Generate Signed APK”):

Dacă nu ați creat nicio cheie sau alias înainte, dați clic pe „Creați nou”. Puteți completa câmpurile la discreția dvs., exactitatea datelor aparține în totalitate dvs.

Primul câmp este calea către folderul în care va fi salvată cheia. După ce faceți clic pe Ok, formularul va fi completat automat:

Pentru aplicațiile ulterioare, nu este necesar să creați chei noi, puteți semna și alte aplicații cu cheia dvs., pentru aceasta există butonul „Alegeți existent”.

În pasul următor, IDE vă va cere să introduceți parola din nou, apoi să specificați folderul pentru salvarea fișierului APK.