HTML and CSS Reference
In-Depth Information
For global coordinates, it means the coordinates on stage. The (0, 0) point is located at the
top-left corner of the stage. When we handle coordinates inside a specific display object,
we need an isolated coordinate system that is independent of the stage. EaselJS provides the
localToGlobal
,
globalToLocal
, and
localToLocal
methods. That's where we need
to translate the coordinates from a global stage to the local stage, and vice versa. Someimes
we even need to translate it between two display objects using the
localToLocal
method.
Creating depth illustrations by ordering the buildings
We need to create the depth illustraion by placing the buildings in the correct order. When
we redraw, we may add a new child in front of the screen, which should be behind a certain
building. We can reorder all the iles'
z
index after every redraw. EaselJS Container provides
a
sortChildren
method to let us define the reorder criteria. We use the
y
posiion to
determine the
z
order.
Advancing the construction progress
over time
We have placed some building construcions on the loor in the previous task. In this task,
we advance the construcion progress over ime.
Prepare for lift off
We have the following two images to represent two steps of the building construcion.
Let's add them to the project's
images
folder.
