HTML and CSS Reference
In-Depth Information
viewport = this.entity.viewport,
tileLayer = this.entity.collision,
tileX = Math.floor( (canvasX / viewport.scale +
viewport.x - tileLayer.p.x)
/ tileLayer.p.tileW),
tileY = Math.floor( (canvasY / viewport.scale +
viewport.y - tileLayer.p.y)
/ tileLayer.p.tileH);
return { x: tileX, y: tileY };
},
tool: function(touch) {
var stage = this.entity,
viewport = stage.viewport;
switch(this.selected) {
case 'move':
stage.centerOn(this.viewportX +
(this.start.pageX - touch.pageX)
/ viewport.scale,
this.viewportY +
(this.start.pageY - touch.pageY)
/ viewport.scale);
break;
case 'paint':
var tile = this.tilePos(touch.pageX, touch.pageY);
stage.collision.setTile(tile.x,tile.y,this.activeTile);
break;
case 'erase':
var tile = this.tilePos(touch.pageX, touch.pageY);
stage.collision.setTile(tile.x,tile.y,0);
break;
}
},
The
touch
method, called on
touchstart
or
mousedown
, grabs either the mouse event data or the data
for the first changed touch and stores the start position of the event as well as the original viewport center loca-
tion. It then calls the
tool
method, which does the actual work based on the currently-selected tool.
The
drag
method, called on
touchmove
or
mousemove
, first checks that there is a current action that the
editor is tracking, and if so it just calls the
tool
method to take whatever action is necessary.
Finally, the
release
method just sets the
start
property to
null
. Because that property is used by
drag
to determine if it should be doing something, it effectively stops the tool.
The
tilePos
method has the somewhat involved task to figure out the exact tile location based on an
x
and
y
location on the page. It determines this by first determining the pixel position on the Canvas element (stored
in
canvasX
and
canvasY
) and then calculates the tile position (in
tileX
and
tileY
) by determining an
accurate offset position for the viewport scale, the viewport location, and the tile layer offset and divides all
those by the size of each tile.
