Refined collision areas on tiles/sprites

[owen]

Sorry this is a bit of a general question but I'll be as precise as I can.

 

If I have a sprite/tile which contains a circular shape (for example a ball).  If you imagine the ball shape (the sprite) filling a blank white square (the tile) then you have 4 triangular blank spaces in the tile; 1 in each of the 4 corners.

 

So how can I refine the collision so that our ball does not 'collide' or 'overlap' other objects when the 4 empty corners touch things?   in other words I want to see collision occur only on parts of the tile which are non-transparent.  If one of the 4 blank corners touches something it is not a collision.  

 

Ultimately this would mean that I could put a heap of balls in my map and when the game starts the heap collapses in a physically accurate manner, with the balls rolling over each others' curved edges.  (Starting to sound too ambitious!)

 

Also what if I have a margin of tolerance to my collisions, for example the outer 2 pixels around a tile may touch without triggering a collision or overlap.

 

The reason I ask is because I plan to include balls as moving sprites within my game and I want them to behave like balls, not squares, when they collide.  (Phaser's awesome bounce properties will help the ball-ish-ness of them).   Also I have got some square-ish shapes with curved edges and I want the triangular whitespace corners to be treated as thin air, not part of the tile when it comes to collision.

 

Is this sort of thing possible in Phaser or should I assume the 4 straight sides of each tile/sprite are absolute collision faces that cannot be changed in size or position.?

 

Or is this in fact already how it works by default?

 

Thanks

Owen

[lewster32]

If using Arcade Physics, you're limited to what's called AABB (Axis Aligned Bounding Box) collisions - essentially, all bodies are rectangles that cannot be rotated. This gives high performance but obviously limits your abilities if you want to start working with accurate shape collisions. In this instance your only options are to try and hack circle collisions into the physics system, or use P2 which supports this natively. Ninja I believe has circular collisions but I think Ninja lacks a lot of other features and is provided as a fix-er-up-er for people feeling ambitious.

[owen]

Thanks, I also found a similar answer here:  http://www.html5gamedevs.com/topic/8641-collision-shapes/

[owen]

Just coming back to this for a second I wondered if I could simply keep the rectangular sprites and collisions BUT use a 2-3 pixel "margin" so the collision doesn't occur until sprite A infringes sprite B by 3 pixels.  (Rather than just touching the edge of it).  To reiterate, I'm happy to keep it all rectangles but want the collision to be a little more "forgiving" in some cases.

 

Is such a thing possible with Arcade physics?

[lewster32]

Just reduce the size of the body using body.setSize, this will change the body size compared to the sprite, allowing sprites to get closer together before registering a collision or overlap.