Jump to content
warleyalex

Collision detection Game

Recommended Posts



I'm learning Smart Pascal programming by developing a simple smart bomb game using tweening motion

 

Main screen preview (chrome):


 

but I came across an issue: collision detection, for instance, I'm really stuck with the collision, when one of the mines hit the rocket. I wouldn't like to use jquery collision plugin to return the collisions, my game is 100% smart pascal.

 

Any idea?

 

 

 


Share this post


Link to post
Share on other sites

Depending on the accuracy of the collision detection that you want to achieve, the simplest way to detect collision would be to check

intersection of two rectangles, and if they intersect, you have collision.

 

Option 1:

 

TRect should have an intersection function which you feed two TRect's and you get a Boolean as a result.

 

You check for intersection before every time a frame is drawn.

 

 

Option 2:

 

For more accuracy you could check intersection of lines.

 

By checking intersections of lines you could use a polygon and it's lines to check intersection with other polygons.

 

Option 3:

 

Then you also have pixel collision detection.

 

Every time before a frame is drawn, you loop through every pixel of bitmap A and also bitmap B and see if they are at the same position or inside a certain area.

 

If they are over each other or inside each others area, then you have a collision.

 

I hope this helps.

Share this post


Link to post
Share on other sites

An addition to option 1:

 

Instead of a rectangle you can calculate the distance between the two objects = Sqrt(Sqr(x1-x2) + Sqr(y1-y2)) if it is below a certain value you have a collision. This equals to a circle (as opposed to checking the rectangle). Not the best solution, but sometimes very suitable (for rather round obstacles).

Share this post


Link to post
Share on other sites

An addition to option 1:

 

Instead of a rectangle you can calculate the distance between the two objects = Sqrt(Sqr(x1-x2) + Sqr(y1-y2)) if it is below a certain value you have a collision. This equals to a circle (as opposed to checking the rectangle). Not the best solution, but sometimes very suitable (for rather round obstacles).

 

I was thinking of something similar before falling asleep yesterday.

 

One problem with option 2 is that if two objects move towards the same intersection point they might miss eachother

if their position stepping is large.

 

This means that two objects that move very fast towards the same point theres a high probability that they'll miss each other

and option 2 will never trigger a collision detection.

 

The solution to that would be to temporarily store the rectangle of the objects and 

 

Upon next collision checking you draw lines between each objects temporary and current rectangle corners and then do line-intersection-detection.

 

That way you can ensure that there has been a collision and also know the virtual force of the collision.

 

The longer the lines AND collision detected, the more force.

 

The more force, the bigger BOOM.

 

I have added an image below that illustrates what I mean.

 

BNOVoHj.jpg

Share this post


Link to post
Share on other sites

Collision Detection with MANY objects.

 

I was thinking about the solution to calculate the distance between two objects

B1(x,y)

B2(x,y)

 

X  := B2x - B1x

Y := B2y - B1y

 

sqrt(X*X + Y+Y)

 

I feel that would be terribly inefficient and may also cause a few errors where multiple object are within close proximity to each other.

 
---------------

The strategy is generate random objects (mines). These all collidable objects derive from the object class TW3CustomControl that will use tweening motion to move around the screen. The game should be fast.

 

Checking for so many objects (the objects are moving really fast) I feel can compromise the game. 

---------------

