Skip to main content
August 20, 2013
Answered

Move container sprite according to mouse movement

  • August 20, 2013
  • 1 reply
  • 1290 views

Hi All,

Currently I'm developing a game where there is a object which follows mouse. Also there are other objects and a map on the screen.I want all of background content(whole map and other objects) to move when user moves mouse left or right. That is, if user moves mouse on right side then all content(except object which moves as per mouse) should move left side so that user can see remaining part of map on the right side.

As of now I have created new Container sprite in which I have added all of my objects and map. So when user moves the mouse right, I move the container sprite to left so it looks all stuff moves to left. Code looks like as below

var pt:Point = new Point(character.x, character.y);

pt = dori.localToGlobal(pt);

if (pt.x > (stage.width * 0.5))

{

                    container.x -= 5;

}

Structure of project is such that, I add Container directly to stage. and this container contains everything like map, character and other objects.

Now issue is that as soon as mouse goes beyond middle of stage...it creates distance between mouse location and character..!! I mean it does move according to mouse but some distance get created between mouse and character. and this distance keeps increasing as I continue to move mouse away from center of stage!!

I'm really stuck with this issue. Please someone help with this. I hope I have explained this well. Let me know if you need more info but please help.

This topic has been closed for replies.
Correct answer kglad

use linear interpolation to determine how your objects should move.  for example, if when the mouse is at x=stage.stageWidth, bg should be at stage.stageWidth-bg.width and when the mouse is at x=0, bg should be at 0 use:

paramF(bg,stage.stageWidth,stage.stageWidth-bg.width,0,0);

//in a loop that updates with mouse movement:

bg.x=bg.m*mouseX+bg.b;

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1;

}

1 reply

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
August 20, 2013

use linear interpolation to determine how your objects should move.  for example, if when the mouse is at x=stage.stageWidth, bg should be at stage.stageWidth-bg.width and when the mouse is at x=0, bg should be at 0 use:

paramF(bg,stage.stageWidth,stage.stageWidth-bg.width,0,0);

//in a loop that updates with mouse movement:

bg.x=bg.m*mouseX+bg.b;

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1;

}

August 21, 2013

Thanks for the reply!!

It did help me to achieve what I wanted..but still that issue is present.. I mean distance gets created between mouse and character, and this distance keep increasing when I keep moving the mouse right side...

So its like, when I click at start point, the character starts following mouse and as I keep moving mouse right side....the character lags behind....so evetually there is wide bap between mouse and character...which is exactly the issue!!

This is what i have done.

firstly I add all objects in container sprite

container.addChild(maze); //adding map to the container

container.addChild(endShape); // adding endPoinnt to the container

container.addChild(startShape); //adding startPoint to the container

container.addChild(character); //adding character to container...

//finally adding container to the stage

stage.addChild(container);

and then in ENTER_FRAME listner I add folllowing lines...

var x1:Number = stageRef.stageWidth;

var y1:Number = stageRef.stageWidth - maze.width;

var x2:Number = 0;

var y2:Number = 0;

var m:Number = (y1 - y2) / (x1 - x2);

var b:Number = y1 - m * x1;

container.x = m * stageRef.mouseX + b;

Please let me know if you can help me on this..!

kglad
Community Expert
Community Expert
August 21, 2013

what exact relationship do you want between the mouse position and the character?