Hur man lägger till knappar i ditt HTML5-spel för mobilåtkomst - dummies

SimpleGame-biblioteket har en praktisk funktion som heter GameButton för att lägga till en knapp på skärmen på en mobilenhet för ditt HTML5-spel. Tangentbordet är ett av de enklaste sätten att få inmatning i en vanlig webbläsare, men de flesta mobila enheter har inte tangentbord. Det första problemet är att räkna ut hur man får användarinmatning när det inte finns något tangentbord.

Custom Button-objektet för GameButton börjar med funktionerna i en vanlig HTML-knapp, men lägger till några tricks för att göra den lämplig för spel. Du kan aktivera knappen med en vanlig mus eller med pekskärmarna, vilket gör den idealisk för spel som kan spelas på båda typerna av enheter. Knappen. html-sidan illustrerar knappen i åtgärd:

-knappen. html var btnMove; var spel; var boll; funktion init () {game = new Scene (); spel. setSize (200, 200); boll = ny Sprite (spel, "redBall. png", 25, 25); boll. setSpeed ​​(0); boll. setPosition (100, 100); btnMove = ny GameButton ("Move"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); spel. start ();} // end init-funktionen uppdatering () {game. klar(); checkButtons (); boll. uppdatering ();} // slutuppdatering funktionskontrollknappar () { om (btnMove. isClicked ()) { boll. setSpeed ​​(3); } annars { boll. setSpeed ​​(0); } // slutet om } // slutkryssrutor

Som vanligt anges de nya och intressanta elementen med fetstil. Så här lägger du till en spelknapp i ett spel:

1. Skapa en variabel för knappen.

   Som alla andra spelelement börjar du med att skapa en variabel för att referera till knappen.

2. Bygg GameButton-objektet.

   Bygg GameButton-objektet i init () -metoden. Den enda parametern indikerar knappens textning.

3. Ställ in knappens storlek och position.

   Du vill tänka lite om hur din gameplay kommer att fungera på mobila enheter. Placera dina knappar där de lätt kan nås av spelaren utan att blockera för mycket av vyn. Observera att du också vill göra knapparna tillräckligt stora för att pressas under spelets värme. (Knapparna på skärmen är mycket bättre för tabletbaserade spel.)

4. Kontrollera knappstatus under uppdateringen ().

   Precis som du normalt kontrollerar tangentbordsstatus under uppdateringen (), kan du också ringa en funktion för att kontrollera din knappstatus. Självklart måste du skriva den här funktionen.

5. Läs knappens isClicked () -metod.

   Om knappen för närvarande trycks in är värdet på isClicked () sant. Om knappen inte trycks för tillfället, returneras isClicked () false.Använd den här metoden för att bestämma det aktuella läget för varje knapp och agera därefter.

6. Behandla en knapp som på tangentbordet.

   Eftersom testning av knapparna i slutändan returnerar booleska (sanna eller falska) värden, kontrollerar knapparna oftast en hel del som att kontrollera tangentbordet.

7. Överväg att bara lägga till knappar när det behövs.

   Om du vill kan du designa ett spel för att visa (och testa) knapparna när en pekskärm är tillgänglig. Scenobjektet har en speciell variabel som kallas berörbar. Denna variabel är sant om biblioteket känner av en pekskärm och falskt annars. Du kan använda denna variabel för att skapa ett anpassat gränssnitt som anpassar sig till spelmiljön.

Normalt lägger du till flera knappar i ditt gränssnitt, en för att ersätta varje nyckel du förväntar användaren att använda (till exempel pilar och mellanslagstangenten). På så sätt kan du skapa ett virtuellt tangentbord på skärmen. Du kan behöva testa storleken och positionen för varje tangent för att få en bekväm spelupplevelse.

Observera att bildtexten på knappen är vanlig HTML, så om du vill göra dina knappar baserat på bilder kan du helt enkelt lägga till den lämpliga

-taggen som en knapptextning.