in this part we will go through how to identify tricks and checkpoints in the game using collision listeners etc. All aforementioned will be displayed on a HUD so user gets the feedback properly.

Let’s start this chapter by creating HUD and after that we’ll implement all necessary functionality.

1. Hud
2. Car
3. Checkpoints
4. Fuel cans and coins
5. Listeners and tricks

Download resources

HUD is very essential part of a game providing necessary feedback for user interactions. It of course could be called with many other names, but term HUD is pretty well known among gamers.

Our HUD will eventually contain information for:
1. Distance from the start
2. Amount of fuel left
3. Amount of money
4. Airtime and flip reward feedback

Let’s add template code for the HUD. The method names are pretty much self explanatory.

Hud.h
[code language=”cpp”]
#ifndef __HUD_H__
#define __HUD_H__

#include "cocos2d.h"

USING_NS_CC;

class Hud : public Layer {
private:
Label* _messageLabel;
Label* _moneyLabel;
Label* _nextCheckpointLabel;

Sprite* _fuelTankSprite;
Sprite* _fuelTankBarSprite;
Sprite* _coinSprite;
Sprite* _distanceSprite;
public:
void showMessage(std::string message);

void setFuel(float fuel);
void setMoney(int money);
void setMeters(int nextCheckpont, int meters);

virtual bool init();
CREATE_FUNC(Hud);
};

#endif
[/code]

Hud.cpp
[code language=”cpp”]
#include "Hud.h"

#include "SimpleAudioEngine.h"

USING_NS_CC;

bool Hud::init() {
if(!Layer::init()) {
return false;
}

int fuelDistanceFromTop = 70;
int moneyDistanceFromTop = 120;
int distanceDistanceFromTop = 30;

Size s = Director::getInstance()->getVisibleSize();

_fuelTankSprite = Sprite::create("images/hud/fuel_can.png");
_fuelTankSprite->setPosition(Point(40, s.height – fuelDistanceFromTop));
addChild(_fuelTankSprite);

_fuelTankBarSprite = Sprite::create("images/hud/fuel_can_bar.png");
_fuelTankBarSprite->setAnchorPoint(Point(0.0f, 0.5f));
_fuelTankBarSprite->setPosition(Point(90, s.height – fuelDistanceFromTop));
addChild(_fuelTankBarSprite);

_coinSprite = Sprite::create("images/hud/coin.png");
_coinSprite->setPosition(Point(40, s.height – moneyDistanceFromTop));
addChild(_coinSprite);

_distanceSprite = Sprite::create("images/hud/distance.png");
_distanceSprite->setPosition(Point(40, s.height – distanceDistanceFromTop));
addChild(_distanceSprite);

_messageLabel = Label::createWithTTF("Checkpoint reached!", "fonts/arial.ttf", 60);
_messageLabel->setRotation(10.0f);
_messageLabel->setScale(0.5f);
_messageLabel->setPosition(Point(s.width/2.0f + 100, s.height/2.0f + 50.0f));
_messageLabel->setOpacity(0);
addChild(_messageLabel);

_moneyLabel = Label::createWithTTF("0", "fonts/arial.ttf", 60);
_moneyLabel->setScale(0.4f);
_moneyLabel->setAnchorPoint(Point(0.0f, 0.5f));
_moneyLabel->setPosition(Point(90, s.height – moneyDistanceFromTop));
addChild(_moneyLabel);

_nextCheckpointLabel = Label::createWithTTF("0/0", "fonts/arial.ttf", 60);
_nextCheckpointLabel->setScale(0.4f);
_nextCheckpointLabel->setAnchorPoint(Point(0.0f, 0.5f));
_nextCheckpointLabel->setPosition(Point(90, s.height – distanceDistanceFromTop));
addChild(_nextCheckpointLabel);

return true;
}

void Hud::showMessage(std::string message) {
_messageLabel->setString(message);
Director::getInstance()->getActionManager()->removeAllActionsFromTarget(_messageLabel);
_messageLabel->setOpacity(255);
DelayTime* delay = DelayTime::create(0.5f);
FadeOut* fade = FadeOut::create(0.2f);
Sequence* seq = Sequence::create(delay, fade, NULL);
_messageLabel->runAction(seq);
}

void Hud::setMeters(int nextCheckpont, int meters) {
__String* str = String::createWithFormat("%d/%d", meters, nextCheckpont);
_nextCheckpointLabel->setString(str->getCString());
}

void Hud::setFuel(float value) {
const float barMaxWidth = 120;
value = clampf(value, 0.0f, 120.0f);
_fuelTankBarSprite->setScaleX((value * 1.2f) / barMaxWidth);
}

void Hud::setMoney(int money) {
__String* str = String::createWithFormat("%d", money);
_moneyLabel->setString(str->getCString());
}
[/code]

Now we need to add the Hud layer as a child of our main layer by doing the following:

