Mängud rakendusse: HTML5-mängu käitamine WebView-s

Mängude lisamiseks rakendusse ei pea rakendusse panema mängumootorit. Vajad WebView-d: komponenti, mille Android ja iOS pakuvad veebisisu näitamiseks natiivses ekraanis. Paned valmis HTML5-mängu kausta kas rakenduse paketti või oma HTTPS-serverisse, suunad WebView-d selle index.html-ile ja rakendus saab mängude jaotise, mis töötab samal koodil nagu brauseriversioon.

See juhend on mõeldud meeskondadele, kellel on juba rakendus (jaemüügi-, panga-, koolikeskkonna-, klubi- või meediabränd) ja kes soovivad mänge funktsioonina, mitte uue rakendusena poes. Juhend käsitleb valikut kohalike ja hostitud failide vahel, WebView seadeid, mis mängud katki teevad, edenemise salvestamist, tagasinuppu, mõnda meie malli, mis sobivad, ning seda, kuidas litsents rakendusi loeb. Platvormi üksikasjad pärinevad Android Developersi ja Apple Developeri dokumentatsioonist, loetud 30. oktoobril 2026.

Mängud rakendusse: kuidas WebView-tee töötab

WebView on brauserimootor ilma brauserita. Sinu natiivkood loob selle, otsustab selle suuruse ja seaded ning ütleb, mida laadida. Androidil on klass WebView; iOS-il WKWebView. HTML5-mäng ei tea vahet: ta näeb lehte, canvast ja salvestusruumi nii, nagu Chrome või Safari.

Sellepärast on see tee rakenduse mängude jaoks populaarne. Mängumeeskond töötab HTML-i, CSS-i ja JavaScriptiga, rakenduse meeskond lisab ühe ekraani ja mõned seaded ning sama mängukaust võib elada ka veebilehel. Planeerida tuleb kolme liikuvat osa:

1. Kus failid asuvad: rakenduse sisse pakitud või teie HTTPS-serverist serveeritud.
2. Kuidas WebView on seadistatud: JavaScript, salvestusruum, aadress, millest mäng käivitub.
3. Kuidas mäng ja rakendus omavahel suhtlevad: avamine, pausimine, tagasinupp, sulgemine.

Meie mallid sobivad sellisele kujule, sest igaüks neist sisaldab valmis game/ kausta index.html-iga, mis on mõeldud staatiliseks hostimiseks, ilma PHP-ta või andmebaasita mängu enda jaoks. Miski neist ei sisalda natiivosa. Iga väljaanne loetleb natiivrakendused või rakenduste poe versioonid jaotises „Selles väljaandes ei sisaldu“, seega WebView-ekraan on sinu meeskonna töö või eraldi pakutav teenus.

Vaata HTML5-mängumalle

Kohalik või hostitud: kus mängufailid peaksid asuma

Kohalik: mäng on rakenduse sees

Androidi juhend rakenduse sisu laadimise kohta ütleb, et rakendusse pakitud veebisisu ei vaja internetiühendust ega kasuta kasutaja andmemahtu. Kopeerid game/ kausta rakenduse assets-kausta ja laed sealt. Hind on suurus: mäng lisandub allalaadimisele ja iga mängu uuendus tähendab uut rakendusversiooni läbi poe ülevaatuse.

Hostitud: rakendus laeb mängu sinu serverist

WebView avab sinu oma domeeni HTTPS-aadressi. Mängu saab uuendada ilma uue rakenduse ehituseta ja rakendus jääb väikeseks. Hind on see, et mäng vajab ühendust ja aeglane võrk ilmneb aeglase esmase laadimisena.

Apple'il on siin konkreetne reegel. App Review Guidelines punkt 4.7 käsitleb HTML5- ja JavaScripti minimänge, mis ei ole rakenduse binaarfailis. Selle tingimuste hulgas on, et rakendus ei tohi laiendada ega avaldada natiivseid platvormi API-sid sellisele tarkvarale ilma Apple'i loata, ning ta peab esitama pakutava tarkvara loendi universaallinkidega. Loe punkt 4.7 täielikult läbi, enne kui iOS-i jaoks hostitud tee valid.

• Rakenduse suurus: kohalik lisab mängu kaalu; hostitud lisab peaaegu midagi.
• Uuendused: kohalik vajab rakenduse väljaannet; hostitud muutub, kui üles laadid.
• Ühendus: kohalik võib pärast installimist alata ilma võrguta; hostitud vajab seda.
• Ülevaatus: kohalikke mänge vaadatakse üle rakenduse osana; hostitud mänge iOS-il reguleerib punkt 4.7.

Android WebView seaded, mis mängu teevad või rikuvad

Enamik teateid „mäng näitab valget ekraani“ tuleb kolmest vaikeseadest. Kõik kolm on dokumenteeritud Android Developersis.

