Játékok html5 orosz androidon. HTML5 játékok fejlesztése Androidra a semmiből a kiadásig

Brian McHarg stratégiája a böngészők közötti, platformok közötti HTML5 játékok sikeres fejlesztésére.

HTML5: a flash játékok jogos trónörököse. A valóban többplatformos fejlesztés lehetővé teszi, hogy az egyszer megírt program PC-n, táblagépen és okostelefonon fusson, és Smart TV-n, valamint asztali és mobileszközökön is működik. játék konzolok mint például az Xbox360 vagy a PlayStation 3 a beépített böngészőn keresztül. Világos, hogy ez nagyon vonzó azok számára, akik a lehető legtöbb eszközre és platformra szeretnének játékokat fejleszteni.

Maga a HTML5 kifejezés, valamint az általa képviselt specifikációk eltérő jelentéssel bírnak attól függően, hogy ki írja le. Az ügyfelek számára ez egy olyan fejlesztési technológia, amely valódi Szent Grált ígér-és költséghatékony, többplatformos fejlesztést.

A fejlesztők számára ez számos különböző technológia gyűjtőneve: a JavaScript, a WebSockets, a WebAudio, a Canvas, a CSS3 és a WebGL csak néhány közülük, mindegyik saját szabványokkal, erős, platformok közötti korlátozásokkal.

És végül úgy tűnik, a legfontosabb: a felhasználók számára! Itt csak az számít, hogy a felhasználók ugyanazt az élményt és élményt akarják, mint amit megszoktak. És ez a fő kihívás a fejlesztők számára, különösen, ha céljuk a játék minél több platformon történő megvalósítása.

PC kontra mobil q cross-platform

Most mindannyian ismerünk fantasztikus példákat a HTML5 -játékokra, amelyek PC -böngészőben futnak. Gyakran böngészőszerzők készítik őket, hogy különösen demonstráljanak erősségeit saját szoftver, vagy bizonyos API -k esetében, amelyeket megerősíteni szeretnének a HTML5 specifikációban.

Az olyan játékok, mint a Cutthe Rope és a Contre Jour az Internet Explorer számára, vagy néhány kiváló Chrome -kísérlet, például a Jam vagy a Racer, nagyszerű példák. Tekintse meg a jövőbeli lehetőségeket, mint például a three.js, a nemrég megjelent nyílt forráskódú Turbulenz vagy az Unreal Engine által működtetett Epic HTML5.

Azonban próbálja meg megnézni az egyik ilyen példát az Android rendszeren, amelyre telepítve van az OS2.3 (Gingerbread), és teljesen más képet fog látni, és bizonyos esetekben egyáltalán nem fog látni semmit. Igen, ez az operációs rendszer majdnem három éves, de még mindig telepítve van az összes Android -eszköz harmadára, és ez a szám a célközönségtől függően még magasabb is lehet. És ez nem csak rajta történik régi verzió Android. Ugyanezt láthatja a címen Apple eszközök olyan iOS 5 vagy kevésbé hatékony eszközöket futtat, mint a Kindle Fire. Valójában most nem talál egyetlen olyan mobileszközt sem, amelyen a fenti programok bármelyike helyesen jelenne meg.

Amint azt korábban említettük, a legtöbb ügyfél a HTML 5-öt választja, hogy böngészőjátéka valóban többplatformos legyen. Ha csak PC -re fejleszt játékokat, az Unity és a Flash nagyszerű lehetőségek, amelyekre figyelni kell. Mindkettő kiváló böngészőtámogatással és önálló alkalmazásokként történő exportálással rendelkezik, így a szükséges kóddal okostelefonra vagy táblagépre is átvihetők.

Két nyilvánvaló probléma merül fel a platformok közötti játék fejlesztésekor HTML5-ben. Az első a HTML5 specifikáció homályos jellegének következménye, aminek következtében a jövőbeni támogatás nem az eszköz típusa, hanem az egyes eszközök böngészőjének típusa szerint van elkülönítve. A második, és a fejlesztők számára a legnehezebb kérdés a mobil eszközök képességeinek állandó változása, ami azt jelenti, hogy még ugyanazon funkciókészlet mellett is az egyik eszközön lévő játék nagyon különbözik a másik szerkentyűre telepített ugyanaztól.

Ahhoz, hogy képet kapjon arról, hogy hány lehetőség van, egyszerűen futtassa az egyik JavaScript -referenciaérték egyikét az eszköz teljesítményének teszteléséhez. Például, ha 100 képkockát küld a vászonra, viszonylag jól fog játszani 60 képkocka / másodperc sebességgel olyan eszközökön, mint az iPhone 4S vagy 5, Galaxy S3, Nexus 7 vagy Lumia 820. De próbálja meg ugyanazt a kódot más eszközökön is, mint pl. HTC Desire(19 kép / mp), Galaxy ász(7 képkocka) vagy iPad 1 (9 kép / mp), és nagyon keményen kell dolgoznia, hogy legalább valami életképes játékhoz jusson.

