HTML and CSS Reference
In-Depth Information
You can use the
play
button to toggle between Editing mode and activating the game so that you can try out
the level. The first time you press the button, the editor turns off all the bound events, selects the play button,
and then unpauses the stage. The second time you press, it triggers the
reset
method, which the stage uses to
reset the scene.
The last two methods—
out
and
in
—modify the viewport to zoom out and in.
If you have this code running correctly and pull the editor up in the browser, you should select between the
first three tools and use the + and - buttons to zoom in and out and press Play to start the game. None of the
tools do anything yet, but the next section remedies this.
Adding Touch and Mouse Events
To turn this into an editor, the three missing event methods—
touch
,
drag
, and
release
—need to be written
to look at the current tool and take the appropriate action. The code for these three methods along with the code
for two supporting methods,
tilePos
and
tool
, is shown in
Listing 19-5
and should be added to the bottom
of
quintus_editor.js
inside of the
editor
component definition.
Listing 19-5:
The Canvas event methods
touch: function(e) {
var touch = e.originalEvent.changedTouches ?
e.originalEvent.changedTouches[0] : e,
stage = this.entity;
this.start = { pageX: touch.pageX, pageY: touch.pageY };
this.viewportX = stage.viewport.centerX;
this.viewportY = stage.viewport.centerY;
this.tool(touch);
e.preventDefault();
},
drag: function(e) {
var touch = e.originalEvent.changedTouches ?
e.originalEvent.changedTouches[0] : e,
stage = this.entity;
if(this.start) {
this.tool(touch);
}
e.preventDefault();
},
release: function(e) {
this.start= null;
},
tilePos: function(x,y) {
var canvasPos = $(Q.el).offset(),
canvasX = (x - canvasPos.left) / Q.el.width() * Q.width,
canvasY = (y - canvasPos.top) / Q.el.height() * Q.height,
