(For more resources related to this topic, see here.)

Mission briefing

In this article, we focus on the physics engine. We will build a basketball court where the player needs to shoot the ball in to the hoop. A player shoots the ball by keeping the mouse button pressed and releasing it. The direction is visualized by an arrow and the power is proportional to the duration of the mouse press and hold event.

There are obstacles present between the ball and the hoop. The player either avoids the obstacles or makes use of them to put the ball into the hoop. Finally, we use CreateJS to visualize the physics world into the canvas.

You may visit http://makzan.net/html5-games/ball-shooting-machine/ to play a dummy game in order to have a better understanding of what we will be building throughout this article.

The following screenshot shows a player shooting the ball towards the hoop, with a power indicator:

html5-game-development-ball-shooting-machine-physics-engine-img-0

Why is it awesome?

When we build games without a physics engine, we create our own game loop and reposition each game object in every frame. For instance, if we move a character to the right, we manage the position and movement speed ourselves.

Imagine that we are coding a ball-throwing logic now. We need to keep track of several variables. We have to calculate the x and y velocity based on the time and force applied. We also need to take the gravity into account; not to mention the different angles and materials we need to consider while calculating the bounce between the two objects.

Now, let's think of a physical world. We just defined how objects interact and all the collisions that happen automatically. It is similar to a real-world game; we focus on defining the rule and the world will handle everything else. Take basketball as an example. We define the height of the hoop, size of the ball, and distance of the three-point line. Then, the players just need to throw the ball. We never worry about the flying parabola and the bouncing on the board. Our space takes care of them by using the physics laws.

This is exactly what happens in the simulated physics world; it allows us to apply the physics properties to game objects. The objects are affected by the gravity and we can apply forces to them, making them collide with each other.

With the help of the physics engine, we can focus on defining the game-play rules and the relationship between the objects. Without the need to worry about collision and movement, we can save time to explore different game plays. We then elaborate and develop the setup further, as we like, among the prototypes.

We define the position of the hoop and the ball. Then, we apply an impulse force to the ball in the x and y dimensions. The engine will handle all the things in between. Finally, we get an event trigger if the ball passes through the hoop.

It is worth noting that some blockbuster games are also made with a physics engine. This includes games such as Angry Birds, Cut the Rope, and Where's My Water.

Your Hotshot objectives

We will divide the article into the following eight tasks:

Creating the simulated physics world
Shooting a ball
Handling collision detection
Defining levels
Launching a bar with power
Adding a cross obstacle
Visualizing graphics
Choosing a level

Mission checklist

We create a project folder that contains the index.html file and the scripts and styles folders. Inside the scripts folder, we create three files: physics.js, view.js, and game.js.

The physics.js file is the most important file in this article. It contains all the logic related to the physics world including creating level objects, spawning dynamic balls, applying force to the objects, and handling collision.

The view.js file is a helper for the view logic including the scoreboard and the ball-shooting indicator.

The game.js file, as usual, is the entry point of the game. It also manages the levels and coordinates between the physics world and view.

Preparing the vendor files

We also need a vendors folder that holds the third-party libraries. This includes the CreateJS suite—EaselJS, MovieClip, TweenJS, PreloadJS—and Box2D.

Box2D is the physics engine that we are going to use in this article. We need to download the engine code from https://code.google.com/p/box2dweb/. It is a port version from ActionScript to JavaScript.

We need the Box2dWeb-2.1.a.3.min.js file or its nonminified version for debugging. We put this file in the vendors folder.

Box2D is an open source physics-simulation engine that was created by Erin Catto. It was originally written in C++. Later, it was ported to ActionScript because of the popularity of Flash games, and then it was ported to JavaScript. There are different versions of ports. The one we are using is called Box2DWeb, which was ported from ActionScript's version Box2D 2.1. Using an old version may cause issues. Also, it will be difficult to find help online because most developers have switched to 2.1.

