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

Container e annidamento

Fino a questo momento abbiamo utilizzato solo due tipi di Display Object: lo Stage e la Shape.

Lo Stage è il contenitore principale di tutti gli elementi che si trovano sulla scena. La Shape è un tipo di elemento grafico che ci permette di disegnare forme al suo interno, e noi l’abbiamo utilizzata soprattutto per disegnare cerchi, e lo faremo di nuovo tra un po’.

Esistono altri tipi di Display Object, me ne vengono in mente almeno altri tre:

• Text è un tipo di Display Object che contiene del testo, ne parleremo in un futuro articolo.
• Sprite è un tipo di Display Object che contiene una animazione grazie al suo Sprite Sheet, anche di questo avremo modo di parlare in futuro.
• Movie Clip è un termine molto familiare a chi ha avuto modo di lavorare con ActionScript, è un tipo di Display Object che contiene una sua propria linea temporale, con fotogrammi e interpolazioni.
• Bitmap è un tipo di Display Object che contiene un’immagine vera e propria, magari caricata in formato JPEG o PNG, credo che anche a lei dedicheremo un po’ di tempo.
• Container è un tipo di Display Object che può contenere altri Display Object, anche lo Stage è un Container, e vediamo subito di che si tratta.

Un Container possiede tutte le Proprietà di un qualsiasi Display Object ma non ha nulla al suo interno. Possiamo spostarlo, ruotarlo, inserirlo all’interno di un altro Container, insomma: possiamo usarlo per facilitarci il lavoro.

Immaginiamo di dover realizzare una animazione in cui al centro c’è il sole che ruota intorno a un punto che non è il suo centro (rotazione), intorno a questo sole deve ruotare un pianeta (rivoluzione), intorno al pianeta e al sole deve ruotare una luna (traslazione), come faremmo senza i Display Object e i container di EaselJS? Probabilmente con complicati calcoli trigonometrici, ma per fortuna abbiamo questo Framework e possiamo risolvere in poco tempo.

0

L’animazione qui sopra è realizzata con due Container e tre Shape:

• sunContainer ha il suo Registration Point a [60, 0] e la sua posizione al centro dello Stage e ruota di 60 gradi al secondo in senso orario.
• sunShape si trova alla posizione [0, 0] all’interno di sunContainer, contiene il disegno di un cerchio arancione e non si muove.
• earthContainer si trova alle coordinate [180, 0] all’interno di sunShape e ruota di 60 gradi al secondo in senso orario.
• earthShape si trova alla posizione [0, 0] all’interno di earthContainer, contiene il disegno di un cerchio blu e non si muove.
• moonShape si trova alla posizione [60, 0]all’interno di earthContainer, contiene il disegno di un cerchio grigio e non si muove.

Quindi tutte e tre la Shape stanno immobili, all’interno di Container che ruotano, i Container ruotando (o spostandosi, i pulsanti sono ancora lì per questo!) portano con sé tutti gli oggetti in essi contenuti.