12,508,112 members (54,385 online)
alternative version

17K views
9 bookmarked
Posted

# Box2d vehicles – part 3 – bike

, 9 Oct 2012 BSD
 Rate this:
How to create an amazing bike game for three platforms with only one code?

## Introduction

Last article showed how to make a car using box2d physical engine in Moscrif. In this article I’ll show how to create a bike. The result of this article is fully working game draft of cross-bike game. The concept of this game is used in many well known games, which have millions of downloads on app markets. To maximize the number of supported devices we use Moscrif SDK to create the game for three platforms with only one code.

## Box2d

The box2d physical engine is commonly used in many 2d games. The physical world consists from bodies, which are connected together by joints. These joints connect bodies together and allow some time of movement between them. In this sample prismatic and revolute joints are used.

The prismatic joint allows translation of two bodies along a specified axis. It prevents relative rotation between the bodies.

The Revolute joint allows relative rotation of two bodies around an anchor point. We also use mouse joint, but it is used only to deny collisions detection between some bodies. Some joints like revolute and prismatic support limits (to restrict joint movement) and motors (to enforce joint movement).

## Bike

Bike consists from five bodies, connected together with joints. The largest part of the bike is a frame. All other parts are connected onto the frame. The frame is used to apply angular impulse, which causes bike rotation. The bike’s position is also determined by the centre of the frame. The wheels are connected onto frame with front and back damper.

Image: bike’s parts

All bike’s bodies are polygon dynamic bodies. The dynamic bodies are fully simulated and collide with other static bodies (ground and jumps).

Example: create all bike’s bodies

```function create(scene, x, y)
{
// polygon shape of the body
var shape = [
{x:-30,y:-82},
{x:100,y:-42},
{x:50,y:82},
{x:38,y:80},
{x:-98,y:46},
{x:-92,y:-76}
]
this._frame = scene.addPolygonBody(this._images.frame, #dynamic, 1.0, 0.0, 0.0, shape);
this._frame.z = 2;
this._frame.setPosition(x, y);

// FRONT
this._frontDamper = scene.addPolygonBody(this._images.frontDamper, #dynamic, 1.0, 0.0, 0.0, this._images.frontDamper.width, this._images.frontDamper.height);
this._frontDamper.z = 3;
this._frontDamper.setPosition(x + 96, y + 35);

this._frontWheel = scene.addCircleBody(this._images.wheel, #dynamic, 1.2, 1.0, 0.0, this._images.wheel.width / 2);
this._frontWheel.z = 2;
this._frontWheel.setPosition(x + 113, y + 73);

// BACK
this._backDamper = scene.addPolygonBody(this._images.backDamper, #dynamic, 1.0, 0.0, 0.0, this._images.backDamper.width, this._images.backDamper.height);
this._backDamper.z = 3;
this._backDamper.setPosition(x - 80, y + 70);

this._backWheel = scene.addCircleBody(this._images.wheel, #dynamic, 1.2, 1.0, 0.0, this._images.wheel.width / 2);
this._backWheel.z = 2;
this._backWheel.setPosition(x - 120, y + 80);
```

## Suspensions

Nowadays, almost every cross bike has suspension on both wheels. They make the ride more comfortable and safer. To make the simulation more realistic it also supports suspensions.

### Front damper

The main part of front suspension is a prismatic joint which connects frame and front damper. The prismatic joint has a motor, which tries to move the frame up with some force. However, the upper transition of the joint is restricted by the limit. It means that the frame moves only up to the upper limit. If the front wheel hits some hurdle, the front damper is affected by force, which tries to move it up. This force is larger than maximum force of the joint, which caused that instead of joint motor the front dumper moves up - closer to the frame. Finally, when the front wheel comes over the hurdle, the force onto front damper is smaller and the joint can move damper to the lower position again.

Image: front damper

### Back damper

