Have fun and help me to get to 1,000,000 downloads!

Flying arrows simulation with Box2D

Emanuele Feronato Actionscript 3, Box2D, Flash

If you like Flash games, then you probably know Gibbets, a physics game where you must save hanging people by cutting their ropes with an arrow.

An interesting feature of the game is the realistic trajectory followed by the arrow. You may say: “well, Box2D is a physics engine, I managed to fire a thousand bullets with it, I can shoot an arrow”.

And you’re right… let’s see this simple script which just creates and fires something like an arrow from the bottom left of the stage once you click on the stage, according to mouse position:

As you can see, there’s nothing new in it, so we can test it:

Click on the stage to fire the arrow. As you can see, the trajectory is accurate, but the arrow does not rotate to follow it as it would in real life… it’s just a flying bar which does not rotate as we expect.

That’s because arrow typical trajectory is due to air resistance, which is not included in Box2D simulation, and above all air resistance on its tail.

So I followed the tutorial and the theory published on iforce2d to create realistic arrows, and once converted its code from C to AS3, I got:

You can follow the tutorial on the original page, I just adapted it to AS3 and stopped the “wind on tail” simulation once the arrow hits a wall. Here is the result:

Again, click on the stage to shoot an arrow.

Collision detection is not that accurate because this is not the scope of this post, anyway we have an accurate physical simulation of a flying arrow.

But I also like simple things, and so I simplified the script just manually modifying arrow roation according to its direction, until it touches something:

And this is the final result:

Once again, click on the stage to shoot an arrow.

Download the source code (3rd example only).

Which way would you use to simulate a flying arrow?

Next time, shooting arrow simulation with commented source code.

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 10

  1. Pingback: Flying arrows simulation with Box2D – Emanuele Feronato « eaflash

  2. Neo

    Hey great tutorials Sir. Doing a great work. Really educative and helpful.
    I am trying to make Connect the four using Box2D could you kindly help me regarding that. Specially how to detect when four discs of same color are connected in the world.

    Kindly reply Asap.

    Thank You

  3. Pingback: [??]Box2D????-???? » Luo????

  4. phucvin

    There is an other way to make arrow fly more real.
    That is after create the arrow like above, create a very small circle body, with linear damping and gravity scale negative.
    Some java code:
    body = world.createBody(Factory.getBodyDef(BodyType.DynamicBody, tmp_x, tmp_y, tmp_angle));
    body.createFixture(Factory.getFixtureDef(Factory.getPolygonShape(new Vector2[]{ new Vector2(0.5f, 0.1f), new Vector2(-1f, 0), new Vector2(0.5f, -0.1f), new Vector2(0.8f, 0) }),
    0.5f, 0.8f, 0.1f, (short)-1);

    tailBody = world.createBody(Factory.getBodyDef(BodyType.DynamicBody, body.getWorldPoint(v2tmp.set(-1, 0)), 0));
    tailBody.createFixture(Factory.getFixtureDef(Factory.getCircleShape(0.1f), 0.1f, 0, 0, true));

  5. Post
    Emanuele Feronato

    phucvin, it seems a great idea, unfortunately there’s not setGravityScale in Box2D for flash… do you think it can be replaced by b2ConstantAccelController?

  6. phucvin

    I think it’s ok, because gravity is accelation.
    The hardest in my solution is: finding shape’s size, density, damping, gravity scale.
    I have used this solution for my WIP game, it’s great :)

  7. Eric

    Altough your change to the original tutorial does simplify the code you can see some drawbacks, for instance in the original version when you fire an arrow to the wall it bounces back and rotates, but with your changes it just bounces back.

    Did you make those changes due to perfomrance reasons?

  8. Pingback: Play 99 Stakes, my latest Flash game powered by Box2D - Emanuele Feronato

Leave a Reply

Your email address will not be published. Required fields are marked *