Ha a projekt egy okostelefonra vagy táblagépre irányult, és különösen, ha régi vagy alacsony fogyasztású eszközöket tartalmazott, akkor nagyon fontos a tesztelés elvégzése és a szabványok korai szakaszában történő meghatározása. Erre azért van szükség, hogy megértsük az eszközök körének korlátait, és meghatározzuk mind a technikai megközelítést, mind a játék kialakítását, amelyen dolgozni fog.

Ha a projekt nem okostelefonokra vagy táblagépekre irányult, akkor valószínűleg át kell gondolnia céljait. Például az okostelefonok és a táblagépek teszik ki az Egyesült Királyság oldalmegtekintéseinek közel egyharmadát, és ez a szám olyan ütemben növekszik, hogy 2014 -ben felülmúlja a számítógépes megtekintéseket. Annak ellenére, hogy munkaidőben még mindig az asztali eszközök dominálnak, reggel vezetnek mobil eszközökés a táblagépek esténként, ez a két alkalom ideális a webböngészéshez és a játékokhoz.

Válassza ki csatáit

A Chunk már két éve fejleszt platformon átívelő HTML5 játékokat a műsorszolgáltatók és márkák számára, és böngészőalapú mobiljátékokat készített olyan ügyfelek számára, mint a BBC és a Disney, amelyek minden eszközön futnak, a HTC Desire-től az iPad4-ig, a Nexus 7-től az Xbox-ig 360.

Fejlesztőként nagyszerű lenne számukra eldönteni, hogy milyen mélyre hatolnak ebben a folyamatban, de ezt a célközönség és az általuk használt eszközök határozzák meg. Miközben a gyerekeknek szóló márkákon dolgoztak, gyakran a régebbi telefonok vagy az alacsony költségű, alacsony fogyasztású eszközök korlátai közé kerültek, ugyanakkor gondosan megtervezték és optimalizálták számos egyéb szempontot, így továbbra is úgy vélik, hogy lenyűgöző játékokat lehet fejleszteni mobil, internet.

És mit tanultak ebből a tapasztalatból? Nos, ha össze kellene állítania a HTML5 játékfejlesztők 10 legfontosabb tippjének listáját, ez így nézne ki:

1. Döntse el közönségét

Nézze meg a demográfiai adatokat és azt, hogy milyen eszközöket használnak azok, akiknek terveit tervezték. Az adatok birtokában azonosítsa a látogatók által használt eszközök fő körét, és célozza meg ezeket a döntéseket.

2. Döntse el a tervezést a technológia szempontjából

Igen, ennek mindig így kell lennie, de a HTML5 korlátai és töredezettsége ezt még relevánsabbá teszi. A WebGL lehetővé teszi, hogy kiváló 3D első személyű lövést készítsen, de nem valószínű (olvassa el - egyáltalán nem), hogy táblagépeken is működik, ha szerepelnek a célplatformok listáján.

3. Barátkozzon a caniuse.com webhellyel

Ez egy nagyszerű módja annak, hogy gyorsan ellenőrizze a fejlesztés során használni kívánt HTML5 -szolgáltatások támogatását - szinte minden böngészőben és eszközön.

4. Használjon eszközöket, ne csak szimulátorokat

Vegyen a kezébe annyit, amennyit csak tud különféle eszközök, futtasson minél több különböző operációs rendszert. A szimulátorok segítenek a fejlesztés során, de csak pontos képet kaphat arról, hogy a kód hogyan fog működni egy valódi eszközön. Hatalmas számú laboratórium van olyan teszteszközökkel, mint például az Open Device Lab, amely hatalmas számú eszközhöz biztosít hozzáférést. Ellenkező esetben keressen olyan forrásokat, mint az eBay, hogy megkeresse a régi telefonokat, és bemutassa azokat a tesztkörnyezetének.

5. Legyen tisztában a változásokkal

A HTML5 specifikáció folyamatosan változik, csakúgy, mint az eszköztámogatás, ezért naprakésznek kell lennie a változásokkal ezeken a területeken. Ez különösen igaz az olyan területekre, mint az audio, ahol az olyan funkciók, mint a WebAudio API, radikálisan megváltoztathatják a képességeket.

6. Légy rugalmas a fejlesztés során.

Ami ma működik, lehet, hogy nem működik holnap. Ami ma elérhetetlen számodra, az holnap elérhetővé válhat. Engedje meg, hogy rugalmas legyen, és alkalmazkodjon a munkája során bekövetkező változásokhoz.

7. Scale funkcionalitás