Creating a simulated physics world

Our first task is to create a simulated physics world and put two objects inside it.

Prepare for lift off

In the index.html file, the core part is the game section. We have two canvas elements in this game. The debug-canvas element is for the Box2D engine and canvas is for the CreateJS library:

<section id="game" class="row">
    <canvas id="debug-canvas" width="480" height="360"></canvas>
    <canvas id="canvas" width="480" height="360"></canvas>
  </section>

We prepare a dedicated file for all the physics-related logic. We prepare the physics.js file with the following code:

;(function(game, cjs, b2d){
  // code here later
}).call(this, game, createjs, Box2D);

Engage thrusters

The following steps create the physics world as the foundation of the game:

The Box2D classes are put in different modules. We will need to reference some common classes as we go along. We use the following code to create an alias for these Box2D classes:

// alias
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2AABB = Box2D.Collision.b2AABB
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2MassData = Box2D.Collision.Shapes.b2MassData
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef
, b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
;

We prepare a variable that states how many pixels define 1 meter in the physics world. We also define a Boolean to determine if we need to draw the debug draw:
```
var pxPerMeter = 30; // 30 pixels = 1 meter. Box3D uses meters and we use pixels.
var shouldDrawDebug = false;
```
All the physics methods will be put into the game.physics object. We create this literal object before we code our logics:
```
var physics = game.physics = {};
```

The first method in the physics object creates the world:

physics.createWorld = function() {
  var gravity = new b2Vec2(0, 9.8);
  this.world = new b2World(gravity, /*allow sleep= */ true);

  // create two temoporary bodies
  var bodyDef = new b2BodyDef;
  var fixDef = new b2FixtureDef;

  bodyDef.type = b2Body.b2_staticBody;
  bodyDef.position.x = 100/pxPerMeter;
  bodyDef.position.y = 100/pxPerMeter;

  fixDef.shape = new b2PolygonShape();
  fixDef.shape.SetAsBox(20/pxPerMeter, 20/pxPerMeter);

  this.world.CreateBody(bodyDef).CreateFixture(fixDef);

  bodyDef.type = b2Body.b2_dynamicBody;
  bodyDef.position.x = 200/pxPerMeter;
  bodyDef.position.y = 100/pxPerMeter;

  this.world.CreateBody(bodyDef).CreateFixture(fixDef);
  // end of temporary code
}

The update method is the game loop's tick event for the physics engine. It calculates the world step and refreshes debug draw. The world step upgrades the physics world. We'll discuss it later:
```
physics.update = function() {
  this.world.Step(1/60, 10, 10);
  if (shouldDrawDebug) {
    this.world.DrawDebugData();
  }
  this.world.ClearForces();
};
```

Before we can refresh the debug draw, we need to set it up. We pass a canvas reference to the Box2D debug draw instance and configure the drawing settings:

physics.showDebugDraw = function() {
  shouldDrawDebug = true;

  //set up debug draw
  var debugDraw = new b2DebugDraw();
  debugDraw.SetSprite(document.getElementById("debug-canvas").getContext("2d"));
  debugDraw.SetDrawScale(pxPerMeter);
  debugDraw.SetFillAlpha(0.3);
  debugDraw.SetLineThickness(1.0);
  debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
  this.world.SetDebugDraw(debugDraw);
};

Let's move to the game.js file. We define the game-starting logic that sets up the EaselJS stage and Ticker. It creates the world and sets up the debug draw. The tick method calls the physics.update method:

;(function(game, cjs){
  game.start = function() {
    cjs.EventDispatcher.initialize(game);
 // allow the game object to listen and dispatch custom events.

    game.canvas = document.getElementById('canvas');

    game.stage = new cjs.Stage(game.canvas);

    cjs.Ticker.setFPS(60);
    cjs.Ticker.addEventListener('tick', game.stage); 
// add game.stage to ticker make the stage.update call automatically.
    cjs.Ticker.addEventListener('tick', game.tick); // gameloop

    game.physics.createWorld();
    game.physics.showDebugDraw();
  };

  game.tick = function(){
    if (cjs.Ticker.getPaused()) { return; } // run when not paused

    game.physics.update();

  };

  game.start();
}).call(this, game, createjs);

