Posts Tagged ‘physics


Collision Detection and Bounce Calculation using Colour Maps (part 1)

Here is a method I developed for a game I produced last year. I had three days, and a top down ball bouncing game with multiple levels to render. Initially I thought I’d use box2D, zero out the gravity, and then build the scenes as box2D models. This looked like taking far too long to create so I needed a quick fire solution. Then it dawned on me: Colour Maps (or to you chaps over the pond Color Maps).

Now Colour Maps are nothing new, but my idea adds to the technique.

Colour Mapping means you can build a map of your game scene with various colours representing the walls and objects. To test whether you have collided with an object, instead of numerous intersect calculations you can just test the colour of the pixel(s) underneath your character.

I realised that if I added a sprite graphic for my ball to the colour map using the Blend Mode ‘add’ then I could see collision. So if I make all the static scene furniture red (0xFF0000) and the ball sprite green (0x00FF00), when they overlap the intersection area becomes yellow.

Blend Mode collision detection

Blend Mode collision detection

So how does this help? I calculated that by using getColorBounds on the intersect yellow, I can draw a line from the centre of the rectangle to the centre of the ball. This now becomes the reflection point. I can reflect the angle of bounce against this to give a very accurate result.

Calculate the angle of reflection

Calculate the angle of reflection

OK. So the method will bounce from a partial intersection – but this means that we are calculating the bounce from a ball embedded within the border/scene furniture. I have improved this by calculating the ball path using a recursive method. The function backtracks to where the edge of the ball touches the furniture and then recalculates the path for the remaining distance to be travelled on the current iteration.
The Colour Map Bounce system in action

The Colour Map Bounce system in action

Here is a link to a quick demo of the method in action. Demo

Source and example usage is to follow in part 2.


Jonga3D: Testing Jiglib with Away3D

I just wanted to test the (newly available in AS3) 3D Physics engine Jiglib.

My first test for Box2d was to build a Jenga-style game (Jonga) so I thought I would do the same here. Only a quickie this. I wanted to see if Jiglib would be able to allow ‘rigid boides’ in a 3D environment with good performance. I know we are limited in Flash so was prepared for a few foibles.

Jiglib has been put to great use in other formats so I had high hopes for its Flash port.

Now I have only given the library 3 or 4 hours of play but my one major probelm so far is the frame rate hit. In Jonga3d I have had to reduce the number of blocks to 15 (5 layers – I wanted 15 (45 blocks)) and I am still only getting 6fps. I was really hoping for more.

I’m not complaining too much, a 3d physics engine is a complicated library to pull off – I’m just waiting for the day I can build an unfettered 3d environment with a workable physics engine.

Jiglib has a few other problems – the jiggling static box for example – but these are understandable for v0.25


Testing Jiblib: Jonga3D

In the test I didn’t get around to implementing the mouse drag interactions so to see a collapse use the arrow keys to control the sphere – ram it into the stack.

I am using Jiglib 0.25 – Away3d version and Away3D 2.3 (Link)
I use SwfProfiler to track the fps.


Thanks to SleepyDesign for getting the ball rolling on this.


Global Gam Jam – The Deep – How to produce a string in water with AS3

I attended the Global Game Jam 2009 recently – forming the team ‘Fish Don’t Flock’. We produced a game called ‘The Deep’ – in 48 sleepless hours.

In the game you get to control a deep sea bio-luminescent creature that is formed from two orbs and a membrane. The creature eats plankton by enveloping it inside it’s membrane.

There were a couple of innovations we managed fit into the game. The first I will detail here, the other will be in my next post.

(i) We needed to make the membrane behave like a ribbon under water:

I’m a huge fan of Box2D, and have done a few AS3 rope experiments. To get the behaviour I wanted, I figured that I could chain together a series of balls within Box2D, turn off the gravity for the top-down underwater view effect. This way I could detect collisions and if all creatures have mass within the physics engine they would interact correctly with the membrane.

The Deep: Rope membrane

The Deep: Rope membrane

(1) Create a chain out of box2D circles.

(2) Link the chain circles using revolute joints.

(3) Draw membrane/rope by drawing from joint point to joint point and add orb sprite.

(4) Remove rendering of circles.

The source is available for this game here.
(Obviously it was a rush job so expect a lot of code imperfection.)


Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates


Get every new post delivered to your Inbox.