Žaidimai programėlėje: HTML5 žaidimo paleidimas WebView

Norint pridėti žaidimus į programėlę, jai nereikia žaidimų variklio. Reikia WebView: komponento, kurį Android ir iOS pateikia žiniatinklio turiniui rodyti vietiniame ekrane. Į programėlės paketą arba į savo HTTPS serverį įdedate paruoštą HTML5 žaidimo aplanką, WebView nukreipiate į jo index.html, ir programėlė įgyja žaidimų skyrių, veikiantį tuo pačiu kodu kaip naršyklės versija.

Šis gidas skirtas komandoms, kurios jau turi programėlę (mažmenininkų, banko, mokyklos platformos, klubo ar medijų prekės ženklo) ir nori žaidimų kaip funkcijos, o ne naujos programėlės parduotuvėje. Jame aptariama, kaip pasirinkti vietinius ar talpinamus failus, kokie WebView nustatymai sugadina žaidimus, kaip išsaugoti progresą, grįžimo mygtukas, kurie mūsų šablonai tinka ir kaip licencija skaičiuoja programėles. Platformų detales paėmėme iš Android Developers ir Apple Developer dokumentacijos, perskaitytos 2026 m. spalio 30 d.

Žaidimai programėlėje: kaip veikia WebView kelias

WebView – tai naršyklės variklis be pačios naršyklės. Jūsų vietinis kodas jį sukuria, nusprendžia jo dydį ir nustatymus bei nurodo, ką įkelti. Android klasė vadinasi WebView, iOS – WKWebView. HTML5 žaidimas nesiskiria: jis mato puslapį, drobę (canvas) ir saugyklą taip, kaip Chrome ar Safari.

Todėl šis kelias populiarus programėlių žaidimams. Žaidimų komanda dirba HTML, CSS ir JavaScript, programėlių komanda prideda vieną ekraną ir kelis nustatymus, o tas pats žaidimo aplankas gali būti ir svetainėje. Planuojant reikia trijų dalykų:

1. Kur gyvena failai: įpakuoti programėlės viduje arba talpinami jūsų HTTPS serveryje.
2. Kaip sukonfigūruotas WebView: JavaScript, saugykla, adresas, iš kurio žaidimas paleidžiamas.
3. Kaip žaidimas ir programėlė bendrauja: atidarymas, pristabdymas, grįžimo mygtukas, uždarymas.

Mūsų šablonai tinka šiai schemai, nes kiekvienas jų turi paruoštą game/ aplanką su index.html, skirtą statiniam talpinimui, be PHP ar duomenų bazės paties žaidimo veikimui. Nė vienas jų neapima vietinės dalies: kiekvienas leidimas vietines programėles ar parduotuvių versijas nurodo skyrelyje „Šiame leidime neįtraukta“, todėl WebView ekraną kuria jūsų komanda arba tai yra atskirai pasiūlomas darbas.

Peržiūrėkite HTML5 žaidimų šablonus

Vietinis ar talpinamas: kur turi gyventi žaidimo failai

Vietinis: žaidimas pristatomas kartu su programėle

Android vadove apie turinio įkėlimą nurodoma, kad į programėlę įkompiliuotam žiniatinklio turiniui nereikia interneto ryšio ir nenaudoja vartotojo duomenų srauto. Žaidimo aplanką game/ nukopijuojate į programėlės assets ir įkeliate iš ten. Kaina – dydis: žaidimas padidina atsisiuntimą, o kiekvienas žaidimo atnaujinimas reiškia naują programėlės leidimą per parduotuvės peržiūrą.

Talpinamas: programėlė įkelia žaidimą iš jūsų serverio

WebView atidaro HTTPS adresą jūsų domene. Žaidimą galite atnaujinti be naujo programėlės leidimo, o pati programėlė lieka maža. Kaina – žaidimui reikia ryšio, o lėtas tinklas reiškia lėtą pirmą įkėlimą.

