Tutorial: Adding a Picture (Sprite) to a Cocos 2d-x Game

by | Mar 30, 2015 | Computers

Now that you have created a basic game using Cocos 2d-x (see this tutorial for how to do so), it’s time to learn how to modify it by changing the default picture to something else.

The first step is to copy your picture file into the Resources folder located inside your game’s directory:

Inside New Cocos Project

Then open up your game’s solution file in Microsoft Visual Studio (e.g. since I have Windows 7, I open the proj.win32 folder and double-click on the file with the same name as my game and type Microsoft Visual Studio Solution).

Once you do that, go to the Solution Explorer and in the src folder, double-click on AppDelegate.cpp to open it.

Solution Explorer - Hello World

In the init() function, there is a line auto sprite = Sprite::create("HelloWorld.png");. Simply replace “HelloWorld.png” with the name and extension of the picture you added to the Resources folder (e.g. “Mickey.jpg”).

Ta-da! You have successfully replaced the default image with one of your own!

Mickey Game

Let’s take it one step further. This time instead of simply replacing one image with another, we’re actually going to create a new layer to put our image in.

In the same directory where you found the Resources folder, there is a folder called Classes. Currently, it holds your AppDelegate and HelloWorldScene files (.h and .cpp). Create a new .h and .cpp file in the same directory with a name that has something to do with your picture (e.g. Mickey.h and Mickey.cpp). The easiest way to create these new files is simply to copy-paste an existing .h/.cpp file and then delete all the code it contains.

In your new .h file, put the following code (changing “Mickey” to be whatever you named your file as):

#ifndef __MICKEY_SCENE_H__
#define __MICKEY_SCENE_H__

#include "cocos2d.h"

/* Same as HelloWorldScene.h, but without the menuCloseCallback function */

class MickeyScene : public cocos2d::Layer
	static cocos2d::Scene* createScene();
	virtual bool init();

#endif // __MICKEY_SCENE_H__

You’ll notice it’s exactly the same code as in the default HelloWorldScene.h file, except it doesn’t include the menuCloseCallback(), since we don’t need to create another quit button for the application.

In the .cpp file, put the following code (again changing “Mickey” to match your own file names):

#include "MickeyScene.h"


/* Same as HelloWorldScene.cpp's corresponding function, 
but with HelloWorldScene replaced by MickeyScene*/

Scene* MickeyScene::createScene()
	auto scene = Scene::create();
	auto layer = MickeyScene::create();

	return scene;

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

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

	// add "HelloWorld" splash screen"
	auto sprite = Sprite::create("Mickey.jpg");

	// position the sprite on the center of the screen
	sprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));

	// add the sprite as a child to this layer
	this->addChild(sprite, 0);

	return true;

Once again, notice that the code is exactly the same as the original HelloWorldScene.cpp file except we’ve replaced HelloWorldScene with the name of our new class and I’ve deleted the “Hello World” label (text) code and the code that adds our image to a menu, since we don’t need them.

To use our new class, we have to do two things. First, we have to tell the linker where our files are at. We do this by going to the Solution Explorer and right clicking src->Add->Existing Item… then navigating to the directory where we stored our class’ .h and .cpp files. Add each of them to your program.

Finally, go to AppDelegate.cpp and change #include "HelloWorldScene.h" to your class’ name (e.g. #include "MickeyScene.h") and then in the function applicationDidFinishLaunching(), change auto scene = HelloWorldScene::createScene(); to match your class’ name (e.g. auto scene = MickeyScene::createScene();).

Now recompile your program. You’ll get something like this:

Just Mickey

Congratulations! You’ve successfully create your own image layer.

But wait! What if you want both the original layer AND your new layer?

Follow the same directions as above, but instead of deleting HelloWorldScene’s #include line in AppDelegate.cpp, simply add your new include line underneath it instead. Also leave the original auto scene = HelloWorldScene::createScene(); alone. Instead, we’re going to add our new layer as a child of that scene:
auto layer = MickeyScene::create();

The complete code for the AppDelegate.cpp is now (being sure to change “Mickey” to match your own class):

#include "AppDelegate.h"
#include "HelloWorldScene.h"
#include "MickeyScene.h"


AppDelegate::AppDelegate() {



//if you want a different context,just modify the value of glContextAttrs
//it will takes effect on all platforms
void AppDelegate::initGLContextAttrs()
    //set OpenGL context attributions,now can only set six attributions:
    GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};


bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLViewImpl::create("My Game");

    // turn on display FPS

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);

    // create a scene. it's an autorelease object
    auto scene = HelloWorld::createScene();
	auto layer = MickeyScene::create();

    // run

    return true;

// This function will be called when the app is inactive. When comes a phone call,it's be invoked too
void AppDelegate::applicationDidEnterBackground() {

    // if you use SimpleAudioEngine, it must be pause
    // SimpleAudioEngine::getInstance()->pauseBackgroundMusic();

// this function will be called when the app is active again
void AppDelegate::applicationWillEnterForeground() {

    // if you use SimpleAudioEngine, it must resume here
    // SimpleAudioEngine::getInstance()->resumeBackgroundMusic();

As you can see, our new picture is superimposed over the old Hello World layer:

Superimposed Mickey