Hoe u knoppen toevoegt aan uw HTML5-spel voor mobiele toegang - dummies

De simpleGame-bibliotheek heeft een handige functie genaamd de GameButton voor het toevoegen van een knop aan het scherm van een mobiel apparaat voor uw HTML5-spel. Het toetsenbord is een van de gemakkelijkste manieren om invoer in een standaardbrowser te krijgen, maar de meeste mobiele apparaten hebben geen toetsenborden. Het eerste probleem is om erachter te komen hoe je gebruikersinvoer krijgt als er geen toetsenbord is.

Het Custom Button-object met de GameButton begint met de functies van een standaard HTML-knop, maar voegt vervolgens een aantal trucjes toe om het geschikt te maken voor gaming. U kunt de knop activeren met een gewone muis of met de aanraakbedieningen, waardoor deze ideaal is voor games die op beide soorten apparaten kunnen worden afgespeeld. De knop. html-pagina illustreert de knop in actie:

knop. html var btnMove; var-game; var bal; function init () {game = new Scene (); spel. setSize (200, 200); ball = nieuwe Sprite (spel, "redBall. png", 25, 25); bal. setSpeed ​​(0); bal. setPosition (100, 100); btnMove = nieuwe GameButton ("Move"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); checkbuttons (); bal. update ();} // einde update functiecontrole Knoppen () { if (btnMove. isClicked ()) { ball. setSpeed ​​(3); } else { bal. setSpeed ​​(0); } // end if } // end checkButtons

Zoals gebruikelijk zijn de nieuwe en interessante elementen vetgedrukt weergegeven. Zo voeg je een gameknop toe aan een game:

1. Maak een variabele voor de knop.

   Zoals elk ander spelelement begin je met het maken van een variabele om naar de knop te verwijzen.

2. Bouw het GameButton-object.

   Bouw het GameButton-object in de methode init (). De enkele parameter geeft het bijschrift van de knop aan.

3. Stel de grootte en positie van de knop in.

   U wilt een beetje nadenken over hoe uw gameplay werkt op mobiele apparaten. Plaats uw knoppen op een plaats waar ze gemakkelijk kunnen worden bereikt door de speler zonder al te veel zicht te blokkeren. Merk op dat je de knoppen ook groot genoeg wilt maken om tijdens de hitte van het spel te worden ingedrukt. (Schermknoppen zijn veel beter voor tabletspellen.)

4. Knopstatus controleren tijdens update ().

   Net zoals u normaal de toetsenbordstatus controleert tijdens de update () -functie, kunt u ook een functie bellen om uw knopstatus te controleren. Natuurlijk moet u deze functie schrijven.

5. Lees de methode isClicked () van de knop.

   Als op de knop wordt gedrukt, is de waarde van isClicked () waar. Als de knop niet wordt ingedrukt, geeft isClicked () false als resultaat.Gebruik deze methode om de huidige status van elke knop te bepalen en dienovereenkomstig te handelen.

6. Behandel een knop die lijkt op het toetsenbord.

   Omdat het testen van de knoppen uiteindelijk resulteert in Booleaanse waarden (waar of onwaar), voelt het controleren op knoppen meestal erg op het controleren van het toetsenbord.

7. Overweeg om alleen wanneer nodig knoppen toe te voegen.

   Als u wilt, kunt u een game ontwerpen om alleen knoppen weer te geven (en te testen) als er een aanraakscherm beschikbaar is. Het Scene-object heeft een speciale variabele die aangeraakt kan worden. Deze variabele is waar als de bibliotheek een aanraakscherm detecteert en anders false. U kunt deze variabele gebruiken om een ​​aangepaste interface te genereren die zich aanpast aan de speelomgeving.

Normaal voeg je verschillende knoppen toe aan je interface, één om elke sleutel te vervangen die je van de gebruiker zou verwachten (bijvoorbeeld pijlen en de spatiebalk). Op deze manier kunt u een virtueel toetsenbord op het scherm maken. Mogelijk moet je de grootte en positie van elke toets testen om een ​​comfortabele gameplay-ervaring te krijgen.

Houd er rekening mee dat het bijschrift van de knop gewone HTML is. Als u uw knoppen wilt maken op basis van afbeeldingen, kunt u eenvoudig de juiste

-tag toevoegen als knop bijschrift.