Basic Box2D rope

October 5, 2009 • Actionscript 3, Box2D, Flash by Emanuele Feronato • 27 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.

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

		}
	}
}

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 Star

(34 votes, average: 4.29 out of 5)

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 27 comments

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
dim

on October 6, 2009 at 8:24 am

hell yeah, i like this rope :)
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
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.
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.
Monkios

on October 6, 2009 at 7:43 pm

This, with elasticity, would be awesome.
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
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!
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.
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
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
Anthony

on October 19, 2009 at 9:55 pm

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

on October 20, 2009 at 4:43 am

the rope acts as if there is no weight on the end of it.
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.
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. [...]
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
florian

on July 6, 2010 at 12:46 pm

I forgot to say, to see the rope, pull the ring out
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
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 ..
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
Cocos2d

on February 23, 2012 at 2:01 am

Hi Emanuele, great work. I am trying to get a similar rope in Cocos2D Box2D. I don’t know what I am doing wrong. Can you please help me. Thanks in Advance!
Anders

on March 28, 2012 at 12:07 pm

Hey, what exactly is making the rope just hang straight down? My rope sway back and forth.
Anders

on March 28, 2012 at 4:25 pm

Disregard my question, i’m a retard :P
godslave

on May 9, 2012 at 9:52 am

Hi, I’m new with box2d and libgdx and i’m trying to build a path like in the Stick stunt biker game.At first I tried to do this with a strong rope with polygon shape using prismaticJoint and distance joint but it’s not working as i expected. then i tried to do with chainShape and failed again to make the path curve smooth for my bike.for bike i follow the tutorial “creation-of-a-box2d-car-with-10-customizable-parameters”.
Any suggestion on how could i build the path.
Rope Simulation with Cocos2d and Box2d | iPhone Dev

on October 31, 2012 at 4:44 am

[...] 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. [...]
libGDX: Hanging Rope [duplicate] | BlogoSfera

on March 16, 2013 at 12:04 pm

[...] but no enough explanation given to use it.Can any body help me to make a rope like this one. Hanging Rope in Box2dI also tried to search for some good libGDX book for android but couldn’t find.your help is [...]
danadrianmirea

on May 31, 2013 at 9:08 pm

Hi,

Thank you for this.
This is exactly what I was looking for, I am new with Box2D and couldn’t accomplish it on my own.

Regards,
Adrian

italian geek and PROgrammer

This post has 27 comments

dim

Jjet42

oliver_l1

Matt

linto

Anthony

Andy

Jaleel

harilalkm

harilalkm

Cocos2d

Anders

Anders