Display Object di EaselJS
Questo articolo è parte della collana Realizzare Giochi in HTML5
Altri articoli in questa collana:
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);
0
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.
Continua a leggere questa collana:
Realizzare Giochi in HTML5 Ep. VI: Display Object con CreateJS