Hoe maak je een virtuele joystick voor je HTML5-spel - dummies

Veel op aanraking gebaseerde HTML5-spellen gebruiken een virtueel joystickmechanisme. De gebruiker raakt het scherm aan om te beginnen met invoeren en veegt vervolgens om invoer te leveren. Naar links vegen wordt gelezen alsof je een joystick naar links beweegt. Hoe verder de gebruiker veegt, hoe groter de invoerwaarde is. De simpleGame-bibliotheek heeft een virtueel joystick-object dat het gemakkelijk maakt om een ​​virtuele joystick op uw aanraakgevoelige apparaten te implementeren.

De virtuele joystick werkt door terugkerende numerieke gegevens. Het is vaak het gemakkelijkst om te begrijpen hoe het werkt door te kijken naar de numerieke uitvoer voordat het wordt toegewezen aan een visueel element.

joystick Test var-spel; var-uitvoer; var joystick; functie init () {game = new Scene (); output = document. getElementById ("output"); if (game. Touchable) { joystick = nieuwe joy (); } else { alert ("Voor deze test is een aanraakinterface vereist"); } spel. start ();} // update van de end-init-functie () { if (game touchable) { jx = joystick. getMouseX (); jy = joystick. getMouseY (); jdx = joystick. getDiffX (); jdy = joystick. getDiffY (); result = "joystick x:" + jx + "

"; result + = "joystick y:" + jy + "
"; result + = "joystick dx:" + jdx + "
"; result + = "joystick dy:" + jdy + "
"; output. innerHTML = result;} else {alert ("Dit voorbeeld verwacht een aanraakscherm");}} // update beëindigen Nog niets

De virtuele joystick is vrij eenvoudig te gebruiken:

1. Creëer een variabele voor de joystick.

   Je kunt het een joystick noemen. Een beetje aanstekelijk.

2. Maak de joystick indien mogelijk.

   Gebruik de game. Aanraakbare eigenschap om te bepalen of een aanraakinterface aanwezig is. Als dit niet het geval is, stuurt u een bericht naar de gebruiker.

3. Vind de muispositie.

   Wanneer het virtuele object Joystick een aanraking op het scherm detecteert, worden de waarden mouseX en mouseY geactiveerd. Gebruik de methoden getMouseX () en getMouseY () van de joystick om de X- en Y-posities van de aanrakingen te bepalen. Op deze manier werkt de aanraakinterface net als de traditionele muis.

4. Ontvang een diffX en verschillende waarden van de joystick.

   Wanneer de gebruiker het scherm aanraakt, volgt de bibliotheek de coördinaten van de eerste aanraking. Het meet dan hoe ver weg de gebruiker heeft geslagen. Het verschil in X wordt diffX genoemd en het verschil in Y wordt diffY genoemd. Gebruik de methoden getDiffX () en getDiffY () van het virtuele joystickobject om te bepalen hoeveel pixels in X en Y de gebruiker heeft verplaatst sinds het scherm is aangeraakt.

5. Geeft de huidige waarden weer.

   Voor deze eerste doorgang is het belangrijk om te begrijpen wat de joystick weergeeft, dus neem gewoon de waarden en druk ze af naar een uitvoer op het scherm.

Het punt van een virtuele joystick is natuurlijk om dingen op het scherm te verplaatsen.

Hier is de code:

joystick Test var-spel; var bal; var joystick; function init () {game = new Scene (); ball = nieuwe Sprite (spel, "redBall. png", 50, 50); if (game. touchable) {joystick = new Joy ();} else {alert ("Deze game vereist een touchscreen");} // einde als bal. setSpeed ​​(0); bal. setPosition (400, 300); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); indien (spel. tastbaar) {bal. setDX (joystick, getDiffX ()); bal. setDY (joystick. getDiffY ());} // eindbare bal. update ();} // update beëindigen

Dit voorbeeld is nog eenvoudiger dan het vorige.

1. Maak een eenvoudige balsprite.

   Voor dit voorbeeld wordt een eenvoudige bal gebruikt. Maak het net als elke andere basissprite.

2. Bouw een joystick-object.

   Maak een virtueel joystick-object.

3. Breng de diffX en diffY van de joystick in kaart met de dx- en dy-waarden van de bal.

   Dit geeft een uiterst gevoelige beweging, dus u wilt misschien de gevoeligheid aanpassen door de diffX te delen en anders met een of andere schaalfactor.