1. JavaScript on väljas. WebView juhend ütleb, et JavaScript on WebView-s vaikimisi keelatud. Iga HTML5-mäng vajab seda, seega luba see WebSettings-is.
2. Salvestusruum on väljas. WebSettings-i viide ütleb, et setDomStorageEnabled vaikeväärtus on false. Mängud, mis hoiavad edenemist localStorage'is, vajavad seda sisse lülitatult, muidu alustab iga seanss nullist.
3. file:// on vale aadress. Androidi rakenduse sisu juhend selgitab, et file:// URL-id on läbipaistmatud päritolud, mis ei saa kasutada API-sid nagu fetch() või XMLHttpRequest, ning soovitab mitte lülitada sisse failijuurdepääsu lahendusi. Meie tootelehed ütlevad sama mängu poolelt: näiteks Gridspark ja Twirldrop ei käivitu file:// kaudu.

Kolmanda punkti parandus on WebViewAssetLoader AndroidX Webkiti teegist. See serveerib faile sinu rakenduse assets-kaustast HTTPS-aadressil, ja Androidi enda näide laeb https://appassets.androidplatform.net/assets/index.html. Mängule näeb see välja nagu tavaline veebileht, nii et ES-moodulid, fetch ja salvestus käituvad nii nagu sinu serveril.

iOS: WKWebView, kohalikud failid ja andmeladu

iOS-il on komponent WKWebView. Apple dokumenteerib loadFileURL(_:allowingReadAccessTo:) kohaliku sisu jaoks: teine argument on fail või kaust, mida WebKit tohib lugeda, ja kausta andmine lubab lehel laadida selle ümber olevaid faile.

Kuna meie väljaanded ei toeta avamist file:// kaudu, testi see tee hoolikalt või jäta vahele. Apple pakub ka WKURLSchemeHandler'it, protokolli ressursside laadimiseks URL-skeemidega, mida WebKit ise ei käsitle, nii et su rakendus saab serveerida mängukausta oma skeemi all. Capacitor teeb selle sinu eest: tema vaikimisi iOS-skeem on capacitor.

Salvestused elavad WKWebsiteDataStore'is. Apple'i lehe järgi salvestab vaikimisi andmeladu veebisaidi andmed püsivalt kettale ning mittepüsiv ladu hoiab andmeid ainult mälus, mis on mõeldud privaatseks sirvimiseks. Kui keegi sinu meeskonnast seab mittepüsiva lao, kaotavad mängijad oma edenemise iga kord, kui rakendus sulgub.

iOS-il ei ole süsteemset tagasinuppu, seega mängude ekraanil peab olema oma väljapääs: sulgemisnupp sinu natiivses ribas või nupp, mille mäng kutsub välja sõnumikäsitleja kaudu.

Edenemise salvestamine rakenduses

Meie mängud salvestavad mängija brauseri salvestusruumi, mitte serverisse. Solitaire Links ja Deepforge ütlevad seda oma lehtedel otse: edenemine hoitakse localStorage'is, ilma kontota ja pilvesünkronita. Rakenduse sees on sellel kolm tagajärge.

• Aadress on osa salvestusest. Brauseri salvestusruum kuulub päritolule. Kui liigud ühelt skeemilt või hostilt teisele, näiteks testdomeenilt appassets.androidplatform.net-ile, alustavad mängijad uuesti. Vali aadress üks kord.
• Salvestusvõti on osa salvestusest. Tenguini tootelehel palutakse ostjatel jätta salvestusvõti elavas mängus muutmata, muidu mängijad kaotavad edenemise. Mitmed TypeScripti väljaanded hoiavad salvestusvõtit brand.ts-is. Muuda seda tahtlikult enne käivitamist, mitte kunagi pärast.
• Rakenduse andmete tühjendamine tühjendab mängu. Rakenduse desinstallimine või salvestusruumi tühjendamine eemaldab salvestuse, nagu tühjendab seda ka brauser.

Kui edenemine peab mängijaga seadmete vahel kaasas käima, on see serveri funktsioon, mida ükski meie väljaanne ei sisalda. Iga väljaanne loetleb pilvesalvestused või kontod mittekaasatuna. Deepforge on kõige sõbralikum alguspunkt: selle lehel kirjeldatakse salvestuse eksportimist ja importimist menüüs ning väikest window.DeepForge API-t, mis lubab hostlehel mängu pausida, jätkata, salvestust lugeda ja salvestussündmusi kuulata.

Vaata Deepforge'i ja selle hostlehe API-d

Tagasinupp, pausimine ja mängust lahkumine

HTML5-mängud on tavaliselt ühe lehe pikkused. See on oluline Androidil, kus tagasinupp käib läbi WebView ajaloo. Androidi WebView juhend näitab mustrit: kontrolli canGoBack() ja kutsu goBack(), või lase süsteemil sündmus käsitleda; AndroidX-iga registreerid sama loogika OnBackPressedDispatcher'is. Ühe lehe mängus on ajalugu sageli tühi, seega tagasinupp sulgeb sinu mängude ekraani kohe, keset taset.

