Categories
ECMAscript Giochi HTML5 Realizzare Videogames Tutorial Tutorial JavaScript

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

Intro

This post is part of the series Realizzare Giochi in HTML5

Other posts in this series:

  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

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.

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.

Continue reading this series:

Loading spinner

Leave a Reply

Your email address will not be published. Required fields are marked *