HTML and CSS Reference
In-Depth Information
Creating the Editor Module
The
Quintus.Editor
module consists of just a single component,
editor
, which can be added to a Stage
object. It creates a number of tool buttons to let the user move the game around, paint and erase tiles, select
tiles, zoom in and out, and finally save the level back to the server.
The first version of the editor adds some buttons onto the screen and enables you to select between the vari-
ous tools.
Create a
js/quintus_editor.js
and add the code in
Listing 19-4
to get the editor up-and-running.
Listing 19-4:
The basic editor module
Quintus.Editor = function(Q) {
Q.register('editor',{
added: function() {
var stage = this.entity;
stage.pause();
$("#quintus-editor").remove();
this.controls = $("<div id='quintus-editor'>")
.appendTo(Q.wrapper)
.css({position:"absolute",top:0, zIndex: 100});
_.bindAll(this);
this.buttons = {
move: this.button("move",this.move),
paint: this.button("paint",this.paint),
erase: this.button("erase",this.erase),
select: this.button("tile",this.tile),
play: this.button("play",this.play),
out: this.button("-",this.out),
in: this.button("+",this.in),
save: this.button("save",this.save)
};
this.select('move');
this.activeTile = 1;
Q.el.on('touchstart mousedown',this.touch);
Q.el.on('touchmove mousemove',this.drag);
Q.el.on('touchend mouseup',this.release);
},
setFile: function(levelFile) {
this.levelFile = levelFile;
},
button: function(text,callback) {
