Swinging Barrel HTML5 Tutorial


Many modern games usually feature nice touches such as swinging platforms, ropes and other objects. In this tutorial we are going to look at how we can create such nice effects by creating a swinging barrel on a rope that is completely under control of the physics engine.

Before proceeding with this tutorial you should take a look at the Basic Physics tutorial as this will introduce you to physics materials, shapes and fixtures.

The Swinging Barrel

The swinging barrel is basically 3 objects tied together using physical joints:

  • The main anchor – This is an object that the top end of the rope connects to, in this case we have used a crate
  • The rope – This is a length of rope that attaches to the bottom of the crate at its top end and to a barrel at its bottom end
  • The barrel – This is an object that attaches to the end of the rope and swings with the rope

Once you have finished building the scene it will look something like this:

Booty5 swinging barrel

Booty5 swinging barrel

 

Creating the swinging barrel basics

  1. Download the tutorial resources from here and unzip them to a folder somewhere
  2. Lets begin by creating a new project in Booty5 and dragging the supplied resources onto the Booty5 world tree, this will create the crate and ground images and brushes
  3. Drag a barrel, a rope and a crate brush (in that order) onto the main canvas to create the crate, rope and brush objects
  4. Position the objects so that they look similar to the layout shown above

Hooking up the physics

  1. Create a new physics material and call it static, also change its type to “static”, this material will be attached to objects that cannot be moved
  2. Create a new physics material and call it dynamic, also change its type to “dynamic”, this material will be attached to objects that can move
  3. Drag the static material from the world tree and drop it onto the crate on the main canvas, this will add a fixture to the crate that uses this material
  4. Drag the dynamic material from the world tree and drop it onto the rope and then the barrel on the main canvas, this will add a fixture to them both that uses this material

Creating the joints

To attach our physical objects together we need to create joints that describe which objects attach to which and how they attach. We are going to create two joints, the first will attach the rope to the crate and the second will attach the barrel to the rope:

  1. Select the crate actor then locate the actors physics section in its properties
  2. Click the Add button in the joints section, this will create a new joint
  3. Change the joint type to “revolute”, this type of joint attaches objects together but allows the joint to rotate
  4. Set the ActorB property of the joint to “rope1″, this tells Booty5 to attach the other end of the joint to the rope, because the joint is defined inside the crate actor, Booty5 already knows that the first end of the joint should attach to the crate
  5. Now set the OffsetA to “0,71”. OffsetA is the offset on the crate where we want the joint to attach, because the origin of the crate is at its centre we want to move the joint attachment point to the bottom of the crate (71 is half the crates height)
  6. Select the rope actor and add a new joint
  7. Change the joint type to “weld” (weld joint basically attaches two objects together with no freedom of movement) and set ActorB to “barrel1″, this attaches the barrel to other end of the rope
  8. We want our rope to swing in a way that makes it look like it is attached to the bottom of the crate, however Booty5’s default origin for an actor is at its centre position. In order to make the rope rotate around the top end of the rope we must move its origin. To adjust the origin so that it does rotate around its top end, select the rope actor and enter “0,-76″ into the Origin property (76 is half the ropes height)
  9. Changing the ropes origin will move the rope on the canvas, reposition the rope so that the top end attaches to the bottom of the crate
  10. Now go back to the ropes joint properties and enter “0,152” into the OffsetA property, this will attach the barrel at the very end of the rope (the rope is 152 units long)
  11. Select the barrel actor then locate the actors physics section in its properties
  12. We want the barrel to be attached to the end of the rope at its top, like we did with the rope we need to adjust its Origin to ensure that it does. Enter “0,-51″ (51 is half the barrels height) into the barrels Origin property to reposition its origin. You will also need to move the barrel on the canvas so that its top connects with the end of the rope
  13. Now in order to see the rope swinging we need to give it some initial velocity. Select the rope actor and enter “50,0” into the Velocity property
  14. Hit the Test button to test

You should now see the rope attached to the crate swinging with the barrel attached to the end of the rope.

You can view the finished project for this tutorial here.

You can download the complete finished project for this tutorial here.

Related topics:

 

1,839 total views, 4 views today