HelloWorldScene.h
[code language=”cpp”]
#include "Hud.h"
class HelloWorld : public cocos2d::Layer {
private:
…
Hud* _hud;
[/code]

Initialize _hud variable and add is as a child just before end of bool HelloWorld::init so that HUD will be displayed on top of other layers. We could of course change the rendering order by changing z order, but adding layers in ‘correct’ order suffices here.

HelloWorldScene.cpp
[code language=”cpp”]
_hud = Hud::create();
addChild(_hud);
[/code]

Now if you compile and run the code you should see distance, fuel and money indicators in top left corner. Now we have our HUD frame which we can utilize later on with methods showMessage, setMeters, setFuel and setMoney.

Next we need to add some new features in our car class. Since our HUD needs a way to display car fuel, we need to add fuel variable in the class along with getAngle method which we use later on to identify flips.

Position method is for getting distance later on.

Car.h
[code language=”cpp”]
class Car {
private:
…
float _fuel;
public:
…

float getAngle() {
return _body->GetAngle();
}

float getFuel() {
return _fuel;
}

Point getPosition() {
return Point(_body->GetPosition().x * PTM_RATIO, _body->GetPosition().y * PTM_RATIO);
}

void setFuel(float fuel) {
_fuel = fuel;
}
[/code]

When fuel value is <= 0 the fuel bar is empty. Car.cpp [code language="cpp"] void Car::update(float dt) { ... _fuel -= 0.1f; } [/code] HelloWorldScene.cpp [code language="cpp"] bool HelloWorld::init() { .... _car = new Car(); _car->init(_world, _terrain, _startPosition); _car->setFuel(100.0f); ... } void HelloWorld::update(float dt) { ... _hud->setFuel(_car->getFuel()); _camera->update(dt); ... [/code] Now if you compile and run your car's fuel should be slowly decreasing on the top left corner.

Now it’s time to add checkpoints functionality. Checkpoints are reached after certain amount of distance is driven. We can store distances in simple integer array. Also in order to know the distance, we need to add method for doing that which we later on compare with the checkpoint integer array.

Lets decide that 10 pixels equal on meter. Therefore in code below first checkpoints appears after 500 meters(5000 pixels).

Notice that we are adding car’s start position as a private variable _startPosition. We use this for calculating distance from start point forwards.

HelloWorldScene.h
[code language=”cpp”]
…
private:
int _currentCheckpoint;
std::vector<int> _checkpoints;

int getMeters();
void nextCheckpoint();

Point _startPosition;
[/code]

HelloWorldScene.cpp
[code language=”cpp”]
bool HelloWorldScene::init() {
_startPosition = Point(400, 500);
_car = new Car();
_car->init(_world, _terrain, _startPosition);

_currentCheckpoint = 0;
_checkpoints.push_back(500);
_checkpoints.push_back(1000);
_checkpoints.push_back(1700);
_checkpoints.push_back(2500);
_checkpoints.push_back(3500);
_checkpoints.push_back(5000);
}

int HelloWorld::getMeters() {
const int meterEqualsPixels = 10;
int totalMeters = (_car->getPosition().x – _startPosition.x) / meterEqualsPixels;
//use std::max to avoid returning negative meters
return std::max(totalMeters, 0);
}

void HelloWorld::nextCheckpoint() {
_currentCheckpoint++;
_hud->showMessage("Checkpoint reached!");
}

void HelloWorld::update(float dt) {
…
//monitor whether player has passed previous checkpoint
int currentMeters = getMeters();
if(currentMeters >= _checkpoints[_currentCheckpoint]) {
nextCheckpoint();
}

_hud->setMeters(_checkpoints[_currentCheckpoint], getMeters());

_camera->update(dt);
…
}
[/code]

Notice that the _currentCheckpoint variable is increased each time checkpoint is reached, which means that the if comparison will then start comparing against next position in _checkpoints array. Pretty straightforward.

Compile the code and take your car for a ride. After 5000 pixels you should get a “Checkpoint reached” displayed on HUD.

It is now time to do some preliminary actions before diving into tricks. We need to be able to identify between sprite objects of different type. For that purpose add following code in config.h. Before compiling remove ItemType struct enum from Terrain.h!

Config.h
[code language=”cpp”]
…
#define PTM_RATIO 10

struct ItemType {
enum type {
Coin,
Fuel,
Head,
Ground,
Car
};
};
…
[/code]

Lets take those types into use. Add following code inside Car::init after sprites are initialized.

Car.cpp
[code language=”cpp”]
_driverSprite->setTag(ItemType::Head);
_bodySprite->setTag(ItemType::Car);
_frontTireSprite->setTag(ItemType::Car);
_rearTireSprite->setTag(ItemType::Car);
[/code]

Same thing with Terrain class’s fuel and coin sprites. Insert code

Terrain.h
[code language=”cpp”]
…
private:
Node* _groundNode;
[/code]

Terrain.cpp
[code language=”cpp”]
Terrain::Terrain() {
…
_groundNode = Node::create();
_groundNode->setTag(ItemType::Ground);
addChild(_groundNode);
}

void TerrainG::initWorld(b2World* world) {
…
_body = world->CreateBody(&bd);
//with _groundNode we can identify if collision is happening with ground (ItemType::Ground).
_body->SetUserData(_groundNode);
}

void Terrain::generateItems(std::vector<Sprite*>& sprites) {
…
Sprite* coinSprite = Sprite::create("images/game/coin.png");
coinSprite->setTag(ItemType::Coin);
…
Sprite* fuelCanSprite = Sprite::create("images/game/fuel_can.png");
fuelCanSprite->setTag(ItemType::Fuel);
…
}
[/code]

Now we are able to identify collision between different kinds of objects and can more easily do some specific actions required.

Lets utilize HUD class when collecting money or fuel.
HelloWorldScene.h
[code language=”cpp”]
private:
…
int _money;

//items
void playCollectAnim(Sprite* sprite);
void collectFuelTank(Sprite* sprite);
void collectMoney(Sprite* sprite);
[/code]

HelloWorldScene.cpp
[code language=”cpp”]
void HelloWorld::playCollectAnim(Sprite* sprite) {
sprite->runAction(MoveBy::create(0.5f, Point(0.0f, 40.0f)));
sprite->runAction(FadeOut::create(0.5f));
}

void HelloWorld::collectFuelTank(Sprite *sprite) {
_car->setFuel(120);
playCollectAnim(sprite);
}

void HelloWorld::collectMoney(Sprite *sprite) {
_money += 100;
_hud->setMoney(_money);
playCollectAnim(sprite);
}
[/code]

Update HelloWorld::update code where collisions against fuel and coins are checked with following:
[code language=”cpp”]
for(int i = 0; i < _sprites.size(); ++i) {
if(_car->getSprite()->boundingBox().intersectsRect(_sprites[i]->boundingBox()) && _sprites[i]->isVisible()) {
if(_sprites[i]->getTag() == ItemType::Coin) {
collectMoney(_sprites[i]);
} else if(_sprites[i]->getTag() == ItemType::Fuel) {
collectFuelTank(_sprites[i]);
}
_sprites[i]->setTag(-1);
}
}
[/code]

Compile your code and collect some fuel cans and coins to see new features in action.

Now we get to more hairy part of this chapter. There is many ways to identify flips and airtimes and this is only one among them.

What we essentially need is a way to know whether the car is on the ground or in the air. If car is in the air we monitor if car’s angle changes as much as is needed for a complete flip.

In order to monitor collisions using Box2d, we need to start by creating MyContactListener class, which Box2d fills with collision information for us to utilize. So create new files MyContactListener.h accordingly.

MyContactListener.h
[code language=”cpp”]
#ifndef __MYCONTACTLISTENER_H__
#define __MYCONTACTLISTENER_H__

#import <Box2d/Box2D.h>
#import <vector>
#import <algorithm>

#include "cocos2d.h"

USING_NS_CC;

struct MyContact {
b2Body *bodyA;
b2Body *bodyB;
float impulseA;
float impulseB;
bool operator==(const MyContact& other) const
{
return (bodyA == other.bodyA) && (bodyB == other.bodyB);
}

bool hasCollision(int typeA, int typeB) {
bool collision = false;
if(bodyA && bodyB) {
Node* aNode = (Node*)bodyA->GetUserData();
Node* bNode = (Node*)bodyB->GetUserData();

if(aNode && bNode) {
log("id %d", aNode->getTag());
if((aNode->getTag() == typeA && bNode->getTag() == typeB) ||
(bNode->getTag() == typeA && aNode->getTag() == typeB)) {
collision = true;
}
}
}

return collision;
}
};

class MyContactListener : public b2ContactListener {

public:
std::vector<MyContact> beginContacts;
std::vector<MyContact> endContacts;

void BeginContact(b2Contact* contact) {
MyContact myContact = { contact->GetFixtureA()->GetBody(), contact->GetFixtureB()->GetBody() };
beginContacts.push_back(myContact);
}

void EndContact(b2Contact* contact) {
MyContact myContact = { contact->GetFixtureA()->GetBody(), contact->GetFixtureB()->GetBody() };
endContacts.push_back(myContact);
}

};

#endif
[/code]

Next thing we need is to utilize this class. Create _contactListener variable pointer in HelloWorldScene.h.

HelloWorldScene.h
[code language=”cpp”]
private:
…
//tricks
float _aerialTimer;
float _lastRotation;
int _collisionPoints;
int _flips;

MyContactListener* _contactListener;

void flip();
[/code]

HelloWorldScene.cpp
[code language=”cpp”]
bool HelloWorld::init() {
…
//add after Box2d’s _world variable is initialized
_contactListener = new MyContactListener();
_world->SetContactListener(_contactListener);

//initialize variables
_aerialTimer = 0.0f;
_collisionPoints = 0;
_flips = 0;
_lastRotation = 0.0f;
}

void HelloWorld::flip() {
_flips++;
_money += 1000;
_hud->setMoney(_money);
_hud->showMessage("Flip!");
}

void HelloWorld::update(float dt) {
…
std::vector<MyContact>& beginContacts = _contactListener->beginContacts;
bool groundHit = false;
for(int i = 0; i < beginContacts.size(); ++i) {
if(beginContacts[i].hasCollision(ItemType::Ground, ItemType::Car)) {
groundHit = true;
_aerialTimer = 0.0f;
_collisionPoints++;
}
}

std::vector<MyContact>& endContacts = _contactListener->endContacts;
for(int i = 0; i < endContacts.size(); ++i) {
if(endContacts[i].hasCollision(ItemType::Ground, ItemType::Car)) {
_collisionPoints–;
}
}

endContacts.clear();
beginContacts.clear();

//in case where car is on the ground, there are 2 collision points because
//both tires are touching the ground
if(_collisionPoints == 0) {
_aerialTimer += dt;
//air score bonus after every second(1.0f)
if(_aerialTimer >= 1.0f) {
_hud->showMessage("Air score +100!");
_aerialTimer = _aerialTimer – 1.0f;
}
}

//compare new angle with last angle. If new angle is larger or smaller than PI*2
//it means car has rotated a full circle.
float angle = _car->getAngle();
if(!groundHit) {
if(angle > _lastRotation + M_PI * 2) {
_lastRotation = _lastRotation + M_PI * 2;
flip();
} else if(angle < _lastRotation – M_PI * 2) {
_lastRotation = _lastRotation – M_PI * 2;
flip();
}
}

_camera->update(dt);
…
}

[/code]

Now if you hit compile and run you should start gaining some rewards by doing flips and airtimes.

I hope I didn’t miss anything relevant information with this chapter. Anyway if that was case, please don’t hesitate to comment. Thanks!

in the last chapter we went through on how to create terrain and now we will focus on creating four main things we now lack. We will start by creating car which can be driven with reverse and accelerate pedals. In order to keep the car centered on the screen, we will create camera that will act similarly to Hill Climb Racing which means it will zoom out while driving fast and zoom in when slowing down. The last thing we will go through is collecting coins and fuel cans. So we will have 4 simple concepts: Car, controls, camera, coins and fuel cans where each of these concepts one has some special features which we will go through.

I will again provide you with some template code, which we will start implementing as we go on and in the end you should be able to enjoy some fast driving while collecting dozens of coins and fuel cans.

What we have after this

1. Car
2. Controls
3. Camera
4. Coins and fuel cans

Download resources

We will start by creating car on our track. Because our car will be driven on the track which is made of Box2D body, the car will be made of Box2D body too, so the bodies can interact between each other. We will then add sprites on those bodies created and then update those sprite positions in update loop to make sprites follow Box2D bodies properly.

I won’t actually be going that much into detail on how to create car with Box2D bodies, because creating physics that provide well functioning car model is somewhat trial and error process. So the variables defined below just need to be tweaked long enough to have it work well enough for your purposes.
See these two links if want to get some ideas:
http://www.emanueleferonato.com/2009/04/06/two-ways-to-make-box2d-cars/
http://www.iforce2d.net/b2dtut/

First of all we need to create separate config.h file so that we can refer PTM_RATIO definition each time we need it.
[code language=”cpp”]
#ifndef __CONFIG_H__
#define __CONFIG_H__

#define PTM_RATIO 10

#endif
[/code]

Update Terrain.h code
[code language=”cpp”]
#include "config.h"
//#define PTM_RATIO 32
[/code]

Replace Terrain::update code with next code
[code language=”cpp”]
void Terrain::update(float dt) {
int start = abs((getPositionX()) / GroundStep);
updatePhysics(start, start + _maxPhysicsPoints);
}
[/code]

Lets now build the pickup.
Car.h
[code language=”cpp”]
#ifndef __CAR_H__
#define __CAR_H__

#include <Box2d/Box2D.h>
#include "cocos2d.h"

USING_NS_CC;

class Car {
private:
bool _accelerating;
bool _reversing;

float _speed;
float _torque;

Sprite* _bodySprite;
Sprite* _frontTireSprite;
Sprite* _driverSprite;
Sprite* _rearTireSprite;

b2Body* _frontTireBody;
b2Body* _frontAxelTireBody;
b2Body* _rearTireBody;
b2Body* _rearAxelTireBody;
b2Body* _body;
b2Body* _headBody;

b2RevoluteJoint* _rearTireRevoluteJoint;
b2PrismaticJoint* _rearTirePrismaticJoint;
b2RevoluteJoint* _frontTireRevoluteJoint;
b2PrismaticJoint* _frontTirePrismaticJoint;
b2RevoluteJoint* _neckRevoluteJoint;
public:
Car();
~Car();

void init(b2World* world, Node* parent, Point pos);

void accelerate(bool accelerating);
void reverse(bool reversing);

//our camera class needs to get a target body which to follow
b2Body* getBody() {
return _body;
}

//for collision detection
Sprite* getSprite() {
return _bodySprite;
}

void update(float dt);
};

#endif
[/code]

Car.cpp
[code language=”cpp”]
#include "config.h"
#include "Car.h"

USING_NS_CC;

Car::Car() {

}

Car::~Car() {

}

void Car::accelerate(bool accelerating) {
_accelerating = accelerating;
}

void Car::reverse(bool reversing) {
_reversing = reversing;
}

void Car::update(float dt) {
if(_accelerating) {
_rearTireRevoluteJoint->SetMotorSpeed(_speed);
_rearTireRevoluteJoint->SetMaxMotorTorque(_torque);
_frontTireRevoluteJoint->SetMotorSpeed(_speed);
_frontTireRevoluteJoint->SetMaxMotorTorque(_torque);
}

if(_reversing) {
_rearTireRevoluteJoint->SetMotorSpeed(-_speed);
_rearTireRevoluteJoint->SetMaxMotorTorque(_torque);
_frontTireRevoluteJoint->SetMotorSpeed(-_speed);
_frontTireRevoluteJoint->SetMaxMotorTorque(_torque);
}

if(!_reversing && !_accelerating) {
_rearTireRevoluteJoint->SetMotorSpeed(0);
_rearTireRevoluteJoint->SetMaxMotorTorque(0);
_frontTireRevoluteJoint->SetMotorSpeed(0);
_frontTireRevoluteJoint->SetMaxMotorTorque(0);
}
}

void Car::init(b2World* world, Node* parent, Point pos) {
_torque = 100.0f;
_speed = 400.0f;

_frontTireSprite = Sprite::create("images/tire.png");
_rearTireSprite = Sprite::create("images/tire.png");
_bodySprite = Sprite::create("images/van.png");
_driverSprite = Sprite::create("images/head1.png");

parent->addChild(_frontTireSprite);
parent->addChild(_rearTireSprite);
parent->addChild(_driverSprite);
parent->addChild(_bodySprite);

b2BodyDef bodyDef;
bodyDef.position = b2Vec2(pos.x/PTM_RATIO, pos.y/PTM_RATIO);
bodyDef.type = b2_dynamicBody;

_body = world->CreateBody(&bodyDef);
_body->SetUserData(_bodySprite);
b2PolygonShape carShape;
carShape.SetAsBox(70.0f/PTM_RATIO, 10.0f/PTM_RATIO);

b2FixtureDef carFixtureDef;
carFixtureDef.shape = &carShape;
carFixtureDef.density = 0.1;
carFixtureDef.friction = 1.0f;
carFixtureDef.filter.categoryBits = 0x02;
carFixtureDef.restitution = 0.2;
carFixtureDef.filter.maskBits = 0x01;
_body->CreateFixture(&carFixtureDef);

b2BodyDef driverBodyDef;
b2Vec2 position = _body->GetPosition();
driverBodyDef.position.Set((position.x + 10.0f / PTM_RATIO),(position.y + 10.0f / PTM_RATIO));
driverBodyDef.type = b2_dynamicBody;

_headBody = world->CreateBody(&driverBodyDef);
_headBody->SetUserData(_driverSprite);
b2CircleShape headShape;
headShape.m_radius = 16.0f/PTM_RATIO;
b2FixtureDef headFixtureDef;
headFixtureDef.shape = &headShape;
headFixtureDef.density = 0.1f;
headFixtureDef.friction = 1.0f;
headFixtureDef.filter.categoryBits = 0x02;
headFixtureDef.filter.maskBits = 0x01;
_headBody->CreateFixture(&headFixtureDef);

b2RevoluteJointDef headJointDef;
headJointDef.enableLimit = true;
headJointDef.lowerAngle = -0.1f;
headJointDef.upperAngle = 0.1f;
b2Vec2 neckPos = b2Vec2(_headBody->GetWorldCenter().x, _headBody->GetWorldCenter().y – 0.4f);
headJointDef.Initialize(_body, _headBody, neckPos);
_neckRevoluteJoint = (b2RevoluteJoint*)world->CreateJoint(&headJointDef);

b2BodyDef rearTireBodyDef;
rearTireBodyDef.position.Set((pos.x + -40.0f)/PTM_RATIO, (pos.y – 25.0f)/PTM_RATIO);
rearTireBodyDef.type = b2_dynamicBody;

_rearTireBody = world->CreateBody(&rearTireBodyDef);
_rearTireBody->SetUserData(_rearTireSprite);
b2CircleShape rearTireShape;
rearTireShape.m_radius = 16.0f/PTM_RATIO;

b2FixtureDef rearTireFixtureDef;
rearTireFixtureDef.shape = &rearTireShape;
rearTireFixtureDef.density = 0.15;
rearTireFixtureDef.friction = 1.0f;
rearTireFixtureDef.filter.categoryBits = 0x02;
rearTireFixtureDef.restitution = 0.2;

_rearTireBody->CreateFixture(&rearTireFixtureDef);
b2BodyDef rearAxelBodyDef;
rearAxelBodyDef.position.Set(_rearTireBody->GetWorldCenter().x, _rearTireBody->GetWorldCenter().y);
rearAxelBodyDef.type = b2_dynamicBody;
_rearAxelTireBody = world->CreateBody(&rearAxelBodyDef);
b2PolygonShape rearAxelShape;
rearAxelShape.SetAsBox(6.0f/PTM_RATIO, 12.0f/PTM_RATIO, b2Vec2_zero, -0.5);
b2FixtureDef rearAxelFixtureDef;
rearAxelFixtureDef.shape = &rearAxelShape;
rearAxelFixtureDef.density = 0.01f;
rearAxelFixtureDef.filter.categoryBits = 0x02;
rearAxelFixtureDef.filter.maskBits = 2;

_rearAxelTireBody->CreateFixture(&rearAxelFixtureDef);

b2RevoluteJointDef rearWheelRevoluteJointDef;
rearWheelRevoluteJointDef.enableMotor = true;
rearWheelRevoluteJointDef.Initialize(_rearTireBody, _rearAxelTireBody, _rearTireBody->GetWorldCenter());
_rearTireRevoluteJoint = (b2RevoluteJoint*)world->CreateJoint(&rearWheelRevoluteJointDef);

b2PrismaticJointDef rearWheelPrismaticJointDef;
rearWheelPrismaticJointDef.enableLimit = true;
rearWheelPrismaticJointDef.enableMotor = true;
rearWheelPrismaticJointDef.lowerTranslation = -0.3f/PTM_RATIO;
rearWheelPrismaticJointDef.upperTranslation = 0.5f/PTM_RATIO;
rearWheelPrismaticJointDef.Initialize(_body, _rearAxelTireBody, b2Vec2(_rearAxelTireBody->GetWorldCenter().x, _rearAxelTireBody->GetWorldCenter().y), b2Vec2(0, 2));
_rearTirePrismaticJoint = (b2PrismaticJoint*)world->CreateJoint(&rearWheelPrismaticJointDef);

b2BodyDef frontTireBodyDef;
frontTireBodyDef.position.Set((pos.x + 49.0f)/PTM_RATIO, (pos.y – 24.0f)/PTM_RATIO);
frontTireBodyDef.type = b2_dynamicBody;

_frontTireBody = world->CreateBody(&frontTireBodyDef);
_frontTireBody->SetUserData(_frontTireSprite);
b2CircleShape frontTireShape;
frontTireShape.m_radius = 16.0f / PTM_RATIO;

b2FixtureDef frontTireFixtureDef;
frontTireFixtureDef.shape = &frontTireShape;
frontTireFixtureDef.density = 0.15;
frontTireFixtureDef.friction = 1.0;
frontTireFixtureDef.filter.categoryBits = 0x02;
frontTireFixtureDef.restitution = 0.2;
_frontTireBody->CreateFixture(&frontTireFixtureDef);

b2BodyDef frontAxelBodyDef;
frontAxelBodyDef.position.Set(_frontTireBody->GetWorldCenter().x, _frontTireBody->GetWorldCenter().y);
frontAxelBodyDef.type = b2_dynamicBody;
_frontAxelTireBody = world->CreateBody(&frontAxelBodyDef);
b2PolygonShape frontAxelShape;
frontAxelShape.SetAsBox(6.0f/PTM_RATIO, 12.0f/PTM_RATIO, b2Vec2_zero, 0.5);
b2FixtureDef frontAxelFixtureDef;
frontAxelFixtureDef.shape = &frontAxelShape;
frontAxelFixtureDef.density = 0.01f;
frontAxelFixtureDef.filter.categoryBits = 0x01;
frontAxelFixtureDef.filter.maskBits = 2;

_frontAxelTireBody->CreateFixture(&frontAxelFixtureDef);

b2RevoluteJointDef frontWheelRevoluteJointDef;
frontWheelRevoluteJointDef.enableMotor = true;
frontWheelRevoluteJointDef.Initialize(_frontTireBody, _frontAxelTireBody, _frontTireBody->GetWorldCenter());
_frontTireRevoluteJoint = (b2RevoluteJoint*)world->CreateJoint(&frontWheelRevoluteJointDef);

b2PrismaticJointDef frontWheelPrismaticJointDef;
frontWheelPrismaticJointDef.enableLimit = true;
frontWheelPrismaticJointDef.enableMotor = true;
frontWheelPrismaticJointDef.lowerTranslation = -0.3f/PTM_RATIO;
frontWheelPrismaticJointDef.upperTranslation = 0.5f/PTM_RATIO;
frontWheelPrismaticJointDef.Initialize(_body, _frontAxelTireBody, b2Vec2(_frontAxelTireBody->GetWorldCenter().x, _frontAxelTireBody->GetWorldCenter().y), b2Vec2(0, 2));
_frontTirePrismaticJoint = (b2PrismaticJoint*)world->CreateJoint(&frontWheelPrismaticJointDef);
}
[/code]

So the code above creates our car and it has accelerate and reverse methods, which we will later on connect to our controls. It has init method which takes b2World as a parameter, so that the bodies we created can be added to the physics world. The next parameter will be our Terrain layer where we will add each sprite(tires, car frame and head). The last parameter is position and we will be positioning our car on top of our track.

Lets now drop our car on the terrain. For some reason I still haven’t renamed HelloWorldScene to any other name, but we will now go with it. Add following code into HelloWorldScene.h.

HelloWorld.h
[code language=”cpp”]
…
#include "Car.h"

class HelloWorld : public cocos2d::Layer {
private:
…
Car* _car;
public:
…
virtual void update(float dt);
…
[/code]

[code language=”cpp”]
bool HelloWorld::init() {
…
const Point startPoint = Point(400, 500);
_car = new Car();
_car->init(_world, _terrain, startPoint);

//When we call this method, our HelloWorld layer will start calling update method and we will there update sprite positions into body position
scheduleUpdate();
…
}
[/code]

Let’s now position sprites into Box2D body positions. Put this on bottom of HelloWorldScene.cpp.
[code language=”cpp”]
void HelloWorld::update(float dt) {
//keep Sprite positions in sync with Box2D’s bodies
for (b2Body * b = _world->GetBodyList(); b != NULL; b = b->GetNext()) {
if (b->GetUserData() != NULL) {
Node* node = (Node*)b->GetUserData();
node->setPosition(Point(b->GetPosition().x * PTM_RATIO, b->GetPosition().y * PTM_RATIO));
node->setRotation(-1 * CC_RADIANS_TO_DEGREES(b->GetAngle()));
}
}

_car->update(dt);
_world->Step(dt, 10, 10);
}
[/code]

Now if you run the code, provided that you position your car properly(startPoint variable), the car should fall on the track. Because we need to make this more fun, lets add controls so we can interact with our car.

So now we will continue on working our controls, which means reverse and accelerate pedals. We will develop controls with multitouch support, which means that pedals won’t lock in case we have more than one finger on the screen and for each of the touches we will be monitoring their positions whether on the reverse/accelerate pedal or not.

[code language=”cpp”]
#ifndef __CONTROLS_H__
#define __CONTROLS_H__

#include <Box2d/Box2D.h>
#include "cocos2d.h"

USING_NS_CC;

class Controls : public Layer {
private:
bool _reversing;
bool _accelerating;

Sprite* _accelerateSprite;
Sprite* _accelerateDownSprite;
Sprite* _brakeSprite;
Sprite* _brakeDownSprite;

Touch* _brakeTouch;
Touch* _thrustTouch;

void handleTouches(const std::vector<Touch*>& touches, Event* event);

void accelerate(bool accelerating);
void reverse(bool reversing);

void onTouchesBegan(const std::vector<Touch*>& touches, Event *event);
void onTouchesEnded(const std::vector<Touch*>& touches, Event *event);
void onTouchesMoved(const std::vector<Touch*>& touches, Event *event);
public:
bool isAccelerating() {
return _accelerating;
}

bool isReversing() {
return _reversing;
}

virtual bool init();
CREATE_FUNC(Controls);
};

#endif
[/code]

Controls.cpp
[code language=”cpp”]
#include "Controls.h"

USING_NS_CC;

bool Controls::init() {
if(!Layer::init()) {
return false;
}

_brakeTouch = nullptr;

_reversing = false;
_accelerating = false;

const Point leftPedalPosition = Point(100, 100);
const Point rightPedalPosition = Point(Director::getInstance()->getVisibleSize().width – 100, 100);

_brakeSprite = Sprite::create("images/brake.png");
_brakeDownSprite = Sprite::create("images/brake_down.png");
_brakeSprite->setPosition(leftPedalPosition);
_brakeDownSprite->setPosition(leftPedalPosition);

_accelerateSprite = Sprite::create("images/accelerate.png");
_accelerateDownSprite = Sprite::create("images/accelerate_down.png");
_accelerateSprite->setPosition(rightPedalPosition);
_accelerateDownSprite->setPosition(rightPedalPosition);

addChild(_brakeSprite);
addChild(_brakeDownSprite);
addChild(_accelerateSprite);
addChild(_accelerateDownSprite);

_brakeDownSprite->setVisible(false);
_accelerateDownSprite->setVisible(false);

auto listener = EventListenerTouchAllAtOnce::create();
listener->onTouchesBegan = CC_CALLBACK_2(Controls::onTouchesBegan, this);
listener->onTouchesMoved = CC_CALLBACK_2(Controls::onTouchesMoved, this);
listener->onTouchesEnded = CC_CALLBACK_2(Controls::onTouchesEnded, this);
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);

return true;
}

void Controls::accelerate(bool accelerating) {
_accelerating = accelerating;
if(_accelerating) {
_accelerateDownSprite->setVisible(true);
_accelerateSprite->setVisible(false);
} else {
_accelerateDownSprite->setVisible(false);
_accelerateSprite->setVisible(true);
}
}

void Controls::reverse(bool reversing) {
_reversing = reversing;
if(_reversing) {
_brakeDownSprite->setVisible(true);
_brakeSprite->setVisible(false);
} else {
_brakeDownSprite->setVisible(false);
_brakeSprite->setVisible(true);
}
}

//all the incoming touches will go trough this method. <em>touches</em> array contains all current touches
//on the screen and therefore we be looping through each of those and checking if one of those touches
//are on one or both of the pedals. Note that if one of those touch events has a code of //EventTouch::EventCode::ENDED, it means touch has ended and therefore no pedal is pressed.
void Controls::handleTouches(const std::vector<Touch*> &touches, Event* event) {
bool reversing = false;
bool accelerating = false;
for(int i = 0; i < touches.size(); ++i) {
if(_brakeSprite->boundingBox().containsPoint(touches[i]->getLocation()) && ((EventTouch*)event)->getEventCode() != EventTouch::EventCode::ENDED) {
reversing = true;
} else if(_accelerateSprite->boundingBox().containsPoint(touches[i]->getLocation()) && ((EventTouch*)event)->getEventCode() != EventTouch::EventCode::ENDED) {
accelerating = true;
}
}
reverse(reversing);
accelerate(accelerating);
}

void Controls::onTouchesBegan(const std::vector<Touch*>& touches, Event* event) {
handleTouches(touches, event);
}

void Controls::onTouchesEnded(const std::vector<Touch*>& touches, Event* event) {
handleTouches(touches, event);
}

void Controls::onTouchesMoved(const std::vector<Touch*>& touches, Event* event) {
handleTouches(touches, event);
}
[/code]

Our Controls class has two ‘outputs’, isAccelerating() and isReversing(). We will connect these ‘outputs’ to our car’s accelerate and reverse methods after we have first initialised Controls class.

HelloWorld.h
[code language=”cpp”]
…
#include "Controls.h"

class HelloWorld : public cocos2d::Layer {
private:
…
Controls* _controls;
}
[/code]

HelloWorld.cpp
[code language=”cpp”]
bool HelloWorld::init() {
…
_controls = Controls::create();
_controls->setZOrder(1000.0f);
addChild(_controls);
}
[/code]

If you now run the code, you should se pedals on left and right of your screen which you can press down in whatever ways you want, but of course it won’t be moving our car because we haven’t connected controls to our car. Lets next monitor state of the Controls in HelloWorld::update method, where we can update car’s state according to Controls state.

[code language=”cpp”]
void HelloWorld::update(float dt) {
…
_car->accelerate(_controls->isAccelerating());
_car->reverse(_controls->isReversing());
}
[/code]

Now by running the code you should be able to drive the car back and forward, however there is no camera yet to follow the car. Lets do that next.

Camera is pretty essential thing when game contains something that can move freely in the game area which is larger than the game window. This game would be pointless if there was no camera following the car. We will add little extra to the camera, by adding a feature that zooms in and out depending on the vehicle’s velocity.

Lets continue coding. We are using CarCamera name for the class so it won’t be mixed with Cocos2d-x’s Camera class. You could also use namespaces to solve this issue, but this will suit our purposes now.

CarCamera.h
[code language=”cpp”]
#ifndef __CAMERA_H__
#define __CAMERA_H__

#include <Box2D/Box2D.h>
#include "cocos2d.h"

#include "config.h"

USING_NS_CC;

class CarCamera {
private:
//we need separate Layer for scaling
Layer* _scaleLayer;

//this will be our Terrain node
Node* _node;

const float MaxZoom = 1.5f;
const float MinZoom = 0.6f;
const float ZoomSpeed = 0.001f;

float _targetScale;
float _zoomVelocity;

b2Body* _targetBody;

Point getOffset();
public:
CarCamera(Layer* scaleLayer, Node* node);
~CarCamera();

void setTarget(b2Body* target);
void update(float dt);
};

#endif
[/code]

CarCamera.cpp
[code language=”cpp”]
#include "CarCamera.h"

USING_NS_CC;

CarCamera::CarCamera(Layer* scaleLayer, Node* node) : _scaleLayer(scaleLayer), _node(node), _targetBody(nullptr), _zoomVelocity(1.0f) {
}

CarCamera::~CarCamera() {

}

Point CarCamera::getOffset() {
float offsetX = 0;
float offsetY = 0;
if(_targetBody) {
//convert box2d body position into pixel units and add offset to position to center of the screen
float halvedScreenWidth = Director::getInstance()->getVisibleSize().width / 2.0f;
float halvedScreenHeight = Director::getInstance()->getVisibleSize().height / 2.0f;
offsetX = -(_targetBody->GetPosition().x * PTM_RATIO) + halvedScreenWidth;
offsetY = -(_targetBody->GetPosition().y * PTM_RATIO) + halvedScreenHeight;
}
return Point(offsetX, fmin(0, offsetY));
}

void CarCamera::setTarget(b2Body* targetBody) {
_targetBody = targetBody;
}

void CarCamera::update(float dt) {
Point targetOffset = getOffset();
_node->setPosition(targetOffset);

//if we have set a target body for the camera, it’ll start following that body
if(_targetBody) {
float velocity = fabs(_targetBody->GetLinearVelocity().Length());
float zoom = (velocity / 60.0f);

_zoomVelocity = MaxZoom – zoom;

if(_zoomVelocity > _scaleLayer->getScale()) {
_zoomVelocity = _scaleLayer->getScale() + ZoomSpeed;
} else if(_zoomVelocity < _scaleLayer->getScale()) {
_zoomVelocity = _scaleLayer->getScale() + -ZoomSpeed;
}

_zoomVelocity = clampf(_zoomVelocity, MinZoom, MaxZoom);
_scaleLayer->setScale(_zoomVelocity);
}
}
[/code]

Now we have set up the camera, now we need to take it into use and what it needs is to do an initialisation and updating. Therefore:

HelloWorldScene.h
[code language=”cpp”]
…
#include "CarCamera.h"

class HelloWorld : public cocos2d::Layer {
private:
…
CarCamera* _camera;
Layer* _scaleLayer;
[/code]

Note that _terrain node is added as a child to _scaleLayer, so comment out code addChild(_terrain). Scale layer is a little trick used to handle zoom in out without messing too much with the rendering of the terrain.

[code language=”cpp”]
bool HelloWorld::init() {
…
_scaleLayer = Layer::create();
addChild(_scaleLayer);

//addChild(_terrain);
_terrain = Terrain::create();
_scaleLayer->addChild(_terrain);

_camera = new CarCamera(_scaleLayer, _terrain);
_camera->setTarget(_car->getBody());
[/code]

[code language=”cpp”]
void HelloWorld::update(float dt) {
…
_camera->update(dt);
[/code]

Now if you run the code, camera should follow the pickup wherever it goes. Notice, that if you drive fast enough, rendering of the terrain should not cover entire screen. This can be exercise for you to solve. If it turns out to be too hard to solve, feel free to comment.

What is left for this chapter, is to create coins and fuel cans to be collected.

So as already stated, this is last part of this chapter. We will create coin and fuel can sprites on top of the track properly separated in distance from each other. In addition to that we will add simple collision detection so we can identify if car hits those sprites. Fuel actually does not ever end nor coins does not actually sum up in total money, but those issues will be resolved in next chapters. Well, lets keep going.

Insert following code strip in Terrain.h just below #define fields. With this we will identify collisions between each of these types.
[code language=”cpp”]
struct ItemType {
enum type {
Coin,
Fuel,
Car
};
};
[/code]

Also add this method in Terrain.h.
[code language=”cpp”]
class Terrain : public Node {
public:
…
void generateItems(std::vector<Sprite*>& sprites);
[/code]

Terrain.cpp
[code language=”cpp”]
void Terrain::generateItems(std::vector<Sprite*>& sprites) {
//this is spacing between 5 sets of coins. If GroundStep definition in Terrain.h equals 20 for example
//coinSpacing would mean 100 * 20 = 2000 pixels and the same goes for positioning coins and fuel cans below
int coinSpacing = 100;
int coinAmount = 5;
Point distanceFromGround = Point(0.0f, 30.0f);

int fuelIndex = 0;
for(int i = coinSpacing; i < MaxXYPoints; i += coinSpacing) {
fuelIndex++;
for(int j = 0; j < coinAmount; ++j) {
Sprite* coinSprite = Sprite::create("images/coin.png");
coinSprite->setTag(ItemType::Coin);
coinSprite->setPosition(_xyPoints[i + j * 3] + distanceFromGround);
addChild(coinSprite);
sprites.push_back(coinSprite);

//in every 5th set of 5 coins a fuel can is positioned
if(j == coinAmount – 1 && fuelIndex > 4) {
Sprite* fuelCanSprite = Sprite::create("images/fuel_can.png");
fuelCanSprite->setPosition(_xyPoints[i + j * 3] + distanceFromGround);
fuelCanSprite->setTag(ItemType::Fuel);
addChild(fuelCanSprite);
sprites.push_back(fuelCanSprite);
fuelIndex = 0;
}
}
}
}
[/code]

If you noticed, generateItems method takes a vector as a reference and that is because we will monitor collisions between coins and fuel cans in HelloWorld class.

HelloWorldScene.h
[code language=”cpp”]
class HelloWorld : public cocos2d::Layer {
private:
…
std::vector<Sprite*> _sprites;
[/code]

Now the only thing to do, is to call generateItems method to populate the track and then monitor collisions in HelloWorld::update.

HelloWorldScene.cpp
[code language=”cpp”]
bool HelloWorld::init() {
…
_terrain->generateItems(_sprites);
}

void Game::update(float dt) {
…
for(int i = 0; i < _sprites.size(); ++i) {
if(_car->getSprite()->boundingBox().intersectsRect(_sprites[i]->boundingBox()) && _sprites[i]->isVisible()) {
if(_sprites[i]->getTag() == ItemType::Coin || _sprites[i]->getTag() == ItemType::Fuel) {
_sprites[i]->runAction(FadeTo::create(1.0f, 0));
_sprites[i]->runAction(MoveBy::create(1.0f, Point(0, 50.0f)));
_sprites[i]->setTag(-1);
}
}
}
[/code]

By now you should be able to run the code and drive the pickup while collecting money as the camera follows you from a distance depending of the vehicle’s velocity.

In case you’ve come this far and have some questions related to this chapter, feel free to ask. Hopefully I was able to cover these topics well enough for you to have better understanding of these concepts.