A mobil előtérbe helyezése nemcsak a hagyományos webdesignnál hasznos. Nézze meg, hogyan hozhat létre valami jót az okostelefonokhoz, majd döntse el a funkcionalitást és a teljesítményt más platformokon, ha lehetővé teszik. Dolgozzon azokon az eszközökön, amelyek felhasználói ügynököket vagy médiaeszközöket használnak, és alkalmazza rájuk a tapasztalatait.

8. KISS (Keep It Simple, Hull) - Ne nehezítsd meg az életed, buták

Próbáljon meg mindenféleképpen meghatározni határokat és bővíteni a lehetőségeket, de ne feledje, hogy a kezdeti szakaszban lévő technológiával dolgozik, a megnövekedett komplexitás vagy a projekt túlbecsülése csak ront a helyzetén.

9. Döntse el tervei élettartamát

A funkciók folyamatosan változnak, és a tartalmak túl gyorsan elavulhatnak az eszközökön elérhető új funkcióknak köszönhetően. Ha a játéknak elég sokáig kell tartania, szánjon időt a hibák kijavítására és a játék frissítésére.

Ó, igen. Nézze meg mindenki számára a játékait rendelkezésre álló eszközök amilyen gyakran csak lehet!

Gladiátor, te lovagolsz a második jelzésemmel

Úgy tűnik, hogy a HTML5 a nem hivatalos mainstream technológia a platformok közötti játékok fejlesztésére különböző böngészők számára, ehhez nincs kétség. Jelenleg nem ez a legbiztonságosabb hely, de ez a technológia a csecsemőkorban nem baj. A böngészők képességeinek ellenőrzéséhez érdemes megnézni az olyan webhelyeket, mint a caniuse.com. Rendszeresen ellenőrizze játékait több rendelkezésre álló eszközöket, és legyen pragmatikus a játéktervezésben. Ez segít elkerülni a problémákat nemcsak most, hanem jobb helyzetben is lehet, amikor javul az eszköztámogatás, ami elkerülhetetlen.

Ingyenes játékok Androidon. HTML5 -ben készült, így lejátszhatja őket telefonján és táblagépén. Az Android rendszeren kívül a Windows, Linux, Mac és az Apple mobil eszközei is támogatottak. A lényeg az, hogy a böngésző modern és a rendszer új. Egér vagy érintőképernyős vezérlés.

Az Androidos játékok ideálisak. Ezeket számítógépen és telefonon is lejátszhatja. Letölthetők (telepíthetők) a gyors hozzáférés érdekében.

Hogyan lehet letölteni egy HTML5 játékot a telefonjára

Lépjen a játék oldalára a weboldalunkon. Nyissa meg a játékot teljes képernyőn egy modern böngészőben, például a Chrome -ban. A böngészőben kattintson a hárompontos gombra, amely elrejti az oldallal kapcsolatos menüparancsokat. Görgessen lefelé a listán, és válassza a "Játék hozzáadása a főképernyőre" lehetőséget (ha nem oroszosított Chrome-ja van). Ezt követően a játék megjelenik a telefon képernyőjén, és közvetlen indítással, a böngésző elindítása nélkül indítható.

Ez a művelet elérhető telefonok és Android táblagépekés az Apple, de ez utóbbinak máshol is lehet parancsa - a Safari alsó menüjében.

A játék működéséhez szükség lehet az internetre (vagy nem szükséges, az adott játék jellemzőitől függően - számos játék elérhető offline módban, de most ellenőriznie kell.) A játék automatikusan letöltődik és mentésre kerül. a telefonon, de kapcsolatra lehet szükség az online ranglisták vagy más funkciók letöltéséhez.

Telepítse normál Android -játékként

Szinte minden HTML5 játék rendelkezik verzióval operációs rendszer Android vagy iOS. Ha egy HTML5 -játék telepítése a főképernyőre nem felel meg Önnek - mondjuk, folyamatosan szeretne játszani, és nem csak akkor, ha van internet -, akkor keresse meg az ikont a játékok képernyővédőiben A Google Playés az AppStore. Bár az Apple eszközökhöz tartozó játékok ritkábban jelennek meg, és gyakrabban csak androidos gombokat láthat, például:

Telepítés gomb - keresse meg a játékokban

Magukban a játékokban a gomb sokkal kisebb, itt nagyítva van, hogy emlékezzen rá. Vessen egy pillantást az alábbi játék képernyőképére - próbálja meg megtalálni ezt a gombot. Ezek a hivatalos Google Playhez vezetnek, ahonnan letöltheti ingyenes verzió fejlett funkciókkal rendelkező játékok - például az internet nélküli játék lehetősége.

A játék rajongóinak dedikálva Androidon ...

