Giochi e HTML5: come animare gli sprite nel Canvas con EaselJS

13 dicembre 2011

Questa è la traduzione dell’articolo HTML5 Gaming: animating sprites in Canvas with EaselJS di David Rousset pubblicato originariamente il 21 Luglio 2011 su MSDN Blog. La traduzione viene qui presentata con il consenso dell’editore.

Quando si creano giochi usando l’elemento Canvas di HTML5 bisogna trovare il modo di gestire le forme (gli sprite). Ci sono diverse librerie che consentono di semplificare la creazione di giochi come ImpactJS, CraftyJS e altre. Io ho deciso di usare EaselJS, utilizzata per creare PiratesLoveDaisies, un eccellente gioco in HTML5 del tipo “difendi la torre”. In questo articolo vedremo come usare gli sprite che si hanno a disposizione e come animarli.

Introduzione

Sul sito ufficiale di EaselJS si potranno trovare esempi e documentazione di base. Noi useremo alcuni esempi base di sprite assieme ad altre risorse disponibili nell’esempio XNA 4.0 Platformer.

Se seguite il mio blog, probabilmente sapete che spesso ho utilizzato questi esempi. Li ho usati, ad esempio, in due precedenti articoli:

Il Platformer sample è stato aggiornato dal team XNA ed è disponibile per Xbox 360, PC e Windows Phone 7 (App Hub – platformer). Scaricatelo ed estraete gli sprite da usare con EaselJS.

Userò due file PNG come sequenza di sprite.

Un mostro che corre, suddiviso in 10 sprite.

Figura 1: Mostro in corsa

Omino in corsa

Scarica l’originale da usare negli esempi.

E il mostro in posizioni di riposo, suddiviso  in 11 sprite diverse

Figura 2: Mostro a riposo

Omino a riposo

Scarica l’originale da usare negli esempi.

Nota: questi esempi non funzionano a dovere in Firefox 5.0, probabilmente a causa di un bug nell’implementazione del canvas. Sono invece stati testati con successo in IE9, IE10, Chrome 12, Opera 11 e Firefox Aurora 7.0.

Se vuoi aggiornamenti su Giochi e HTML5: come animare gli sprite nel Canvas con EaselJS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Giochi e HTML5: come animare gli sprite nel Canvas con EaselJS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy