Realizzare Giochi in HTML5 Ep. VI: Display Object con CreateJS

Introduzione

La scorsa settimana siamo riusciti a disegnare un cerchio all’interno di un Canvas utilizzando la libreria EaselJS, ma ancora non siamo stati in grado di apprezzarne le potenzialità: fino a quando si tratta di disegnare un singolo elemento in una specifica posizione possiamo anche fare a meno di questa libreria, il divertimento arriva quando abbiamo bisogno di disegnare più elementi.

Non ci soffermeremo per il momento su aspetti che momentaneamente è prematuro analizzare, quindi passiamo subito a parlare dello Stage. Lo Stage è un Display Object, ed è l’elemento più alto in gerarchia, tutti gli altri elementi che creiamo con EaselJS si trovano all’interno dello Stage, e utilizzano il suo sistema di coordinate.

Per questo motivo tutte le applicazioni create con EaselJS iniziano con qualcosa che somiglia a queste die righe:

canvas = document.getElementById('myCanvas');
 stage = new createjs.Stage(canvas);

La prima riga accede all’elemento con id myCanvas, la seconda riga inizializza un oggetto di tipo Stage all’interno del contesto 2D dell’elemento Canvas.

Da questo momento in poi per aggiungere un elemento allo Stage utilizzeremo il metodo addChild che è comune a tutti i Display Object di tipo Container.

Ecco come in poche righe possiamo aggiungere un cerchio blu allo Stage:

circle = new createjs.Shape();
circle.graphics.beginFill("#006699");
circle.graphics.drawCircle(0,0,30);
circle.graphics.endFill();
stage.addChild(circle);

Ogni volta che modifichiamo qualcosa nella Display List, se vogliamo vederla, dobbiamo dire allo Stage di aggiornarsi, in questo modo:

stage.update();

Ecco il risultato di queste poche righe.

0

Quello che vediamo è solo uno “spicchio” del cerchio che abbiamo chiesto a EaselJS di disegnare, ma questo è dovuto semplicemente al fatto che il centro del cerchio si trova esattamente nell’angolo in alto a sinistra dello Stage. È il momento di parlare del sistema di coordinate di EaselJS.

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

Continua a leggere questa collana:

Potrebbero interessarti anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.