Copy link to clipboard
Copied
Hello,
I am in the process of converting my AS3 code to Canvas. What I am attempting to do is click on a map and have the character incrementally move to the X and Y position. In AS3 I was able to accomplish this with the following code:
function click(e: MouseEvent): void {
if ((walking == false)&&(mapHS.hitTestPoint(this.gameCursor.x, this.gameCursor.y, true))){
clickX = mouseX;
clickY = mouseY;
if (clickX >= char.x){
destX = Math.round((clickX - char.x)/40)*40;
walkingRight = true;
}
if(clickX <= char.x){
destX = Math.round((clickX - char.x)/40)*40;
walkingLeft = true;
}
if(clickY >= char.y){
destY = Math.round((clickY - char.y)/40)*40;
walkingUp = true;
}
if(clickY <= char.y){
destY = Math.round((clickY - char.y)/40)*40;
walkingDown = true;
}
addEventListener(Event.ENTER_FRAME, walkGov);
}
In my Canvas file I cannot for the life of me figure out how to do this. In particular, I'm having trouble with mouse coordinate capture. In AS3 it was a simple "mouseX". In Canvas I've tried using "stage.mouseX" and "event.clientX" but they don't work. I even tried dumbing it down with something like:
this.addEventListener("click", clickMove.bind(this));
function clickMove(event) {
this.char.x = stage.mouseX;
this.char.y = stage.mouseY;
}
but the char movie clip will just go to random locations or to 0,0....
If anyone can help me with this, even with a simple reposition to click without incremental movement, I would greatly appreciate it. I got really comfortable with AS3 but now that I'm working with Canvas there are more facets of information and therefore, more confusion.
Thank you.
Hi.
If you want to do this on a tick based approach, you can write something like this:
var root = this;
var character = root.character;
root.main = function()
{
root.friction = 0.9;
character.destinationX = character.x;
character.destinationY = character.y;
root.on("mousedown", root.onMouseDown);
createjs.Ticker.on("tick", root.onTick);
};
root.onMouseDown = function(e)
{
var pos = character.parent.globalToLocal(character.stage.mouseX, character.stage.mouseY);
character.destinationX
...
Copy link to clipboard
Copied
try a different instance name. ie, don't use "char"
Copy link to clipboard
Copied
Hi.
If you want to do this on a tick based approach, you can write something like this:
var root = this;
var character = root.character;
root.main = function()
{
root.friction = 0.9;
character.destinationX = character.x;
character.destinationY = character.y;
root.on("mousedown", root.onMouseDown);
createjs.Ticker.on("tick", root.onTick);
};
root.onMouseDown = function(e)
{
var pos = character.parent.globalToLocal(character.stage.mouseX, character.stage.mouseY);
character.destinationX = pos.x;
character.destinationY = pos.y;
};
root.onTick = function(e)
{
character.x = root.lerp(character.x, character.destinationX, root.friction);
character.y = root.lerp(character.y, character.destinationY, root.friction);
};
root.lerp = function(v1, v2, f)
{
return f * v1 + (1 - f) * v2;
};
root.main();
Make sure you have an instance on the background that takes up the whole screen for the mouse down event to be detected.
Regards,
JC
Copy link to clipboard
Copied
Thank you! It works!
Now I just have to wrap my head around why it works. Can I assume that if I tinker with the "fricition" that it will adjust the movement speed? Thanks again!
Copy link to clipboard
Copied
Or you could just use the built-in TweenJS library instead, which could do the animation in a single line of code.
Copy link to clipboard
Copied
To expand on the above:
var root = this;
var character = root.character;
root.main = function() {
root.on("mousedown", root.onMouseDown);
};
root.onMouseDown = function(e) {
var pos = character.parent.globalToLocal(character.stage.mouseX, character.stage.mouseY);
createjs.Tween.get(character, {override: true}).to({x:pos.x, y:pos.y}, 500, createjs.Ease.quadOut);
};
root.main();