Apple čia turi konkrečią taisyklę. App Review Guidelines 4.7 punktas taikomas HTML5 ir JavaScript mini žaidimams, kurie nėra įdėti į dvejetainį failą. Tarp sąlygų programėlė negali išplėsti ar atskleisti vietinių platformos API tam programinės įrangos kodui be Apple leidimo, ir ji turi pateikti siūlomos programinės įrangos indeksą su universaliomis nuorodomis. Prieš rinkdamiesi talpinamą kelią iOS platformai, perskaitykite 4.7 visą.

• Programėlės dydis: vietinis prideda žaidimo svorį; talpinamas beveik nieko nepridės.
• Atnaujinimai: vietiniam reikia programėlės leidimo; talpinamas keičiasi, kai įkeliate.
• Ryšys: vietinis gali startuoti be tinklo įdiegus; talpinamam reikia ryšio.
• Peržiūra: vietiniai žaidimai peržiūrimi kaip programėlės dalis; talpinami iOS žaidimai patenka po 4.7 punktu.

Android WebView nustatymai, kurie lemia, ar žaidimas veiks

Dauguma pranešimų apie „baltą ekraną“ kyla dėl trijų numatytųjų nustatymų. Visi trys dokumentuoti Android Developers.

1. JavaScript išjungtas. WebView vadove nurodyta, kad JavaScript WebView pagal numatymą išjungtas. Kiekvienas HTML5 žaidimas jo reikalauja, todėl įjunkite WebSettings.
2. Saugykla išjungta. WebSettings nuorodoje nurodyta, kad setDomStorageEnabled numatytoji reikšmė yra false. Žaidimams, kurie progresą saugo localStorage, jos reikia, kitaip kiekviena sesija prasidės nuo nulio.
3. file:// yra neteisingas adresas. Android turinio programėlėje vadove paaiškinta, kad file:// URL yra neskaidrios kilmės ir negali naudoti tokių API kaip fetch() ar XMLHttpRequest, o failų prieigos apėjimų įjungti nerekomenduojama. Mūsų prekių puslapiai žaidimo pusėje sako tą patį: leidimai, pavyzdžiui, Gridspark ir Twirldrop, neveikia iš file://.

Trečiojo taško sprendimas – WebViewAssetLoader iš AndroidX Webkit bibliotekos. Jis pateikia failus iš programėlės assets per HTTPS adresą, o Android pavyzdyje įkeliamas https://appassets.androidplatform.net/assets/index.html. Žaidimui tai atrodo kaip įprasta svetainė, todėl ES moduliai, fetch ir saugykla veikia taip, kaip jūsų serveryje.

iOS: WKWebView, vietiniai failai ir duomenų saugykla

iOS komponentas yra WKWebView. Apple dokumentuoja loadFileURL(_:allowingReadAccessTo:) vietiniam turiniui: antrasis argumentas yra failas ar aplankas, kurį WebKit gali skaityti, o aplanko nurodymas leidžia puslapiui įkelti aplinkui esančius failus.

Kadangi mūsų leidimai nepalaiko atidarymo iš file://, tą kelią tikrinkite atsargiai arba jo atsisakykite. Apple taip pat siūlo WKURLSchemeHandler – protokolą ištekliams su URL schemomis, kurių WebKit nevaldo, todėl jūsų programėlė gali aptarnauti žaidimo aplanką pagal savo schemą. Capacitor tai daro už jus: jo numatytoji iOS schema yra capacitor.

Saugykla gyvena WKWebsiteDataStore. Apple puslapyje nurodyta, kad numatytoji saugykla svetainės duomenis nuolat saugo diske, o ne nuolatinė saugykla laiko duomenis tik atmintyje, ir tai skirta privačiam naršymui. Jei kas nors jūsų komandoje nustato ne nuolatinę saugyklą, žaidėjai praranda progresą kiekvieną kartą, kai programėlė uždaroma.

