I came up with the idea of a pre-baked collision map. For each pixel
- Red = distance to closest collide-able pixel, 0-32
- Green = X distance to this collision point, -32 to 32
- Blue = Y distance to this collision point, -32 to 32
It converts an image like this:
Into this:
All you need to do is look up the pixel colour for the centre of your circle, and you’ll know how far the closest collision point is. In this case, a vector in the opposite direction to this point is added to the ball’s velocity.
This was written in typescript, and actually takes a few seconds to bake this 400px square image. I could use WebGL and a fancy shader if I wanted to make this super fast.
I then added in some quick bouncy physics, and keyboard control, and came up with this:
My tumblr links