HTML and CSS Reference
In-Depth Information
Q.input.disableTouchControls();
this.entity.trigger('reset');
this.select();
} else {
Q.el.off('touchstart mousedown',this.touch);
Q.el.off('touchmove mousemove',this.drag);
Q.el.off('touchend mouseup',this.release);
this.select('play');
this.buttons['play'].text('reset');
this.playing = true;
this.entity.unpause();
Q.controls();
}
e.preventDefault();
},
out: function() {
this.entity.viewport.scale /= 1.5;
this.entity.viewport.recenter();
},
in: function() {
this.entity.viewport.scale *= 1.5;
this.entity.viewport.recenter();
},
});
};
The added method, as you know, gets called immediately after a component is added to an object. The first
thing the method does is pause the stage so that the step method is no longer called, freezing all sprites in
place. Next, it sets up a container for the editor. It also removes any elements of the same ID, which is useful
when the editor is reset. Then the editor calls the _.bindAll method. This binds every method in the object to
the object itself, which prevents any confusion during jQuery event callbacks with the state of the this object.
The method sets up a number of buttons, which are added onto the top of the screen. These all use the button
method, which is defined a few methods down. Next, it preselects the move tool, sets the activeTile (the
tile used to paint) to the first sprite, and binds some event handlers on touch events and their mouse equivalents.
The touch , drag , and release methods aren't added until the next section. jQuery won't cause an ex-
ception if you pass null into the on method as you do here.
The setFile method simply saves the name of the level file for later use.
The button method creates a rectangular DOM element with some styling to make it look like a button. It
then appends that element to the container created in added . These buttons are used to control the editor and
select the currently active tool.
The select button is used to highlight the currently active tool. Although some of the buttons just take an
action when you click them, the first three buttons— move , paint , and erase —are used as tools to control
what happens when the user clicks or touches the canvas. Each of the callback methods for those three buttons
just has the job to call the select method to set the current tool.
Search WWH ::




Custom Search