【Cocos2d-x 游戏开发】 2 --- Button、CCMoveBy

好久没写了，今天抽空补一篇.....

cocos2dx中包含很多物体运动方式、特效的函数，这使得我们在实现某些功能时很方便，关于这些，大家可以自行百度“cocos2dx中常见的46中动作+22中特效详解"进行学习。

今天的工程涉及CCMoveBy，Buttob的使用，先看一下效果图。



（是不是很熟悉，嘿嘿 ）由于手里的资源短缺，所以某些地方缺了零件，不过不影响今天的内容，大家先凑合看看，回头自行完善吧。。。


打开cocos studio，新建一个开发语言是C++的项目。由于我们项目的背景图是700*600的，所以我们修改项目场景大小为700*600（默认没有700*600的使用自定义尺寸）。



接下来在资源栏导入今天使用的资源，然后删除项目中原有的png资源（个人习惯把一类功能的资源归到一个文件夹便于管理）



新建一个精灵到场景，使用"image3245"作为精灵的贴图，设置位置为350,300，尺寸使用原尺寸（700*600），接下来发布项目到Visual studio，使用visual studio打开项目（以上内容如果不会，可以看第一节内容）。此时F5运行查看，发现图片只占了屏幕左下角，看下一步吧（如果显示一切正常，可以跳过下一步了）

打开文件AppDelegate.cpp，定位到applicationDidFinishLaunching函数，修改以下代码调整窗口大小到700*600

glview = GLViewImpl::createWithRect("KingdomBrush", Rect(0, 0, 700, 600));

director->getOpenGLView()->setDesignResolutionSize(700, 600, ResolutionPolicy::SHOW_ALL);

再次运行，背景完整显示了吧。

接下来做背景上的图，我们发现背景以上有5个对象，其中四个对象只是用来显示的（姑且这么认为），一个对象是一个按钮（start）。由于这5个对象要运动，把他们当做精灵比较方便，但是有一个按钮，按钮使用精灵的话，按钮的不同贴图切换就比较复杂，所以我们在cocos studio中新建五个控件，其中四个是精灵，一个是按钮。



其中俩个精灵的贴图为”image3278",另外俩个精灵的贴图为"image3279"和"image3289"，按钮使用"image 3264"和"image 3264"作为正常状态和按下状态的贴图，禁用状态先不管，加好贴图以后需要调整各控件的位置，使之位于我们效果图的位置（开始按钮上面的铁链精灵需要使用缩放放大一些），注意这里需要调整各控件的层级关系，在上面的图中可以调整各控件的层级关系，在界面中越靠上的，在上图中的位置越靠下，那么Sprite_1就是我们的背景，因为他在整个图的最底层。（这里的层级关系大家可以看成是ps中的层级，如果你不会ps，就当我没说...）调整好这些控件以后发布资源，切换到visual
studio，ctrl+s保存一下，F5执行程序，看看我们的效果，如果和我们要的效果不一样，返回cocos studio继续调整。

接下来我们实现控件的运行效果。控件运动使用CCMoveBy函数实现，因为有一个先后顺序，所以我们在设计之前需要确定每一个控件的时间差，这里我使用时间差相差0.1s，控件位置相差100px，然后依次计算每一个控件的初始位置，然后再程序运行后，依次运动到我们刚刚调整好的位置上。搞明白这个过程就可以写了，打开HelloWorld.cpp的init函数在addChild(rootNode)之后添加以下代码

//Sprite move speed：0.1s Move 100 Pixel
//Title init postion（350，820),Move to（350,420）
CCSprite* TitleSprite = (CCSprite*)rootNode->getChildByName("Sprite_4");
CCActionInterval* moveBy1 = CCMoveBy::create(0.4f, ccp(0, -400));
TitleSprite->runAction(moveBy1);

//Chain1 Init position(350,820),Move to(350,220)
CCSprite* ChainSprite1 = (CCSprite*)rootNode->getChildByName("Sprite_3");
CCActionInterval * moveBy2 = CCMoveBy::create(0.6f, ccp(0, -600));
ChainSprite1->runAction(moveBy2);

//Button Sprite Init position(350,790),Move to(350,190)
CCSprite* BtnSprite = (CCSprite*)rootNode->getChildByName("Button_1");
CCActionInterval* moveBy3 = CCMoveBy::create(0.6, ccp(0, -600));
BtnSprite->runAction(moveBy3);

//Chain2 Init position(350,810),Move to(350,110)
CCSprite* ChainSprite2 = (CCSprite*)rootNode->getChildByName("Sprite_2");
CCActionInterval * moveBy4 = CCMoveBy::create(0.7f, ccp(0, -700));
ChainSprite2->runAction(moveBy4);

//About Init position(350,890),Move to(350,90)
CCSprite* AboutSprite = (CCSprite*)rootNode->getChildByName("Sprite_5");
CCActionInterval* moveBy5 = CCMoveBy::create(0.8, ccp(0, -800));
AboutSprite->runAction(moveBy5);

注意这里，由于按钮控件不能执行MoveBy，所以这里我们把他转为Sprint类型，以实现按钮的运动。
以上代码 如果看不懂，那么你需要多看看其他教程了 。

执行我们的程序，发现我们的效果实现了(当然和原版的差了很多，以后慢慢完善吧)

最后我们为按钮添加响应。接着上面的代码写

<span style="white-space:pre"> </span>//Button
Button* StartBtn = (Button*)rootNode->getChildByName("Button_1");
StartBtn->addTouchEventListener(CC_CALLBACK_2(HelloWorld::BtnStartCallback, this));

这里我们为按钮添加回调函数，所以接下来要在HelloWorld类中添加BtnStartCallback函数，在HelloWorld.h中添加public函数定义
<span style="white-space:pre"> </span>//Start button Callback function
void BtnStartCallback(Ref* pSender, Widget::TouchEventType type);回到.cpp文件
void HelloWorld::BtnStartCallback(Ref* pSender, Widget::TouchEventType type)
{
MessageBox("按钮", "提示");
}

回调函数我们使用MessageBox，验证按钮消息的响应，
注意在.h文件中添加命名空间using namespace cocos2d::ui;执行一下我们的项目，点击开始............网速问题，先上传资源文件，工程文件下次补上 
工程下载：链接：http://pan.baidu.com/s/1nt46GVv 密码：h7to

以上内容，如有错误，望大家指出...谢谢


7/11 --- 0:30
Bug