iOS neturi sisteminio grįžimo mygtuko, todėl žaidimų ekranui reikia savo išėjimo: uždarymo mygtuko vietinėje juostoje arba tokio, kurį žaidimas iškviečia per žinučių tvarkyklę.

Progreso išsaugojimas programėlėje

Mūsų žaidimai išsaugo progresą žaidėjo naršyklės saugykloje, o ne serveryje. Solitaire Links ir Deepforge puslapiuose tai pasakyta aiškiai: progresas laikomas localStorage, be paskyros ir debesies sinchronizacijos. Programėlėje tai reiškia tris pasekmes.

• Adresas yra išsaugojimo dalis. Naršyklės saugykla priklauso kilmei (origin). Jei pereinate iš vienos schemos ar pagrindinio kompiuterio į kitą, pavyzdžiui, iš testinio domeno į appassets.androidplatform.net, žaidėjai pradeda iš naujo. Adresą nustatykite vieną kartą.
• Išsaugojimo raktas yra išsaugojimo dalis. Tenguin prekės puslapis nurodo pirkėjams, kad gyvame žaidime išsaugojimo raktas turi likti nepakitęs, kitaip žaidėjai praras progresą. Kai kurie TypeScript leidimai saugojimo raktą laiko brand.ts. Keiskite tyčia, prieš paleidimą, niekada po jo.
• Išvalius programėlės duomenis, išvalomas ir žaidimas. Pašalinus programėlę ar išvalius jos saugyklą, išsaugojimas dingsta, kaip ir išvalius naršyklę.

Jei progresas turi sekti vartotoją įvairiuose įrenginiuose, tai serverio funkcija, kurios nė vienas mūsų leidimas neapima. Kiekvienas leidimas debesies išsaugojimus ar paskyras nurodo kaip neįtrauktus. Deepforge yra draugiškiausia pradžia: jo puslapyje aprašytas išsaugojimo eksportas ir importas meniu bei nedidelis window.DeepForge API, leidžiantis priglobusiam puslapiui pristabdyti, tęsti, nuskaityti išsaugojimą ir klausytis išsaugojimo įvykių.

Žr. Deepforge ir jo priglobusio puslapio API

Grįžimo mygtukas, pristabdymas ir išėjimas iš žaidimo

HTML5 žaidimai paprastai yra vienas puslapis. Tai svarbu Android, kur grįžimo mygtukas naršo WebView istoriją. Android WebView vadove parodytas šablonas: tikrinate canGoBack() ir kviečiate goBack() arba paliekate sistemai apdoroti įvykį; su AndroidX tą pačią logiką registruojate OnBackPressedDispatcher. Vieno puslapio žaidime istorija dažnai tuščia, todėl grįžimas iš karto uždaro žaidimų ekraną vidury lygio.

Nuspręskite, ką turi daryti grįžimas, ir užsirašykite:

• Pirmas paspaudimas atidaro žaidimo pauzės meniu; antras paspaudimas palieka žaidimų ekraną.
• Arba grįžimas visada išeina, po to kai žaidimas išsaugojo. Kiekvienas leidimas saugo vietoje, bet patikrinkite, kada jis įrašo: lygio pabaigoje ar žaidimo metu.
• Kai programėlė pereina į foną, pristabdykite žaidimą. Be pauzės laikmačiai veiks už jūsų programėlės kitų ekranų.

Mūsų leidimai nesiūlo programėlės tilto. Kai kurie siūlo įėjimą iš puslapio: Gridspark ir Ricopop turi pradžios ekraną bei viso ekrano mygtuką, kurį įjungiate ar išjungiate konfigūracijos faile, o Deepforge atskleidžia pristabdymą ir tęsimą puslapiui. Viskas kita, pavyzdžiui, žinutė vietiniam kodui, kai lygis baigiasi, yra nedidelis pakeitimas šaltinyje, kurį prideda jūsų komanda arba atskirai pasiūlytas darbas.

Žr. Gridspark: paprastas JavaScript be kūrimo žingsnio žaisti

