HTML and CSS Reference
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
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.