JavaScript  »  Articoli  »  HTML5 e JavaScript 

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:

• Windows Phone 7 Platformer Starter Kit for XNA Studio 4.0
• Silverlight 4 XNA Platformer Level Editor for Windows Phone 7

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

Scarica l'originale da usare negli esempi.

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

Figura 2: Mostro 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.

Altri articoli

Altre guide

Altre newsletter