cocos2d-x tutorial part II – How to Add a sprite

by on Sep.06, 2012, under Cocos2d-x

After this tutorial part I – Hello world,  now we already have created our first multi-platform cocos2d-2x project.  Now is time to add an sprite to our small game.

As in the original tutorial that you can find here,  we will be using these three images made by Ray Wenderlich ’s wife , which would be used into our little game.

How to add the resources for every different device is out of the scope of this tutorial, and you can find useful information about how to do it at the original link posted above. In order to make it work for Win32 we will have to add the line below under a build event (Post-build Event) into our project properties:

xcopy /Y /E ..\Resources\*.* $(OutDir)

Now that our project is ready let’s get our hands into displaying the sprites at the screen.

First of all we are going to create a white background for our little game. In order to accomplish this, first of all we are going to change the file HelloWorldScene.h where we will find the class definition as follows:

class HelloWorld : public cocos2d::CCLayer

and change it to:

class HelloWorld : public cocos2d::CCLayerColor

with this change we convert our scene layer, from a plain / normal layer into a colored layer, so now we can adjust it, and for example have a white background. To do that, in our HelloWorld::init() method implementation we should replace the layer initialization from:



CC_BREAK_IF(!CCLayerColor::initWithColor( ccc4(255,255,255,255) ));

With this initialization call, we will initialize our game’s layer within a withe colour (255,255,255,255)

Now is time to create our sprite and draw it into the screen. To do that we have to create a CCSprite object inside the HelloWorld::init() method as follows:

CCSprite *player = CCSprite::spriteWithFile("Player.png", CCRectMake(0, 0, 27, 40) );

As you can see, we initialize our sprite with a texture file named “player.png”. Also we indicate the size of our sprite (width / height). After we initialize our object (sprite) is time to set the position where we would like to display our player into the scene:

player->setPosition( ccp(player->getContentSize().width/2, winSize.height/2) );

and finally we add our sprite object to the current scene:


Now as usual all together:

bool HelloWorld::init()

bool bRet = false;
// super init first

CC_BREAK_IF(!CCLayerColor::initWithColor( ccc4(255,255,255,255) ));

// add your codes below...

// 1. Add a menu item with "X" image, which is clicked to quit the program.

// Create a "close" menu item with close icon, it's an auto release object.
CCMenuItemImage *pCloseItem = CCMenuItemImage::itemWithNormalImage( "CloseNormal.png", "CloseSelected.png",
this, menu_selector(HelloWorld::menuCloseCallback));
CC_BREAK_IF(! pCloseItem);

// Place the menu item bottom-right conner.
pCloseItem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));

// Create a menu with the "close" menu item, it's an auto release object.
CCMenu* pMenu = CCMenu::menuWithItems(pCloseItem, NULL);
CC_BREAK_IF(! pMenu);

// Add the menu to HelloWorld layer as a child layer.
this->addChild(pMenu, 1);

// 2. add your codes below...

CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCSprite *player = CCSprite::spriteWithFile("Player.png",
CCRectMake(0, 0, 27, 40) );
player->setPosition( ccp(player->getContentSize().width/2, winSize.height/2) );

bRet = true;
} while (0);

return bRet;

…. and this is it for now. You can download the source code of this example here.

<—– Part I – Hello World                                                   Part III – How to Move a Sprite —–>

2 Comments for this entry

  • Saurabh

    I want to change the background of the layer i changed the


    CC_BREAK_IF(!CCLayerColor::initWithColor( ccc4(255,255,255,255) ));

    and also in .h file

    class HelloWorld : public cocos2d::CCLayer
    class HelloWorld : public cocos2d::CCLayerLayer

    Please help me to solve this.

  • aeonphyxius

    Are you receiving an error? could you please post it ? Tell me a bit more about it so I can proper follow what you are trying to do 🙂

    Right now, what I see is the following:

    In the class HellowWorld header (.h) I see this mistake:

    HellowWorld : public cocos2d::CCLayerColor

    Also to initialize the layer with a background color you can use a different one than white (255,255,255,255)

    CC_BREAK_IF(!CCLayerColor::initWithColor( ccc4(100,100,100,100) ));

    or try this (without the CC_BREAK_IF macro).
    CCLayerColor::initWithColor( ccc4(255,255,255,255) );

    Let me know if it works 🙂

Leave a Reply