Realizzare Giochi in HTML5 Ep. V: Introduzione a CreateJS

Display Object di EaselJS

CreateJS porta in JavaScript i concetti di Display Object e Display List che sono molto familiari a chi utilizzava Flash e ActionScript 3.

La Display List gestisce tutti gli elementi visualizzati sul Canvas. Un singolo Display Object è un elemento con delle Proprietà ben definite: x e y per le coordinate, alpha per la trasparenza, width e height per le dimensioni, rotation per la rotazione, eccetera.

Una volta creato un Display Object è possibile modificare tutte le sue Proprietà e EaselJS provvederà a disegnare i nuovi pixel.

Per esempio, fare in modo che ogni secondo il nostro oggetto cambi tutte le sue proprietà è molto facile, basta aggiungere queste poche righe:

function randomProperties() {
    circle.x = 50 + Math.random() * 200;
    circle.y = 50 + Math.random() * 200;
    circle.alpha = 0.3 + Math.random() * 0.7;
    circle.scaleX = 0.5 + Math.random();
    circle.scaleY = 0.5 + Math.random();
    circle.rotation = Math.random() * 360;
  
    stage.update();
}
setInterval(randomProperties, 1000);

Ciò che accade al Canvas è il disegno di un ovale, ogni secondo, in posizione differente, ma in questo modo abbiamo realmente il controllo di ciò che facciamo.