To end the exploratory chapter, we will have a look at the physics engine of ImpactJS: Box2D. Physics engines are game engines capable of simulating many of the visible forces at play on earth like gravity and pressure forces (impact). One of the most famous games with a physics engine is, of course, Angry Birds. Physics was used in lots of games before this 2D world hit (such as Half-life and games even way before this one). Angry Birds should, however, be an example of how a simple game (combined with a considerable marketing machine) can reap enormous success.
The engine is not an invention of Dominic (maker of ImpactJS) but a port from Flash ActionScript to JavaScript. As such, a full description of all the Box2D capabilities is not available on the Impact website (as it is for the Impact Engine), but it is available on the following website: http://www.box2dflash.org/docs/2.0.2/manual.php.
The documentation on combining ImpactJS and Box2D, however, is fragmentary at best. You need a totally different way of thinking when building a game with physics versus one without and that is why the source code is also separate from the standard package. As mentioned in Chapter 1, Firing Up Your First Impact Game, you can get your Box2D source code from a downloadable file called physics when you buy ImpactJS. The folder called Box2D should be placed under the plugins folder in order to proceed.
Before diving into the Box2D code, load up a game and press the Shift + F9 key combination. You are now magically teleported to the bizarre world of Box2D, where things can fly and gravity soaks everything back down. Try pushing the coins around and see how they react to well placed headbutts from different directions.
If you open the main.js file, you will stumble upon a new game definition. This time it is not an extension of the standard ig.game function, but ig.Box2DGame. Yes, it is possible to define different games in a single file and often this technique is used for making game over screens, splash screens, and the sort using the following code:
BouncyGame = ig.Box2DGame.extend({
gravity:3,Right from the beginning we can define the gravity of the world as a property of the BouncyGame variable. Feel free to change it and watch the difference in gravity take effect in the game. Gravity does not need to be a positive force either. Try setting it to a negative number such as -100 and you will see everything being drawn towards the ceiling.
The stronger the gravity, the more force you will need to overcome it. With a gravity value of 300 (or -300) your movement becomes restricted to left and right.
This can be changed in the player entity itself. Open the boxPlayer.js file to find a special instance of the player entity. Special, because it is not an extension of the normal player entity, but the other entity called the Box2DEntity, as shown in the following code example:
.requires(
'plugins.box2d.entity'
)
.defines(function(){
EntityBoxPlayer = ig.Box2DEntity.extend({Also notice that we needed to include the Box2D entity.
While the normal Impact Engine makes use of velocity, Box2D uses vectors. As you might remember from physics and mathematics, a vector is a line with both direction and magnitude; let's take a look at how it is implemented:
if(ig.input.state('up')){
this.body.ApplyForce( new b2.Vec2(0,-200),this.body.GetPosition() );
}For example, for going upwards you apply force with your own body on the position of your body. The force you output has a magnitude of 200 as shown in this example. We changed the value of gravity to 300 so we don't have enough to overcome it with a force of 200. Try setting its value to 500 and you will be able to gradually overcome gravity again. Set its value to 1000 and even though you will still fall like a brick, overcoming gravity by pressing the up button becomes a breeze.
Summing up the concept of gravity and force, we can conclude that:
Box2D is a physics engine, not officially part of ImpactJS, but fairly integrated with it.
Box2D is vector-based. All movements translate in a combination of force and direction. Gravity is just a specific case, always having a vertical direction.
Try changing the game's gravity to make things float upwards.
Change the force that is applied to the player when pressing the up button.
While hitting another object like a coin, it can be moved by the force of the impact. You probably tried doing that already. The force the player exerts is applied to the coin and it goes flying. Eventually the coin is brought to rest again by gravity but you are free to hit it again of course.
The coin also has a certain amount of bounciness, which in Box2D is called restitution. The value of restitution can be set on a scale from 0 to 1. Since force decreases over time, an object will never bounce back at the same speed with which it hit the wall. You can set the bounciness of the coin yourself in the boxcoin.js file as follows:
This.restitution = 1;
Try setting the value of restitution to 0 and see if the coins still bounce off the walls.
This was a very short introduction to Box2D. In the next chapter we will build up a small RPG from the ground up.
Summing up the collision impact and bounciness concept, we can conclude that:
Collision between two bodies in a Box2D environment will translate in each body exerting a certain force on the other body
A body can have a certain amount of elasticity when hitting a solid object; this is called restitution or bounciness
You can try changing the restitution of the coin entity and observe the small difference in bounciness