Hvordan opbygge en multi-state animation i dit HTML5-spil

Med al denne bevægelse foregår i dit HTML5-spil, er du sikker på, at du vil have flere sofistikerede animationer. Du kan bruge funktionen changeImage () eller setImage () (de er to forskellige navne til det samme) for at ændre billedet, der er forbundet med et sprite, når som helst. Nogle gange vil du dog have meget mere sofistikerede animationer. Tag et kig på walkAnim. html.

Der foregår en masse billede-bytte her. Den walking animation er faktisk en serie på otte forskellige billeder hurtigt byttet for at give illusionen af at gå. Der er 4 forskellige animationer (en for hver af de kardinale retninger), så det er i alt 32 forskellige billeder. Men hvis du kigger over koden, vil du se, at tegnspritten kun indeholder et billede.

Dette billede er en sammensat animation. Hver række repræsenterer en retning, og hver række indeholder en cyklus eller en række billeder, der skal gentages.

Rpg_sprite_walk. png image blev oprettet af Franck Dupont. Han gav generøst dette billede på OpenGameArt. org site, hvor han er kendt som "arikel. "Han udgav sit arbejde under en særlig licens kaldet" Attribution - Share Alike. "Dette betyder, at folk kan bruge eller remixere sit arbejde gratis, så længe de tilskriver den oprindelige forfatter.

Baggrundsbilledet er af en forfatter ved navn Hyptosis, som har udgivet billeder under det offentlige område på samme sted. Talenterede og tankevækkende bidragydere som Franck og Hyptosis er nøglen til det blomstrende kreative samfund. Du er velkommen til at se over det åbne spil art site for mere fantastiske illustrationer til brug i dine spil, men vær sikker på at takke og tilskrive forfatterne som de fortjener.

Den simpleGame. js bibliotek indeholder en funktion til at gøre multi-billede animationer ganske let. Se over koden for walkAnim. html for at se, hvordan det virker:

walkAnim. html var spil; var baggrund var karakter; funktion init () {game = new Scene (); baggrund = ny Sprite (spil, "rpgMap. png", 800, 600); baggrund. setSpeed (0, 0); baggrund. setPosition (400, 300); tegn = nyt Sprite (spil, "rpg_sprite_walk. Png", 192, 128); karakter. loadAnimation (192, 128, 24, 32); karakter. generateAnimationCycles (); karakter. renameCycles (new Array ("down", "up", "left", "right")); karakter. setAnimationSpeed (500); // start pause tegn. setPosition (440, 380); Karakter. setSpeed (0); karakter. pauseAnimation (); karakter. setCurrentCycle ("nede"); spil.start ();} // end init funktion opdatering () {game. klar(); checkKeys (); baggrund. opdatering (); Karakter. opdatering ();} // end opdateringsfunktion checkKeys () {if (keysDown [K_LEFT]) { tegn. setSpeed (1); karakter. playAnimation () karakter. setMoveAngle (270); karakter. setCurrentCycle ("venstre"); } hvis (keysDown [K_RIGHT]) {character. setSpeed (1); Karakter. playAnimation () tegn. setMoveAngle (90); Karakter. setCurrentCycle ("højre");} hvis (keysDown [K_UP]) {character. setSpeed (1); Karakter. playAnimation () tegn. setMoveAngle (0); Karakter. setCurrentCycle ("up");} hvis (keysDown [K_DOWN]) {character. setSpeed (1); Karakter. playAnimation () tegn. setMoveAngle (180); Karakter. setCurrentCycle ("down");} hvis (keysDown [K_SPACE]) { tegn. setSpeed (0); karakter. pauseAnimation (); karakter. setCurrentCycle ("nede"); }}

Du skal tage et par nye trin til at oprette en animation, men resultaterne er helt værd at gøre.

Hent et animationsbillede.

Du kan enten oprette et billede selv eller se på de fremragende ressourcer som OpenGameArt. org at finde arbejde, som andre har gjort. Selvfølgelig har du et ansvar for at respektere andres arbejde, men der er noget stort arbejde til rådighed i meget tilladte licenser i dag. Sørg for, at billedet er organiseret i rækker og kolonner, og at hvert underbillede er nøjagtig den samme størrelse.

Du må muligvis rote med din billedredigerer for at sikre, at billedet er i det rigtige format, og at du kender størrelsen på hvert underbillede.
Vedhæft animationsbilledet til din sprite.

Du vil vedhæfte hele billedet til din sprite, men viser bare en lille del af det til enhver tid. Dette er nemmere end at arbejde med en flok billeder, og det er også mere effektivt.
Opret et animationsobjekt med metoden loadAnimation ().

Når du påberåber metoden loadAnimation () for et objekt, opretter du et animationsværktøj, der hjælper med at styre animationen. De to første parametre er størrelsen af hele billedet (bredde og højde), og de to andre parametre er bredden og højden af hvert underbillede. Hvis du får disse værdier forkert, vises animationen for at rulle. Fortsæt med at spille, indtil du får disse værdier rigtigt:
```
tegn. loadAnimation (192, 128, 24, 32);
```
Byg animationscyklusserne.

Hver række bliver omdannet til en animationscyklus. Standardversionen (uden parametre) fungerer fint i de fleste situationer. Se dokumentationen til de mere avancerede anvendelser af dette værktøj:
```
tegn. generateAnimationCycles ();
```
Omdøb cyklusserne.

Animationerne, der er oprettet med buildAnimationCycles () -kommandoen, har standardnavne, men det er næsten altid bedre at vedhæfte dine egne mere meningsfulde navne. Tilføj en matrix med et navn, der angiver, hvad hver række repræsenterer:
```
tegn. renameCycles (new Array ("down", "up", "left", "right"));
```
Indstil animationshastigheden.

Animationshastigheden angiver, hvor hurtigt animationen vil køre. En værdi på 500 synes rigtig for de fleste applikationer, men du kan justere denne værdi, så tegnets gåcyklus ser ud som om det faktisk driver karakteren:
```
tegn.setAnimationSpeed (500);
```
Indstil hvilken cyklus du vil vise.

Metoden setCurrentCycle () giver dig mulighed for at vælge cyklus med et af de navne, du angav i navnet på renameAnimationCycles ():
```
tegn. setCurrentCycle ("nede");
```
Brug kommandoen pauseAnimation () for at stoppe animationen.

Kommandoen pauseAnimation () gør animationen midlertidigt stoppet.
Brug playAnimation () for at starte animationen.

Denne metode fortsætter løbende den aktuelle animationscyklus.