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!

this is the first part of the How to develop Hill Climb Racing with Cocos2d-x tutorial. I will presume you have some basic knowledge about programming and of using Cocos2d-x v3.0 engine. I’ll try to follow good coding practises while also giving links to related topics as we progress. Let’s get straight to the point and start deconstruction.

Here’s what we’ll have after finishing this first tutorial:

What is it made of?

Algorithm which creates (x, y) points in 2d space for our upcoming track. These points have been achieved by using sine and cosine functions to create cylindrical shapes. We will later on implement the code, but for clarity let’s go through these concepts one by one.

Physics will define the track which will eventually interact with a car, by keeping the car on top of the track. We will use Box2D for handling physics calculations.

OpenGL meshes are used for visualising the track. Meshes consist of polygons which consist of vertices. The grass on top of the track is a thin slice of mesh drawn on top of the ground mesh. These two meshes are separate, because we don’t want to stretch the grass layer along with the ground mesh.

What is the problem?
Because track is ‘endless’, it is a very long strip of track to draw and calculate physics to. In reality it doesn’t need to be really endless, but we can create array big enough to contain track for so far that the finish line virtually unreachable. If we’d create physics and draw meshes for the whole track, it would jam the CPU and GPU which is not what we want.

We can just generate enough x, y points during game startup in an array, which can be then used to draw and create physics while the player keeps driving forwards. In this tutorial we will be creating x, y points in every 20th pixel, which means iPad2 screen can be filled with track with only 52 keypoints(x, y) 1024px/20px ~= 52. So if we generate 5200 of these points, there will be 100 screenfuls of track to drive and so on.

Ok, so now I’ve introduced you the basic concepts; let’s start coding. I presume you know how to create HelloWorld Cocos2d-x project which on top we will be building this game. We will first write all the code and later implement it on HelloWorld template. Download necessary graphics resources below:

Download resources

1. Terrain class
2. X, Y points
3. Box2D Physics
4. OpenGL meshes and scrolling
5. Optimising
6. Implementation

Let’s create new class called Terrain in Classes folder. We need to inherit Node class because we will be adding all the sprites etc on this Node which acts as the terrain which scrolls when player drives.

So lets set up Terrain class with following template code. We will implement those unimplemented methods later on.

Terrain.h
[code language=”cpp”]
#ifndef __TERRAIN_H__
#define __TERRAIN_H__

#include "cocos2d.h"
#include "config.h"

USING_NS_CC;

#define PTM_RATIO 32

#define GroundStep 20
#define MaxXYPoints 20000
#define MaxHillVertices 40000

class Terrain : public Node {
private:
int _nHillVertices;
int _numKeyIndices;
int _maxPhysicsPoints;

Point _xyPoints[MaxXYPoints];

Point _groundVertices[MaxHillVertices];
Point _groundTexCoords[MaxHillVertices];
Point _grassVertices[MaxHillVertices];
Point _grassTexCoords[MaxHillVertices];

Texture2D* _grassTexture;
Texture2D* _groundTexture;

std::list<b2Fixture*> _fixtures;

//this body will contain all physics for the track
b2Body* _body;
b2World* _world;

//cocos2d-x 3.0 requires OpenGL calls to be wrapped in CustomCommand
CustomCommand _renderCmds[1];
public:
Terrain();
~Terrain();

void initWorld(b2World* world);
void destroy();
void generateXYPoints();
void generateMeshes();
void updatePhysics(int prevKeyIndex, int newKeyIndex);

void onDraw(const Mat4 &transform);
virtual void draw(Renderer *renderer, const Mat4& transform, uint32_t flags);
virtual void update(float dt);

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

#endif

[/code]

Terrain.cpp
[code language=”cpp”]
#include <Box2D/Box2D.h>
#include "Terrain.h"

USING_NS_CC;

Terrain::Terrain() {
_body = nullptr;

_maxPhysicsPoints = Director::getInstance()->getVisibleSize().width/GroundStep;

Sprite* groundSprite = Sprite::create("images/game/ground.png");
groundSprite->retain();
_groundTexture = groundSprite->getTexture();
_groundTexture->setTexParameters( { GL_NEAREST, GL_NEAREST, GL_REPEAT, GL_REPEAT});

Sprite* grassSprite = Sprite::create("images/game/grass.png");
grassSprite->retain();
_grassTexture = grassSprite->getTexture();
_grassTexture->setTexParameters( { GL_NEAREST, GL_NEAREST, GL_REPEAT, GL_REPEAT});

GLProgram *shaderProgram_ = ShaderCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_TEXTURE);
setGLProgram(shaderProgram_);
scheduleUpdate();
}

