Creating a Two-Dimensional Map Editor - HTML5 Game Development Insights - page 365

var context = canvas.getContext("2d")
context.fillStyle = "black"
context.fillRect(0, 0, canvas.width, canvas.height)
var tiles = this.tiles
for (var i=0;i<tiles.byId.length; i++) {
var x = (i%this.cols) * TILE_SIZE
var y = (i/this.cols|0) * TILE_SIZE
var sprite = tiles.byId[i].sprite
if (sprite)
context.drawImage(sprite.source, sprite.x, sprite.y, TILE_SIZE,
TILE_SIZE, x, y, TILE_SIZE, TILE_SIZE)
}
var name = "undefined";
if (this.editor.selected) {
var sel = this.editor.selected
name = sel.name
var x = (sel.id%this.cols) * TILE_SIZE
var y = (sel.id/this.cols|0) * TILE_SIZE
//stroke width 1.0 => line center must be X.5
context.strokeStyle = "white"
context.lineWidth = 1.0
context.strokeRect(x + 0.5, y + 0.5, TILE_SIZE-1, TILE_SIZE-1)
}
context.fillStyle = "white";
context.textAlign = "right";
context.font = "bold 11px Tahoma, Arial";
context.fillText(name, canvas.width - 10, canvas.height - 10);
}
}
Main Window
You're almost there! You can't edit a big map if it can be scrolled. You have to take care of the press and release events
of mouse buttons to separate map scrolling (drag) from selecting an object (to be used later). This is the same problem
as with coordinates in the previous window. However, this time the canvas will have only one parent—there is no
need of cycles.
To separate scrolling from picking, use this strategy: while the mouse cursor is no more than 5 pixels from the
place where the button was pressed, it's picking. In the case of a window resize, you resize the canvas, too:
function MainWnd(renderer, camera, editor) {
this.renderer = renderer;
this.camera = camera;
this.canvas = camera.canvas;
this.map = camera.map;
this.editor = editor;
this.initMouseEvents(this.canvas)
this.initResize(this.canvas)
}