Skip to main content
jacke99523568
jacke99523568
Participant
August 9, 2021
Answered

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

  • August 9, 2021
  • 2 replies
  • 372 views

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.

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

2 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
August 9, 2021

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
    jacke99523568Author
    Participant
    August 9, 2021

    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!

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    August 9, 2021

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices