Way of an Idea Box2D prototype

Did you enjoy Way of an Idea?

Nice physics game… besides the joints and motors used in level design, the most interesting part is the chalk drawing.

Way of an Idea.

We are going to do it in three steps

Step 1 – Freehand drawing

Let’s start with a simple script with some mouse listeners to let the player draw when he presses and moves the mouse:

And this is the result:

Draw with the mouse

Step 2 – Segment drawing

Since the idea is converting a freehand drawing into a set of Box2D primitives, we can’t allow the player to draw as free as he wants.

So we must constrain him to draw with segments of at least n pixels. The smaller n, the more realistic the freehand feeling, the more primitives needed to convert drawing into objects.

In this example I am using a 20 minimum length, but you are free to set your own by changing pixel_dist value at line 8

This is the result:

You can draw with the mouse with almost the same freedom as before

Step 3: Box2D conversion

In the final step we render the segments with Box2D rectangles. We just need to save all vertices in an array, determine segments length and angle with some trigonometry and create static rectangles once the player releases the mouse

and this is the final result:

Now you can draw with the mouse and create solid objects along your path.

Download the source code.

  • Robert

    it reminds mo of the linerider game

  • nice work – lots of possibilities with this..

  • Wow thanks for posting this.

  • Nice game by Flazm (other his game is Railway Valley http://railwayvalley.com/play) and useful tutorial. :) Thanks!

  • zap

    good job!!!

  • Vadersapien

    This could be used to create a line rider/free rider type game with box2d…very interesting…

  • Guest

    Great post, love the prototype posts :)

  • Patrick

    Regarding to Step 2, is it possible to have each segment on its own movieclip?

    Ive added this to the onmouseMove()

    dist_x =_xmouse-oldx;
    dist_y =_ymouse-oldx;
    pixel_dist = 20; if(dist_x*dist_x+dist_y*dist_y>pixel_dist*pixel_dist) { this.createEmptyMovieClip(“line”+lines,getNextHighestDepth()); this[“line”+lines].lineStyle(2,0×000000,100); this[“line”+lines].lineTo(_xmouse,_ymouse); trace(this[“line”+lines]);

    But i dont know what to put into the onmouseDown()

  • Patrick

    Is it possible to do something similar to step 2, but using actionscript 2, and applying each segment onto its own movieclip?

    I need to do something like that for my game, but im having trouble doing it.


    What is happening? i follow the code exactly, i added the conversion to box at the last part after mouse release, it give me this error.
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at Box2D.Collision::b2PairManager/AddPair()
    at Box2D.Collision::b2PairManager/AddBufferedPair()
    at Box2D.Collision::b2BroadPhase/CreateProxy()
    at Box2D.Collision.Shapes::b2Shape/CreateProxy()
    at Box2D.Dynamics::b2Body/CreateShape()
    at MYWORK_fla::MainTimeline/create_box()
    at MYWORK_fla::MainTimeline/mouse_released()