Building an Isometric City Game - HTML5 Game Development - page 181

For reference, please refer to the following documentaion for more efects that we can
apply to a display object:
http://www.createjs.com/Docs/EaselJS/classes/Filter.html
Classified intel
Let's take a deeper look at the mouse event and screen coordinates translaion.
The different mouseover events
We used the stagemousemove event to track the movements of the mouse. There are several
events related to the mouse move event in EaselJS. They are mouseover , rollover , and
stagemousemove . There are a few differences among the following events:
F stagemousemove : This is any mouse move event that takes place on the canvas
element. This event is fired whenever the mouse is inside the canvas area and
moving. When we want to track smooth mouse moving, we need this event.
For example, you need this event in order to draw a linein drawing game.
F mouseover : This event occurs when the cursor enters the target display object.
If the target is a container and the cursor moves among its children objects, the
mouseover event is fired.
F rollover : This event is similar to the mouseover event except that it takes
the target as one object and doesn't count the movement between its children.
The event will fire once when the cursor enters the target.
The EaselJS documentaion has an example explaining the diference between various
types of events: http://createjs.com/Docs/EaselJS/classes/DisplayObject.
html#event_rollover . The the following video also demonstrates how mouseover
detects each part inside the container and how rollover only detects the container as a
whole object:
https://www.youtube.com/watch?v=ZU59cO1cmsE
Translating coordinates between global and local
We heavily use a container to group the display objects in EaselJS. Each container has its
own coordinate reference point. The coordinates (0, 0) are set at the registraion point of
the container and all the children objects follow it. These are the local coordinates.