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

editor.save();
self.redraw();
//after map drag with zoom != 1.0, camera coordinates can be not integers,
lets fix it!
camera.round();
}
$(canvas).mousedown(function(e){
mouseDown(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
});
$(canvas).mousemove(function(e){
mouseMove(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
});
$(canvas).mouseup(function(e){
mouseUp(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
});
},
initResize: function(canvas) {
var self = this;
var resize = function() {
canvas.width = window.innerWidth-20;
canvas.height = window.innerHeight-20;
self.redraw();
}
$(window).resize(resize);
resize();
}
}
index.html with jQuery UI
Now, let's make this look like a serious enterprise application. Go to the jQuery user interface library (jQuery UI) web
site ( http://jqueryui.com ) , and download latest version. Make sure that you include the dialog widget. ( Start is the
author's preferred theme.) Also, don't forget about jQuery itself. This pretty line creates all the stuff you implemented:
window.app = new App([BasicConfig]); . There are three placeholders in the code below: one for modifications,
one for configurations, and one for active configurations. Every autotile algorithm will be added as a modification.
The result is shown in Figure 22-7 .