Basic Box2D rope

October 5, 2009 • Actionscript 3, Box2D, Flash by Emanuele Feronato • 20 Comments

It’s time to create a rope with Box2d.

To start defining a rope, we’ll start from something similar: a chain. A chain is a series of two or more connected links. The smaller and closer the links, the more flexible the chain. So we can define a rope as a “perfect chain”, with infinite links.

In a Box2D simulation, ropes as we know them aren’t possible. But we can construct chains, and according to the number of links they can approximate a rope quite well.

Obviously, the higher the number of links, the more accurate the simulation, the slowest and CPU intensive the simulation.

I found 10 links are a good compromise between simulation and performance.

Every link is (guess what?) linked to the previous one with a revolute joint. Refer to Box2D joints: Revolute Joint if you need more information about revolute joints.

The core of the whole script is the link variable. I simply “save” the reference of the last chain placed on the stage and create the joint between the last chain placed and the one I am going to place.

So I’m having the first link with a joint with the ceiling, the second one with a joint on the first one, the third with a joint on the second and so on.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.Joints.*;
	public class rope extends Sprite {
		var body:b2Body;
		public var m_world:b2World;
		public var m_iterations:int=10;
		public var m_timeStep:Number=1.0/30.0;
		var mouseJoint:b2MouseJoint;
		var mousePVec:b2Vec2 = new b2Vec2();
		var bodyDef:b2BodyDef;
		var boxDef:b2PolygonDef;
		var circleDef:b2CircleDef;
		var revolute_joint:b2RevoluteJointDef=new b2RevoluteJointDef();
		var link:b2Body;
		public function rope() {
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, createMouse);
			stage.addEventListener(MouseEvent.MOUSE_UP, destroyMouse);
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);
			var gravity:b2Vec2=new b2Vec2(0.0,10.0);
			var doSleep:Boolean=true;
			m_world=new b2World(worldAABB,gravity,doSleep);
			// debug draw start
			var m_sprite:Sprite;
			m_sprite = new Sprite();
			addChild(m_sprite);
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			var dbgSprite:Sprite = new Sprite();
			m_sprite.addChild(dbgSprite);
			dbgDraw.m_sprite=m_sprite;
			dbgDraw.m_drawScale=30;
			dbgDraw.m_alpha=1;
			dbgDraw.m_fillAlpha=0.5;
			dbgDraw.m_lineThickness=1;
			dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit;
			m_world.SetDebugDraw(dbgDraw);
			// ceiling
			bodyDef = new b2BodyDef();
			bodyDef.position.x=8.5;
			bodyDef.position.y=0;
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(2, 0.5);
			boxDef.density=0;
			boxDef.friction=0.5;
			boxDef.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			link=body;
			// rope
			for (var i:int = 1; i <= 10; i++) {
				// rope segment
				bodyDef = new b2BodyDef();
				bodyDef.position.x=8.5;
				bodyDef.position.y=i;
				boxDef = new b2PolygonDef();
				boxDef.SetAsBox(0.1, 0.5);
				boxDef.density=100;
				boxDef.friction=0.5;
				boxDef.restitution=0.2;
				body=m_world.CreateBody(bodyDef);
				body.CreateShape(boxDef);
				// joint
				revolute_joint.Initialize(link, body, new b2Vec2(8.5, i-0.5));
				m_world.CreateJoint(revolute_joint);
				body.SetMassFromShapes();
				// saving the reference of the last placed link
				link=body;
			}
			// final body
			bodyDef.position.x=8.5;
			bodyDef.position.y=11;
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(0.5,0.5);
			boxDef.density=2;
			boxDef.friction=0.5;
			boxDef.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			revolute_joint.Initialize(link, body, new b2Vec2(8.5, 10.5));
			m_world.CreateJoint(revolute_joint);
			body.SetMassFromShapes();
		}
		public function createMouse(evt:MouseEvent):void {
			var body:b2Body=GetBodyAtMouse();
			if (body) {
				var mouseJointDef:b2MouseJointDef=new b2MouseJointDef  ;
				mouseJointDef.body1=m_world.GetGroundBody();
				mouseJointDef.body2=body;
				mouseJointDef.target.Set(mouseX/30, mouseY/30);
				mouseJointDef.maxForce=30000;
				mouseJointDef.timeStep=m_timeStep;
				mouseJoint=m_world.CreateJoint(mouseJointDef) as b2MouseJoint;
			}
		}
		public function destroyMouse(evt:MouseEvent):void {
			if (mouseJoint) {
				m_world.DestroyJoint(mouseJoint);
				mouseJoint=null;
			}
		}
		public function GetBodyAtMouse(includeStatic:Boolean=false):b2Body {
			var mouseXWorldPhys = (mouseX)/30;
			var mouseYWorldPhys = (mouseY)/30;
			mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
			var aabb:b2AABB = new b2AABB();
			aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
			aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);
			var k_maxCount:int=10;
			var shapes:Array = new Array();
			var count:int=m_world.Query(aabb,shapes,k_maxCount);
			var body:b2Body=null;
			for (var i:int = 0; i < count; ++i) {
				if (shapes[i].GetBody().IsStatic()==false||includeStatic) {
					var tShape:b2Shape=shapes[i] as b2Shape;
					var inside:Boolean=tShape.TestPoint(tShape.GetBody().GetXForm(),mousePVec);
					if (inside) {
						body=tShape.GetBody();
						break;
					}
				}
			}
			return body;
		}
		public function Update(e:Event):void {
			m_world.Step(m_timeStep, m_iterations);
			if (mouseJoint) {
				var mouseXWorldPhys=mouseX/30;
				var mouseYWorldPhys=mouseY/30;
				var p2:b2Vec2=new b2Vec2(mouseXWorldPhys,mouseYWorldPhys);
				mouseJoint.SetTarget(p2);
			}
 
		}
	}
}

