Sådan tilføjer du knapper til dit HTML5-spil til mobiladgang - dummier

SimpleGame biblioteket har en praktisk funktion kaldet GameButton til at tilføje en knap til skærmen på en mobil enhed til dit HTML5 spil. Tastaturet er en af ​​de nemmeste måder at få input på i en standardbrowser, men de fleste mobile enheder har ikke tastaturer. Det første problem er at finde ud af, hvordan man får brugerindgang, når der ikke er noget tastatur.

Custom Button-objektet fra GameButton begynder med funktionerne i en standard HTML-knap, men tilføjer derefter nogle få tricks, der gør den egnet til spil. Du kan aktivere knappen med en almindelig mus eller med berøringskontrollerne, hvilket gør den ideel til spil, der kan afspilles på begge typer enheder. Knappen. html side illustrerer knappen i aktion:

knappen. html var btnMove; var spil; var bolden; funktion init () {game = new Scene (); spil. sæt størrelse (200, 200); bold = ny Sprite (spil, "redBall. png", 25, 25); bold. setSpeed ​​(0); bold. setPosition (100, 100); btnMove = ny GameButton ("Move"); btnMove. setPos (70, 150); btnMove. sæt størrelse (60, 30); spil. start ();} // end init funktion opdatering () {game. klar(); checkButtons (); bold. opdatering ();} // end opdatering funktionskontrolknapper () { hvis (btnMove. isClicked ()) { bold. setSpeed ​​(3); } ellers { bold. setSpeed ​​(0); } // ende hvis } // end checkButtons

Som normalt er de nye og interessante elementer angivet med fed skrift. Sådan føjer du en spilknapp til et spil:

1. Opret en variabel for knappen.

   Som alle andre spilelementer begynder du ved at oprette en variabel for at henvise til knappen.

2. Byg GameButton-objektet.

   Byg GameButton-objektet i init () -metoden. Den enkelte parameter angiver knappens billedtekst.

3. Indstil knappens størrelse og position.

   Du vil gerne tænke lidt om, hvordan din gameplay vil fungere på mobile enheder. Placer dine knapper, hvor de let kan nås af afspilleren uden at blokere for meget af visningen. Bemærk at du også vil gøre knapperne store nok til at blive presset under varmen i spillet. (Onscreen-knapper er meget bedre til tabletbaserede spil.)

4. Kontroller knapstatus under opdatering ().

   Ligesom du normalt kontrollerer tastaturstatus under opdateringen () -funktionen, kan du også ringe til en funktion for at kontrollere din knapstatus. Selvfølgelig skal du skrive denne funktion.

5. Læs knappens isClicked () metode.

   Hvis knappen aktuelt trykkes, er værdien af ​​isClicked () sand. Hvis knappen ikke trykkes for øjeblikket, returneres isClicked () false.Brug denne metode til at bestemme den aktuelle tilstand for hver knap og handle i overensstemmelse hermed.

6. Behandl en knap meget ligesom tastaturet.

   Fordi testning af knapperne i sidste ende vender tilbage til booleske (sande eller falske) værdier, vil kontrol af knapper normalt føles meget som at kontrollere tastaturet.

7. Overvej kun at tilføje knapper, når det er nødvendigt.

   Hvis du vil, kan du designe et spil til kun at vise (og test) knapper, når en berøringsskærm er tilgængelig. Scene-objektet har en særlig variabel kaldet touchable. Denne variabel er sand, hvis biblioteket registrerer en berøringsskærm og falsk på anden måde. Du kan bruge denne variabel til at generere en brugerdefineret grænseflade, der tilpasser til spillemiljøet.

Normalt vil du tilføje flere knapper til din grænseflade, en til at erstatte hver nøgle, du forventer at brugeren skal bruge (for eksempel pile og mellemrumstasten). På denne måde kan du oprette et virtuelt tastatur på skærmen. Du kan muligvis teste størrelsen og placeringen af ​​hver nøgle for at få en behagelig gameplayoplevelse.

Bemærk, at teksten på knappen er almindelig HTML, så hvis du vil lave dine knapper baseret på billeder, kan du blot tilføje den relevante

tag som en billedtekst.