Amikor csak azt mondták, hogy létezik ilyen, nem figyeltem sokat, hiszen egyáltalán nem vagyok nagy rajongója ezeknek az új trendeknek. Ekkor azonban rájöttem, hogy az Androidon lévő játékok valami olyanok, mint a „platformer” játékok - azonnal ki akartam próbálni, hogy mi az. Még mindig emlékszem, milyen lenyűgöző játékok tűntek számomra a "nyolcbites" Dandy vagy Sega konzol számára. És itt a civilizáció mibe süllyedt - gondoljunk csak bele, egy telefon gombok nélkül és olyan funkcióval, amely lehetővé teszi a játékot. Csábító, nem mondasz semmit!

Valójában egy játék van telepítve a telefonra (vagy játék folyamata kizárólag a böngészőn keresztül hajtható végre - ezt a lehetőséget is fontolóra veszik), ügyelve arra, hogy nemcsak a mesterséges intelligenciával versenyezhessen (értsd: Személyi számítógép), de más résztvevőkkel is (az egész folyamat online zajlik).

A HTML5 nyilvánvaló előnyei

Senkinek sem titok, hogy a HTML5 felváltja a Flash -t, és a modern web alappillére. Ezért kezdték el az interneten működni az ennek alapján létrehozott játékok - ráadásul manapság a játékok, amelyek lehetővé teszik a versenyt más felhasználókkal, egyre inkább érdeklik az ügyfeleket (különösen, ha nincs szükség letöltésre és telepítésre a számítógépre) ). Ez a funkció viszont segít megszabadulni sokaktól rosszindulatú amelyek megakadályozzák a számítógépen való munkát.

Mindezek a játékok az Androidon és a PC -n készültek modern böngészőkés csak JavaScript, Canvas és HTML5 szükségesek a sikeres működéshez. Attól függően, hogy milyen feladatokat kell végrehajtani a játék során, szokás megkülönböztetni néhány fajtát:

Árkád
összerakós játékaik
Stratégiák
Repülő
Kalandok
Verseny
Letölthető
Böngésző

Példák online játékok Androidra

Korábban egyáltalán nem érdekeltek a telefonos játékok, de minden megváltozott, miután eljutottam az oldalra. Ott megismerkedtem az Android -on található online játékokkal, rengeteg különböző "játékot" próbáltam ki. Ami engem illet, az ezen az oldalon (és nem csak ezen) bemutatott legjobb Android játékok a mahjong és.

Miért mondom ezt? Minden nagyon egyszerű. Egész életemben előnyben részesítettem a stratégiai elfogultsággal rendelkező játékokat, amelyek világos árnyalata a középkori témáknak, valamint a fantáziának. Tehát azt mondhatjuk, hogy tényleg megtaláltam azt, ami tetszik. De nem is ez a lényeg.

Leginkább azért tetszett ez az oldal, mert a legtöbbet tartalmazza különböző típusok online játékok, és emellett - valóban, mindegyikük nagyon kevés szoftvert igényel (a valóságban a JavaScript, a Canvas és a HTML5 kivételével semmi sem szükséges ahhoz, hogy működjenek).

Ingyenes játékok Androidra

A Free2Play modellnek köszönhetően az ezen az oldalon bemutatott összes Android játék ingyenes. Teljes képernyőn játszhatók számítógépen és táblagépen. De a legfontosabb dolog, ami megkülönbözteti őket a flash játékoktól, hogy végre telefonon is játszhatók.

A mögöttes technológia, amely lehetővé teszi a HTML5 játékokat, a HTML és a JavaScript kombinációja. A Hypertext Markup Language (HTML) a korai internetes szupersztráda része volt, ahogy akkoriban hívták, és ma is használják minden webhely kiszolgálására. A JavaScript kódot 1995 -ben adták hozzá a második verziójú böngészőkhöz, például a Netscape 2.0 -hoz, és az évek során fejlődött, hogy kellemesebbé váljon az olvasás és az írás. A kezdeti időkben DHTML -nek vagy dinamikus HTML -nek nevezték, mert lehetővé tette az interaktív tartalmat az oldal frissítése nélkül. A korai webkorszakban azonban nehéz volt megtanulni és használni. Idővel a Javascript segítségével a Google chrome a fejlesztők az egyik leggyorsabb szkriptnyelv lett. Ezenkívül szabadon elérhető modulokat, könyvtárakat és szkripteket tartalmaz, mint bármely más kódoló nyelv.

A korai DHTML játékok nagyon egyszerűek voltak. Néhány példa az akkori játékokra a Tic-Tac-Toe és. Mivel az ezzel a technológiával készült játékok a HTML5 nyílt szabványát használják, ezek a viszonylag ősi játékok ma is játszhatók egy modern webböngészőben. Ezek a technológiák a böngészőjátékok élvonalába kerültek, mivel nem igényelnek beépülő modulokat, és biztonságosabbak a játéknál, mint a régebbi technológiák. A HTML5 játékok is támogatják, és a képesség javult az összetett 2D és

