Hvordan man opbygger en Multi-State Animation i din HTML5 spil

Med al denne bevægelse foregår i dit HTML5 spil, er du sikker på at have flere avancerede animationer. Du kan bruge changeImage () eller setImage () funktion (de er to forskellige navne for det samme) at ændre billedet forbundet med en sprite helst. Nogle gange, selv om, du ønsker meget mere avancerede animationer. Tag et kig på walkAnim.html.

Hvordan man opbygger en Multi-State Animation i din HTML5 spil

Der er en hel masse billede-swapping foregår her. Walking animation er faktisk en serie på otte forskellige billeder hurtigt omlagt til at give illusionen af ​​at gå. Der er 4 forskellige animationer (en for hver af de kardinal retninger), så det er i alt 32 forskellige billeder. Men hvis man ser over koden, vil du se, at karakteren Sprite indeholder kun ét billede.

Hvordan man opbygger en Multi-State Animation i din HTML5 spil

Dette billede er en sammensat animation. Hver række repræsenterer en retning, og hver række indeholder en cyklus eller en serie af billeder, beregnet til at blive gentaget.

Det rpg_sprite_walk.png billede er tegnet af Franck Dupont. Han generøst indsendt dette billede på OpenGameArt.org stedet, hvor han er kendt som "Arikel." Han udgav sit arbejde under en særlig licens kaldet "Navngivelse -. Share Alike" Det betyder, at folk kan bruge eller remixe hans arbejde gratis, så længe de tilskriver den oprindelige forfatter.

Baggrundsbilledet er af en forfatter ved navn Hyptosis, som udgav billeder under det offentlige domæne på samme sted. Talentfulde og tankevækkende bidragydere som Franck og Hyptosis er nøglen til det blomstrende kreative samfund. Du er velkommen til at kigge over det åbne spil kunst hjemmeside for mere store illustrationer til brug i dine spil, men sørg for at takke og tillægge forfatterne, som de fortjener.

Den simpleGame.js bibliotek indeholder en funktion til at lave multi-image animationer ganske nemt. Kig over koden for walkAnim.html at se, hvordan det virker:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> walkAnim.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
var vildt;
Var baggrund;
Var karakter;

funktion init () {
spil = ny scene ();
baggrund = ny Sprite (spil, "rpgMap.png", 800, 600);
background.setSpeed ​​(0,0);
background.setPosition (400, 300);
karakter = ny Sprite (spil, "rpg_sprite_walk.png", 192, 128);
character.loadAnimation (192, 128, 24, 32);
character.generateAnimationCycles ();
character.renameCycles (ny Array ("ned", "op", "venstre", "højre"));
character.setAnimationSpeed ​​(500);
// Starte sat på pause
character.setPosition (440, 380);
character.setSpeed ​​(0);
character.pauseAnimation ();
character.setCurrentCycle ("ned");

game.start ();
} // Ende init

funktion opdatering () {
game.clear ();
checkKeys ();

background.update ();
character.update ();
} // Ende opdatering

funktion checkKeys () {

Hvis (keysDown [K_LEFT]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (270);
character.setCurrentCycle ("venstre");
}
Hvis (keysDown [K_RIGHT]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (90);
character.setCurrentCycle ("rigtige");
}
Hvis (keysDown [K_UP]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (0);
character.setCurrentCycle ("op");
}
Hvis (keysDown [K_DOWN]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (180);
character.setCurrentCycle ("ned");
}

Hvis (keysDown [K_SPACE]) {
character.setSpeed ​​(0);
character.pauseAnimation ();
character.setCurrentCycle ("ned");
}
}

</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Du er nødt til at tage et par nye skridt til at opbygge en animation, men resultaterne er helt værd.

  1. Anskaf en animation billede.

    Du kan enten oprette et billede dig selv, eller se på de gode ressourcer som OpenGameArt.org at finde arbejde, som andre har gjort. Selvfølgelig har du et ansvar for at respektere andre arbejde, men der er nogle store værk til rådighed i meget tolerante licenser i dag. Sørg billedet er organiseret i rækker og kolonner, og at hver sub-billede er nøjagtig samme størrelse.

    Du kan have til rod med dit billede editor til at sikre, at billedet er i det rigtige format, og at du kender størrelsen af ​​hver sub-billede.

  2. Fastgør animation billede til din sprite.

    Du vil blive fastgørelse af hele billedet til din sprite, men blot vise en lille del af det til enhver tid. Det er nemmere end at arbejde med en flok billeder, og det er også mere effektiv.
  3. Opret en animation objekt med loadAnimation () metode.

    Når du har kaldt loadAnimation () metode på et objekt, du opretter en animation værktøj, der hjælper med at styre animationen. De første to parametre er størrelsen af ​​hele billedet (bredde og højde), og de to parametre er bredden og højden af ​​hver sub-image. Hvis du får disse værdier galt, vil animationen ser ud til at rulle. Hold spille, indtil du får disse værdier til højre:

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

  4. Byg animationen cyklusser.

    Hver række vil blive omdannet til en animation cyklus. Standard version (uden parametre) fungerer fint i de fleste situationer. Slå op i dokumentationen for de mere avancerede anvendelser af dette værktøj:

    character.generateAnimationCycles ();

  5. Omdøb cykler.

    Animationerne er oprettet med kommandoen buildAnimationCycles () har standardnavne, men det er næsten altid bedre at vedhæfte dine egne, mere meningsfulde navne. Tilføj et array med et navn som angiver, hvad hver række repræsenterer:

    character.renameCycles (ny Array ("ned", "op", "venstre", "højre"));

  6. Indstil animation hastighed.

    Animationen hastighed angiver, hvor hurtigt animationen kører. En værdi på 500 synes ret for de fleste applikationer, men du kan justere denne værdi, så figurens gåtur cyklus ligner det faktisk er fremdrift karakter:

    character.setAnimationSpeed ​​(500);

  7. Indstil hvilken cyklus du har til hensigt at vise.

    Den setCurrentCycle () metode giver dig mulighed for at vælge cyklen med en af ​​de navne, du er angivet i renameAnimationCycles () trin:

    character.setCurrentCycle ("ned");

  8. Brug kommandoen pauseAnimation () for at holde pause i animationen.

    Kommandoen pauseAnimation () gør animationen midlertidigt at stoppe.

  9. Brug playAnimation () for at starte animationen.

    Denne metode vil kontinuerligt loop den aktuelle animation cyklus.

Som du kan se, animation tilføjer en enorm mængde af sjov til spil og åbner op for hele verden af ​​rollespil til dit repertoire.


© 2021 Zajacperrone.com | Contact us: webmaster# zajacperrone.com