Video: Leap Motion SDK 2024
Mange touch-baserte HTML5-spill bruker en virtuell joystick-mekanisme. Brukeren berører skjermen for å begynne å skrive inn, og deretter swipes for å gi innspill. Swiping til venstre leses akkurat som å flytte en joystick til venstre. Jo lenger brukeren svinger, desto større er inngangsverdien. SimpleGame-biblioteket har et virtuelt joystick-objekt som gjør det enkelt å implementere en virtuell joystick på dine berøringsbaserte enheter.
Den virtuelle joysticken fungerer ved å returnere numeriske data. Det er ofte enklest å forstå hvordan det fungerer ved å se på numerisk utgang før kartlegging av det til et visuelt element.
joystick Test var spillet; var utgang; var joystick; funksjon init () {game = new Scene (); output = dokument. getElementById ("output"); hvis (spill. Berørbar) { joystick = ny glede (); } annet { varsling ("Denne testen krever et berøringsbasert grensesnitt"); } spill. start ();} // end init-funksjon oppdatering () { hvis (spill. berørbar) { jx = joystick. getMouseX (); jy = joystick. getMouseY (); jdx = joystick. getDiffX (); jdy = joystick. getDiffY (); result = "joystick x:" + jx + ""; result + = "joystick y:" + du + "
"; resultat + = "joystick dx:" + jdx + "
"; resultat + = "joystick dy:" + jdy + "
";
utgang. innerHTML = resultat;} else {alert ("Dette eksemplet forventer en berøringsskjerm");}} // end oppdatering Ingenting her ennå
Den virtuelle joysticken er ganske enkel å bruke:
-
Lag en variabel for styrespaken.
Du kan ringe det joystick. Slags fengende.
-
Lag styrespaken hvis mulig.
Bruk spillet. Berørbar egenskap for å avgjøre om et berøringsgrensesnitt er tilstede. Hvis ikke, send en melding til brukeren.
-
Hent museposisjonen.
Når det virtuelle Joystick-objektet oppdager et trykk på skjermen, utløses det mouseX og mouseY-verdiene. Bruk styringstastens getMouseX () og getMouseY () metoder for å bestemme X- og Y-stillingene for berøringen. På denne måten virker berøringsgrensesnittet som den tradisjonelle musen.
-
Få en diffX og diffill lesing fra joysticken.
Når brukeren berører skjermen, sporer biblioteket koordinatene til den første berøringen. Det måler så langt hvor langt brukeren har swiped. Forskjellen i X kalles diffX, og forskjellen i Y kalles diffY. Bruk getDiffX () og getDiffY () -metodene til det virtuelle joystickobjektet til å bestemme hvor mange piksler i X og Y brukeren har flyttet siden berører skjermen.
-
Vis gjeldende verdier.
For dette første passet, er det viktig å forstå hva joysticken viser, så ta bare verdiene og skriv dem ut på en skjermutgang.
Selvfølgelig er poenget med en virtuell joystick å flytte ting rundt på skjermen.
Her er koden:
joystick Test var spillet; var ball; var joystick; funksjon init () {game = new Scene (); ball = ny Sprite (spill, "redBall. png", 50, 50); hvis (spill. berørbar) {joystick = ny glede ();} else {alert ("Dette spillet krever en berøringsskjerm");} // avslutte om ballen. setSpeed (0); ball. setPosition (400, 300); spill. start ();} // end init funksjon oppdatering () {spill. klar(); hvis (spill. berørbar) {ball. setDX (joystick. getDiffX ()); ball. setDY (joystick. getDiffY ());} // ende berørbar ball. oppdatering ();} // end oppdatering
Dette eksemplet er enda enklere enn det forrige.
-
Lag en enkel ballsprite.
For dette eksempelet brukes en enkel ball. Lag det som alle andre grunnleggende sprite.
-
Bygg et joystickobjekt.
Lag et virtuelt joystick-objekt.
-
Kart styrespakenes diffX og diffy til ballens dx- og dy-verdier.
Dette gir ekstremt følsom bevegelse, så du vil kanskje justere følsomheten ved å dele diffX og differe med noen skaleringsfaktor.