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

Planning the placing flow
This task involves both the UI layer and the city layer. We will use event dispatching
for communicaion between these two components. There will be two custom events:
newBuildingToBePlaced and placedBuilding . The following figure illustrates the
event communicaion between both the layers in order to place the selected building
on the floor:
Before we start following the steps for compleing this task, we want to have two more
helper funcions. These funcions convert coordinates between the screen and isometric
system. Let's insert the following code inside the helper.js file:
// ISO <-> Screen conversion.
;(function(game, cjs){
game.isoMaths = {
screenToIsoCoord: function(screenX, screenY) {
var ix = Math.floor( (screenY * game.Tile.width +
screenX * game.Tile.height) / (game.Tile.width *
game.Tile.height) );
var iy = Math.floor( (screenY * game.Tile.width
- screenX * game.Tile.height) /
(game.Tile.width * game.Tile.height) ) + 1;
return {x: ix, y: iy};
},
isoToScreenCoord: function(isoX, isoY) {
var sx = (isoX - isoY) * game.Tile.width / 2;
var sy = (isoX + isoY) * game.Tile.height / 2;
return new cjs.Point(sx, sy);
}
};
}).call(this, game, createjs);