Erstellen eines virtuellen Joystick für Ihre HTML5-Spiel erstellen

Viele Touch-basierten HTML5-Spiele verwenden, um einen virtuellen Joystick-Mechanismus. Der Benutzer berührt den Bildschirm Eingabe zu beginnen, und dann swipes Eingang bereitzustellen. Wischen nach links gelesen wird, wie durch ein Joystick nach links bewegen. Je weiter der Benutzer swipes, desto größer ist der Eingangswert. Das simpleGame Bibliothek hat einen virtuellen Joystick-Objekt, das es einfach zu implementieren einen virtuellen Joystick auf dem Touch-basierten Geräten macht.

Der virtuelle Joystick funktioniert durch numerische Daten zurück. Es ist oft am einfachsten zu verstehen, wie es durch einen Blick auf die numerische Ausgabe arbeitet, bevor es zu einem visuellen Element zuordnen.

 
Hier wurde noch nichts

Der virtuelle Joystick ist sehr einfach zu benutzen:

1. Erstellen Sie eine Variable für den Joystick.

   Sie können es nennen Joystick. Art eingängig.

2. Erstellen Sie den Joystick, wenn möglich.

   Verwenden Sie die game.touchable Eigenschaft, um zu bestimmen, ob ein Touch-Interface vorhanden ist. Wenn nicht, wird eine Meldung an den Benutzer schicken.

3. Holen Sie sich das Mausposition.

   Wenn die virtuelle Joystick Objekt erkennt eine Berührung auf dem Bildschirm, es löst mouseX und mouseY Werte. Verwenden Sie den Joysticks getMouseX () und getMouseY () Methoden, um die X und Y Positionen der Berührung zu bestimmen. Auf diese Weise wirkt die Touch-Oberfläche ähnlich wie die herkömmliche Maus.

4. Holen Sie sich ein diffX und Diffy Lesen aus dem Joystick.

   Wenn der Benutzer den Bildschirm berührt, verfolgt die Bibliothek, die die Koordinaten der ursprünglichen Note. Er misst dann, wie weit entfernt der Benutzer geklaut hat. Der Unterschied in der X heißt diffX, und die Differenz in Y aufgerufen Diffy. Verwenden Sie die getDiffX () und getDiffY () Verfahren des virtuellen Joystick Objekt, wie viele Pixel in X und Y zu bestimmen, da der Benutzer Berühren des Bildschirms bewegt hat.

5. Zeigen Sie die aktuellen Werte an.

   Für diesen ersten Durchgang ist es wichtig zu verstehen, was der Joystick angezeigt wird, so nehmen Sie nur die Werte und sie an einen Bildschirm Ausgabe drucken.

Natürlich ist der Punkt einer virtuellen Joystick Material um auf dem Bildschirm zu bewegen.

Hier ist der Code:

Dieses Beispiel ist auch einfacher als die vorherige.

1. Erstellen Sie eine einfache Kugel Sprite.

   Für dieses Beispiel wird eine einfache Kugel verwendet. Erstellen Sie es wie jedes andere grundlegende Sprite.

2. Bauen Sie ein Joystick-Objekt.

   Machen Sie einen virtuellen Joystick-Objekt.

3. Ordnen Sie den Joysticks diffX und Diffy bis der Ball dx und dy Werte.

   Dies gibt extrem empfindlich Bewegung, so dass Sie möglicherweise anpassen möchten die Empfindlichkeit durch die Teilung diffX und Diffy durch ein Skalierungsfaktor ist.