After these steps, we should have a result as shown in the following screenshot. It is a physics world with two bodies. One body stays in position and the other one falls to the bottom.

html5-game-development-ball-shooting-machine-physics-engine-img-1

Objective complete – mini debriefing

We have defined our first physical world with one static object and one dynamic object that falls to the bottom.

A static object is an object that is not affected by gravity and any other forces. On the other hand, a dynamic object is affected by all the forces.

Defining gravity

In reality, we have gravity on every planet. It's the same in the Box2D world. We need to define gravity for the world. This is a ball-shooting game, so we will follow the rules of gravity on Earth. We use 0 for the x-axis and 9.8 for the y-axis.

It is worth noting that we do not need to use the 9.8 value. For instance, we can set a smaller gravity value to simulate other planets in space—maybe even the moon; or, we can set the gravity to zero to create a top-down view of the ice hockey game, where we apply force to the puck and benefit from the collision.

Debug draw

The physics engine focuses purely on the mathematical calculation. It doesn't care about how the world will be presented finally, but it does provide a visual method in order to make the debugging easier.

This debug draw is very useful before we use our graphics to represent the world.

We won't use the debug draw in production. Actually, we can decide how we want to visualize this physics world. We have learned two ways to visualize the game. The first way is by using the DOM objects and the second one is by using the canvas drawing method. We will visualize the world with our graphics in later tasks.

Understanding body definition and fixture definition

In order to define objects in the physics world, we need two definitions: a body definition and fixture definition.

The body is in charge of the physical properties, such as its position in the world, taking and applying force, moving speed, and the angular speed when rotating.

We use fixtures to handle the shape of the object. The fixture definition also defines the properties on how the object interacts with others while colliding, such as friction and restitution.

Defining shapes

Shapes are defined in a fixture. The two most common shapes in Box2D are rectangle and circle. We define a rectangle with the SetAsBox function by providing half of its width and height. Also, the circle shape is defined by the radius.

It is worth noting that the position of the body is at the center of the shape. It is different from EaselJS in that the default origin point is set at the top-left corner.

Pixels per meter

When we define the dimension and location of the body, we use meter as a unit. That's because Box2D uses metric for calculation to make the physics behavior realistic.

But we usually calculate in pixels on the screen. So, we need to convert between pixels on the screen and meters in the physics world. That's why we need the pxPerMeter variable here. The value of this variable might change from project to project.

The update method

In the game tick, we update the physics world.

The first thing we need to do is take the world to the next step. Box2D calculates objects based on steps. It is the same as we see in the physical world when a second is passed. If a ball is falling, at any fixed time, the ball is static with the property of the falling velocity. In the next millisecond, or nanosecond, the ball falls to a new position. This is exactly how steps work in the Box2D world. In every single step, the objects are static with their physics properties. When we go a step further, Box2D takes the properties into consideration and applies them to the objects.

This step takes three arguments. The first argument is the time passed since the last step. Normally, it follows the frame-per-second parameter that we set for the game. The second and the third arguments are the iteration of velocity and position. This is the maximum iterations Box2D tries when resolving a collision. Usually, we set them to a low value.

The reason we clear the force is because the force will be applied indefinitely if we do not clear it. That means the object keeps receiving the force on each frame until we clear it. Normally, clearing forces on every frame will make the objects more manageable.

Classified intel

We often need to represent a 2D vector in the physics world. Box2D uses b2vec for this purpose. Similar to the b2vec function, we use quite a lot of Box2D functions and classes. They are modularized into namespaces. We need to alias the most common classes to make our code shorter.