Come Creare un'animazione multistato nel tuo gioco HTML5

Con tutto questo movimento in corso nel tuo gioco HTML5, sei sicuro di volere più animazioni sofisticate. È possibile utilizzare la funzione changeImage () o setImage () (sono due nomi diversi per la stessa cosa) per cambiare l'immagine associata a uno sprite in qualsiasi momento. A volte, però, vuoi animazioni molto più sofisticate. Dai un'occhiata a walkAnim. html.

C'è un sacco di scambio di immagini in corso qui. L'animazione a piedi è in realtà una serie di otto diverse immagini scambiate rapidamente per dare l'illusione di camminare. Ci sono 4 diverse animazioni (una per ciascuna delle direzioni cardinali), quindi sono un totale di 32 immagini diverse. Tuttavia, se si guarda il codice, si vedrà che lo sprite del personaggio contiene solo un'immagine.

Questa immagine è un'animazione composita. Ogni riga rappresenta una direzione e ogni riga contiene un ciclo o una serie di immagini che si intende ripetere.

Il rpg_sprite_walk. L'immagine png è stata creata da Franck Dupont. Ha generosamente pubblicato questa immagine su OpenGameArt. sito org, dove è conosciuto come "Arikel. "Ha pubblicato il suo lavoro sotto una licenza speciale chiamata" Attribution - Share Alike ". "Questo significa che le persone possono usare o remixare il proprio lavoro gratuitamente, purché attribuiscono l'autore originale.

L'immagine di sfondo è di un autore di nome Hyptosis, che ha rilasciato immagini di pubblico dominio sullo stesso sito. Collaboratori di talento e premurosi come Franck e Hyptosis sono la chiave per la fiorente comunità creativa. Sentiti libero di guardare oltre il sito di gioco aperto per opere d'arte più grandi da utilizzare nei tuoi giochi, ma assicurati di ringraziare e attribuire gli autori come meritano.

The simpleGame. la libreria js contiene una funzionalità per realizzare animazioni multi-immagine abbastanza facilmente. Guarda il codice per walkAnim. html per vedere come funziona:

walkAnim. gioco html var; sfondo di var; carattere var; function init () {game = new Scene (); background = new Sprite (gioco, "rpgMap. png", 800, 600); sfondo. setSpeed (0, 0); sfondo. setPosition (400, 300); character = new Sprite (gioco, "rpg_sprite_walk. Png", 192, 128); carattere. loadAnimation (192, 128, 24, 32); carattere. generateAnimationCycles (); carattere. renameCycles (new Array ("down", "up", "left", "right")); carattere. setAnimationSpeed (500); // avvia il personaggio in pausa. setPosition (440, 380); carattere. SetSpeed (0); carattere. pauseAnimation (); carattere. setCurrentCycle ("down"); gioco.start ();} // end init function update () {game. chiaro(); checkKeys (); sfondo. aggiornare(); carattere. update ();} // end update function checkKeys () {if (keysDown [K_LEFT]) { character. SetSpeed (1); carattere. RiproduciAnimazione () carattere. setMoveAngle (270); carattere. setCurrentCycle ("sinistra"); } if (keysDown [K_RIGHT]) {character. SetSpeed (1); carattere. playAnimation () carattere. setMoveAngle (90); carattere. setCurrentCycle ("right");} if (keysDown [K_UP]) {character. SetSpeed (1); carattere. playAnimation () carattere. setMoveAngle (0); carattere. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {character. SetSpeed (1); carattere. playAnimation () carattere. setMoveAngle (180); carattere. setCurrentCycle ("down");} if (keysDown [K_SPACE]) { character. SetSpeed (0); carattere. pauseAnimation (); carattere. setCurrentCycle ("down"); }}

È necessario eseguire alcuni nuovi passaggi per creare un'animazione, ma i risultati valgono completamente lo sforzo.

Ottieni un'immagine di animazione.

Puoi creare un'immagine tu stesso o guardare le eccellenti risorse come OpenGameArt. org per trovare lavoro che altri hanno fatto. Certo, hai la responsabilità di rispettare il lavoro degli altri, ma oggi c'è un ottimo lavoro disponibile nelle licenze molto permissive. Assicurati che l'immagine sia organizzata in righe e colonne e che ciascuna immagine secondaria abbia esattamente le stesse dimensioni.

Potrebbe essere necessario fare confusione con l'editor di immagini per garantire che l'immagine sia nel formato giusto e che tu conosca le dimensioni di ciascuna immagine secondaria.
Collega l'immagine dell'animazione allo sprite.

Collegherai l'intera immagine allo sprite, ma mostrerai solo una piccola parte di esso in qualsiasi momento. È più facile che lavorare con un sacco di immagini, ed è anche più efficiente.
Crea un oggetto di animazione con il metodo loadAnimation ().

Quando invochi il metodo loadAnimation () di un oggetto, stai creando uno strumento di animazione che aiuta a gestire l'animazione. I primi due parametri sono la dimensione dell'intera immagine (larghezza e altezza), mentre i secondi due parametri sono la larghezza e l'altezza di ciascuna immagine secondaria. Se ottieni questi valori errati, l'animazione sembrerà scorrere. Continua a giocare finché non ottieni questi valori:
```
carattere. loadAnimation (192, 128, 24, 32);
```
Costruisci i cicli di animazione.

Ogni riga verrà trasformata in un ciclo di animazione. La versione di default (senza parametri) funziona bene nella maggior parte delle situazioni. Cerca la documentazione per gli usi più avanzati di questo strumento:
```
carattere. generateAnimationCycles ();
```
Rinomina i cicli.

Le animazioni create con il comando buildAnimationCycles () hanno nomi predefiniti, ma è quasi sempre preferibile allegare nomi propri e più significativi. Aggiungi un array con un nome che indica cosa rappresenta ciascuna riga:
```
carattere. renameCycles (new Array ("down", "up", "left", "right"));
```
Imposta la velocità di animazione.

La velocità dell'animazione indica la velocità di esecuzione dell'animazione. Un valore pari a 500 sembra giusto per la maggior parte delle applicazioni, ma è possibile regolare questo valore in modo che il ciclo di camminata del personaggio assomigli effettivamente al carattere:
```
carattere.setAnimationSpeed (500);
```
Imposta il ciclo che intendi visualizzare.

Il metodo setCurrentCycle () consente di scegliere il ciclo con uno dei nomi indicati nel passaggio renameAnimationCycles ():
```
carattere. setCurrentCycle ("down");
```
Usa il comando pauseAnimation () per mettere in pausa l'animazione.

Il comando pauseAnimation () fa fermare temporaneamente l'animazione.
Usa playAnimation () per iniziare l'animazione.

Questo metodo interromperà continuamente il ciclo di animazione corrente.