Box2D Flash game creation tutorial – part 2

After seeing the character creation in Box2D Flash game creation tutorial – part 1, it’s time to add some coins to collect.

This process will involve some interesting Box2D features, like sensors and custom collision management.

I would suggest to read the basics of sensors at Erase Box: the tutorial and custom collision management at Creation of a Flash Stabilize! clone using Box2D – part 4.

Although they are both referred to an older Box2D version, they’ll introduce you to sensor and collisions.

Now the concept is simple: we are placing some circular sensors around the stage (the coins), then we’ll create a custom contact listener class to check whether the player is over a coin or not. If it’s over, we’ll remove the coin.

So this is the main script:

Let’s see the interesting lines:

Line 22: declaring my contact_listener variable, as custom_contact_listener type

Line 25: assigning my custom contact listener class to Box2D world

Lines 36-38: calling five times the draw_coin function passing three parameters: x position, y position and radius.

Lines 79-89: the draw_coin function… just a basic function that draw a circle… just notice at line 86 how I am declaring the circle as a sensor. This way the circle exists in the world but won’t physically collide with anything. Also, a sensor should be a static body, or it will fall down outside the stage as it won’t collide with anything.

Lines 150-156: scanning through all bodies to find, and eventually remove, bodies marked with remove. Such marker is handled by the custom contact listener class, located in the custom_contact_listener.as file:

BeginContact function will give us the fixtures involved in the collision. Then at lines 15-17 and 18-20 I am checking if the fixture is a sensor, then eventually mark its parent body to be removed.

Important: don’t try to remove the body inside this function, because bodies have a locked status while they are in the middle of a timestep, so you should remove a body only after you performed the Step (line 147 of the main file). This gave me a little headache, so you’ve been warned!

This is the result:

Pick up all little circles moving the player tapping on arrow keys.

Download the source code.

  • manish

    i m in a in animation school quite wonderful
    using box2d as environment makes our job easier even i do not know much programming to make something nice animation thanks
    post but a question why u always wear a cap I saw your many pics on facebook

  • Awesome stuff! Box2D is my next area of exploration with actionscript so it’s great that you are sharing so much valuable information.

    I can’t seem to get Box2D to work with CS3 though… is there a version conflict?

  • Hi,

    Your website is such a great ressource, Thank you!

    Could you provide us with CS3 versions of your fla?

    Thank you SO much!

  • Pingback: A Freelancer’s Flash Bash [6] | Freelance Flash Games News()

  • Ollie

    Thanks for the tutorial.

    Is it possible to read the position of the sensor? It reports a position of 0,0 when I call .GetPosition

  • Pingback: Getting a contact point between two bodies in box2d as3()

  • Jack

    Sorry I cannot comprehend this.

    You draw a black box with “UD” as the variable?
    But this is only up, down, left or right?
    And that somehow handles the collision detection?