00:00
00:00
Newgrounds Background Image Theme

Ragdollchewy just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

Limit movement in AS3

2,332 Views | 7 Replies
New Topic Respond to this Topic

Limit movement in AS3 2011-12-22 21:00:12


I am trying to code some circles to move around inside one another. I have managed to do the hit test bit, but its getting them to stop at the edge inside one another is what I am having problem with. The aim is so the user can drag the red circle and the yellow stays where it is within the red, but when you drag the yellow circle the red moves with it. I have included a diagram to try and help make it more understandable. Thank you in advance for your help.

Limit movement in AS3

Response to Limit movement in AS3 2011-12-22 21:42:04


I wouldnt use hitTests since your dealing with circles the collusions will be easy with a little math.

The anchor point of each circle should be in the center. The yellow circle should be the child of the red circle and the red circle should be the child of the white circle and the white circle a child of the stage.

This way when you move just the red circle the yellow circle will stay where it is inside the red circle (the same thing if youd like to move the white circle).

Now for the Math:

Lets start with the red circle. we know its radius is half its width or height, so we set a variable radius to width/2. we also know the radius of the yellow circle and set a variable yellowRadius to yellow.width/2.

If the distance of yellow's position (center of yellow) is greater than radius - yellowRadius then the yellow circle will be outside of the red circle. So we must find the distance between yellow center and red's center.

to do that it is just using pathagaren therom (cant spell):

distance = Math.sqrt(yellow.x*yellow.x + yellow.y*yellow.y);

Now when you go to move circles, you find the distance of the future x and y points (by mouse), find the distance using ^^ that formula. and If that distance is greater than radius - yellowRadius do not allow the move.

Then do the same for white circle to the red circle.

It would be best to use AS3 if your not already and make a class for this so you can easy reuse code and would make it easier to have 10 circles inside 1 circle if you wanted. Goodluck.


BBS Signature

Response to Limit movement in AS3 2011-12-23 00:14:52


SweetDaddyC I took your challenge on, and I made a quick demo:
http://www.newgrounds.com/dump/item/f47d 48bf80fffa10296d734ea806b558

How it works is exactly how swishcheese described it.
Here's an important function:

function findDistance(ballA:Ball, ballB:Ball):void {
	
	var dx:Number = ballA.x - ballB.x;
	var dy:Number = ballA.y - ballB.y;
	var dis:Number = Math.sqrt(dx*dx+dy*dy);
	
	//If we drag the ball out of the radius stop it on the radius line
	if(dis > ballB.radius - ballA.radius){
		var force:Number = dis-(ballB.radius - ballA.radius);
		ballA.x -= dx/dis*force;
		ballA.y -= dy/dis*force;
	}
}

BBS Signature

Response to Limit movement in AS3 2011-12-23 00:23:00


At 12/23/11 12:14 AM, The-titan wrote: SweetDaddyC I took your challenge on, and I made a quick demo:
http://www.newgrounds.com/dump/item/f47d 48bf80fffa10296d734ea806b558

How it works is exactly how swishcheese described it.
Here's an important function:

function findDistance(ballA:Ball, ballB:Ball):void {

var dx:Number = ballA.x - ballB.x;
var dy:Number = ballA.y - ballB.y;
var dis:Number = Math.sqrt(dx*dx+dy*dy);

//If we drag the ball out of the radius stop it on the radius line
if(dis > ballB.radius - ballA.radius){
var force:Number = dis-(ballB.radius - ballA.radius);
ballA.x -= dx/dis*force;
ballA.y -= dy/dis*force;
}
}

Sweeeeet, goodwork! I like the extra percision where if It is greater you move it to the exact position, touching the circles side. Its a nice touch.


BBS Signature

Response to Limit movement in AS3 2011-12-25 22:07:13


At 12/23/11 12:14 AM, The-titan wrote: SweetDaddyC I took your challenge on, and I made a quick demo:
http://www.newgrounds.com/dump/item/f47d 48bf80fffa10296d734ea806b558

How it works is exactly how swishcheese described it.
Here's an important function:

function findDistance(ballA:Ball, ballB:Ball):void {

var dx:Number = ballA.x - ballB.x;
var dy:Number = ballA.y - ballB.y;
var dis:Number = Math.sqrt(dx*dx+dy*dy);

//If we drag the ball out of the radius stop it on the radius line
if(dis > ballB.radius - ballA.radius){
var force:Number = dis-(ballB.radius - ballA.radius);
ballA.x -= dx/dis*force;
ballA.y -= dy/dis*force;
}
}

Woweeee, thanks Titan. I managed to get the red working, but not the yellow in the big extravagant code I was working on, but that is perfect. And thank you too swishcheese, you certainly put me on the right path. Big Thank you both.

Response to Limit movement in AS3 2011-12-25 23:14:18


I have a query. When it says "function findDistance(ballA:Ball, ballB:Ball):void {" Would Ball be the white ball? Sorry kinda new at AS3.

Response to Limit movement in AS3 2011-12-26 10:59:45


Ball is a Class name, in AS3 everything after the : is a type name..

var myNumber:Number = 0;
var myString:String = "";
var myBool:Boolean = true;

In this case I've created a new type (Class) called Ball, this class name represents the movieclip on the stage, and the main thing about it is that it stores the radius propery of the ball.

So here we pass in two balls, ballA and ballB both of which are of type "Ball" (ballA:Ball, ballB:Ball).

To add a new Class to any of your movieclips, simply go to your library > find the movieclip you want to create a class for > right click it > Properties > Export for ActionScript.


BBS Signature

Response to Limit movement in AS3 2012-04-18 03:28:43


At 12/23/11 12:14 AM, The-titan wrote: SweetDaddyC I took your challenge on, and I made a quick demo:
http://www.newgrounds.com/dump/item/f47d 48bf80fffa10296d734ea806b558

Guys is it possible to get FLA of the demo? Can't get the refreshing of distance checking, i do it with ENTER_FRAME, but it makes some buggy behaviour.