Hoe maak je een multi-statelijke animatie in je HTML5-game

Nu al deze bewegingen aan de gang zijn in je HTML5-game, wil je zeker meerdere geavanceerde animaties. U kunt de functie changeImage () of setImage () (ze zijn twee verschillende namen voor hetzelfde) gebruiken om op elk gewenst moment de afbeelding te wijzigen die aan een sprite is gekoppeld. Soms wilt u echter veel geavanceerdere animaties. Bekijk walkAnim eens. html.

Er gebeurt hier een heleboel beeldruil. De loopanimatie is eigenlijk een serie van acht verschillende afbeeldingen die snel worden geruild om de illusie van lopen te geven. Er zijn 4 verschillende animaties (één voor elk van de hoofdrichtingen), dus dat is een totaal van 32 verschillende afbeeldingen. Als u echter over de code kijkt, ziet u dat de tekensprite slechts één afbeelding bevat.

Deze afbeelding is een samengestelde animatie. Elke rij vertegenwoordigt een richting en elke rij bevat een cyclus of een reeks afbeeldingen die bedoeld is om te worden herhaald.

De rpg_sprite_walk. png afbeelding is gemaakt door Franck Dupont. Hij plaatste deze afbeelding royaal op de OpenGameArt. org site, waar hij bekend staat als "Arikel. "Hij bracht zijn werk uit onder een speciale licentie genaamd" Attribution - Share Alike. "Dit betekent dat mensen zijn werk gratis kunnen gebruiken of remixen, zolang ze de originele auteur schrijven.

De achtergrondafbeelding is van een auteur met de naam Hyptosis, die op dezelfde site afbeeldingen publiceerde onder het publieke domein. Getalenteerde en doordachte medewerkers zoals Franck en Hyptosis zijn de sleutel tot de bloeiende creatieve community. Kijk gerust eens op de open kunstgame-site voor meer fantastische kunstwerken om te gebruiken in je games, maar vergeet niet de auteurs te bedanken en toe te schrijven zoals ze verdienen.

De eenvoudige game. De js-bibliotheek bevat een functie voor het gemakkelijk maken van animaties met meerdere afbeeldingen. Kijk over de code voor walkAnim. html om te zien hoe het werkt:

walkAnim. html var-spel; var achtergrond; var karakter; function init () {game = new Scene (); achtergrond = nieuwe Sprite (spel, "rpgMap. png", 800, 600); achtergrond. setSpeed (0, 0); achtergrond. setPosition (400, 300); karakter = nieuwe Sprite (spel, "rpg_sprite_walk. Png", 192, 128); karakter. loadAnimation (192, 128, 24, 32); karakter. generateAnimationCycles (); karakter. renameCycles (nieuwe Array ("down", "up", "left", "right")); karakter. setAnimationSpeed (500); // start gepauzeerd teken. setPosition (440, 380); karakter. setSpeed (0); karakter. pauseAnimation (); karakter. setCurrentCycle ("down"); spel.start ();} // update van de eind-init-functie () {game. duidelijk(); checkKeys (); achtergrond. bijwerken(); karakter. update ();} // update-functie beëindigen checkKeys () {if (keysDown [K_LEFT]) { karakter. setSpeed (1); karakter. playAnimation () karakter. setMoveAngle (270); karakter. setCurrentCycle ("links"); } if (keysDown [K_RIGHT]) {karakter. setSpeed (1); karakter. playAnimation () teken. setMoveAngle (90); karakter. setCurrentCycle ("right");} if (keysDown [K_UP]) {character. setSpeed (1); karakter. playAnimation () teken. setMoveAngle (0); karakter. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {character. setSpeed (1); karakter. playAnimation () teken. setMoveAngle (180); karakter. setCurrentCycle ("down");} if (keysDown [K_SPACE]) { karakter. setSpeed (0); karakter. pauseAnimation (); karakter. setCurrentCycle ("down"); }}

Je moet een paar nieuwe stappen nemen om een animatie te maken, maar de resultaten zijn de moeite waard.

Verkrijgen van een animatiebeeld.

Je kunt zelf een afbeelding maken of de uitstekende bronnen zoals OpenGameArt bekijken. org om werk te vinden dat anderen hebben gedaan. Natuurlijk heb je de verantwoordelijkheid om het werk van anderen te respecteren, maar er is vandaag een geweldig werk beschikbaar in zeer tolerante licenties. Zorg ervoor dat de afbeelding is geordend in rijen en kolommen en dat elke subafbeelding exact dezelfde grootte heeft.

Misschien moet u rommelen met uw beeldeditor om ervoor te zorgen dat de afbeelding de juiste indeling heeft en dat u de grootte van elke subafbeelding kent.
Koppel de animatie aan uw sprite.

U koppelt de volledige afbeelding aan uw sprite, maar toont slechts een klein deel ervan tegelijkertijd. Dit is gemakkelijker dan met een aantal afbeeldingen werken, en het is ook efficiënter.
Maak een animatieobject met de methode loadAnimation ().

Wanneer u de methode loadAnimation () van een object aanroept, maakt u een animatietool waarmee u de animatie kunt beheren. De eerste twee parameters zijn de grootte van de volledige afbeelding (breedte en hoogte) en de tweede twee parameters zijn de breedte en hoogte van elke subafbeelding. Als u deze waarden verkeerd krijgt, lijkt de animatie te scrollen. Blijf spelen totdat je deze waarden goed hebt:
```
karakter. loadAnimation (192, 128, 24, 32);
```
Bouw de animatiecycli.

Elke rij wordt omgezet in een animatiecyclus. De standaardversie (zonder parameters) werkt in de meeste situaties goed. Zoek de documentatie op voor de meer geavanceerde toepassingen van dit hulpprogramma:
```
teken. generateAnimationCycles ();
```
Hernoem de cycli.

De animaties die met de opdracht buildAnimationCycles () zijn gemaakt, hebben standaardnamen, maar het is bijna altijd beter om uw eigen, betekenisvollere namen bij te voegen. Voeg een array toe met een naam die aangeeft wat elke rij vertegenwoordigt:
```
karakter. renameCycles (nieuwe Array ("down", "up", "left", "right"));
```
Stel de animatiesnelheid in.

De animatiesnelheid geeft aan hoe snel de animatie wordt uitgevoerd. Een waarde van 500 lijkt in de meeste toepassingen geschikt, maar u kunt deze waarde aanpassen, zodat de loopcyclus van het personage eruitziet alsof het het personage:
```
voortstuwt.setAnimationSpeed (500);
```
Stel in welke cyclus u wilt weergeven.

Met de methode setCurrentCycle () kunt u de cyclus kiezen met een van de namen die u hebt aangegeven in het teken renameAnimationCycles () step:
```
. setCurrentCycle ("down");
```
Gebruik de opdracht pauseAnimation () om de animatie te onderbreken.

Met de opdracht pauseAnimation () wordt de animatie tijdelijk gestopt.
Gebruik playAnimation () om de animatie te starten.

Deze methode zal continu de huidige animatiecyclus doorlopen.