Hi!
I’m trying to figure out how to get 2 (or more) movie clips to bounce off each other and it’s a bit frustrating since I’m just learning HitTest etc.
What I have:
- I have 2 movie clips, a circle and a square.
- each movie clip has actionscript for the “falling” gravity to work.
- each movie clip has a button in it with actionscript for the dragging and releasing etc.
- When the movie loads, the circle and square drop from the top of the stage and bounce (using gravity etc).
- You can drag and “toss” each object and it will bounce off the sides and bottom of the stage.
What I’m trying to do:
- I’d like the circle and square to bounce off each other when they collide just like they bounce off the sides of the stage (right now they bounce behind or in front of eachother based on their layer depths).
- Also, but less important, I’d like them to bounce off the top of the stage too instead of flying up and out.
Questions:
- How do I make this work? I’ve seen many examples using HitTest etc on instances of one movieclip, but my movie clips need to be different since they will be turned into separate objects/graphics later (if that makes sense). Is this still a HitTest solution? I don’t think so since I’m not really using HitTest to begin with? I’ve tried incorporating code from some of those examples, but it just doesn’t work.
I’ve attached 2 files - one in Flash 8 format, and another in Flash mx2004 format so hopefully someone can open one of them, take a look at the code and give me some help.
I appreciate it 
Peace,
Hondo311
Hello Hondo311,
This is a pretty quick and crude solution to your problem, but it should provide you with a great starting place if you want to extend it. Just add these lines at the bottom of your onEnterFrame function for the ball.
if(this.hitTest(_root.box)) {
trace("hit");
// ball and box are colliding, so lets reverse their movements.
vel.x *= -1;
vel.y *= -1;
_root.box.vel.x*=-1;
_root.box.vel.y*=-1;
/* these actions could be made more realistic by determining the precise
position of the ball relative to the box during the collision, for instance,
determine if the right side is colliding with the left side, so only reverse
the x velocity, instead of both. */
}
//this prevents the ball from leaving the upper extreme of the stage
if (this._y < 0) {
vel.y*=-1;
}
One way to improve this is to add several hit areas to each object at their edges. For instance, you could turn each edge line of the box into a separate movie clip within the box MC, and hit test each of those, then you would know which extreme the ball was colliding with.
I hope that helps =)
-thesean
[quote=hondo311;2326146]Hi!
I’m trying to figure out how to get 2 (or more) movie clips to bounce off each other and it’s a bit frustrating since I’m just learning HitTest etc.
What I have:
- I have 2 movie clips, a circle and a square.
- each movie clip has actionscript for the “falling” gravity to work.
- each movie clip has a button in it with actionscript for the dragging and releasing etc.
- When the movie loads, the circle and square drop from the top of the stage and bounce (using gravity etc).
- You can drag and “toss” each object and it will bounce off the sides and bottom of the stage.
What I’m trying to do:
- I’d like the circle and square to bounce off each other when they collide just like they bounce off the sides of the stage (right now they bounce behind or in front of eachother based on their layer depths).
- Also, but less important, I’d like them to bounce off the top of the stage too instead of flying up and out.
Questions:
- How do I make this work? I’ve seen many examples using HitTest etc on instances of one movieclip, but my movie clips need to be different since they will be turned into separate objects/graphics later (if that makes sense). Is this still a HitTest solution? I don’t think so since I’m not really using HitTest to begin with? I’ve tried incorporating code from some of those examples, but it just doesn’t work.
I’ve attached 2 files - one in Flash 8 format, and another in Flash mx2004 format so hopefully someone can open one of them, take a look at the code and give me some help.
I appreciate it 
Peace,
Hondo311[/quote]
[QUOTE=thesean;2326311]Hello Hondo311,
This is a pretty quick and crude solution to your problem, but it should provide you with a great starting place if you want to extend it. Just add these lines at the bottom of your onEnterFrame function for the ball.
if(this.hitTest(_root.box)) {
trace("hit");
// ball and box are colliding, so lets reverse their movements.
vel.x *= -1;
vel.y *= -1;
_root.box.vel.x*=-1;
_root.box.vel.y*=-1;
/* these actions could be made more realistic by determining the precise
position of the ball relative to the box during the collision, for instance,
determine if the right side is colliding with the left side, so only reverse
the x velocity, instead of both. */
}
//this prevents the ball from leaving the upper extreme of the stage
if (this._y < 0) {
vel.y*=-1;
}
One way to improve this is to add several hit areas to each object at their edges. For instance, you could turn each edge line of the box into a separate movie clip within the box MC, and hit test each of those, then you would know which extreme the ball was colliding with.
I hope that helps =)
-thesean[/QUOTE]
thesean,
Thank you!
YOU are brilliant!! that works great! I’ll take a shot at adding hit areas like you suggested!
Thanks!
Hondo311
hey theSean,
the objects now bounce off eachother (yay!), but the issue is, if the ball drops directly on the box from above (or box on ball), it slowly moves itself down behind the box . . . is this because of a gravity setting or something? The ball should just stop on top of box and not slide down behind it . . . is there a good fix for that?
Thanks!
Hondo311
Hey Hondo,
Yes that’s a tricky issue. The problem is that if the ball’s downward velocity is so strong, that it goes “inside” the box a little bit, then shifting the velocity the opposite direction isn’t enough, because they’re still colliding. I can think of a few ways to get around this.
You could write some code so that the velocity can reverse itself less often, meaning that you could make it so the function where the velocity*= -1 can happen only once every 300 milliseconds, or something like that.
Another way would be to add some value, maybe -1, to the object on top when they collide, because that would ensure that the ball would bounce far enough away where they wouldn’t get stuck anymore.
You’ll have to experiment with one of those methods, I’m sure there’s other ways to do it as well, but you should be able to try one of those.
Good luck!
-thesean
Hey theSean,
That makes sense about the velocity.
So what would your suggestions look like integrated into the actionscript of my file?
I’m learning all the statements and where they go and how they work slowly but surely . . . if you’d be able to try it out on the Flash file I uploaded, I’d not only be way appreciative, but also better able to learn how your suggestions actually work with the code . . . I’ll try it on my own too in the meantime and see how bad I mess it up heheh! I’m just shaky on writing the code from scratch etc.
Hondo311
Well, I actually spent a good portion of time recently making a semi-realistic bouncing ball. If I were you, I’d forget hitTest and learn more about Axis Aligned Bounding Boxes, which are basically a box around the object.
if(this._x < obstacle._x+obstacle._width or this._x+this._width > obstacle._x or this._y < obstacle._y+obstacle._height or this._y+this._height > obstacle._y)
This code will tell you whether the rectangular box around one object (this) is colliding with another object (obstacle). From there you can test each individual portion and decide which sides are colliding, then use that information to move the object.
if(this._x < obstacle._x+obstacle._width) //left side of the object colliding with the right side of the obstacle
if(this._x+this._width > obstacle._x) //right side of the object colliding with the left sid of the obstacle
if(this._y < obstacle._y+obstacle._height) //top of object colliding with the bottom of the obstacle
if(this._y+this._height > obstacle._y) //bottom of object colliding with the top of the obstacle
There are some problems with using this for a circular object (i.e. the corners of the box will bounce of things, even though the circle itself won’t touch them). Overall though, this is one of the best ways for simple collision detection.
~Cody
EDIT: I also wanted to add, something that I found to be REALLY important was to edit a value like objectx/objecty and then when all of the collisions had been taken care of and the object had been moved, change object._x/object._y to equal objectx/objecty.
Thanks Cody,
How would I integrate this code into my objects (ball and box)? and make it work with the drag and gravity so I can still toss stuff around? maybe you could make an example for me?
This is getting interesting!
Thanks!
Hondo311
Yea, I’ll try to make up a quick example, it shouldn’t take long because I already have it set up in a different game. I’ll post back when I have the example for you.
~Cody
Thanks Cody,
Can’t wait to see your example!
Hondo311
Here it is. I had to remove alot of uselees code from the game it was part of and comment 200 lines of code from scratch at 1 AM, so if any of my comments don’t make sense they may be badly worded or wrong. If any code seems useless/out of place, it may be a leftover from my game I extracted this from. Just ask if you have any questions.
~Cody
hey Cody,
That is cool! It’s great to see another method to do this!
And I was able to get 2 balls to bounce off eac hother and eventually stack!
I made another ball, then gave both balls instance names (ball_1 and ball_2). Then in the array that “stores the names of all the obstacles that the ball may collide with” I added the other ball instance names.
For instance:
in the code for ball_1 i added _root.ball_2
in the code for ball_2 i added _root.ball_1
So I’m assuming that if i make more objects (I want 7 or 8 different things) then all I have to do is add the other objects into each of the arrays . . . this seems redundant though to have all that code on each object I’m going to make . . . maybe the collision code for all the objects (like the list array) can all be on a single frame on an actionscript layer? That way the gravity and drag code is all that’s on each object? What do you think?
If not, no biggie, I’m just glad it works!
Next I’ll need to figure out how to add a double click code to each object to make links (if it’s possible).
When I eventually integrate this into th site I’m working on, I’ll post a link here, and give you credit for your hard work on this
Thanks!
Hondo311
PS . . . i uploaded a swf file so you can see the “fall, bounce, stack!” this is way cool!
You will need to duplicate the code from the ball that controls bouncing to any other objects that you want to bounce. Make sure to add all of the other objects these need to bounce off of to the ‘walls’ array.
Tell me if that makes sense or not
~Cody
Edit: I just wanted to add that each object will bounce according to a BOX around it, so irregular shapes may not bounce entirely realistically.
here’s the .swf (it’s weird i have to zip it, but oh well).
Hondo311
[QUOTE=ShadowViper;2328694]You will need to duplicate the code from the ball that controls bouncing to any other objects that you want to bounce. Make sure to add all of the other objects these need to bounce off of to the ‘walls’ array.
Tell me if that makes sense or not
~Cody
Edit: I just wanted to add that each object will bounce according to a BOX around it, so irregular shapes may not bounce entirely realistically.[/QUOTE]
Hey Cody,
I think I figured that out while you were typing that response! I like that array method.
Thanks!
Hondo311
No problem, I’m just glad to be helping out, I know that when I originally came up with this, it wasn’t easy to find a good example with everything I wanted. If you have any other questions, just post them here.
~Cody
Hey Cody,
The ball bounces off he walls fine.
But I noticed that I can drag the ball outside the walls, which I don’t really want it to do . . . is there a way that I can keep the object always inside the walls, even if I’m dragging it?
Thanks,
Hondo311
PS . . . I also want to try and use the ball as a link . . . but if I put a button symbol inside the movie clip, will that screw up my dragging code? Maybe I can code the button to work when it’s double-clicked instead of a regular click?
I actually already had code in the game to keep it from being dragged through things, but I took it out to simplify the example. I can post up another example with that code re-added real quick(well, within several hours atleast, quick is relative :P).
If you code a double click, that would probably make it work fine.
~Cody
Thanks!
Can’t wait to check that example!
Hondo311
Ok, here it is. I didn’t comment this part quite as well, but it is all pretty similiar to the part you already have. Tell me if you have any questions.
~Cody