Bevezetés helyett.
Miután több napot egymás után (alvásszünet nélkül) tanulmányoztam az összes kedvenc Android -modulom HTML5 -támogatását, úgy döntöttem, hogy erre a témára figyelni kell. A cikkben lépésről lépésre megpróbálom feltárni a HTML5 játékalkalmazás Androidra történő létrehozásának minden szakaszát (természetesen alap / kulcs / fő) az ötlettől a kiadásig APK fájl.
Talán nem nyitok semmi újat a tiszteletreméltó fejlesztők előtt, de kezdőknek megpróbálok mindent a lehető legegyszerűbben leírni, képernyőképekkel és magyarázatokkal.

Meghívom azokat, akik többet szeretnének megtudni a macska alatt.

Ötlet
Általánosságban elmondható, hogy sokat beszélhet az Android lehetőségeiről, a HTML5 fejlesztéséről és azok interakciójáról. Nem fogom ezt tenni. Szóval, egyenesen a lényegre.

Valószínűleg több tízezer fejlesztő fejében és azokban, akik ilyennek tartják magukat, felmerül az ötlet, hogy létrehozzanak egy játékot Androidra. Nem vagyok kivétel.

Miért a HTML5? - Születés. JS -ben írsz egy játékot, majd abszolút bármely operációs rendszerhez létrehozol egy csomagolást kényelmes formában és bármilyen nyelven.

Az egész folyamat több lépésre lesz bontva, és a végső alkalmazás két részből fog állni:
- Wrap (in ez az eset Androidra)
- A játék

1. lépés. Maga a játék megírása
Egy másik plusz, ha egy játékot HTML5 -ben írunk, az, hogy nem igényel egy csomó játékot programok futtatása, IDE, emulátorok és így tovább. Csak egy böngészőre van szüksége (az én esetemben ez a Chromium) és szöveg szerkesztő(BlueFish)

A játék egyszerű lesz: ha a kék téglalap a zöld téglalap. A játékos feladata, hogy a kék téglalapot a zöldre húzza, megkerülve a pirosat, amely tetszőleges irányban mozog a játéktér mentén.

A játék fejlesztéséhez a J2ds -t (játékmotort) fogom használni

Kész játékkód:

index.html

Demo játék a J2ds v.0 -n

Figyelmen kívül hagyhatja a játékkód minőségét, mert nem ez a cikk célja. Bár természetesen tetszés szerint optimalizálhat, ez a folyamat általában végtelen.

2. lépés. Android Studio... Csomagolás készítése a játékhoz
Nem fogom senkivel mérni az IDE for Android fejlesztésének hűvösségét, de megmutatom Android példa Stúdió. A munkához szükségünk van:
- Java gép (az OpenJDK alkalmas a Linuxomra)
- Android Studio terjesztési készlet.

Töltse le, telepítse.
Ha minden telepítve van (ez a két program elég), indítsa el az Android Stúdiót.

Megnyílik a kezdőablak (ha az első indítás), ha nem az első, akkor az IDE megnyílik, de a lényegen nem változtat, menjünk az SDK -kezelőhöz:

Itt ki kell pipálnia azokat az Android verziókat, amelyekre szüksége lesz, amelyekkel dolgozni fog, az én esetemben ez az Android 4.4.2, választhat legalább egyszerre.

A lényeg az, hogy ki kell választania az "Eszközök" és az "Extrák" lehetőséget, és kattintson a "csomagok telepítése" gombra.

Amint mindent letöltött, az IDE tompa szürke háttérrel és több gombbal indul, nyomja meg az elsőt, és hozzon létre egy új projektet. Ha az IDE azonnal működőképes állapotban indult, akkor: "Fájl-> Új-> Új projekt"

Töltse ki a szükséges mezőket, majd kattintson a Tovább gombra

Válassza ki a kívánt android verziót, majd kattintson a Tovább gombra

Itt kiválasztjuk az Üres tevékenységet (üres sablon Hello, világ!)

A következő ablakban töltse ki az osztályok létrehozásához szükséges adatokat, az egyértelműség kedvéért nem változtatok:

Ünnepélyesen megnyomjuk a Finich gombot, és várunk, amíg az IDE mindent konfigurál és előkészít a munkára.

Megnyílik egy űrlaptervező ablak. Nem ugyanaz, mint Lázárban, Delphiben, de valami hasonló még mindig elérhető:

Ne rohanjon semmit megváltoztatni vagy kattintani, a beállítás még nem ért véget.
Nyissa meg a "Tolls-> Android-> AVD Manager" -t az emulátor konfigurálásához.

Itt, ha nincs semmi, kattintson a "Cereate Virtual Device" gombra, ha van ilyen, akkor nem tud újat létrehozni, már megvolt, mert "Megbotlottam", míg rájöttem. Ha új emulátort kell létrehoznia, akkor minden egyszerű:
1. Válassza ki a képernyő méretét és a telefon modelljét
2. Válassza ki az android verzióját (4.4.2 -es verzióm van)
3. Az eszköz konfigurálása.

