Wie Sie Ihren HTML5 Spiel App-Ready

Natürlich sind auch die HTML5-Spiele wirklich Web-Seiten, aber du wirst sie in einer Weise funktioniert, die macht sie auch wie Anwendungen handeln. Sie müssen ein paar Dinge zu tun. Sie können ein Symbol, um Ihr Spiel hinzufügen, damit es auf dem Desktop angezeigt wird, können Sie die Größe ändern, damit das Spiel um den gesamten Bildschirm einnimmt, und Sie können Ihr Spiel offline gespeichert haben.

Verwalten Sie die Bildschirmgröße des Spiels

Das erste, was zu prüfen ist, die Bildschirmgröße. Dies ist eine einfache Sache zu ändern, aber es kann große Auswirkungen auf Ihr Spiel haben. Ein Spiel, das bei einer Größe kann viel einfacher oder schwieriger sein, in einer anderen Größe gut funktioniert. Sie können die Größe und die Position des Spiels zu ändern mit der Szene Objekt setSize () und setPos () Funktionen.

bild0.jpg

In der Regel werden Sie feststellen, 1024 x 768 und 800 x 600 die am häufigsten verwendeten Bildschirmgrößen sein. Es macht Sinn, ein wenig kleiner als diese Beschlüsse zu gehen. Natürlich, wenn Sie ein bestimmtes Gerät haben Sie programmieren möchten, können Sie einfach Ihre Größe Programm direkt für Ihr Gerät.

Nachdem Sie die gewünschte Größe kennen, können Sie einfach die Verwendung Szene Objekt setSize () Methode, um den Bildschirm zu ändern Egal welche Größe Sie bevorzugen.

Denken Sie daran, dass für viele Spiele, die Bildschirmgröße ändern, werden tatsächlich das Gameplay verändern. Außerdem werden die meisten Eingang auf dem tatsächlichen Bildschirm passieren, also darüber nachdenken, wie groß die Daumen sind, und versuchen Sie Ihr Spiel so zu gestalten, die Finger des Benutzers keine Bildschirmaktionen verschleiern.

Wie wird das Spiel zu machen, wie eine App aussehen

Es gibt ein paar wunderbare Tricks, die Sie für IOS-Benutzer tun können. Sie können Ihr Spiel entwerfen, damit der Benutzer auf ein Symbol auf dem Desktop direkt hinzufügen können. Der Benutzer kann dann das Spiel wie jedes andere App zu starten. Sie können auch den Browser machen den normalen Browser verstecken Accoutrements so Ihr Spiel nicht wie es in einem Browser ausgeführt wird!

Es stellt sich heraus, dass beide Effekte sind sehr einfach zu bewerkstelligen. Moderne Versionen von IOS haben bereits die Möglichkeit, jede Web-Seite auf dem Desktop zu speichern. sehen Sie einfach die Webseite in Safari und klicken Sie auf die Share-Taste. Sie erhalten eine Option finden Sie die Webseite auf dem Desktop zu speichern.

Allerdings ist das Standardsymbol für eine gespeicherte App ziemlich hässlich. Wenn Sie eine gut aussehende Symbol möchten, können Sie ein kleines Bild von Ihrem Spiel als sparen .png Datei und legen Sie sie in das gleiche Verzeichnis wie Ihr Spiel. Dann können Sie diese Zeile auf Ihrer Seite (im Header) hinzufügen, und das Bild auf dem Desktop angezeigt wird, wenn der Benutzer das Spiel speichert:

Als zusätzlichen Bonus, stellen Sie das iPhone und das iPad wird das Bild automatisch wie ein Apple-Symbol zu sehen, einen glasigen Effekt und abgerundeten Ecken hinzufügen.

image1.jpg

Wie die Safari Symbolleiste aus dem Spiel Bildschirm zu entfernen

Obwohl das Spiel auf dem Hauptbildschirm sieht gut aus, wenn der Benutzer das Spiel aktiviert, ist es immer noch offensichtlich, dass das Spiel Teil des Web-Browsers ist. Sie können leicht die Browser-Symbolleiste mit einer anderen Zeile im Header verstecken:

 

Dieser Code wird nichts tun, es sei denn, andere das Spiel auf dem Desktop aufgerufen wird. Doch in diesem Fall versteckt es die Symbolleiste, um das Spiel aussehen zu lassen und fühlen sich wie eine ausgewachsene App. Als zusätzlichen Bonus, läuft dies das Spiel in einem Vollbild-Modus, können Sie ein wenig mehr Raum für Gameplay geben.

image2.jpg

Auch dies ist ein Apple-spezifische Lösung. Es gibt keine einfache Möglichkeit, die gleiche Wirkung auf Android-Geräten zu erreichen.

Wie wird das Spiel offline zu speichern

Jetzt ist Ihr Spiel schaut viel wie eine App, mit der Ausnahme es nur läuft, wenn Sie mit dem Internet verbunden sind. HTML5 hat eine wunderbare Eigenschaft, die Ihnen eine komplette Webseite lokal zum ersten Mal zu speichern, ermöglicht es laufen. Dann, wenn der Benutzer das Spiel und das System zuzugreifen versucht nicht online gehen können, die lokale Kopie des Spiels ist es, statt laufen.

Dies ist eine relativ einfache Wirkung zu erzielen:

  1. Machen Sie Ihr Spiel stabil.

    Bevor Sie den Offline-Speicher-Mechanismus verwenden können, sollten Sie sicherstellen, dass Ihr Spiel in der Nähe bereit ist, zu lösen. Zumindest müssen Sie sicher, dass Sie durch das Spiel benötigt alle externen Dateien kennen zu sein.

  2. Bau ein cache.manifest Datei.

    Schauen Sie sich das Verzeichnis mit Ihrem Spiel, und erstellen Sie eine neue Textdatei namens cache.manifest.

  3. Schreiben Sie die erste Zeile.

    Die erste Zeile des cache.manifest Datei sollte nur den Text enthalten CACHE MANIFEST.

  4. Machen Sie eine Liste aller Dateien im Verzeichnis.

    Schreiben Sie den Namen jeder Datei im Verzeichnis, eine Datei pro Zeile. Seien Sie vorsichtig mit Ihren Kapitalisierung und Rechtschreibung.

  5. Fügen Sie das Manifest-Attribut.

    Der Tag hat ein neues Attribut namens Manifest. Wird verwendet, um den Server zu beschreiben, wo der Cache manifest zu finden ist:

  6. Laden Sie die Seite normal.

    Sie werden auf die Webseite einmal in der normalen Art und Weise laden müssen. Wenn alles richtig eingestellt ist, wird der Browser ruhig eine Kopie der Datei.

  7. Test offline.

    Der beste Weg, Offline-Speicher zu testen, ist vorübergehend drahtlosen Zugriff auf das Gerät auszuschalten, und dann versuchen, die Datei zuzugreifen. Wenn die Dinge ausgearbeitet, können Sie Ihre Seite zu sehen, als ob Sie noch online waren.

  8. Überprüfen Sie Server-Einstellungen.

    Wenn die Offline-Speicherung nicht funktioniert, müssen Sie mit Ihrem Server-Administration zu überprüfen. Das text / manifest MIME-Typ muss auf dem Server konfiguriert werden. Sie müssen Ihren Server-Administrator bitten, kann diese Option, um in der ..htaccess Datei für Ihr Konto:

AddType text / cache-manifest manifest

Menü