Hoe u kantelbedieningen toevoegt aan uw HTML5-spel - dummies

Mobiele apparaten hebben een zeer intrigerend invoermechanisme waarmee je objecten in een HTML5-spel kunt besturen door te kantelen. Dit werkt met een speciale ingebouwde tool, de accelerometer , die beweging volgt. De accelerometer meet eigenlijk de rotatie, en je kunt het gebruiken om mooie hellingshoeken in je spel te krijgen.

De simpleGame-bibliotheek heeft een speciaal object met de naam Accel dat de versnellingsmeter inkapselt. Het werkt heel erg zoals het object Joy.

1. Maak een Accel-object.

   SimpleGame heeft een Accel-object. Maak dit object om de accelerometer te testen.

2. Gebruik methoden om tilt te bepalen.

   Het Accel-object heeft speciale methoden genaamd getAX () en getAY () die de rotatiehoeveelheid aangeven.

3. Wijzig versnellingswaarden.

   De AX- en AY-waarden geven de hoeveelheid rotatie rond de X- en Y-as weer. De waarden lopen van -9 tot 9. Over het algemeen moet u de kantelwaarden aanpassen om precies het gewenste gedrag te krijgen. Dit gaat meestal gepaard met een paar eenvoudige wiskundige berekeningen.

Hier is de code voor Accel. html:

accel. html var-spel; var bal; var accel -functie init () {game = nieuwe scène (); ball = nieuwe Sprite (spel, "redBall. png", 50, 50); accel = nieuwe Accel (); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); newDX = versneld. getAY (); newDY = versneld. Getax (); newDX * = -5; nieuwDY * = -5; bal. setDX (newDX); bal. setDY (newDY); bal. update ();}

De accelerometer is gemakkelijk te gebruiken:

1. Maak een variabele voor het versnellingsmeterobject.

   Je kunt je variabele versnelling bellen.

2. Gebruik accel. getAX () om rotatie rond X te krijgen.

   De methode getAX () retourneert het percentage van de helling rond de X-as. De X-as gaat van links naar rechts op het scherm, dus rotatie rond X is normaal gebonden aan beweging langs de Y-as!

3. Gebruik de acccel. getAY () om de rotatie rond Y te bepalen.

   Op dezelfde manier beschrijft de methode getAY () het percentage kanteling langs de (verticale) Y-as. Normaal gesproken gebruik je getAY () om horizontale beweging te regelen.

4. Maak u geen zorgen over de Z-as.

   Je kunt ook rotatie langs de Z-as lezen (die van het midden van het scherm naar je neus loopt), maar dit is over het algemeen niet nuttig.

5. Stel (voorlopig) dat de neutrale positie perfect plat op een tafel ligt.

   U krijgt nulwaarden voor getAX () en getAY () wanneer het apparaat volledig stil ligt op een perfect vlakke tafel.

6. Experimenteer met schaalfactoren.

   U zult over het algemeen de getAX () - en getAY () -resultaten met een bepaalde hoeveelheid moeten vermenigvuldigen om het gewenste gedrag te krijgen. Als u beide met een negatieve vijf vermenigvuldigt, krijgt u de juiste waarden voor dy en dx. U moet experimenteren om precies het gewenste gedrag te krijgen.