A harmadik lépésben részletesebben:

T.K. a játék vízszintesen van nyújtva, ki kell választania a fekvő módot.

Az összes beállítás megadása után kattintson a zöld háromszögre, és indítsa el az emulátort. Az indítás után várjuk, hogy az eszköz teljesen elinduljon, és elindítsa az operációs rendszert:

Ne csukja be ezt az ablakot, emuláció történik benne. Most visszatérhet a szerkesztőbe, és módosíthatja az űrlaptervező tájolását:

Futhatsz! Most mindenképpen lehetséges.
Ha a rendszer felszólítja az emulátor kiválasztására, akkor jelölje be az alábbi négyzetet:

Gratulálok! Minden működik, ellenőrizve!

Minimalizáljuk az emulátorunkat (de ne zárjuk be!) És menjünk a szerkesztőhöz, ott minden kicsit bonyolultabb (egy kicsit).
Át kell kapcsolnia a "Szöveg" módba. A activity_main -ben az űrlapon található összes elem leírásra kerül. Beleértve magát a formát is. És ez egyáltalán nem forma =).

Mivel játékot készítünk HTML5 formátumban, és itt csak egy csomagolóanyaggal rendelkezünk a játékhoz, töröljük az összes szöveget, és illesszük be a következőt:

Ha most visszavált a tervezésre, akkor másképp fog kinézni:

Amint láthatja, most a "Hello, World" helyett a teljes képernyős képernyő - WebView jelenik meg. Ez az objektum a mi ablakunk a játékvilághoz.

Akár futni is tudsz, hátha lesz fehér képernyő. Lépj tovább.

És akkor el kell mennünk a projektünkhöz, ehhez bal oldalon nyissa meg a "Projekt" mezőt, és válassza az "Android" fület, ha nincs kiválasztva:

Ez a lap a projekt felépítését, valamint az összes belső fájlt és erőforrást mutatja.

Spoiler fejléc

Meg kell találnunk a "manifest" fájlt, és hozzá kell adnunk az "alkalmazást" a definícióhoz következő sor:
android: hardwareAccelerated = "true"

Itt az ideje, hogy dolgozzunk a "böngészőnk" funkcionalitásán, mert ez az! Nyissa meg a "MainActivity.java" osztályt, és távolítsa el az összes felesleges dolgot, csak a főket hagyva:

Spoiler fejléc