I was thinking something in another method (smart way) with no complicated shapes or angles to calculate collisions, such as jquery collision plugin, which allows you to get a list of overlapping collision boxes (or none if there's no collision):

var hits = $("#collider").collision(".mimes>img");
if(hits!==null&&hits!==undefined&&breakable.length!==0){
STOP_ANIM();

Share this post


Link to post
Share on other sites

Sure, the less code you need to write the better for you.

 

Go with whatever works for you.

 

I don't think that any of the suggestions you've received will compromise the performance of your game.

 

They're all pretty efficient and use small formulas.

 

Except the pixel-collision-detection which requires you to actually check each pixel of the intersected rects.

 

But even that wouldn't have too much of an impact I believe.

Share this post


Link to post
Share on other sites

For a customer I have written a game that use the distance to calculate collisions for about 10 objects in every frame. Every object was animated itself and it achieved a steady frame rate of 60 fps on the most device we used for testing. Unfortunately, I'm not allowed to post the game here (until it is released by the company), but trust me it's quite efficient.

 

There was one twist though, instead of calculating the distance we only calculated the squared distances (left the sqrt() out of the equation) and used this for collision detection.

Share this post


Link to post
Share on other sites

guess what, there's a game that I've compiled with Smart Mobile Studio v.2.2 that uses checkCollision function.

See preview:

https://rawgit.com/smartpascal/smartms/master/spaceInvaders/www/index.html

 

and there's the CheckCollision function :) see at: https://github.com/smartpascal/smartms/blob/master/spaceInvaders/Items.pas  You can grab the full project to test it out.

 

This game is nice, but I'd like something more, I'd say, rendering for smooth movement. I don't know if I can use tweening and CSS effects to mimic such animation.

Share this post


Link to post
Share on other sites

Well, it depends on the type of application. If its a purely canvas based game then classical techniques (to some extent) applies.

You usually do masking/scanline to detect collisions but that may be to slow here (its the type of thing you would optimize with lookup tables and assembly in native scenarios). You can also have a polygon outline for each sprite and use our polygon testing code, which is fast but tiredsome to work with (perhaps create an editor for outline drawing). The fastest is naturally a purely mathematical approach if that is possible, like christian mentions.
 
Ultimately an outline technique would be the best (most accurate) no matter what, but it does require you to define a shape that kinda fits each sprite-type.
So it all boils down to how complex your graphics is. Like in those old shoot'em ups where collision was primarily done on the ship body, the wings could collide without people paying to much attention to it.
 
For DIV (TW3CustomControl) based games with Sprite3D, Well -- it may be best to check some of the games written in Sprite3D to see how they do it?
Essentially a DIV will always be rectangular despite background graphics or content. So some form of polygon mapping will probably be the fastest technique there as well.
 
Here i would suggest you have a peek at how purely JS coders solve this -- but my gut feeling is that a well written polygon overlapping routine would be the fastest. Depending ofcourse how many objects you have on screen at any given point. The old game engines from the Amiga days try to keep it down to 32 moving sprites at any given time, parrallax scrolling with max 2 moving and 1 static layer -- i would most likely use mappy with 2 layers + 1 parrallax moving background layer.
 
Well, hope it helps! And let us know what you code up with, i've been thinking about this myself earlier on.

Share this post


Link to post
Share on other sites

That game is easy to check collision for, because each element is a square :)

so thats just a TRect.Contains or overlap test. What you want is a routine that can take any shape or outine, based on the graphics you assign to each element.

 

e.g:

 

FMySprite.background.fromUrl('res/shaceship_01_01.png'); //sprite type 01, animation 01

FMySprite.Mask := CreatePolygonFor(spTypeSpaceShip);

 

 

 

 

guess what, there's a game that I've compiled with Smart Mobile Studio v.2.2 that uses checkCollision function.

See preview:

https://rawgit.com/smartpascal/smartms/master/spaceInvaders/www/index.html

 

and there's the CheckCollision function :) see at: https://github.com/smartpascal/smartms/blob/master/spaceInvaders/Items.pas  You can grab the full project to test it out.

 

This game is nice, but I'd like something more, I'd say, rendering for smooth movement. I don't know if I can use tweening and CSS effects to mimic such animation.

Share this post


Link to post
Share on other sites
I haven't read this book in many many years however, in the Book Michael Abrashe's Graphics programming Black Book , Special Edition,  Binary space partitioning (BSP map's) was used in the DOOM Game day's  for collision  detection., hit detection, Line of sight determination etc . BPP  is still relevant today even for 2D and 3 D

 

https://en.wikipedia.org/wiki/Binary_space_partitioning

Share this post


Link to post
Share on other sites

This is a Java Script implementation:

 

 

 

 

HOW TO DO YOUR OWN COLLISION DETECTION

 

 

Enter: Spatial Partitioning

Spatial partioning is the process of breaking up the space into smaller chunks and only using objects residing in similar chunks for comparisons. This gives us a much better chance of only checking objects that could collide. The simplest way of doing this is to break the screen into a grid.

 

 

 

 

 

 

https://www.packtpub.com/books/content/how-do-your-own-collision-detection?utm_source=ALL+CONTACTS&utm_campaign=1379ec0cb2-Create_Dispatch_End_January_20161_29_2016&utm_medium=email&utm_term=0_c970747b22-1379ec0cb2-163424757&mc_cid=1379ec0cb2&mc_eid=6e85ea12d3

 

 

Working Example: http://jsfiddle.net/mcluck/xh3j8yyb/

Share this post


Link to post
Share on other sites
Thanks a lot.

This is nice approach to check collision, each element is a square, ease to detection, I've been thinking using sprites.

The idea was create (TW3CustomControl based game) with polygons/sprites (it's not a canvas based game), using tweening class to apply easing transitions like Quartic.Out, Quartic.InOut etc. The game should be very fast, unfortunately my sneak, super fast 3-year-old-nephew have just pressed SHIFT DEL and deleted my game project! I'll try later redo this game.

Share this post


Link to post
Share on other sites

re:, super fast 3-year-old-nephew have just pressed SHIFT DEL and deleted my game project! I'll try later redo this game.<

What was the name of it? I ask because I download a few of your games before you reported that your nephew deleted it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×