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.