Extending ti.box2d : Mouse Joints

It is common in physics based games to need to be able to drag bodies around. However, setting the position of a body instantaneously based on the current touch position can introduce excessive forces to the physics simulation, and break it. So we need another way to solve this problem…

Enter Box2D’s mouse joint. In our modifications to the ti.box2d module, we have added the mouse joint for use in Titanium games using Box2D. Creating a mouse joint is simple, as shown in the code below.

var mouseJoint = world.createMouseJoint ( groundBody, draggableBody, {
maxForce : 1000,
dampingRatio : 0.6,
frequencyHz : 1.0,
collideConnected : true

In the above code sample , world is the result of a call to ti.box2d’s createWorld function. All joints require 2 bodies, even though we generally think of the mouse joint as really only effecting a single body. When creating mouse joints, that second body (the first parameter in this function) is generally a static ground body. The second parameter in our createMouseJoint function is the body that we want to drag around.

We’ll come back to the other options in a moment. First, let’s actually drag the body around. In order to have the body dragged towards a point, we must call the setTarget function on the mouse joint with the x and y coordinates that we want to drag the body to. You’ll generally want to do this in an update loop or anytime the mouse (touch point) moves.

view.addEventListener('touchmove', function(e)
mouseJoint.setTarget(e.x, e.y);

That’s all you need to start dragging a body around. Now lets circle back to those other options in the creation of the mouse joint. The maxForce property is the maximum amount of force that will be applied to the body in order to get it to its target point. collideConnected indicates whether the draggableBody should be allowed to collide with the groundBody.

The last two properties, dampingRatio and frequencyHz, are the parameters you will need to tweak the most to get the kind of dragging feel that you want. If you want very tight dragging, you will need a higher frequency and damping ratio. If you want some oscillation after the body reaches it’s target point, you will want a damping ratio less than 1.0. Check out the Box2D Manual to learn more about these options.

Edwin Huertas

Edwin Huertas

April 7, 2012

Hands-on executive officer known for strategic and focused approach, with extensive accolades for limiting risk, creating lean teams, and establishing creative strategies for optimizing internal operations, financial returns and external customer service.

More like this delivered right to you:

Sign up for our Newsletter to get our latest posts plus invitations to our events and access to future whitepapers.

Related Posts

Seeing the Member Experience in a “User-Experience” World

Seeing the Member Experience in a “User-Experience” World

In the world of product development, we are often always saying “user” _______. User-centered design, user analytics, user personas, user journeys, etc, etc.It’s a term that holds importance because it is a genuine focus on the end-user experience.  It’s also often...

7 Tips for Utilizing Amazon Alexa to Engage with Customers

7 Tips for Utilizing Amazon Alexa to Engage with Customers

Amazon first released Alexa virtual assistant and smart speaker Echo in late 2014. An in-home virtual assistant is an impressive tool, but creating a seamless user experience with it can be a challenge. So how do companies overcome this challenge? What engagement can...

Ready to drop us a line?