Hur man skapar en virtuell joystick för ditt HTML5-spel - dummies

Många touch-baserade HTML5-spel använder en virtuell joystick-mekanism. Användaren rör skärmen för att börja ingå, och sveper sedan för att ge inmatning. Swiping till vänster läses precis som att flytta en joystick till vänster. Ju längre användaren sveper, desto större är inmatningsvärdet. SimpleGame-biblioteket har ett virtuellt joystickobjekt som gör det enkelt att implementera en virtuell joystick på dina pekbaserade enheter.

Den virtuella joysticken fungerar genom att returnera numeriska data. Det är ofta lättast att förstå hur det fungerar genom att titta på den numeriska utgången innan du kartlägger den till ett visuellt element.

joystick Test var spel; var utmatning; var joystick; funktion init () {game = new Scene (); output = dokument. getElementById ("output"); om (spel. Berörbar) { joystick = ny glädje (); } annars { alert ("Detta test kräver ett touch-baserat gränssnitt"); } spel. start ();} // end init-funktionen uppdatering () { om (spel. 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 + "
"; result + = "joystick dy:" + jdy + "
"; utgång. innerHTML = resultat;} else {alert ("Detta exempel förväntar sig en pekskärm");}} // änd uppdatering Ingenting här än

Den virtuella joysticken är ganska lätt att använda:

1. Skapa en variabel för joysticken.

   Du kan kalla det joystick. Typ av catchy.

2. Skapa joysticken om möjligt.

   Använd spelet. berörbar egenskap för att bestämma om ett beröringsgränssnitt är närvarande. Om inte, skicka ett meddelande till användaren.

3. Ta muspositionen.

   När det virtuella Joystick-objektet upptäcker en knapptryckning på skärmen, utlöser den mouseX- och mouseY-värdena. Använd joystickens getMouseX () och getMouseY () metoder för att bestämma X och Y positionerna för kontakten. På så sätt fungerar pekgränssnittet som den traditionella musen.

4. Få en diffX och diffyd läsning från joysticken.

   När användaren berör skärmen spårar biblioteket koordinaterna för den första kontakten. Det mäter sedan hur långt bort användaren har swiped. Skillnaden i X kallas diffX, och skillnaden i Y kallas diffY. Använd metoden getDiffX () och getDiffY () i det virtuella joystickobjektet för att bestämma hur många pixlar i X och Y användaren har flyttat sedan du rörde skärmen.

5. Visa aktuella värden.

   För det här första passet är det viktigt att förstå vad joysticken visar, så ta bara värdena och skriv ut dem till en skärmutgång.

Självklart är en virtuell joysticks punkt att flytta saker runt på skärmen.

Här är koden:

Joystick Test var-spel; var boll; var joystick; funktion init () {game = new Scene (); boll = ny Sprite (spel, "redBall. png", 50, 50); om (spel. berörbar) {joystick = new Joy ();} else {alert ("Detta spel kräver en pekskärm");} // avsluta om bollen. setSpeed ​​(0); boll. setPosition (400, 300); spel. start ();} // end init-funktionen uppdatering () {game. klar(); om (spel. berörbar) {boll. setDX (joystick. getDiffX ()); boll. setDY (joystick. getDiffY ());} // än berörbar boll. uppdatering ();} // slutuppdatering

Detta exempel är ännu enklare än det föregående.

1. Skapa en enkel bollsprite.

   För detta exempel används en enkel boll. Skapa det som alla andra grundläggande sprite.

2. Bygg ett joystickobjekt.

   Skapa ett virtuellt joystickobjekt.

3. Kartera joystickens diffX och diffy till bollens dx- och dy-värden.

   Detta ger extremt känslig rörelse, så du kanske vill justera känsligheten genom att dividera diffX och diffy med någon skaleringsfaktor.