Finalmente ci ritroviamo sulle pagine di HTML5 Today per affrontare nuovi argomenti e nuove sfide insieme… parlando questa volta di una suite per la creazione di giochi (in realtà lo scopo è molto più ampio ma noi la useremo per questo!) in HTML5.

Inizieremo il nostro percoso dalle basi, e cresceremo insieme nella scoperta di molti aspetti di quello che (diciamolo chiaramente 😉 è l'aspetto più divertente dello sviluppo… il gioco!

Per iniziare faremo una rapidissima panoramica sulle varie librerie e tool che compongono la suite, in modo da avere un quadro chiaro, per poi proseguire con l'idea di massima del gioco che realizzeremo ed infine preparareremo una pagina base sulla quale accogliere il nostro primo oggetto renderizzato (che per oggi sarà un rettangolo)

Le librerie ed i tools della suite

Una volta scaricato CreateJs da http://www.createjs.com/ troviamo le 4 librerie che lo compongono, e precisamente:

  • EaselJS – La libreria utile per lavorare con canvas in maniera rapida, efficace e divertente.
    Inizialmente è la libreria che utilizzeremo e che ci introdurra nella creazione del nostro prototipo;
  • TweenJS – La libreria che ci consente di gestire le interpolazioni (numeriche e "non") di oggetti con facilità.
    La libreria è pensata per lavorare al meglio con EaselJs, ma può lavorare anche in maniera indipendente.
  • SoundJS – Il nome della libreria aiuta parecchio a capire che è un'ottima soluzione per la gestione dell'audio HTML5.
    La libreria risolve la problematica  crossbrowser e crossdevice dell'audio HTML5.
  • PreloadJS – Anche questa libreria ha un nome abbastanza autoesplicativo, ed aiuta nella gestione dei caricamenti dei vari assets di progetti o di pagine in genere.

Inoltre la suite ha anche degli extra che potrete trovare nella sezione dedicata del sito ufficiale, che vi consentiranno ad esempio di convertire forme da Adobe Illustrator, di avere l'autocompletamento su Sublime Text 2, etc…

Come accennato prima, la suite CreateJS aiuta nel rendere "ricca di esperienza" una pagina web moderna, aiuta nel fare interi giochi e tantissimo altro…

Quale è l'idea del prototipo?

Beh, l'idea è forse la più vecchia del mondo (non preoccupatevi… non partiremo con "Hello World!") ma dovrebbe offrire molti spunti per imparare qualcosa su CreateJS (in particolare EaselJS)

…rullo di tamburi…

…Corse Automobilistiche con vista dall'alto!

Sul web ci sono alcuni tutorial relativi a questo genere di gioco, e man mano che andremo avanti prenderemo anche come punti di riferimento alcune scelte fatte dai nostri colleghi (più bravi ovviamente).

Le prime tappe principali che seguiremo saranno orientativamente:

  • Prepariamo una pagina pronta ad ospitare il nostro gioco (ed è questa! :D);
  • Una macchinina appare per incanto nel nostro gioco;
  • Ma non fa proprio niente questo gioco? Beh, muoviamo almeno la macchinina!;
  • Povera macchinina… si sente sola… diamole compagnia con un avversario;
  • Ci vuole una pista per le nostre macchinine;
  • Rimettiamo tutto in ordine e facciamo rombare i motori.

Oltre le tappe su indicate ne arriveranno delle altre, ma ora pensiamo a partire con il nostro progetto!

Prepariamo una pagina pronta ad ospitare il nostro gioco!

La pagina da preparare è in realtà molto semplice, e prenderemo lo scaffolding direttamente dalla documentazione ufficiale, facendo solo qualche piccola rettifica. Eccolo a voi:

<!DOCTYPE html><br /><html><br /><head><br />    <style><br />       #gameCanvas {<br />           border: 1px solid #444444;<br />       }<br />    </style><br />    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script><br />    <script><br />        function init() {<br />            // Qui metteremo il codice<br />        }<br />    </script><br /></head><br /><body onLoad="init();"><br />    <canvas id="gameCanvas" width="700" height="500"><br />        Contenuto alternativo al Canvas<br />    </canvas><br /></body><br /></html>

La pagina è quanto di più semplice si possa immaginare: abbiamo incluso la libreria EaselJS dal CDN di CreateJS, creato una funzione javascript richiamata al caricamento della pagina ed abbiamo aggiunto un canvas pronto ad ospitare il nostro gioco.

Ora facciamo in modo che EaselJS serva a qualcosa, popolando la funzione init (richiamata al caricamento della pagina)

Come prima cosa creiamo un oggetto Stage (indicando l'id del nostro canvas).
var stage = new createjs.Stage("gameCanvas");

Lo Stage è il livello radice che conterrà tutti gli oggetti che vorremo disegnare sul nostro canvas (e tra poco vedremo come). Senza uno Stage difatti EaselJS servirebbe a molto poco…

Adesso aggiungiamo la nostra pseudo vettura utilizzando l'oggetto Shape.

var pseudocar = new createjs.Shape();<br />pseudocar.graphics.beginFill("red").drawRect(10,10,100,200);<br />stage.addChild(pseudocar);

L'oggetto Shape ci consente di creare un oggetto vettoriale ed aggiungerlo allo Stage(per essere disegnato sul Canvas). In realtà la creazione avviene per mezzo della classe Graphics (che possiede i metodi per creare oggetti vettoriali), che richiamiamo attraverso l'oggetto Shape stesso per comodità.

In questa occasione useremo concatenando prima il metodo beginFill (che ci consentirà di riempire di colore l'oggetto vettoriale), e poi il metodo drawRect che ci consentirà di disegnare un rettangolo di dimensioni 100 di larghezza e 200 di altezza, alla posizione x:10 e y:10.

Per essere renderizzato l'oggetto Shape va aggiunto allo Stage con il metodo addChild dello Stage stesso.

N.B. L'oggetto Graphics potrebbe essere comunque utilizzato indipendentemente da un oggetto Shape, ma non rientrerebbe nella "display list" di EaselJS, ma approfondiremo questo aspetto in futuro se sarà necessario.

L'ultima cosa da fare è effettuare l'update dello Stage con il metodo omonimo.

stage.update();

Cosi facendo chiederemo ad EaselJS di aggiornare l'oggetto Stage… e così finalmente il nostro rettangolo sarà renderizzato!

Ecco la nostra funzione init completa:

function init() {<br />            var stage = new createjs.Stage("gameCanvas");<br />            var pseudocar = new createjs.Shape();<br />            pseudocar.graphics.beginFill("red").drawRect(10,10,100,200);<br />            stage.addChild(pseudocar);<br />            stage.update();<br />        }

Abbiamo adesso un canvas con un bel rettagolo…il tutto fatto con EaselJS!

In effetti non è una cosi grande conquista, ma è il primo passo verso l'accensione dei motori per la nostra futura gara!

Alla prossima!

The following two tabs change content below.

Francesco Sciuti

Freelance a Vroom Agency
Amante dello sviluppo web, della grafica 3d e della buona musica (che non guasta mai!), 'web developpa' tutto il giorno...e prova a trovare sempre il bandolo della matassa in questo allegro ma sconfinato mondo.

//life motto
if(sad() === true) {
    sad().stop();
    beAwesome();
}