Basic HTML5 Physics


Before we begin we recommend that you read My First Project as this will help you to become familiar with using the Booty5 interface.

Physics in Booty5

Many modern 2D and 3D games use physics to make interactions within the game more realistic. Many of the modern 2D game engines use physics engines such as Box2D to drive interactions between game objects  The internal Booty5 game engine uses the Box2D engine under the hood.

The Booty5 editor enables you to create and attach physics materials and shapes to objects on the main canvas. Objects that have at least a physics material attached will be placed under control of the physics engine.

A physics shape gives the object that it is attached to its shape in the physical world. When a physics shape is attached to an actor, it creates a fixture. A fixture defines the physical shape, physical material, collision flags and other properties that are assigned to the actor. You can actually attach multiple fixtures to the same actor to create more complex objects. The physical material describes how the object will behave in the physical world such as how much friction and how bouncy collision should be between the object and others.

Creating a scene with objects under control of physics

We are going to create a scene that looks like the one below:

Booty5 basic physics screenshot

Booty5 basic physics screenshot

  1. Download the tutorial resources from here and unzip them to a folder somewhere
  2. Lets begin by creating a new project in Booty5 by clicking the New button in the main menu
  3. Now lets create some images and brushes by dragging the supplied resources onto the world tree (crate.png and ground.png), this will create the crate and ground images and brushes
  4. Drag and drop the ground brush onto the main canvas, this will create a ground actor
  5. Drag and drop the crate brush onto the canvas around 200 pixels above where you dropped the ground, this will create a crate actor that is situated above the ground
  6. Right click on the scene in the world tree and select New->Material, this will create a new physics material within the scene
  7. Select the new material in the world tree and then change its name in the properties panel to “static”, also change its type to “static”; changing the material to static tells Booty5 that the objects that are assigned this material will be static and unmoveable
  8. Right click on the scene in the world tree and select New->Material again, this will create a new physics material within the scene
  9. Select this new material in the world tree and then change its name in the properties panel to “dynamic”, leave the default type as “dynamic”, a dynamic material informs Booty5 that the objects that are assigned this material are dynamic and move around
  10. Drag the static material from the world tree onto the ground actor that you placed onto the canvas earlier, this creates a physics fixture that utilises the static material and assigns it to the ground actor. If you look under the physics section of the actors properties you will see that a new fixture has appeared in the fixtures section that contains the static material. We assign the static material to the ground because we do not want it to move
  11. Drag the dynamic material from the world tree onto the crate actor that you placed onto the canvas earlier, this creates a physics fixture that utilises the dynamic material and assigns it to the crate actor

Now hit the Test button in the main menu. You will see that the box falls from its original position because it is under the affect of gravity, when it hits the ground actor it stops because the ground is static and cannot move. We can spruce the interaction between the crate and ground up a little by adding some bounciness. To do this we need to make the crate more bouncy:

  1. Select the dynamic material in the world tree
  2. Change the Restitution property in the properties panel over on the right to 0.5, this makes the interaction between crate and ground more bouncy

Now hit the Test button again an you will notice that the crate bounces on the ground a number of times before settling at rest.

You can view the finished project for this tutorial here

You can download the complete finished project for this tutorial here

Related topics:

2,671 total views, 1 views today