Otsusta, mida tagasi peaks tegema, ja kirjuta see üles:

• Esimene vajutus avab mängu pausimenüü; teine vajutus lahkub mängude ekraanilt.
• Või tagasi lahkub alati pärast mängu salvestamist. Iga väljaanne salvestab kohapeal, kuid kontrolli, millal see kirjutab: taseme lõpus või mängu ajal.
• Kui rakendus läheb taustale, pausi mäng. Ilma pausita jooksevad taimerid su rakenduse teiste ekraanide taga edasi.

Meie väljaannetega ei tule kaasa rakenduse sildu. Mõned pakuvad siiski sisenemisteed lehelt: Gridspark ja Ricopop'il on puutega alustamise ekraan ja täisekraani nupp, mida lülitad konfiguratsioonifailis sisse või välja, ning Deepforge avab pausi ja jätkamise lehele. Kõik muu, näiteks sõnum natiivkoodile taseme lõppedes, on väike muudatus lähtekoodis, mille lisab sinu meeskond või eraldi tellitud töö.

Vaata Gridsparki: lihtne JavaScript, mida mängida ilma ehitussammuta

Litsents: üks mäng, üks rakendus ja mida enne küsida

Meie tingimused annavad igavese, mitteeksklusiivse litsentsi väljaande kasutamiseks ühes lõpptootes, sinu või ühe kliendi jaoks. Sinu rakendus oma mängude jaotisega on see lõpptoode. Mängijad võivad pääseda sellele tasuta või reklaamidest teenides. Võid koodi, graafikat ja heli muuta ning white label on lubatud: sinu bränd asendab meie oma.

Kolm olukorda vajavad lähemat vaatlust.

• Mitu rakendust. Agentuur, kes paneb sama mängu kolme kliendi rakendusse, vajab kolme litsentsi. Mitme malli ostmine ühes tellimuses annab komplektisoodustuse: 5% kahe eest, 10% kolme eest, 15% nelja eest ja 20% viie või enama eest.
• Sama rakenduse Android- ja iOS-versioon. Üks litsents lubab avaldada selle mängu kuhu tahad, sealhulgas Google Plays ja App Store'is. See jääb üheks litsentsiks lõpptoote kohta.
• Mängude SDK arendajatele. Tingimused keelavad malli või selle koodi edasijagamise teises tootes, mis on mõeldud arendajatele. Mängumoodul, mida müüd teistele rakendusearendajatele, on just sellist tüüpi toode.

Kui su rakendus küsib raha mängude jaotise eest või müüb seal esemeid, küsi meilt ka enne. Tingimused nimetavad tasuta juurdepääsu ja reklaamitulu ning mitmed väljaanded loetlevad päris rahaga oste mittekaasatuna. iOS-il ütleb punkt 3.1.1, et funktsioonide või sisu, sealhulgas mängutasemete avamine peab käima rakendusesisese ostuna.

Litsentsid, arved ja pakkumised ettevõtetele

Korduma kippuvad küsimused

Kas HTML5-mängu saab panna Androidi või iOS-i rakendusse?

Jah. Laadi mängukaust WebView-sse (Androidil WebView, iOS-il WKWebView), kas koos rakendusega paketina või sinu HTTPS-serverist. Lülita sisse JavaScript ja salvestusruum ning serveeri failid HTTPS-stiilis aadressilt, mitte file:// kaudu.

Kas mängud töötavad rakenduses võrguühenduseta?

Ainult siis, kui pakid failid kaasa ja väljaanne ei laadi midagi võrgust. Mitmed meie väljaanded hoiavad graafikat, heli ja fonte kohapeal; Ricopopi leht ütleb, et see vajab ühendust. Testi lennurežiimis, enne kui seda lubad.

Kas mängijad kaotavad edenemise, kui uuendan rakendust?

Ei, kui aadress ja salvestusvõti jäävad samaks. Salvestused elavad WebView salvestusruumis selle päritolu jaoks. Skeemi, hosti või salvestusvõtme muutmine paneb kõik nullist alustama.

Mitu litsentsi ma oma rakenduse jaoks vajan?

Üks iga lõpptoote kohta. Üks rakendus ühe mänguga on üks litsents; sama mäng kolme kliendi rakendustes on kolm. Sama rakendus Google Plays ja App Store'is ei vaja teist litsentsi: võid litsentseeritud mängu avaldada kuhu tahad.

Järgmine samm

Vali mäng, mängi demot telefonil, loe siis selle nimekiri „Selles väljaandes ei sisaldu“ ja juhendi peatükk salvestustest. Kui eelistad, et ehitame mängude ekraani sinu rakendusse, saada meile rakendus, platvormid ja mäng, mis sulle meeldib, ning vastame ulatuse, hinna ja ajakavaga.

Vaata kõiki mängumalle

Küsi rakenduse integratsiooni pakkumist