HTML and CSS Reference
In-Depth Information
Drawing the building
We have two data maps for comparison: the old one from the last frame and the current
one. We only redraw the building that has just changed between the last frame and current
frame. For any building changes, we remove the old building sprite on that ile and draw a
new instance there.
By avoiding redrawing the enire map every ime, we avoid making too many deleions
and creaions of the display objects in a short period of ime. This helps improve the
performance. It also helps to avoid a blank screen when all the iles are being removed
from every frame.
Building view classes
We define the building sprite in the
sprite-view.js
file for each type of building that
needs to be visualized on the city layer. The following is the merchant sprite deiniion:
(game.Merchant = function() {
game.Tile.call(this, 'images/merchant.png');
this.regX = 0;
this.regY = 43;
}).prototype = Object.create(game.Tile.prototype);
Because of the variaion in the dimensions of the building drawn, each building view has
its own image path and registraion point. By encapsulaing this informaion into a class,
we can simply create a building instance by name without worrying about misplacing it
on the wrong registraion point.
Applying color filter
When choosing an invalid place, we show a red overlay on the ghost building image to indicate
the invalid place to a player. This overlay is done by the filter:
ghostBuilding.filters = [
new cjs.ColorFilter(1, 0, 0, 1),
];
Every display object has a list of filters. There are filters on color adjustment, hue, blur, and
so on. In the following link, you will ind a demonstraion on how to apply muliple ilters to
an image:
http://www.createjs.com/#!/EaselJS/demos/filters
In order to make the filter work, we must cache the display object. It is like prerendering the
display objects and effects into one bitmap.
