So fügen Sie Schaltflächen zu Ihrem HTML5-Spiel für Mobile Access

Das simpleGame Bibliothek verfügt über eine praktische Funktion namens GameButton einen Knopf auf dem Bildschirm eines mobilen Geräts für die HTML5-Spiel hinzuzufügen. Die Tastatur ist eine der einfachsten Möglichkeiten, Eingang in einen Standard-Browser zu bekommen, aber die meisten mobilen Geräte haben keine Tastaturen. Das erste Problem ist, herauszufinden, wie Benutzereingaben zu erhalten, wenn es keine Tastatur ist.

bild0.jpg

Das GameButton benutzerdefinierte Schaltfläche Objekt beginnt mit den Funktionen eines Standard-Schaltfläche HTML, sondern fügt dann ein paar Tricks, um es für Spiele geeignet zu machen. Sie können die Schaltfläche mit einer normalen Maus oder mit den Touch-Steuerung aktivieren, wodurch es ideal für Spiele zu machen, die auf beiden Arten von Geräten abgespielt werden können. Das button.html Seite zeigt die Schaltfläche in Aktion:

button.html  

Wie üblich, werden die neuen und interessanten Elemente fett gedruckt. Hier ist, wie man ein Spiel-Taste, um ein Spiel hinzuzufügen:

  1. Erstellen Sie eine Variable für die Schaltfläche.

    Wie jedes andere Spielelement, beginnen Sie mit dem Erstellen einer Variablen auf die Schaltfläche zu verweisen.

  2. Bauen Sie die GameButton Objekt.

    Bauen Sie die GameButton Objekt in der drin() Verfahren. Die einzelnen Parameter gibt die Beschriftung der Schaltfläche.

  3. Legen Sie die Größe und Position der Taste.

    Sie werden denken wollen ein wenig darüber, wie Ihr Spiel auf mobilen Geräten funktionieren wird. Zeigen Sie mit Tasten, wo sie können leicht durch den Spieler zu erreichen, ohne zu viel von der Ansicht zu blockieren. Beachten Sie, dass Sie auch die Tasten groß genug zu machen, wollen während der Hitze des Spiels gedrückt werden. (Onscreen-Tasten sind viel besser für Tablet-basierte Spiele.)

  4. Überprüfen Taste Status während aktualisieren().

    So wie Sie in der Regel überprüfen Tastatur-Status während der aktualisieren() Funktion, können Sie auch eine Funktion aufrufen Ihre Schaltfläche Status zu überprüfen. Natürlich müssen Sie diese Funktion zu schreiben.

  5. Lesen Sie die Schaltfläche isClicked () Verfahren.

    Wenn die Taste zur Zeit gedrückt wird, wird der Wert von isClicked () ist wahr. Wird die Taste nicht gerade gedrückt, isClicked () false zurück. Verwenden Sie diese Methode, um den aktuellen Status der einzelnen Tasten zu bestimmen und entsprechend zu handeln.

  6. Behandeln Sie eine Taste ähnlich wie die Tastatur.

    Da die Tasten Prüfung letztlich Boolean (true oder false) gibt Werte, in der Regel für die Tasten Kontrolle fühlt eine ganze Menge wie für die Tastatur zu überprüfen.

  7. Betrachten Sie nur die Tasten Hinzufügen, wenn nötig.

    Wenn Sie möchten, können Sie ein Spiel entwerfen (und Test), um nur anzuzeigen, wenn ein Touch-Screen zur Verfügung steht. Das Szene Objekt hat eine besondere Variable namens berührbaren. Diese Variable ist wahr, wenn die Bibliothek über einen Touchscreen spürt, und andernfalls false. Sie können diese Variable verwenden, um eine benutzerdefinierte Schnittstelle erzeugen, die auf die Spielumgebung anpasst.

Normalerweise werden Sie mehrere Schaltflächen zu Ihrer Schnittstelle hinzufügen, je eine Taste, die Sie dem Benutzer (zB Pfeile und die Leertaste) zu verwenden, erwarten zu ersetzen. Auf diese Weise können Sie eine virtuelle Tastatur auf dem Bildschirm erstellen. Unter Umständen müssen Sie die Größe und Position der einzelnen Tasten zu testen, ein komfortables Spielerlebnis zu bekommen.

Beachten Sie, dass die Beschriftung der Schaltfläche gewöhnlichen HTML ist, wenn Sie also auf Bilder Ihre Tasten basierend machen möchten, können Sie einfach die entsprechende hinzufügen Tag als Schaltfläche Beschriftung.

Menü