Hvordan Bygg en multi-statlig animasjon i HTML5-spillet ditt

Med all denne bevegelsen som skjer i HTML5-spillet ditt, er du sikker på at du vil ha flere sofistikerte animasjoner. Du kan bruke funksjonen changeImage () eller setImage () (de er to forskjellige navn for det samme) for å endre bildet som er knyttet til en sprite når som helst. Noen ganger, selv om du vil ha mye mer sofistikerte animasjoner. Ta en titt på walkAnim. html.

Det skjer mye bildeveksling her. Walking animasjonen er faktisk en serie på åtte forskjellige bilder raskt byttet for å gi en illusjon av å gå. Det er 4 forskjellige animasjoner (en for hver av kardinalretningene), så det er totalt 32 forskjellige bilder. Men hvis du ser over koden, ser du at tegnspriten inneholder bare ett bilde.

Dette bildet er en sammensatt animasjon. Hver rad representerer en retning, og hver rad inneholder en syklus eller en serie bilder som er ment å gjentas.

Rpg_sprite_walk. png bilde ble opprettet av Franck Dupont. Han ga generøst dette bildet på OpenGameArt. org nettstedet, hvor han er kjent som "Arikel. "Han ga ut sitt arbeid under en spesiell lisens kalt" Attribution - Share Alike. "Dette betyr at folk kan bruke eller remixe sitt arbeid gratis, så lenge de tilordner den opprinnelige forfatteren.

Bakgrunnsbildet er av en forfatter kalt Hyptosis, som utgav bilder under det offentlige området på samme sted. Talenterte og gjennomtenkte bidragsytere som Franck og Hyptosis er nøkkelen til det blomstrende kreative samfunnet. Du er velkommen til å se over det åpne spillkunstområdet for mer flott kunstverk å bruke i spillene dine, men vær sikker på å takke og tilskrive forfatterne som de fortjener.

SimpleGame. js bibliotek inneholder en funksjon for å lage multi-bilde animasjoner ganske enkelt. Se over koden for walkAnim. html for å se hvordan det fungerer:

walkAnim. html var spill; var bakgrunn; var karakter; funksjon init () {game = new Scene (); bakgrunn = nytt Sprite (spill, "rpgMap. png", 800, 600); bakgrunn. setSpeed (0, 0); bakgrunn. setPosition (400, 300); tegn = nytt Sprite (spill, "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 midlertidig tegn. setPosition (440, 380); karakter. setSpeed (0); karakter. pauseAnimation (); karakter. setCurrentCycle ("ned"); spill.start ();} // end init funksjon oppdatering () {spill. klar(); checkKeys (); bakgrunn. Oppdater(); karakter. Oppdater ();} // End Update Function CheckKeys () {if (keysDown [K_LEFT]) { tegn. setSpeed (1); karakter. playAnimation () karakter. setMoveAngle (270); karakter. setCurrentCycle ("venstre"); } hvis (keysDown [K_RIGHT]) {tegn. setSpeed (1); karakter. playAnimation () tegn. setMoveAngle (90); karakter. setCurrentCycle ("right");} hvis (keysDown [K_UP]) {tegn. setSpeed (1); karakter. playAnimation () tegn. setMoveAngle (0); karakter. setCurrentCycle ("up");} hvis (keysDown [K_DOWN]) {tegn. setSpeed (1); karakter. playAnimation () tegn. setMoveAngle (180); karakter. setCurrentCycle ("down");} hvis (keysDown [K_SPACE]) { tegn. setSpeed (0); karakter. pauseAnimation (); karakter. setCurrentCycle ("ned"); }}

Du må ta noen få nye skritt for å bygge en animasjon, men resultatene er helt verdt innsatsen.

Hent et animasjonsbilde.

Du kan enten lage et bilde selv, eller se på de gode ressursene som OpenGameArt. org å finne arbeid som andre har gjort. Selvfølgelig har du et ansvar for å respektere andres arbeid, men det er noe stort arbeid tilgjengelig i svært permissive lisenser i dag. Pass på at bildet er organisert i rader og kolonner, og at hvert underbilde er nøyaktig den samme størrelsen.

Du må kanskje rotere med bildeditoren for å sikre at bildet er i riktig format og at du kjenner størrelsen på hvert underbilde.
Fest animasjonsbildet til sprite.

Du knytter hele bildet til sprite, men viser bare en liten del av det til enhver tid. Dette er enklere enn å jobbe med en haug med bilder, og det er også mer effektivt.
Lag et animasjonsobjekt med metoden loadAnimation ().

Når du påberoper metoden loadAnimation () for et objekt, lager du et animasjonsverktøy som hjelper til med å administrere animasjonen. De to første parameterne er størrelsen på hele bildet (bredde og høyde), og de andre to parametrene er bredden og høyden til hvert underbilde. Hvis du får disse verdiene feil, vises animasjonen for å bla. Fortsett å spille til du får disse verdiene riktig:
```
tegn. loadAnimation (192, 128, 24, 32);
```
Bygg animasjonssyklusene.

Hver rad vil bli omgjort til en animasjonssyklus. Standardversjonen (uten noen parametere) fungerer fint i de fleste situasjoner. Se opp dokumentasjonen for de mer avanserte bruken av dette verktøyet:
```
tegn. generateAnimationCycles ();
```
Gi nytt navn til syklusene.

Animasjonene som er opprettet med BuildAnimationCycles () -kommandoen, har standardnavn, men det er nesten alltid bedre å legge til dine egne, mer meningsfylte navn. Legg til en matrise med et navn som angir hva hver rad representerer:
```
tegn. renameCycles (new Array ("down", "up", "left", "right"));
```
Angi animasjonshastigheten.

Animasjonshastigheten indikerer hvor raskt animasjonen skal kjøre. En verdi på 500 virker riktig for de fleste applikasjoner, men du kan justere denne verdien slik at tegnets turcykel ser ut som om det faktisk driver karakteren:
```
tegn.setAnimationSpeed (500);
```
Angi hvilken syklus du skal vise.

Metoden setCurrentCycle () kan du velge syklusen med et av navnene du angav i navnet på renameAnimationCycles ():
```
. setCurrentCycle ("ned");
```
Bruk pauseAnimation () -knappen for å stoppe animasjonen.

Kommandoen pauseAnimation () gjør at animasjonen midlertidig stopper.
Bruk playAnimation () for å starte animasjonen.

Denne metoden vil kontinuerlig løpe den aktuelle animasjonscyklusen.