Cocos2dx学习笔记（四）关闭按钮

1、前三篇文章加上这一篇，基本将HelloWorld这个程序重新实现了一遍（当然有不同，稍后再提），现在将剩下的关闭按钮实现。

2、其实，这些类似按钮（菜单）、文字等内容，都有相应的已经实现的类，只要构造这些类的对象，再放入场景中就可以了。

3、在init函数中添加如下代码：

        // 关闭按钮

        CCMenuItemImage *pCloseItem = CCMenuItemImage::create(

            "CloseNormal.png",

            "CloseSelected.png",

            this,

            menu_selector(MyHelloWorldScene::menuCloseCallback));

 

        pCloseItem->setPosition(ccp(origin.x + visibleSize.width - pCloseItem->getContentSize().width/2 ,

            origin.y + pCloseItem->getContentSize().height/2));

 

        CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);

4、然后实现相应的回调函数menuCloseCallback：

void menuCloseCallback(CCObject* pSender);

void MyHelloWorldScene::menuCloseCallback(CCObject* pSender)

{

#if (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) || (CC_TARGET_PLATFORM == CC_PLATFORM_WP8)

    CCMessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");

#else

    CCDirector::sharedDirector()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

    exit(0);

#endif

#endif

}

5、运行如下：

6、至此，整个HelloWorld的效果已经实现了，但是与实例代码相比，你会发现有许多不同的地方，最大的不同就是我的实现中没有创建层（Layer），而是直接将图片（精灵）、文字以及菜单放到场景（Scene）中了。这么做的原因是为了搞清楚Cocos2d-x项目的结构和初始化过程。

7、现在应该清楚这样一个关系：导演 -> 场景 -> 场景中显示的内容。当然，导演只有一个，但是场景会有很多；场景中的内容就更多了。

8、举例来说，一个典型的手机游戏的界面应该由以下几个部分组成：

（1）背景：一般来说就是一张背景图片（或是地图），譬如水果忍者的菜板；

（2）动作：譬如游戏角色的移动、攻击等效果；

（3）触摸：这部分通常是一些虚拟按键，最典型的就是虚拟方向控制键；

（4）菜单：通常悬浮在屏幕边缘，可以随时打开，以便设置音量、查看积分等；

这四个部分都是可以用眼睛看到的，但是问题随之而来了，譬如要实现“控制角色移动”这一视觉效果，其实是一个复杂的过程：首先，用户触摸相应的方向键，然后在处理触摸操作的函数中显示角色动作（几张角色动作图片快速切换），此时角色就像似在原地踏步，为了达到移动的视觉效果，让背景移动起来，这样就实现了角色移动。

问题是如何实现背景移动的同时，角色在做相应的动作（不止一个角色），同时还要接受用户的触摸输入，同时菜单的位置不变并能随时响应。当然解决的方法不只一个，而Cocos2d-x中的方法是，引入一个层（Layer）的概念。简单来说，上述的四个部分就是四个层（有的书上叫布景），这些层分别显示一部分视觉效果，熟悉PhotoShop的人可能比较容易理解，这里的层与图层很类似。

9、场景和层的区别以及关系

（1）场景的概念大于层，层可以理解为一部分要在场景中显示的内容的集合。

（2）场景和层很相似，相当于一个容器，这个容器可以装入其它的游戏元素；也就是说，场景和层本来是没有视觉上的显示效果的，只有将游戏的各种元素添加进这个容器后，才出现了游戏的效果。而游戏中能够被看到的几乎都是精灵，这是另一个概念，此处略过。

（3）层不能独立显示，必须放到场景中才有意义。

10、现在填补以下上面提到过的关系：导演 -> 场景 -> 层 -> 视觉元素

11、如上关系所示，在场景中专心管理各个层，而将其它显示内容放到层中。事实上，所谓的层就是一种z序，在相应的z序上显示一部分内容。

12、附上几张关系图（源自网络）：