Share
In tutti i tutorial di Crafty fino a questo punto, hai utilizzato caselle quadrate o rettangolari per comprendere concetti diversi come animazioni, tastiere o eventi tattili. Sebbene questo sia un ottimo modo per imparare rapidamente qualcosa in più sulla libreria, probabilmente ti piacerà usare le immagini nei tuoi giochi reali.
In questo tutorial, imparerai come caricare i fogli sprite per utilizzare diverse immagini nel tuo gioco. Dopodiché, imparerai come animare personaggi diversi usando l'animazione sprite.
Per coloro che non hanno familiarità con i fogli sprite, sono file di immagini che contengono diversi elementi grafici più piccoli disposti insieme in una griglia. Ognuna di queste grafiche o sprite più piccole può essere utilizzata da sola o insieme ad altre immagini per animare oggetti diversi.
Non puoi caricare direttamente un foglio sprite in Crafty e iniziare a usarlo. Dovrai anche dirgli la larghezza e l'altezza delle diverse tessere o sprite nel tuo foglio sprite. Puoi anche dare nomi specifici a singole immagini. Ad esempio, uno sprite con una piccola pietra in esso può essere chiamato "small_stone" per un facile riferimento. Ricordare il nome di una tessera è molto più semplice che ricordare le coordinate reali di immagini diverse.
Utilizzeremo il seguente foglio sprite di tokka in diverse demo di questo tutorial.
Ha molte immagini che possono essere utilizzate quando il giocatore sta camminando, saltando, rimanendo inattivo o sparando. In questo caso, la larghezza e l'altezza della maggior parte delle tessere sono rispettivamente 80 px e 94 px. Alcuni fogli sprite potrebbero avere anche un riempimento extra attorno a singole tessere o al foglio sprite nel suo insieme. Questi possono essere specificati durante il caricamento del foglio sprite utilizzando il paddingX, paddingY, e paddingAroundBorder proprietà.
Ecco il codice di cui abbiamo bisogno per caricare il foglio sprite qui sopra nel nostro gioco:
var game_assets = "sprites": "hero_spritesheet.png": tile: 80, tileh: 94, map: hero_idle: [0, 0], hero_walking: [1, 1], hero_jumping: [2, 3] , hero_sitting: [0, 4]; Crafty.load (game_assets);
Le tessere sono referenziate usando una coppia di numeri. Il primo numero determina la colonna del nostro sprite e il secondo numero determina la sua riga. I numeri sono a base zero. Ad esempio, è possibile accedere allo sprite nella prima colonna e nella prima riga utilizzando [0, 0]. Allo stesso modo, è possibile accedere allo sprite nella terza colonna e nella quarta riga utilizzando [2, 3]. Come accennato in precedenza, puoi dare nomi diversi ai singoli sprite per facilitarne l'uso.
Una volta caricato un foglio sprite, puoi renderizzare le immagini sullo schermo usando il seguente codice:
Accentsconagua
var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10);Il X e y gli attributi determinano la posizione in cui saranno resi gli sprite. Puoi anche impostare la larghezza e l'altezza dei singoli sprite usando il w e h attributi.
Poiché lo sprite ha un 2D componente, puoi applicare tutte le proprietà e gli attributi di 2D componente a queste immagini. Ad esempio, puoi capovolgere il nostro eroe in orizzontale in modo che sia rivolto verso l'altra direzione usando this.flip ( "X"). Allo stesso modo, puoi ruotare uno sprite usando il rotazione attributo o renderlo trasparente usando il alfa attributo.
var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");Diciamo che è necessario rendere solo una parte di un dato sprite sulla tela. Puoi farlo con l'aiuto di .raccolto (numero x, y Number, numero w, numero h) metodo. I primi due parametri determinano i valori di offset xey dello sprite. Gli ultimi due parametri determinano la larghezza e l'altezza dello sprite ritagliato. Tutti i valori dovrebbero essere specificati in pixel.
Fino a questo punto, hai spostato diverse entità cambiando le loro X e y attributi. Non era un problema visto che stavi spostando solo scatole rettangolari per la maggior parte del tempo. Tuttavia, spostando il nostro personaggio principale facendolo scorrere in questo modo sembrerà molto innaturale. Aggiungere animazioni a oggetti come monete che un giocatore può raccogliere renderà il gioco ancora più piacevole.
Tutte le animazioni relative agli sprite richiedono di aggiungere il SpriteAnimation componente all'entità. Questo componente tratta le diverse immagini in una mappa sprite come fotogrammi dell'animazione.
Le informazioni su un'animazione sono memorizzate nel bobina oggetto. L'oggetto bobina ha cinque diverse proprietà:
id che è il nome della bobinamontatura array che ha un elenco di frame per l'animazione nel formato [xpos, ypos] currentFrame proprietà che restituisce l'indice del frame correntefacilitando proprietà che determina il modo in cui l'animazione dovrebbe andare avantidurata proprietà che imposta la durata dell'animazione in millisecondiCi sono quattro diversi eventi che possono essere attivati da un'animazione sprite. Questi sono:
Tutti questi eventi ricevono il bobina oggetto come parametro.
oltre al bobina oggetto, c'è anche a .bobina() metodo che viene utilizzato per definire le animazioni sprite. Puoi usare il .animare() metodo per riprodurre una qualsiasi delle animazioni definite.
Il processo di animazione sprite inizia creando uno sprite statico sulla tela.
var walking_hero = Crafty.e ('2D, Canvas, hero_walking, SpriteAnimation') .attr (x: 40, y: 20);Il hero_walking l'immagine nel caso precedente è la prima immagine che l'utente vede prima dell'animazione. Gli attributi vengono utilizzati per specificare la posizione dell'entità corrente. Una volta che l'entità è stata creata, puoi usare il .bobina() metodo per definire l'animazione attuale.
walking_hero.reel ("walking", 1000, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]]);Questo metodo accetta tre parametri. Il primo parametro è il Id dell'animazione che si sta creando. Il secondo parametro viene utilizzato per impostare la lunghezza dell'animazione in millisecondi e il terzo parametro è una matrice di matrici che contengono la posizione della colonna (x) e della riga (y) dei fotogrammi successivi. In questo caso, la matrice contiene la posizione di tutti gli sprite nella seconda riga.
Un'altra versione di questo metodo richiede cinque parametri. I primi due parametri sono la bobina Id e lunghezza dell'animazione. Il terzo e il quarto parametro sono usati per impostare la posizione iniziale xey per l'animazione sulla mappa sprite. L'ultimo parametro imposta il numero di fotogrammi sequenziali nell'animazione. Quando è impostato su un valore negativo, l'animazione verrà riprodotta all'indietro.
L'animazione della bobina sopra potrebbe anche essere creata usando il seguente codice:
walking_hero.reel ("walking", 1000, 0, 1, 6);Mentre questa versione è succinta, è un po 'limitata. Questo metodo è utile solo se tutti gli sprite che si desidera includere nell'animazione si trovano in una singola riga. Inoltre, l'animazione mostrerà queste immagini nell'ordine in cui compaiono nel foglio sprite.
Dopo aver definito l'animazione, puoi giocarci usando il .animate (reel_Id [, loopCount]) metodo. Il primo parametro è l'animazione che si desidera riprodurre e il secondo parametro determina il numero di volte in cui si desidera riprodurre questa animazione. Le animazioni vengono riprodotte una volta per impostazione predefinita. Ambientazione loopCount a -1 suonerà l'animazione indefinitamente.
In determinate situazioni, potresti voler riprodurre un'animazione solo una volta sulla base di un evento. Ad esempio, un'animazione di salto dovrebbe essere riprodotta quando l'utente preme un pulsante per far saltare il giocatore. Puoi provarlo nella demo sopra. Premendo il tasto Freccia su il tasto farà saltare il secondo sprite. Ecco il codice per rilevare la pressione dei tasti:
jumping_hero.bind ('KeyDown', function (evt) if (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("jumping", 1););Puoi anche mettere in pausa e riprendere le animazioni a metà utilizzando il pulsante .pauseAnimation () e .resumeAnimation () metodi.
Se a un singolo sprite sono associate più animazioni, è possibile determinare se al momento è in esecuzione un'animazione specifica utilizzando .isPlaying ([String reelId]) metodo. Se no Id è fornito, controllerà l'eventuale presenza di animazioni.
Dopo aver completato questo tutorial, dovresti essere in grado di caricare i tuoi fogli di sprite in Crafty e usarli per rappresentare diverse entità di gioco invece di vari rettangoli. Ora puoi anche applicare diverse animazioni a un'entità in base a diversi eventi. Dovrei ricordarti che ho usato la versione 0.7.1 di Crafty in questo tutorial, e le demo potrebbero non funzionare con altre versioni della libreria.
JavaScript è diventato una delle lingue di fatto di lavorare sul web. Non è senza le curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Nel prossimo tutorial, imparerai come aggiungere suoni nel tuo gioco.
