Hvordan få et HTML5 Spill App-Ready

February 25  by Eliza

Selvfølgelig, dine HTML5-spill er virkelig nettsider, men du kommer til å gjøre dem arbeide på en måte som også gjør dem opptre som apps. Du må gjøre et par ting. Du kan legge til et ikon i spillet slik at det vises på skrivebordet, kan du endre størrelsen slik at spillet tar opp hele skjermen, og du kan ha spillet lagret offline.

Administrere gameâ € ™ s skjermstørrelse

Det første du må vurdere er skjermstørrelsen. Dette er en enkel ting å forandre seg, men det kan ha store implikasjoner i spillet ditt. Et spill som fungerer fint på en størrelse kan være mye enklere eller vanskeligere i en annen størrelse. Du kan endre størrelse og plassering av spillet med scene objektets setSize () og setPos () funksjoner.

Hvordan få et HTML5 Spill App-Ready


Generelt, vil du finne 1024 x 768 og 800 x 600 for å være de mest brukte skjermstørrelser. Det er fornuftig å gå litt mindre enn disse resolusjonene. Selvfølgelig, hvis du har en bestemt enhet du ønsker å programmere for, kan du ganske enkelt størrelse programmet direkte til enheten.

Når du vet den størrelsen du ønsker, kan du bare bruke Scene objektets setSize () metode for å endre skjermen til hvilken størrelse du foretrekker.

Husk at for mange spill, endre skjermstørrelsen vil faktisk endre gameplay. Dessuten vil de fleste innspill skje på selve skjermen, så tenk på hvor stor tommelen er, og prøve å designe spillet ditt slik at brukerens fingre ikke dekker noe som skjer på skjermen.

Hvordan lage spillet ditt ser ut som en app

Det er et par fantastiske triks du kan gjøre for IOS brukere. Du kan designe ditt spill, slik at brukeren kan legge til et ikon direkte til skrivebordet. Brukeren kan deretter starte spillet som alle andre app. Du kan også gjøre nettleseren skjule vanlig nettleser gevanter så spillet ser ikke ut som den kjører i en nettleser!

Det viser seg at begge disse effektene er ganske lett å oppnå. Moderne versjoner av IOS allerede har evnen til å lagre en nettside på skrivebordet. Bare se websiden i Safari og klikk på knappen Del. Du vil finne et alternativ for å lagre nettsiden til skrivebordet.

Imidlertid er standardikonet for en lagret app ganske stygg. Hvis du ønsker en pen ikonet, kan du spare et lite bilde fra spillet som en .png fil og legg den i samme mappe som spillet ditt. Deretter kan du legge denne linjen til siden din (i overskriften), og at bildet vil vises på skrivebordet når brukeren lagrer spillet ditt:

<Link rel = "eple-touch-ikonet" href = "plane.png" />

Som en ekstra bonus, vil iPhone og iPad automatisk justere bildet for å se ut som en Apple-ikonet, og legger en glassaktig effekt og avrundede hjørner.

Hvordan få et HTML5 Spill App-Ready

Hvordan fjerne Safari-verktøylinjen fra spillet skjermen

Selv om spillet ser bra ut fra hovedskjermen, når brukeren klikker på spillet, er det likevel tydelig at spillet er en del av nettleseren. Du kan enkelt skjule verktøylinjen med en annen linje i overskriften leseren:

<Meta name = "eple-mobile-web-app-stand" content = "ja" />

Denne koden vil ikke gjøre noe annerledes med mindre spillet kalles fra skrivebordet. Men i så fall skjuler det verktøylinjen, noe som gjør spillet ser og føler meg som en fullverdig app. Som en ekstra bonus, går dette spillet i fullskjermmodus, noe som gir deg litt mer rom for gameplay.

Hvordan få et HTML5 Spill App-Ready


Igjen, dette er en Apple-spesifikk løsning. Det er ikke en enkel måte å oppnå samme effekt på Android-enheter.

Hvordan du lagrer spillet offline

Nå spillet ser mye ut som en app, bortsett fra at det går bare når du er koblet til Internett. HTML5 har en fantastisk funksjon som lar deg lagre en hel nettside lokalt første gang det kjøres. Så, hvis brukeren prøver å få tilgang til spillet, og systemet kan ikke komme på nett, er den lokale kopien av spillet kjøres i stedet.

Dette er en relativt enkel effekt for å oppnå:

  1. Gjøre spillet stabil.

    Før du kan bruke offline lagring mekanisme, vil du ønsker å sørge for at spillet ditt er nær å slippe klar. Som et minimum, må du være sikker på at du kjenner alle de eksterne filer som trengs av spillet.

  2. Bygge en cache.manifest fil.

    Se på katalogen som inneholder spillet ditt, og opprette en ny tekstfil kalt cache.manifest.

  3. Skriv den første linjen.

    Den første linjen i cache.manifest filen skal inneholde bare teksten CACHE MANIFEST.

  4. Lag en liste over alle filene i katalogen.

    Skriv inn navnet på alle filene i katalogen, én fil per linje. Vær forsiktig med store bokstaver og staving.

  5. Legg manifest attributtet.

    <Html> -taggen har en ny egenskap kalt manifest. Bruk dette for å beskrive til serveren der cachen manifest kan være funnet:

    <Html lang = "no"
    manifest = "cache.manifest">

  6. Laste siden som normalt.

    Du må laste inn nettsiden gang på vanlig måte. Hvis alt er satt opp riktig, vil nettleseren stille lage en kopi av filen.

  7. Test offline.

    Den beste måten å teste offline lagring er å midlertidig slå av trådløs tilgang på din maskin, og deretter prøve å få tilgang til filen. Hvis ting fungerte, vil du være i stand til å se siden din som om du var fortsatt online.

  8. Sjekk serverinnstillingene.

    Hvis offline lagring ikke fungerer, kan det hende du må sjekke med din server administrasjon. Teksten / manifest MIME-type må konfigureres på serveren. Du må kanskje be din server administrator å sette dette alternativet i .htaccess filen for kontoen:

AddType tekst / cache-manifest .manifest