Chapter 2 - How to Add a sprite

Chapter 2 - How to Add a sprite

• 1. Add image resources
  • 1.1 add resources on win32
• 2. Add a sprite
  • TIPS 1
  • TIP 2
• The source code of these tutorials is here: https://github.com/flyingpacer/Cocos2dxSimpleGame. You can follow the articles to finish the game by yourself step by step, or download the finally source, simply build and run it.

1. Add image resources

Here’re three images made by Ray Wenderlich ’s wife , which would be used in Cocos2dSimpleGame.

After Chapter 1 - Create a New cocos2d-x project with multi-platforms, you must have cocos2d-x/Cocos2dSimpleGame folder now. Please download these images and copy them to cocos2d-x/Cocos2dSimpleGame/Resources folder

Then return to the IDE of different platforms.

1.1  add resources on win32

Win32 executable files will find the resources from it’s relative path. So we had to copy the images from cocos2d-x/Cocos2dSimpleGame/Resources folder to cocos2d-x/Debug.win32 folder manually.

But lazy guys like me, can always find lazy ways.

Write this line into Post-Build Event -> Command Line

xcopy /Y /E .\Resources\*.* $(OutDir)Each time the building completed, VistualStudio will copy the resources to the executable path

2. Add a sprite

You can see how easy to port cocos2d games from objc to c++ now. Open HelloWorldScene.cpp, replace the init method with following.

 1bool HelloWorld::init()
 2{
 3    bool bRet = false;
 4    do 
 5    {
 6        //////////////////////////////////////////////////////////////////////////
 7        // super init first
 8        //////////////////////////////////////////////////////////////////////////
 9
10        CC_BREAK_IF(! CCLayer::init());
11
12        //////////////////////////////////////////////////////////////////////////
13        // add your codes below...
14        //////////////////////////////////////////////////////////////////////////
15
16        // 1. Add a menu item with "X" image, which is clicked to quit the program.
17
18        // Create a "close" menu item with close icon, it's an auto release object.
19        CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
20            "CloseNormal.png",
21            "CloseSelected.png",
22            this,
23            menu_selector(HelloWorld::menuCloseCallback));
24        CC_BREAK_IF(! pCloseItem);
25
26        // Place the menu item bottom-right conner.
27        pCloseItem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20));
28
29        // Create a menu with the "close" menu item, it's an auto release object.
30        CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);
31        pMenu->setPosition(CCPointZero);
32        CC_BREAK_IF(! pMenu);
33
34        // Add the menu to HelloWorld layer as a child layer.
35        this->addChild(pMenu, 1);
36
37        /////////////////////////////
38        // 2. add your codes below...
39
40        CCSize winSize = CCDirector::sharedDirector()->getWinSize();
41        CCSprite *player = CCSprite::create("Player.png", 
42                                                            CCRectMake(0, 0, 27, 40) );
43        player->setPosition( ccp(player->getContentSize().width/2, winSize.height/2) );
44        this->addChild(player);
45
46        bRet = true;
47    } while (0);
48
49    return bRet;
50}

Beyonds the close menu, we only add the section of “2. Add your codes below” actually. You can see how to translate cocos2d-iphone codes line by line simply to cocos2d-x multi-platform codes.

 1// cpp with cocos2d-x
 2bool HelloWorld::init()
 3{
 4  if ( CCLayer::init() )
 5  {
 6    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
 7    CCSprite *player = CCSprite::create("Player.png", 
 8                                    CCRectMake(0, 0, 27, 40) );
 9    player->setPosition( ccp(player->getContentSize().width/2, 
10                              winSize.height/2) );
11   this->addChild(player);
12  }
13  return true;
14}

TIPS 1

1. Don’t use __super in C++ like used in objc. The keyworkd __super is only recognized by VC++, but can not be compiled by GCC. So you better to call the name of parent class, CCLayer::init()
2. There’s no the concept of property as there is in objc. Use get/set methods instead. For example, if you want to fetch the contentSize property of CCSprite , you must call sprite->getContentSize() method. Make the first letter capital, then add “get” prefix to it.
3. Use setter to set the value of properties. So “player.position = …” , translates to player->setPosition(…)
4. But the access to members of structures isn’t following this rule. E.g. there’re no getter/setter wrapper(包装器) with the “width” & “height” in winSize structure.
5. We have implemented some frequently used functions of CGGeometry(几何类), such as CGRectMake, CGPointMake, CGSizeMake, CGPointZero, CGSizeZero, CGRectZero. You can find them in cocos2dx/include/CCGeometry.h. Their features are same as iOS. For naming conflicts, classes with CG, NS, UI prefix, has been changed to CC prefix in cocos2d-x.
6. All the gaming elements in cocos2d-x, such as sprite, layer, scene, label, action, are allocated in the heap（堆）. So we must call their methods by “->”
7. Use keyword “this” in cpp instead of “self” used in objc.
8. The return type of init method is “bool” now. There’s no keyword “id” in cpp, so the methods returning “id” is translated to a object pointer or bool.
9. For android, the title bar has ocupied some space, so you should set the player's position to ccp(player.contentSize.width/2 + 40, winSize.height/2).

Well, we can build and run the code. Now the ninja is dressed in black, hidden in the black background with red eyes. For the gameplay(游戏玩法，可玩性), we had to change the background to white. It’s so easy, modify HelloWorld to inherit from CCLayerColor instead of CCLayer.

At first, modify the declaration in HelloWorldScene.h

1// cpp with cocos2d-x
2class HelloWorld : public cocos2d::CCLayerColor
Then modify the very beginning of HelloWorld::init() from

1if ( !CCLayer::init() )
2{
3    return false;
4}
to

1if ( !CCLayerColor::initWithColor( ccc4(255,255,255,255) ) )
2{
3    return false;
4}

Here’s a bit different to RayWenderlich’s code, because prefer defensive programming（防御式编程）. The normal code is if supoer init success, then do bla-bla…, I prefer if init failed, do the error handling first, then continue writing the correct flow. OK, back to the topic. Let’s compare the translation of objc to cpp again

1// cpp with cocos2d-x
    2   if ( CCLayerColor::initWithColor( ccc4(255,255,255,255) ) )

TIP 2

1. The default permission of inheritance in c++ is private. So the modifier “public” before CCLayerColor is required.
2. RicardoQuesada, the chief author of cocos2d-iphone , suggest us to use namespace in cocos2d-x. It’s very important to check your invoking of cocos2d-x classes is in “cocos2d” namespace or in “CocosDenshion” namespace

Build and run, then you can see the hero standing lonely in the white background.

• Win32