Hur man bygger en multi-state-animering i ditt HTML5-spel - dummies < Skapa en mångsidig animering i ditt HTML5-spel

Med all denna rörelse som händer i ditt HTML5-spel, är du säker på att du vill ha flera sofistikerade animeringar. Du kan använda funktionen changeImage () eller setImage () (de är två olika namn för samma sak) för att ändra bilden som är associerad med en sprite när som helst. Ibland vill du dock ha mycket mer sofistikerade animationer. Ta en titt på walkAnim. html.

Det finns en hel del bildbytes pågår här. Den vandrande animationen är faktiskt en serie med åtta olika bilder som snabbt byts för att ge en illusion att gå. Det finns 4 olika animeringar (en för varje kardinalriktning), så det är totalt 32 olika bilder. Om du tittar över koden ser du emellertid att teckenspriten innehåller bara en bild.

Den här bilden är en sammansatt animering. Varje rad representerar en riktning, och varje rad innehåller en cykel eller en serie bilder, menade att upprepas.

Rpg_sprite_walk. png-bild skapades av Franck Dupont. Han skickade generöst denna bild på OpenGameArt. org-plats, där han är känd som "Arikel. "Han släppte sitt arbete under en särskild licens som heter" Attribution - Share Alike. "Det betyder att folk kan använda eller remixa sitt arbete gratis, så länge de tillhör den ursprungliga författaren.

Bakgrundsbilden är av en författare som heter Hyptosis, som släppte bilder under det offentliga området på samma sajt. Talangfulla och tankeväckande bidragsgivare som Franck och Hyptosis är nyckeln till det blomstrande kreativa samhället. Titta gärna över den öppna spelkonstplatsen för mer bra konstverk att använda i dina spel, men var noga med att tacka och skriva författarna som de förtjänar.

SimpleGame. js-biblioteket innehåller en funktion för att göra flera bild animeringar ganska enkelt. Titta över koden för walkAnim. html för att se hur det fungerar:

walkAnim. html var spel; var bakgrund var karaktär funktion init () {game = new Scene (); background = new Sprite (spel, "rpgMap. png", 800, 600); bakgrund. setSpeed ​​(0, 0); bakgrund. setPosition (400, 300);

tecken = nytt Sprite (spel, "rpg_sprite_walk. Png", 192, 128); karaktär. loadAnimation (192, 128, 24, 32); karaktär. generateAnimationCycles (); karaktär. renameCycles (new Array ("down", "up", "left", "right")); karaktär. setAnimationSpeed ​​(500); // starta pausade tecken. setPosition (440, 380); karaktär. setSpeed ​​(0); karaktär. pauseAnimation (); karaktär. setCurrentCycle ("ner"); spel.start ();} // end init-funktionen uppdatering () {game. klar(); checkKeys (); bakgrund. uppdatering(); karaktär. uppdatering ();} // änd uppdateringsfunktion checkKeys () {if (keysDown [K_LEFT]) { tecken. setSpeed ​​(1); karaktär. playAnimation () karaktär. setMoveAngle (270); karaktär. setCurrentCycle ("vänster"); } om (keysDown [K_RIGHT]) {tecken. setSpeed ​​(1); karaktär. playAnimation () tecken. setMoveAngle (90); karaktär. setCurrentCycle ("right");} om (keysDown [K_UP]) {tecken. setSpeed ​​(1); karaktär. playAnimation () tecken. setMoveAngle (0); karaktär. setCurrentCycle ("up");} om (keysDown [K_DOWN]) {tecken. setSpeed ​​(1); karaktär. playAnimation () tecken. setMoveAngle (180); karaktär. setCurrentCycle ("down");} om (keysDown [K_SPACE]) { tecken. setSpeed ​​(0); karaktär. pauseAnimation (); karaktär. setCurrentCycle ("ner"); }} Du måste ta några nya steg för att bygga en animering, men resultaten är helt värda ansträngningen.

Hämta en animationsbild.

1. Du kan antingen skapa en bild själv eller titta på de utmärkta resurserna som OpenGameArt. org för att hitta arbete som andra har gjort. Självklart har du ett ansvar att respektera andras arbete, men det finns ett stort arbete tillgängligt i mycket permissiva licenser idag. Se till att bilden är organiserad i rader och kolumner och att varje delbild är exakt densamma.

   Du kanske måste röra med din bildredigerare för att se till att bilden är i rätt format och att du känner till storleken på varje underbild.

   Bifoga animeringsbilden till din sprite.

2. Du kommer att bifoga hela bilden till din sprite, men visar bara en liten del av det på en gång. Det här är lättare än att arbeta med en massa bilder, och det är också mer effektivt.

   Skapa ett animationsobjekt med metoden loadAnimation ().

3. När du anropar metoden loadAnimation () för ett objekt skapar du ett animeringsverktyg som hjälper till att hantera animeringen. De två första parametrarna är storleken på hela bilden (bredd och höjd) och de andra två parametrarna är bredden och höjden på varje delbild. Om du får fel på dessa värden visas animationen för att bläddra. Fortsätt spela tills du får dessa värden rätt:

   tecken. loadAnimation (192, 128, 24, 32);

   Bygg animationscyklerna.
   

4. Varje rad blir förvandlad till en animationscykel. Standardversionen (utan några parametrar) fungerar bra i de flesta situationer. Se upp dokumentationen för det mer avancerade användningsområdet för detta verktyg:

   tecken. generateAnimationCycles ();

   Byt namn på cyklerna.
   

5. Animationerna som skapats med kommandot buildAnimationCycles () har standardnamn, men det är nästan alltid bättre att bifoga dina egna meningsfulla namn. Lägg till en array med ett namn som anger vad varje rad representerar:

   tecken. renameCycles (new Array ("down", "up", "left", "right"));

   Ställ in animationshastigheten.
   

6. Animationshastigheten anger hur snabbt animationen körs. Ett värde på 500 verkar rätt för de flesta applikationer, men du kan justera detta värde så att karaktärens gångcykel ser ut som att det faktiskt driver karaktären:

   tecken.setAnimationSpeed ​​(500);

   Ange vilken cykel du tänker visa.
   

7. Metoden setCurrentCycle () kan du välja cykeln med ett av namnen du angav i namnet om namnnamnAnimationCycles ():

   . setCurrentCycle ("ner");

   Använd pauseAnimation () för att pausa animeringen.
   

8. Kommandot pauseAnimation () gör att animeringen tillfälligt slutar.

   Använd playAnimation () för att starta animationen.

9. Den här metoden fortsätter kontinuerligt med den aktuella animationscykeln.

   Som du kan se, lägger animering till sig en enorm mängd roligt att spela och öppnar hela riket av rollspel till din repertoar.