Build 10 classic Flash games and learn game development along the way with this ultra-fast paced game development course.

If you love this blog, this is the book for you.

Buy the book

Get the source code of 12 commercial Flash games, which have been loaded more than 50 million times!

Learn from real world successful examples.

Get it now

Box2D for Flash Games teaches you how to make Flash physics games from scratch with the most advanced features.

Create the new Flash game smashing hit.

Buy the book

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 (12 votes, average: 5.00 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 9 comments

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

    on December 11, 2012 at 10:29 am

    [...] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:LikeBe the first to like [...]

  2. MC

    on December 11, 2012 at 8:31 pm

    cool

  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.setBullet(true);
    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));
    tailBody.setLinearDamping(10);
    tailBody.setGravityScale(-5);

  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?