Csomag com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity kiterjeszti az AppCompatActivity -t (@Orride protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Ha nem felejtette el, WebView -t vettünk fel a activity_main fájlba, ügyeljen a vastag betűvel kiemelt sorra:
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
android: id = "@ + id / webView"
android: kattintható = "igaz"
android: scrollbars = "nincs" />

Be kell jelentenünk a WebView osztály egyik objektumát.

Ehhez adja hozzá az importálási listához:

Import android.webkit.WebView;

És akkor deklaráljuk a myWeb objektumunkat a MainActivity osztályon belül:

Védett WebView myWeb;

Most, a sor után setContentView (R.layout.activity_main); illessze be a következő kódot:

/ * Keresse meg böngészőnket * / myWeb = (WebView) findViewById (R.id.webView); / * Állítsa be böngészőnket * / myWeb.getSettings (). SetUseWideViewPort (true); myWeb.setInitialScale (1); myWeb.getSettings (). setJavaScriptEnabled (true); / * Töltse be az oldalt */myWeb.loadUrl ("file: ///android_asset/index.html");

Ezt találtam a szerkesztőben:

És itt van az emulátor:

Ha te is ezt teszed - jó úton járunk!

Kevés tennivaló maradt:
Ahol betöltjük az oldalt a böngészőnkbe, a fájl elérési útja így néz ki: "file: ///android_asset/index.html"
Meg kell jegyezni, hogy bármilyen fájlt tárolhatunk a játékunkban, hozzáféréssel hozzájuk.

Esetünkben a kulcsmappa "android_asset", hozzuk létre (igen, alapértelmezés szerint nincs benne a projektben):
"Fájl -> Új -> Mappa -> Eszközök mappa", megnyílik egy ablak, ahol csak egyet kell értenie az IDE -vel.
Észrevetted? Egy új mappa jelent meg a projektben:

Kattintson rá a jobb egérgombbal -> "Megjelenítés fájlokban", megnyílik a rendszerfelfedező (esetemben a Nautilus), figyeljen a mappa elérési útjára. Ne feledje, hogy a mappát "eszközöknek" hívják, de az "android_asset" segítségével érhető el.

Ezután minden nagyon egyszerű - másolja a játékunkat az eszközök mappájába:

Az index.html fájl ugyanaz, mint a cikk eleje. Nos, próbáljuk meg futtatni!

Egy kis tanács: a legjobb, ha valódi eszközön tesztelünk USB -n keresztül, így egyértelműbbek lesznek a teszteredmények, és az egér vezérlése sem a legkényelmesebb lehetőség, nem is beszélve a több kattintásról.

3. lépés. Android Studio. Készítse el az alkalmazást, és írja alá

Amikor a játékot teljes mértékben hibakeresetted (a böngészőben vagy az emulátoron), a burkolat teljesen készen áll, és a fejlesztés minden szakasza véget ért, felépítheted az alkalmazást. Az Android Studio lehetővé teszi alkalmazások létrehozását és a kulcsokkal történő aláírást.

Kulcsok létrehozásához ez az IDE rendelkezik speciális segédprogram"Kulcseszköz".

Folytassuk az alkalmazás futtatható fájljának létrehozásával ("Build -> Aláírt APK létrehozása"):

Ha korábban nem hozott létre kulcsokat és álneveket, kattintson az "Új létrehozása" gombra
A mezőket saját belátása szerint töltheti ki, az adatok pontossága teljes mértékben Önt terheli.

Az első mező a mappa elérési útja, ahová a kulcsot elmenti.
Az OK gombra kattintás után az űrlap automatikusan kitöltődik:

A későbbi alkalmazásokhoz nem szükséges új kulcsokat létrehozni, más alkalmazásokat is aláírhat a kulcsával, pontosan erre szolgál a "Létező kiválasztása" gomb.
A következő lépésben az IDE megkéri, hogy írja be újra a jelszót, majd adja meg az APK fájl mentésére szolgáló mappát.
admin az Uncategorized címsorban. Könyvjelző.

Miután több napot egymás után (alvásszünet nélkül) tanulmányoztam az összes kedvenc Android -modulom HTML5 -támogatását, úgy döntöttem, hogy erre a témára figyelni kell. A cikkben lépésről lépésre megpróbálom elmagyarázni a HTML5 játékalkalmazás Androidra történő létrehozásának minden szakaszát (természetesen alap / kulcs / fő) az ötlettől az APK -fájl kiadásáig. Talán nem nyitok semmi újat a tiszteletreméltó fejlesztők előtt, de kezdőknek megpróbálok mindent a lehető legegyszerűbben leírni, képernyőképekkel és magyarázatokkal.

Meghívom azokat, akik többet szeretnének megtudni a macska alatt.

Ötlet

Általánosságban elmondható, hogy sokat beszélhet az Android lehetőségeiről, a HTML5 fejlesztéséről és azok interakciójáról. Nem fogom ezt tenni. Szóval, egyenesen a lényegre.

Valószínűleg több tízezer fejlesztő fejében és azokban, akik ilyennek tartják magukat, felmerül az ötlet, hogy létrehozzanak egy játékot Androidra. Nem vagyok kivétel.

Az egész folyamat több lépésre lesz bontva, és a végső alkalmazás két részből fog állni:
- Wrapper (ebben az esetben Androidra)
- A játék

1. lépés. Maga a játék megírása

A játék HTML5 -ben való írásának másik előnye, hogy a teszteléshez nincs szükség egy csomó futó programra, IDE -re, emulátorra stb. Mindössze egy böngészőre (esetemben ez a Chromium) és egy szövegszerkesztőre (BlueFish) van szüksége

A játék nem lesz nehéz: van egy kék téglalap és egy zöld téglalap. A játékos feladata, hogy a kék téglalapot a zöldre húzza, megkerülve a pirosat, amely tetszőleges irányban mozog a játéktér mentén.

A játék fejlesztéséhez a J2ds -t (játékmotort) fogom használni.

Kész játékkód:

index.html

Demo játék a J2ds v.0 -n

Figyelmen kívül hagyhatja a játékkód minőségét, mert nem ez a cikk célja. Bár természetesen tetszés szerint optimalizálhat, ez a folyamat általában végtelen.

2. lépés. Android Studio. Csomagolás készítése a játékhoz

Nem fogom senkivel mérni ennek vagy annak az IDE for Android fejlesztésének hűvösségét, de megmutatom az Android Studio használatával. A munkához szükségünk van:
- Java gép (az OpenJDK alkalmas a Linuxomra);
- Android Studio terjesztési készlet.

Töltse le, telepítse.

Ha minden telepítve van (ez a két program elég), indítsa el az Android Stúdiót.

Megnyílik a kezdőablak (ha az első indítás), ha nem az első, akkor az IDE megnyílik, de a lényegen nem változtat, menjünk az SDK -kezelőhöz:

Itt ki kell pipálnia azokat az Android verziókat, amelyekre szüksége lesz, amelyekkel dolgozni fog, az én esetemben ez az Android 4.4.2, választhat legalább egyszerre.

A lényeg az, hogy ki kell választania az "Eszközök" és az "Extrák" lehetőséget, és kattintson a "csomagok telepítése" gombra.

Töltse ki a szükséges mezőket, majd kattintson a Tovább gombra

Válassza ki a kívánt android verziót, majd kattintson a Tovább gombra

Itt kiválasztjuk az Üres tevékenységet (üres sablon Hello, világ!)

A következő ablakban töltse ki az osztályok létrehozásához szükséges adatokat, az egyértelműség kedvéért nem változtatok:

Ünnepélyesen megnyomjuk a Finich gombot, és várunk, amíg az IDE mindent konfigurál és előkészít a munkára.

Megnyílik egy űrlaptervező ablak. Nem ugyanaz, mint Lázárban, Delphiben, de valami hasonló még mindig elérhető:

Ne rohanjon semmit megváltoztatni vagy kattintani, a beállítás még nem ért véget. Nyissa meg a "Tolls-> Android-> AVD Manager" -t az emulátor konfigurálásához.

Itt, ha nincs semmi, kattintson a "Virtuális eszköz létrehozása" gombra, ha van, akkor nem tud újat létrehozni, már megvolt, mert "Megbotlottam", míg rájöttem. Ha új emulátort kell létrehoznia, akkor minden egyszerű:
1. Válassza ki a képernyő méretét és a telefon modelljét
2. Válassza ki az android verzióját (4.4.2 -es verzióm van)
3. Az eszköz konfigurálása.

A harmadik lépésben részletesebben:

T.K. a játék vízszintesen van nyújtva, ki kell választania a fekvő módot.

Ne csukja be ezt az ablakot, emuláció történik benne. Most visszatérhet a szerkesztőbe, és módosíthatja az űrlaptervező tájolását:

Futhatsz! Most mindenképpen lehetséges.

Ha a rendszer felszólítja az emulátor kiválasztására, akkor jelölje be az alábbi négyzetet:

Gratulálok! Minden működik, ellenőrizve!

Mivel játékot készítünk HTML5 formátumban, és itt csak egy csomagolóanyaggal rendelkezünk a játékhoz, töröljük az összes szöveget, és illesszük be a következőt:

Ha most visszavált a tervezésre, akkor másképp fog kinézni:

Amint láthatja, most a "Hello, World" helyett a teljes képernyős képernyő - WebView jelenik meg. Ez az objektum a mi ablakunk a játékvilághoz.

Akár futni is tudsz, hátha lesz fehér képernyő. Lépj tovább.

Ez a lap a projekt felépítését, valamint az összes belső fájlt és erőforrást mutatja.

Magyarázat

Meg kell találnunk a "manifest" fájlt, és hozzá kell adnunk a következő sort az "application" definícióhoz:
android: hardwareAccelerated = "true"

Itt az ideje, hogy dolgozzunk a "böngészőnk" funkcionalitásán, mert ez az! Nyissa meg a "MainActivity.java" osztályt, és távolítsa el az összes felesleges dolgot, csak a főket hagyva:

Magyarázat

csomag com.soft.skaner.demogamehtml5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity kiterjeszti az AppCompatActivity -t (@Orride protected void onCreate (Bundle savedInstanceState) (super.onCreate (saveInstanceState); setContentView (R.layout.activity_main);))

Be kell jelentenünk a WebView osztály egyik objektumát.

Ehhez adja hozzá az importálási listához:

Import android.webkit.WebView;
És akkor deklaráljuk a myWeb objektumunkat a MainActivity osztályon belül:

Védett WebView myWeb;
Most, a sor után setContentView (R.layout.activity_main); illessze be a következő kódot:

Ezt találtam a szerkesztőben:

És itt van az emulátor:

Ha te is ezt teszed - jó úton járunk!

Az index.html fájl ugyanaz, mint a cikk eleje. Nos, próbáljuk meg futtatni!

3. lépés. Android Studio. Készítse el az alkalmazást, és írja alá

Kulcsok létrehozásához ebben az IDE -ben van egy speciális "KeyTool" segédprogram.

Folytassuk az alkalmazás futtatható fájljának létrehozásával ("Build -> Aláírt APK létrehozása"):

Ha még nem hozott létre kulcsokat vagy álneveket, kattintson az „Új létrehozása” gombra. A mezőket saját belátása szerint töltheti ki, az adatok pontossága teljes mértékben Önt terheli.

Az első mező a mappa elérési útja, ahová a kulcsot elmenti. Az OK gombra kattintás után az űrlap automatikusan kitöltődik:

A későbbi alkalmazásokhoz nem szükséges új kulcsokat létrehozni, más alkalmazásokat is aláírhat a kulcsával, ezért van egy "Válassza ki a meglévőt" gomb.

A következő lépésben az IDE megkéri, hogy írja be újra a jelszót, majd adja meg az APK fájl mentésére szolgáló mappát.