Cocos2d-x : Space Monkey – Part 2

In the first part of this tutorial to create the Space Monkey game, we created a Cocos2d-x project and setup an empty scene named “SpaceScene”. In this second part, we will setup the scene and add a background to it.

Game Art

For this tutorial we are going to need some game art available at Game Art Guppy is a site created by Vicki Wenderlich that provides free and inexpensive art for game development. For this part of the tutorial we will use the art set listed below, which is available for free (or for a small fee if you also want to obtain the vectors, which is not necessary for this tutorial):

Background: Space Background – Repeatable – Parallax

Adjust window size for the desktop version of the game

Before we start developing our game, it would be nice to adjust the window size for the desktop version of the game because it is currently too small (480×320). The size of the window can be adjusted in AppDelegate.cpp by changing the resolution of the View rectangle created in function AppDelegate::applicationDidFinishLaunching() as shown below.

glview = GLViewImpl::createWithRect("Space Monkey", cocos2d::Rect(0, 0, mediumResolutionSize.width, mediumResolutionSize.height));

The change shown above will create the game window with a resolution that matches mediumResolutionSize, which is defined at the top of AppDelegate.cpp as follows:

static cocos2d::Size smallResolutionSize = cocos2d::Size(480, 320);static cocos2d::Size mediumResolutionSize = cocos2d::Size(1024, 768);static cocos2d::Size largeResolutionSize = cocos2d::Size(2048, 1536);

If you have a very high-resolution monitor and the window looks small at 1024 x 768 you can experiment setting the resolution to largeResolutionSize.

Add a background to the scene

The background that we will use is one of the images in the “Space Background – Repeatable – Parallax” game art set that you downloaded. The particular image we will use is the one named bg_single_1536x3480.png.

To make it easy to use, let’s rename the file to something easier to remember and type: spaceBackground.png

Import the backround into the XCode project by dragging the image into the Resources project directory.

In the import options dialog box that appears next, specify that the background image should be made available for both the mobile and desktop versions of the game by selecting the two targets. It is also important to make sure that the option to “Copy items if needed is selected”. Also, make sure the option ot create folder references is selected.

Because the resolution of the background is very large, let’s define the game resolution to be the same as the largeResolutionSize (i.e. 2048×1536). This will help the scaling of the image in the window and will allows us to set a more appropriate coordinate system. Change the designResolution at the top of AppDelegate so that it now has a resolution of 2048 x 1536.

designResolutionSize = static cocos2d::Size designResolutionSize = cocos2d::Size(2048, 1536);


Display the background

We have added the background image to the project as a resource and now we need to write a little bit of code to make it appear in our game. Let’s start by adding to the SpaceScene class an instance variable to store the background image as a Sprite. We will also declare two new private methods to the class to handle the initialization of the game and the display of the background image.

Add the following to the SpaceScene class in file SpaceScene.hpp:

	// Instance variable to store a reference to the background as a sprite
    cocos2d::Sprite* _background_p;

	// Game initialization
    void startGame (void);

	// Adds backround to the scene
    void addBackground(void);


In SpaceScene.cpp implement the functions declared above. Start defining the SpaceScene::startGame() as follows:

void SpaceScene::startGame(void)
    log("Starting a new game!");


The startGame() function will be called whenever we need to initialize the game, for example to restart a game after it finishes. For now, this function only displays a message indicating that a new game is starting and then it displays the background through the addBackground() function. The addBackground() function will take care of the rendering of the background image. Define SpaceScene::addBackground() as follows:

void SpaceScene::addBackground(void)
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    // Create a sprite with the background image.
    _background_p = Sprite::create("spaceBackground.png");

    // The image is in portrait mode, so rotate it 90 degress to display it in
    // landscape mode.

    // Calculate the scaling factor so that the image fits veritcally (in landscape mode) within the
    // visible boundaries of the device.
    Size bgContentSize = _background_p->getContentSize();
    float bgScale = MAX(visibleSize.width / bgContentSize.width, visibleSize.height/bgContentSize.height);

    // Set the position of the image so that it is aligned to the left and vertically centered on the display.
    _background_p->setPosition(Point(visibleSize.width/2 + origin.x + bgContentSize.width/2,
                                     visibleSize.height/2 + origin.y));

    // Add the background to the scene so that it can be rendered.
	// The background sprite is added at z-order zero which we will use as
	// the background layer.
    this->addChild(_background_p, 0);


Finally, call the startGame() function once the SpaceScene initialization is completed in SpaceScene::init()

 bool SpaceScene::init()
    if ( !Layer::init() )
        return false;

    // start the game

    return true;

Build and run your game and you should be able to see the background in the game window


In this second part of the tutorial we have configured the resolution of the game window for the desktop version of the game. We have also added a background as a layer with Z-order zero (the background layer).

In the next part of this tutorial we will add the Space Monkey character to the scene and we will be able to control its movement.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s