Managing multiple balls collisions with Flash
Filed Under Actionscript 2, Flash, Game design, Tutorials, Users contributions •
The first post of the new year (you should know the new year starts on May, 27th) is made by Sunil Changrani and it's about managing multiple balls collisions with Flash.
I already published a tutorial about Managing ball vs ball collision with Flash but this time we'll manage any number of balls.
Sunil was just making a Flash game and he ended up getting stuck when he needed a lot of circles to collide with each other.
With some help from Tony Pa, Voidskipper and Kazama_bee, ended up making some nice perfect collisions.
In the movie there are two symbols, one empty movieclip called blip and a movieclip called circle (which has the ball)
So here it is the commented code:
-
stop();
-
t = 0;
-
dx = 0;
-
//Creating variables
-
_root.attachMovie("blip","blip",_root.getNextHighestDepth(),{_x:1500, _y:200});
-
_root.createEmptyMovieClip("container_movie",_root.getNextHighestDepth());
-
//attaching the movieclips
-
blip.onEnterFrame = function() {
-
//this is the function that executes every frame
-
if (Math.random()*1000<100 and t<50) {
-
//This condition adds another circle after a certain random interval till total circles are 50
-
-
circle = container_movie.attachMovie("circle", "circle"+t, container_movie.getNextHighestDepth(), {_width:a, _height:b, _x:(20+Math.random()*300), _y:(20+Math.random()*300), _rotation:Math.random()*300});
-
t++;
-
circle.xspeed = Math.random()*9;
-
circle.yspeed = Math.random()*9;
-
//Creating the circle with random x and y speeds.
-
circle.onEnterFrame = function() {
-
this._x -= this.xspeed;
-
this._y -= this.yspeed;
-
//Motion of the circles
-
if (this._x<10) {
-
this._x = 10;
-
this.xspeed = -this.xspeed;
-
}
-
if (this._x>490) {
-
this._x = 490;
-
this.xspeed = -this.xspeed;
-
}
-
if (this._y<10) {
-
this._y = 10;
-
this.yspeed = -this.yspeed;
-
}
-
if (this._y>390) {
-
this._y = 390;
-
this.yspeed = -this.yspeed;
-
}
-
//Making sure the circle won't go out of the boundaries.
-
};
-
}
-
//From here I start checking for collisions of the circles
-
for (i=0; i<t; i++) {
-
a = _root.container_movie["circle"+i];
-
for (j=i+1; j<t; j++) {
-
b = _root.container_movie["circle"+j];
-
var dx = b._x-a._x;
-
var dy = b._y-a._y;
-
var dist = Math.sqrt(dx*dx+dy*dy);
-
//Checking the distances between two circles.
-
if (dist<20) {
-
_root.solveBalls(a,b);
-
//The circles I've taken are of radius 10, so if distance <20 then they collide, so I call a function.
-
}
-
else {
-
}
-
}
-
}
-
};
-
//This function is provided by kazama_bee at mochi forums. I'll try my best to explain it
-
function solveBalls(ballA, ballB) {
-
var x1 = ballA._x;
-
var y1 = ballA._y;
-
var dx = ballB._x-x1;
-
var dy = ballB._y-y1;
-
var dist = Math.sqrt(dx*dx+dy*dy);
-
radius = 10;
-
//it calculates the distance, i could have passed it to the function but it works this way
-
normalX = dx/dist;
-
normalY = dy/dist;
-
midpointX = (x1+ballB._x)/2;
-
midpointY = (y1+ballB._y)/2;
-
//Now this calculates the normal and mid points..
-
ballA._x = midpointX-normalX*radius;
-
ballA._y = midpointY-normalY*radius;
-
ballB._x = midpointX+normalX*radius;
-
ballB._y = midpointY+normalY*radius;
-
//shifts the two circle two a different location so they don't hit each other
-
dVector = (ballA.xspeed-ballB.xspeed)*normalX+(ballA.yspeed-ballB.yspeed)*normalY;
-
dvx = dVector*normalX;
-
dvy = dVector*normalY;
-
//This calculates the new speeds for the circles
-
ballA.xspeed -= dvx;
-
ballA.yspeed -= dvy;
-
ballB.xspeed += dvx;
-
ballB.yspeed += dvy;
-
//assigns the new values
-
}
And this is the result: look at the balls... how interesting!
Now tell me for how long will we see games based on this engine... I have one idea... download the source code and thank all developers.
Tell me what do you think about this post. I'll write better and better entries.
(5 votes, average: 5 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
18 Responses to “Managing multiple balls collisions with Flash”
Leave a Reply
Trackbacks
-
Managing multiple balls collisions with Flash: AS3 version : Emanuele Feronato - italian geek and PROgrammer on
June 7th, 2008 11:55 pm
[...] days ago Sunil Changrani sent me a the script to manage multiple balls collisions with Flash, in [...]
-
Latest MochiAds Games
Hey..love everyone one of your tutorials..but a few questions. Whenever i go to the main page of your site, it freezes and i have to wait untill it opens up adobe reader, and it says theres an error, and i check and its blank.. i have no idea why this is happening. also with the tutorial, is there any way to have multiple mouse events with the same object? Like being able to click each ball. Everytime i do this it just works for the first one made. I have no clue how to fix this? How would you do it, if you do it at all? Thanks
Thats cool. Try adding gravity to those balls. It is a hard thing to do i think. I had to make a class for that on my game, Jubble. I haven’t Published it yet but you can see it on the forums. I made a class and just declared the gravity vars.
Wow, just the other day I was googling for some examples on multiple ball collision and found an example on this site. But that previous post was limited to do only so many balls. And now, this example provides the programmer to do, what it seems, at least 50 without any overlapping.
Thanks again “PROgrammer”
@Kesh
Gravity isn’t so hard to do. Just add to the yspeed every frame. Nice collisions, the balls no longer get stuck to each other.
Hey Emanuele, thanks for the citation - nice to be on such a prestigious blog!
I’d just make a small suggestion, in the loop, rather than what you have now, try
var dist = dx*dx+dy*dy;
if (dist<400) {
_root.solveBalls(a,b);
}
(eg, is less than the distance squared)
This eliminates the extremely costly Math.sqrt() function.
Thanks for putting up the tutorial Emanuele, I hope everyone benefits from it!
Even I was googling for multiball collisions, Since I didn’t find any thing that I could use.. I ended up with this.
Well, you see - that’s not very efficient. You are checking collision between every possible pair of circle in every frame. Just running that program maxes out my CPU and we don’t even have any extraordinary graphical effects.
For this amount of objects, it might be wise to implement a smarter collision detection algorythm. Try this one:
http://www.gskinner.com/blog/archives/2008/01/proximitymanage.html
And here is a nice example:
http://www.nulldesign.de/exp/expviewer.php?file=f9_particle2.swf&width=500&height=400
Great point on eliminating the square root calculation, Voidskipper!
And thanks for pointing out the grid-based proximity manager, Krystian.
It’s great when a blog becomes so popular that it attracts expert commenters ^_^
What is the blip….srry, im not good at AS.
Blip is just an empty movieclip, I use it because I like to put codes that execute every frame into the onenterframe function of a movieclip. Although this may not be standard procedure, I find I can organize stuff well this way (atleast in my mind)
can’t you just say:
onEnterFrame = function() {
it should just work the same right?
Sunil - that method is slower than just looping through an array. Using a large amount of onEnterFrame handlers is not encouraged.
very impressive, not the unlimited ball colision, but the way you could put that many in without causing lag. :)
I agree its slower,
I’m not expert, An hour before I wrote this tutorial I was wondering how to make two balls collide…
I made a port to as3. I’m fixing the last bugs
I also will make a mode so it can calculate this with different massen… if a heavy one hits a light one the light one gains a great boost of speed and the heavy one just a litle.
Wil have it ready tommorow and wil also put it on rapidshare if there are enough people want that.
brart
This code doesn’t seem very effiecent. Check the first ball against every other one, the second against every one but the first, and so forth. That adds up to 49+48+…+3+2+1 equations solved every frame, or 1275. Mutiply that by a modest 10fps? 12250 equations per second.
Not very efficient, though it is easier to understand and code that some more advanced algorithms. A final point, if 100 balls are used, that’s 50500 times the lines inside the “for loop” are called. hmm. I don’t know about my computer, but I couldn’t calculate that many equations per second.
Good suggestion Krystian to reduce the number of checks, and also voidSkipper, that’s a great idea!
heeeey can someone help me,
I’ve searched for hours on the web and cant find out how to make a boundary!
I have a ball game, simply the ball moves around at the moment, I’m really new to Flash Gaming so I’m just testing things right now, but I seriously need to know how to stop the ball from flying off the stage!
If you could send me instructions directly via email that would be great!
malborojones@hotmail.co.uk
All help will be very much appreciated thank you!