Licencija: vienas žaidimas, viena programėlė ir ką klausti pirmiausia

Mūsų sąlygos suteikia neribotos trukmės, neišimtinę licenciją naudoti leidimą viename galutiniame produkte – jums arba vienam klientui. Jūsų programėlė su žaidimų skyriumi ir yra tas galutinis produktas. Žaidėjai gali naudotis nemokamai arba per reklamų monetizavimą. Galite keisti kodą, meną ir garsą, o white label leidžiamas: jūsų prekės ženklas pakeičia mūsų.

Trys situacijos reikalauja išsamesnio žvilgsnio.

• Kelios programėlės. Agentūra, kuri tą patį žaidimą įdeda į tris klientų programėles, turi tris licencijas. Kelių šablonų užsakymas suteikia paketo nuolaidą: 5% už 2, 10% už 3, 15% už 4 ir 20% už 5 ar daugiau.
• Android ir iOS versijos tos pačios programėlės. Viena licencija leidžia paskelbti tą žaidimą, kur norite, įskaitant Google Play ir App Store. Vis tiek viena licencija vienam galutiniam produktui.
• Žaidimų SDK kitiems kūrėjams. Sąlygos draudžia platinti šabloną ar jo kodą kitame produkte, skirtame kūrėjams. Žaidimų modulis, kurį parduodate kitiems programėlių kūrėjams, yra tokio tipo produktas.

Jei jūsų programėlė už žaidimų skyrių ima mokestį arba parduoda jame daiktus, taip pat paklauskite mūsų. Sąlygose nurodytas nemokamas prieigos ir reklamų monetizavimas, o kelių leidimų sąraše pirkimai už realius pinigus nurodyti kaip neįtraukti. iOS platformoje 3.1.1 punktas nurodo, kad funkcijų ar turinio, įskaitant žaidimų lygius, atrakinimas turi vykti per programėlės pirkimą.

Licencijos, sąskaitos ir pasiūlymai įmonėms

Dažnai užduodami klausimai

Ar galiu įdėti HTML5 žaidimą į Android ar iOS programėlę?

Taip. Įkelkite žaidimo aplanką WebView (Android – WebView, iOS – WKWebView), arba įpakuotą su programėle, arba iš savo HTTPS serverio. Įjunkite JavaScript ir saugyklą bei tiekite failus iš HTTPS tipo adreso, o ne iš file://.

Ar žaidimai programėlėje veikia be interneto?

Tik jei įpakuojate failus ir leidimas nieko nekrauna iš tinklo. Keli mūsų leidimai laiko meną, garsą ir šriftus vietoje; Ricopop puslapyje nurodyta, kad jam reikia ryšio. Patikrinkite lėktuvo režimu, prieš tai žadėdami.

Ar žaidėjai neteks progreso, kai atnaujinsiu programėlę?

Ne, jei adresas ir išsaugojimo raktas lieka tokie patys. Išsaugojimai laikomi WebView saugykloje tai kilmei. Pakeitus schemą, pagrindinį kompiuterį ar saugojimo raktą visi pradeda nuo nulio.

Kiek licencijų man reikia savo programėlei?

Po vieną vienam galutiniam produktui. Viena programėlė su vienu žaidimu – viena licencija; tas pats žaidimas trijų klientų programėlėse – trys. Ta pati programėlė Google Play ir App Store antros licencijos nereikalauja: galite paskelbti licencijuotą žaidimą kur norite.

Kitas žingsnis

Pasirinkite žaidimą, išbandykite jo demo telefone, tada perskaitykite jo sąrašą „Šiame leidime neįtraukta“ ir vadovo skyrių apie išsaugojimus. Jei norėtumėte, kad žaidimų ekraną į jūsų programėlę įdiegtume patys, atsiųskite programėlę, platformas ir mėgstamą žaidimą, o mes atsakysime su apimtimi, kaina ir terminais.

Peržiūrėkite visus žaidimų šablonus

Prašykite pasiūlymo programėlės integracijai