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);

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.

Aggiungi la tua reazione
0
Like
0
Love
0
Ah Ah
0
Wow
0
Sad
0
Grrr
0

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.