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

6. Next, we will work on the following code of the mouseover event in the city layer.
It shows the ghost building on the ile where the cursor is pointed. We also overlay
a red ilter on the ghost building when the poining ile is unavailable:
function showGhostBuilding(x, y) {
ghostBuilding.visible = true;
// from screen cursor to city layer local x/y.
var localPt = _this.globalToLocal(e.stageX, e.stageY);
// from screen's x/y of city layer to isometric x/y.
var isoCoord = game.isoMaths.screenToIsoCoord
(localPt.x, localPt.y);
// back from iso x/y to screen x/y (get tile x/y).
// in order to get the screen x/y at tile reg point.
var tileScreenCoord = game.isoMaths.isoToScreenCoord
(isoCoord.x, isoCoord.y);
ghostBuilding.x = tileScreenCoord.x;
ghostBuilding.y = tileScreenCoord.y;
ghostBuilding.filters = [];
var isTileAvailable =
(this.data[isoCoord.y] && this.data[isoCoord.y]
[isoCoord.x] === 'Tile');
if (!isTileAvailable) {
// overlay a red color by using filter
ghostBuilding.filters = [
new cjs.ColorFilter(1, 0, 0, 1), // red
];
}
ghostBuilding.cache(0, 0, 100, 100); // we need to cache the
Display Object as bitmap for the red filter.
}
game.stage.on('stagemousemove', function(e) {
// mousemove happens all the time, and if we are not creating
new building, we don't need any logic here. And make sure the
ghost building is invisible.
if (!game.isCreatingNewBuilding) {
ghostBuilding.visible = false;
return;
}
});
7. Then, we craft the on-click event handling. The coordinate conversion is similar to
the mousemove event:
this.on('click', function(e){
var localPt = this.globalToLocal(e.stageX, e.stageY);