How do I move a character to a mouse click position in Canvas? (Converting AS3 file)

[jacke99523568]

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.

[kglad]

try a different instance name.  ie, don't use "char"

[JoãoCésar · Accepted solution]

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

[jacke99523568]

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!

[ClayUUID]

Or you could just use the built-in TweenJS library instead, which could do the animation in a single line of code.

[ClayUUID]

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();