Sådan oprettes et virtuelt joystick til dit HTML5-spil - dummier

Mange touch-baserede HTML5-spil bruger en virtuel joystick-mekanisme. Brugeren rører skærmen for at starte input, og swipes derefter for at give input. Swiping til venstre læses ligesom at flytte et joystick til venstre. Jo længere brugeren swipes, jo større er inputværdien. SimpleGame-biblioteket har et virtuel joystick-objekt, som gør det nemt at implementere et virtuel joystick på dine berøringsbaserede enheder.

Den virtuelle joystick virker ved at returnere numeriske data. Det er ofte nemmest at forstå, hvordan det fungerer ved at kigge på den numeriske output, før du kortlægger det til et visuelt element.

joystick Test var spil; var output; var joystick; funktion init () {game = new Scene (); output = dokument. getElementById ("output"); hvis (spil. Berørbar) { joystick = ny glæde (); } ellers { alert ("Denne test kræver et touch-baseret interface"); } spil. start ();} // end init funktion opdatering () { hvis (spil. berørbar) { jx = joystick. getMouseX (); jy = joystick. getMouseY (); jdx = joystick. getDiffX (); jdy = joystick. getDiffY (); resultat = "joystick x:" + jx + "

"; resultat + = "joystick y:" + jy + "
"; resultat + = "joystick dx:" + jdx + "
"; resultat + = "joystick dy:" + jdy + "
"; output. innerHTML = resultat;} else {alert ("Dette eksempel forventer en berøringsskærm");}} // endopdatering Intet her endnu

Den virtuelle joystick er ret nem at bruge:

1. Opret en variabel til joysticket.

   Du kan kalde det joystick. Slags fængende.

2. Opret joysticket, hvis det er muligt.

   Brug spillet. berørbar egenskab for at afgøre, om der er en touch-grænseflade. Hvis ikke, send en besked til brugeren.

3. Hent musens position.

   Når det virtuelle Joystick-objekt registrerer et tryk på skærmen, udløser det mouseX og mouseY-værdierne. Brug joystickets getMouseX () og getMouseY () metoder til at bestemme X- og Y-positionerne for berøringen. På denne måde virker touch-grænsefladen meget ligesom den traditionelle mus.

4. Få en diffX og diffyd læsning fra joysticket.

   Når brugeren rører skærmen, sporer biblioteket koordinaterne for den oprindelige berøring. Det måler så langt, hvor langt brugeren har swiped. Forskellen i X hedder diffX, og forskellen i Y hedder diffY. Brug getDiffX () og getDiffY () -metoderne i den virtuelle joystick-objekt til at bestemme, hvor mange pixels i X og Y brugeren har flyttet siden berøring af skærmen.

5. Vis de aktuelle værdier.

   For dette første pass er det vigtigt at forstå, hvad joysticket viser, så tag bare værdierne og udskrive dem på en skærmudgang.

Selvfølgelig er punktet med et virtuelt joystick at flytte ting rundt på skærmen.

Her er koden:

joystick Test var spil; var bolden; var joystick; funktion init () {game = new Scene (); bold = ny Sprite (spil, "redBall. png", 50, 50); hvis (spil. berørbar) {joystick = ny glæde ();} else {alert ("Dette spil kræver en berøringsskærm");} // ende hvis bolden. setSpeed ​​(0); bold. setPosition (400, 300); spil. start ();} // end init funktion opdatering () {game. klar(); hvis (spil. berørbar) {bold. setDX (joystick. getDiffX ()); bold. setDY (joystick. getDiffY ());} // ende berørbar bold. opdatering ();} // end opdatering

Dette eksempel er endnu enklere end den forrige.

1. Opret en simpel boldsprite.

   I dette eksempel bruges en simpel bold. Opret det som enhver anden grundlæggende sprite.

2. Byg et joystick-objekt.

   Lav et virtuelt joystick-objekt.

3. Kort styrespidsens diffX og diffY til boldens dx- og dy-værdier.

   Dette giver ekstremt følsom bevægelse, så du vil måske justere følsomheden ved at dividere diffX og differe med en vis skaleringsfaktor.