Hill Climb Racing – Deconstructed – Car, controls, camera, coins and fuel cans


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

1. Car class

Car physics with Box2D

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:

First of all we need to create separate config.h file so that we can refer PTM_RATIO definition each time we need it.

#ifndef __CONFIG_H__
#define __CONFIG_H__

#define PTM_RATIO 10


Update Terrain.h code

#include "config.h"
//#define PTM_RATIO 32

Replace Terrain::update code with next code

void Terrain::update(float dt) {   
    int start = abs((getPositionX()) / GroundStep);
    updatePhysics(start, start + _maxPhysicsPoints);

Lets now build the pickup.

#ifndef __CAR_H__
#define __CAR_H__

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


class Car {
    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;
    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);



#include "config.h"
#include "Car.h"


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) {
    if(_reversing) {
    if(!_reversing && !_accelerating) {

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");
    b2BodyDef bodyDef;
    bodyDef.position = b2Vec2(pos.x/PTM_RATIO, pos.y/PTM_RATIO);
    bodyDef.type = b2_dynamicBody;
    _body = world->CreateBody(&bodyDef);
    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;
    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);
    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;
    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);
    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;
    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;

    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);
    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;

    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;
    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);

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.


#include "Car.h"

class HelloWorld : public cocos2d::Layer {
    Car* _car;
    virtual void update(float dt);
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

Let’s now position sprites into Box2D body positions. Put this on bottom of HelloWorldScene.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()));
    _world->Step(dt, 10, 10);

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.

2. Controls class

Pedals with multitouch support for controlling the 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.

#ifndef __CONTROLS_H__
#define __CONTROLS_H__

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


class Controls : public Layer  {
    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);
    bool isAccelerating() {
       return _accelerating;

    bool isReversing() {
       return _reversing;
    virtual bool init();



#include "Controls.h"


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");
    _accelerateSprite = Sprite::create("images/accelerate.png");
    _accelerateDownSprite = Sprite::create("images/accelerate_down.png");

    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) {
    } else {

void Controls::reverse(bool reversing) {
    _reversing = reversing;
    if(_reversing) {
    } else {

//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;

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);

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.


#include "Controls.h"

class HelloWorld : public cocos2d::Layer {
    Controls* _controls;


bool HelloWorld::init() {
    _controls = Controls::create();

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.

void HelloWorld::update(float dt) {

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.

3. Camera class

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.


#ifndef __CAMERA_H__
#define __CAMERA_H__

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

#include "config.h"


class CarCamera {
    //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();
    CarCamera(Layer* scaleLayer, Node* node);
    void setTarget(b2Body* target);
    void update(float dt);



#include "CarCamera.h"


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();
    //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);

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:


#include "CarCamera.h"

class HelloWorld : public cocos2d::Layer {
    CarCamera* _camera;
    Layer* _scaleLayer;

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.

bool HelloWorld::init() {
    _scaleLayer = Layer::create();
    _terrain = Terrain::create();

    _camera = new CarCamera(_scaleLayer, _terrain);
void HelloWorld::update(float dt) {

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.

4. Coins and fuel cans

Coins and fuel cans can 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.

struct ItemType {
    enum type {

Also add this method in Terrain.h.

class Terrain : public Node {
    void generateItems(std::vector<Sprite*>& sprites);


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) {
        for(int j = 0; j < coinAmount; ++j) {
            Sprite* coinSprite = Sprite::create("images/coin.png");
            coinSprite->setPosition(_xyPoints[i + j * 3] + distanceFromGround);
            //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);
                fuelIndex = 0;

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.


class HelloWorld : public cocos2d::Layer {
    std::vector<Sprite*> _sprites;

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


bool HelloWorld::init() {

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)));

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.

9 thoughts on “Hill Climb Racing – Deconstructed – Car, controls, camera, coins and fuel cans

    1. Hi, so does the track just end after driving some distance? That would mean that you need to increase drawing points by increasing these values:
      #define MaxXYPoints 20000 change to 100000
      #define MaxHillVertices 40000 change to 200000
      Remember to double the number of MaxXYPoints to MaxHillVertices.
      For smoothing the ground:
      #define GROUNDSTEP 20 change to 4. This means that we create points for every 4th x pixel, which means ground gets smoother.

      I’ll edit my article later so that it clearly describes how these values should be changed.

    1. Haha, pretty hard track that is. Yeah, the issue is definitely with ‘wrong’ y value. Play around with that method to see how it works and see how sine waves are generated. I think you should get it fixed by adjusting y or/and x values and that way you learn how the track is generated, so you can eventually make it look like you want it to be.

  1. finally, I found the problem why the terrain didn’t show up. I did wrong in the generateMeshes.
    Still didn’t find out the value to get the terrain smoother haha.
    Wating for your next chapter. I’m new with this cocos2d-x.
    Thank you for your help .

  2. The car is falling through the terrain, (its not stopping at the grass surface). I followed your code. What might have gone wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *

Begin typing your search term above and press enter to search. Press ESC to cancel.