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

Il Punto di Registrazione

Un concetto molto importante, su cui è opportuno fare chiarezza il prima possibile è quello che riguarda il Registration Point.

Ogni Display Object ha un sistema di riferimento cartesiano al suo interno, come abbiamo visto, con un centro alle coordinate [0, 0]. Allo stesso modo ogni Display Object ha un sistema di riferimento cartesiano esterno, quello del suo contenitore.

Quando applichiamo una trasformazione a un oggetto, per esempio una rotazione, un ridimensionamento, un riposizionamento, lo facciamo sempre in base al Registration Point dell’oggetto stesso e al sistema di riferimento cartesiano del suo contenitore.

L’esempio che segue mostra un unico Oggetto di tipo Shape che al suo interno ha due cerchi. Il cerchio blu ha raggio pari a 30 pixel e il centro alla posizione [0, 0], il cerchio grigio ha raggio pari a 10 pixel e il suo centro alla posizione [60, 0]. Se fossero fermi non si capirebbe, per questo stanno ruotando.

0

Sembra che il cerchio blu non si muova affatto, questo perché il centro del cerchio blu si trova alle coordinate interne [0, 0] e il punto di registrazione si trova anch’esso a [0, 0].

Basta aggiungere una riga per spostare il punto di registrazione dalle coordinate [0, 0] alle coordinate [60, 0], in corrispondenza del centro del cerchio grigio.

circles.regX = 60;

Questo cambia il centro di rotazione e anche il posizionamento, quindi sembrerà che il cerchio grigio sia fermo, con il suo centro alle coordinate [100, 70] dello Stage, e che il cerchio blu ruoti attorno a lui:

0

Quindi il Registration Point è il centro di riferimento di un Display Object, è il punto di origine di tutti gli effetti, centro di rotazione e di posizionamento. Le coordinate di un Display Object possono essere modificate semplicemente intervenendo sulle Proprietà regX e regY di una qualsiasi istanza.

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.