Terrain::~Terrain() {

}

bool Terrain::init() {
if(!Node::init()) {
return false;
}

return true;
}

void Terrain::initWorld(b2World* world) {
_world = world;

//set up our _body variable which will eventually contain the track
b2BodyDef bd;
bd.position.Set(0, 0);
bd.type = b2_staticBody;
_body = world->CreateBody(&bd);
}

void Terrain::update(float dt) {

}

[/code]

First of all we need an algorithm which generates all the required x, y points that we will use for building physics and graphics for our track. So let’s create new method called generateXYPoints()

[code language=”cpp”]
//Generates x, y points every in every 20th x unit point
void Terrain::generateXYPoints() {
float yOffset = 350.0f;

int index = 0;
for (int i = 0; i < MaxXYPoints; i++) {
_xyPoints[i].x = index;
_xyPoints[i].y = yOffset – sinf(i) * 60 * i / 100.0f;
index += GroundStep;
}
}
[/code]

Now we have created 20000(MaxXYPoints) x, y points which will be the backbone of our track. If you want to play with the track design, this method is where it should be done. In case 20000 points is too low for your purposes, feel free to increase the MaxXYPoints definition in Terrain.h file.

Cocos2d-x samples include GLES-Render class, which is a tool for drawing shapes of a physic objects. Copy GLES-Render.cpp and GLES-Render.h files from your Cocos2d-x directory, tests/cpp-tests/Classes/Box2DTestBed/ to your project’s Classes folder.

After you’ve done this, we may continue adding physics on our track. Now create method which takes startIndex and endIndex as parameters, which means we can define which portion of the track should physics be calculated. We will modify this method later on to optimise physics calculation properly.

[code language=”cpp”]
void Terrain::updatePhysics(int startIndex, int endIndex) {
b2EdgeShape shape;
for (int i=prevKeyIndex; i < newKeyIndex; i++) {
b2Vec2 p1 = b2Vec2((_xyPoints[i].x)/PTM_RATIO, _xyPoints[i ].y/PTM_RATIO);
b2Vec2 p2 = b2Vec2((_xyPoints[i+1].x)/PTM_RATIO, _xyPoints[i +1].y/PTM_RATIO);
shape.Set(p1, p2);
_numKeyIndices++;
}
}

[/code]

Now we have create X, Y points, which are already used for physics of our track. Next we need to use that same x, y information to generate visuals for the track.
So lets create meshes for the ground and grass. We loaded up textures earlier in the constructor of Terrain, so that part is done. Now we need to create vertices and texture coordinates. We need to create continuous set of polygons next to each other and we need to wrap a texture over and that is what we’re doing next.

[code language=”cpp”]
void Terrain::generateMeshes() {
_nHillVertices = 0;
Point p;
//generate thin slice of grass mesh on top of the ground mesh using X, Y points generated in generateXYPoints() method
for (int i=0; i < MaxXYPoints; i++) {
p = _xyPoints[i];
_grassVertices[_nHillVertices] = Point(p.x, p.y – 12.0f);
_grassTexCoords[_nHillVertices++] = Point(p.x/_grassTexture->getPixelsWide(), 1.0f);
_grassVertices[_nHillVertices] = Point(p.x, p.y);
_grassTexCoords[_nHillVertices++] = Point(p.x/_grassTexture->getPixelsWide(), 0);
}

_nHillVertices = 0;

//generate mesh for ground below grass
for (int i = 0; i < MaxXYPoints; i++) {
p = _xyPoints[i];
_groundVertices[_nHillVertices] = Point(p.x, 0);
_groundTexCoords[_nHillVertices++] = Point(p.x/_groundTexture->getPixelsWide(), 0);
_groundVertices[_nHillVertices] = Point(p.x, p.y – 5.0f);
_groundTexCoords[_nHillVertices++] = Point(p.x/_groundTexture->getPixelsWide(), (p.y / _groundTexture->getPixelsHigh()));
}
}
[/code]