The back damper uses revolute joint. The revolute joint also supports limits and motor, but they are defined by angle not by distance. The back damper rotates around the point on the frame. Limits restricts the joint rotation and motor enforce it rotation.

Image: back damper

Example: connect dampers onto frame

```// JOINTS
// connect front damper onto frame
var jointDef = {
lowerTranslation    : -0.2, //(damperHeight / 5) / scene.scale,  /*meters*/
upperTranslation    : 0.0,  /*meters*/
enableLimit         : true,
enableMotor         : true,
motorSpeed          : 2.0,
maxMotorForce       : this._frame.getMass() * 9.8,
}
this._joints.push(scene.createPrismaticJoint(this._frontDamper, this._frame, x + 96, y + 35, -0.4, 1.0, 0.0, jointDef, false));
// connect back damper onto frame
jointDef = {
enableMotor     : true,     // enable motor
maxMotorTorque  : 150,      // maximum torque
motorSpeed      : -0.9,     // it is changed latery
lowerAngle      : 0.2, //(damperHeight / 5) / scene.scale,  /*meters*/
upperAngle      : 0.45,
enableLimit     : true,
}
this._joints.push(scene.createRevoluteJoint(this._backDamper, this._frame, x - 50, y + 55, jointDef, false));
```

## Wheels

Bikes are always powered by back wheel. The both wheels are connected onto damper by revolute joint without limit. The back wheel is connected with revolute joint with motor to speed the bike up or down.

Example: Connect wheels

```/ front wheel - without motor
this._joints.push(scene.createRevoluteJoint(this._frontDamper, this._frontWheel, x + 113, y + 73, null, false));
// back wheel - with motor
jointDef = {
enableMotor     : true,         // enable motor
maxMotorTorque  : 1500000,         // maximum torque
motorSpeed      : -2.0,         // it is changed latery*/
}
this._motorJoint = scene.createRevoluteJoint(this._backDamper, this._backWheel, x - 120, y + 80, jointDef, false);
```

## Angular impulse

Bike is applying also angular impulse in regular time intervals. The appliance of angular impulse allows to create flips or stabilize the bike after jumps.

Example: Apply angular impulse

```// apply angular impulse in regular intervals. The angular damping allows to create flip or stabilize bike after jump
this._angularImpulse = 0.0;
var process = new Timer(50, true);
process.onTick = function()
{
this super._frame.applyAngularImpulse(this super._angularImpulse);
}
process.start(50);
```

## Speed and rotation control

The bike’ speed and size of angular impulse is controlled by two bars on the left and right side of the screen. The height of the bar is 300 pixels to enable comfortable controlling by finger. Every time, when finger moves on the screen a pointerDragged method is called.

Example: manage pointer dragged method

```function pointerDragged (x, y, pointer)
{
super.pointerDragged(x, y);

var maxSpeed = 33;
var maxPlayer = 1.4 * this._bike.getMass();
if (y < System.height / 2 - 150)
y = System.height / 2 - 150;
else if (y > System.height / 2 + 150)
y = System.height / 2 + 150;

if (x > 3*System.width / 4) {
this._bike.player = (System.height / 2.0 - y) / 150 * maxPlayer;
} else if (x < System.width / 4){
this._bike.speed = -1*(System.height / 2.0 - y) / 150 * maxSpeed;
}
}
```

## Share

 Slovakia
Author develops in various programming languages included: C++, Javascript, and PHP. Last year he creates mobile cross platform applications in Moscrif SDK.

## You may also be interested in...

 Pro Pro

 First Prev Next
 My vote of 5 Unque9-Oct-12 5:46 Unque 9-Oct-12 5:46
 Re: My vote of 5 PavolSatala10-Oct-12 4:57 PavolSatala 10-Oct-12 4:57
 Re: My vote of 5 Faheem Rajput9-Apr-13 21:01 Faheem Rajput 9-Apr-13 21:01
 Last Visit: 31-Dec-99 18:00     Last Update: 28-Sep-16 19:34 Refresh 1