And this is the result:

Every object is draggable, except the ceiling.

Download the source code, Box2D library included, and enjoy.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (28 votes, average: 4.29 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 20 comments

  1. Yarden Refaeli

    on October 6, 2009 at 12:35 am

    YOU ROCK!
    how about the sweet old school game with the cup and the ball?

    A ball is connected to the bottom of a cup, and you need to play with the cup till the ball get inside it… I dunno if you know what I mean, the game can be found in many variations.

    Thanks!
    -yarden

  2. dim

    on October 6, 2009 at 8:24 am

    hell yeah, i like this rope :)

  3. maw

    on October 6, 2009 at 1:21 pm

    ergh…. sorry… but its look like a chain, not a rope… imho elastic nodes can help in simulation of rope

  4. Ryan Williams

    on October 6, 2009 at 2:41 pm

    Surely it just needs more segments to be more convincing, maw? It certainly moves like rope.

  5. Jjet42

    on October 6, 2009 at 6:38 pm

    Hay why don’t you make a tutorial for storing user data on their machine? That way the game remebers where they left off or their personal settings. Maybe even remember how they play and become harder. I heard its easy they are called Flash Cookies or something like that.

  6. Monkios

    on October 6, 2009 at 7:43 pm

    This, with elasticity, would be awesome.

  7. makc

    on October 6, 2009 at 8:26 pm

    The problem with this rope is when the box weights too much or you pull it too hard, the rope breaks down. Therefore you need to add distance joints. This was discussed on box2d forums looong time ago, see http://www.box2d.org/forum/viewtopic.php?p=10691#p10691

  8. oliver_l1

    on October 6, 2009 at 9:45 pm

    Hi Emanuele,

    this has nothing to do with box2d.when i enter your site i get a html script virus warning via antivir.

    Check your site!

  9. Matt

    on October 6, 2009 at 11:57 pm

    Any suggestions for using movieclips as the rope segments. I’m trying to work them into the code but then nothing displays.

    Awesome class BTW.

  10. linto

    on October 12, 2009 at 8:44 am

    Hi Emanuele,

    I don’t know whether this is the right place to post this question.

    How will we implement an object whose one side is transparent ( objects hitting that side will pass through) and the other side is not (objects will bounce hitting that side). The scenario is implementation of a pipe through which a ball rolls… but objects hitting the outer side of the pipe should not bounce back….objects should move as if they are passing below/above that pipe..

    Thanks in advance
    LINTO

  11. zap

    on October 13, 2009 at 2:40 pm

    Its nice but this is better…

    example:
    http://www.letsmoondance.nl/

    source:
    http://www.box2d.org/forum/viewtopic.php?f=6&t=2094

  12. Anthony

    on October 19, 2009 at 9:55 pm

    Maw, maybe if you read the tut. It said lets start with a chain…

  13. Andy

    on October 20, 2009 at 4:43 am

    the rope acts as if there is no weight on the end of it.

  14. Jaleel

    on January 25, 2010 at 11:08 am

    you have created lots of useful programs great. i would suggest you to create an menu for these programs so that we can quickly reach the desired one.

  15. iPhone Dev » Rope Simulate with Cocos2d and Box2d

    on February 6, 2010 at 5:46 am

    [...] Rope Simulate with Cocos2d and Box2d February 5th, 2010 admin Leave a comment Go to comments This post presents a good idea on how to simulate a rope using the distance joint in Box2d . I re-implemented it using  Cocos2d.  If you have got problems, please refer to that post for more details or leave a comment. In addition, you can also find another way of simulating a rope using Box2d from here. [...]

  16. florian

    on July 6, 2010 at 12:44 pm

    try this one, I approximated the rope as a parabola. Looks like more natural but it’s also complicated.

    http://numanim.com/index.php?option=com_content&view=article&id=48&Itemid=57&lang=fr

  17. florian

    on July 6, 2010 at 12:46 pm

    I forgot to say, to see the rope, pull the ring out

  18. ScanPlayGames

    on December 28, 2010 at 1:25 am

    Hello,

    I am working on a game and was in need of Box2D rope. Your sample is great here but it seems to be using an older build of Box2D where several of the above functions have been deprecated.

    If anyone wants to see a full, working source for this example using the latest Box2D for AS3, I posted the updated code here:
    click for rope

  19. harilalkm

    on January 4, 2012 at 7:05 am

    Hi, it’s great tutorial.
    I have a doubt . i need to change the position of the ceiling instead of rope?

    i have tried differnt method.. Am new Box2d ..

  20. harilalkm

    on January 5, 2012 at 8:39 am

    hi,

    I have tried it using 2.1a.I manged to move the ceiling also. but the rope don’t stick together.
    This is my source
    http://www.kreataglobal.in/sample/escape/test.zip
    Can you help meto fing what went wrong

< >