Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Flying arrows simulation with Box2D

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (15 votes, average: 5.00 out of 5)
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 10 comments

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

    on December 11, 2012 at 10:29 am

    […] on Share this:TwitterFacebookLike this:LikeBe the first to like […]

  2. MC

    on December 11, 2012 at 8:31 pm


  3. Neo

    on December 12, 2012 at 11:26 am

    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

  4. [??]Box2D????-???? » Luo????

    on December 15, 2012 at 3:50 pm

    […] ???????????????????????????“Box2D????”??????????????“??Box2D???????????????????????”?????????????????????????????contact?????-?????-??????-???????????? […]

  5. phucvin

    on December 18, 2012 at 4:00 am

    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));

  6. phucvin

    on December 18, 2012 at 4:01 am

    And add a joint (sorry for my missing):
    world.createJoint(Factory.getRevoluteJointDef(body, tailBody, false, tailBody.getPosition()));

  7. Emanuele Feronato

    on December 18, 2012 at 7:43 pm

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

  8. phucvin

    on December 19, 2012 at 10:05 pm

    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 :)

  9. Eric

    on January 14, 2013 at 5:37 pm

    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?

  10. Play 99 Stakes, my latest Flash game powered by Box2D - Emanuele Feronato

    on July 18, 2013 at 4:45 pm

    […] a Flash Box2D game built upon the flying arrow simulation tutorial I posted some time […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now