Now we are at a point where we have generated physics and meshes, so we are one step away from the end results, without the optimisations. We are missing drawing code so lets continue from that.

[code language=”cpp”]
void Terrain::draw(Renderer* renderer, const Mat4 &transform, uint32_t flags) {
Node::draw(renderer, transform, flags);

_renderCmds[0].init(0.0f);
_renderCmds[0].func = CC_CALLBACK_0(Terrain::onDraw, this, transform);
renderer->addCommand(&_renderCmds[0]);
}
[/code]

[code language=”cpp”]
void Terrain::onDraw(const Mat4 &transform) {
auto glProgram = getGLProgram();
glProgram->use();
glProgram->setUniformsForBuiltins(transform);

GL::bindTexture2D(_groundTexture->getName());
GL::enableVertexAttribs( GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX );

glBindBuffer(GL_ARRAY_BUFFER, 0);
glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_POSITION);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, _groundVertices);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, 0, _groundTexCoords);
glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)MaxHillVertices);

GL::bindTexture2D(_grassTexture->getName());
GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX);

glBindBuffer(GL_ARRAY_BUFFER, 0);
glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_POSITION);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, _grassVertices);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, 0, _grassTexCoords);
glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)MaxHillVertices);

//set this flag to true to see physics debug draw in action
static bool debugDraw = false;
if(_world && debugDraw) {
Director* director = Director::getInstance();
director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW, transform);

GL::enableVertexAttribs(cocos2d::GL::VERTEX_ATTRIB_FLAG_POSITION);
_world->DrawDebugData();
CHECK_GL_ERROR_DEBUG();

director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
}
}
[/code]

Now we have created nice physics and visuals for our track. Now we should be able to scroll along the road. Lets create simple code to handle that.

[code language=”cpp”]
void Terrain::update(float dt) {
//lets move the track -0.5 pixel at each update
setPositionX(getPositionX() – 0.5f);
}
[/code]

If you test this with a mobile platform you might encounter some performance issues. These issues arise from physics calculation and from OpenGL rendering that is done for the whole track at once. Because our track needs to be endless, this kind of solution doesn’t really scale up. If you are not observing these performance issues, tweak up these macros:
[code language=”cpp”]
#define MaxXYPoints 10000
#define MaxHillVertices 20000
[/code]

glDrawArrays() method takes in the start index and how many triangles should be drawn and this is where we need to take into account the ‘camera’ position. At this point we don’t need Box2d’s debug draw, so we’ll remove those lines. Lets optimise onDraw method:

[code language=”cpp”]
void Terrain::onDraw(const Mat4 &transform) {
//here we calculate starting index where we start drawing
int start = abs((getPositionX()) / GroundStep) * 2;
//and how many points to draw. Both variables are multiplied by 2 because
//ground and grass polygons have top and bottom points defined for one x value
int numPoints = 1024.0f / GroundStep * 2;

auto glProgram = getGLProgram();
glProgram->use();
glProgram->setUniformsForBuiltins(transform);

GL::bindTexture2D( _groundTexture->getName() );
GL::enableVertexAttribs( GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX );

glBindBuffer(GL_ARRAY_BUFFER, 0);
glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_POSITION);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, _groundVertices);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, 0, _groundTexCoords);
glDrawArrays(GL_TRIANGLE_STRIP, start, (GLsizei)numPoints);

GL::bindTexture2D(_grassTexture->getName() );
GL::enableVertexAttribs( GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX );

glBindBuffer(GL_ARRAY_BUFFER, 0);
glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_POSITION);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, _grassVertices);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, 0, _grassTexCoords);
glDrawArrays(GL_TRIANGLE_STRIP, start, (GLsizei)numPoints);
}
[/code]

Physics optimization is little more tricky. We could probably tweak Box2Ds collision algorithm to avoid calculating of the track points which are not visible on the screen, but that sounds like too far fetched.
Our track’s B2Body contains b2EdgeShape fixtures, which are those lines that the GLES debug draws. There is a very performance cheap way to remove those lines one by one from the back and increase one by one on the end. It’s sort of like a moving worm in those early days Nokia phones. So let’s get to it.

Now lets modify physics updating code:

[code language=”cpp”]
void Terrain::updatePhysics(int prevKeyIndex, int newKeyIndex) {
b2EdgeShape shape;
for (int i=prevKeyIndex; i < newKeyIndex; i++) {
b2Vec2 p1 = b2Vec2((_xyPoints[i].x)/PTM_RATIO,_xyPoints[i].y/PTM_RATIO);
b2Vec2 p2 = b2Vec2((_xyPoints[i+1].x)/PTM_RATIO,_xyPoints[i +1].y/PTM_RATIO);
shape.Set(p1, p2);
_fixtures.push_back(_body->CreateFixture(&shape, 0));
_numKeyIndices++;
}

while(_fixtures.size() > _maxPhysicsPoints) {
_body->DestroyFixture(_fixtures.front());
_fixtures.pop_front();
}
}
[/code]

Now all we have left is to update track shape on each update call
[code language=”cpp”]
void Terrain::update(float dt) {
setPositionX(getPositionX() – 0.5f);

int start = abs((getPositionX()) / GroundStep);
updatePhysics(start, start + _maxPhysicsPoints);
}
[/code]

If you want to verify this works, feel free to set different scale for the HelloWorldLayer and observe the results.

HelloWorldScene.h
[code language=”cpp”]
#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include <Box2d/Box2D.h>
#include "cocos2d.h"
#include "GLES-Render.h"
#include "Terrain.h"

class HelloWorld : public cocos2d::Layer {
private:
GLESDebugDraw* _debugDraw;
b2World* _world;
LayerGradient* _backgroundGradientLayer;

Terrain* _terrain;
public:
// there’s no ‘id’ in cpp, so we recommend returning the class instance pointer
static cocos2d::Scene* createScene();

// Here’s a difference. Method ‘init’ in cocos2d-x returns bool, instead of returning ‘id’ in cocos2d-iphone
virtual bool init();

// implement the "static create()" method manually
CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

[/code]

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

USING_NS_CC;

Scene* HelloWorld::createScene()
{
// ‘scene’ is an autorelease object
auto scene = Scene::create();

// ‘layer’ is an autorelease object
auto layer = HelloWorld::create();

// add layer as a child to scene
scene->addChild(layer);

// return the scene
return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init() {
if (!Layer::init()) {
return false;
}

Size size = Director::getInstance()->getVisibleSize();
_backgroundGradientLayer = LayerGradient::create(Color4B(106, 164, 208, 255), Color4B(159, 202, 243, 255));
addChild(_backgroundGradientLayer);

_terrain = Terrain::create();
addChild(_terrain);

b2Vec2 gravity = b2Vec2(0.0f, -30.0f);
bool doSleep = true;
_world = new b2World(gravity);
_world->SetAllowSleeping(doSleep);

_terrain->initWorld(_world);
_terrain->generateXYPoints();
_terrain->generateMeshes();
_terrain->updatePhysics(0, 1024);

_debugDraw = new GLESDebugDraw(PTM_RATIO);
_world->SetDebugDraw(_debugDraw);
_debugDraw->SetFlags(GLESDebugDraw::e_shapeBit | GLESDebugDraw::e_jointBit);

return true;
}
[/code]

Now you should be able to compile this project and see how it looks. Keep tweaking the algorithm that creates the track, so you will have nice track to drive when we create controls, collectibles and car in next chapter!

If you ever read this far, thanks for reading! Feel free to comment and ask any questions you might have and I’ll be happy to answer!