Cocos2dx游戏开发系列笔记10：解刨《战神传说》

有点困了，从桌子换到床上，刚要开敲，豆瓣电台传来的传来奇怪的歌声“马的～马的～”

看看歌词，应该是“慢慢等”，好吧，继续

首先看下vs中的文件

整个项目就这些代码，这样来看逻辑结构比较清晰。

-----------------------------------------------------------------------------------------------------------

首先看下菜单界面：

-----------------------------------------------------------------------------------------------------------

这个游戏菜单界面有很多值得学习的地方

在init初始化里，先添加背景图，setScaleX方法可以让背景图根据手机屏幕来自适应。

[cpp] view plain copy

winSize = CCDirector::sharedDirector()->getWinSize();
//添加背景 0 ；1；
CCSprite* sl = CCSprite::create(s_loading);
sl->setScaleX(winSize.width/sl->getContentSize().width);
sl->setScaleY(winSize.height/sl->getContentSize().height);
sl->setAnchorPoint(ccp(0, 0));
this->addChild(sl,0,1);

然后添加时那个菜单按钮，这里使用CCSprite来初始化的CCMenuItemSprite。

[cpp] view plain copy

CCSprite* aboutNormal = CCSprite::create(s_menu, CCRectMake(252, 0, 126, 33));
CCSprite* aboutSelected = CCSprite::create(s_menu, CCRectMake(252, 33, 126, 33));
CCSprite* aboutDesabled = CCSprite::create(s_menu, CCRectMake(252, 33*2, 126, 33));
CCMenuItemSprite* about = CCMenuItemSprite::create(aboutNormal, aboutSelected, aboutDesabled,
this, menu_selector(StartMenu::menuCallback));//StartMenu::menuCallback
/“关于”按钮tag为21
about->setTag(21);

把item添加到menu里之后，再添加到界面上。

下面语句作用是，让menu的所有按钮竖着排列，并且设置间距为20.

[cpp] view plain copy

menu->alignItemsVerticallyWithPadding(20);

菜单里有个飞机一直在抢镜头，是这样实现的：

首先添加一个update函数，调用频率是0.1秒。

//添加update回调函数

this->schedule(schedule_selector(StartMenu::update), 0.1);

[cpp] view plain copy

//飞船在初始界面移动函数
void StartMenu::update(float dt)
{
if (m_ship->getPosition().y > winSize.height)
{
CCPoint pos = ccp(CCRANDOM_0_1() * winSize.width, 10);
m_ship->setPosition(pos);
m_ship->runAction(CCMoveBy::create(floor(5 * CCRANDOM_0_1()), ccp(CCRANDOM_0_1() * winSize.width, pos.y + winSize.height)));
}
}

然后在update里，根据小飞机的y坐标，来添加动画，

先把小飞机放在最底下，x坐标的位置是随机的。

然后以随机速度往上飞行。

按钮点击时还播放一个特效，而且点击开始游戏后，会有一个太阳光的特效划过屏幕，以一个demo的角度来看，这是非常炫的！

[cpp] view plain copy

//选择按钮时的音乐
void StartMenu::onButtonEffect()
{
if (Config::sharedConfig()->getAudioState()) {
SimpleAudioEngine::sharedEngine()->playEffect(s_buttonEffect);
}
}

[cpp] view plain copy

//选择开始游戏之后的效果
void StartMenu::flareEffect(CCObject* pSender)
{
onButtonEffect();
int n=0;
CCLog("begin>>>StartMenu::flareEffect",n);
Effect* flareEffect = Effect::create();
CCCallFunc *callback = CCCallFunc::create(this, callfunc_selector(StartMenu::newGame));
CCLog("begin>>>StartMenu::flareEffect>>1",n);
flareEffect->flareEffect(this, callback);
CCLog("begin>>>StartMenu::flareEffect>>2",n);
}

在这个例子中，按钮事件是指定同一个回调函数，然后根据tag判断点击的是哪个menuItem的。

[cpp] view plain copy

void StartMenu::menuCallback(CCObject* pSender)
{
onButtonEffect();
int tag = dynamic_cast<CCNode*>(pSender)->getTag();
if (tag == 20) {
//转到"Options"
CCScene *scene = Options::scene();
CCDirector::sharedDirector()->replaceScene(CCTransitionFade::create(1.2, scene));
}

-----------------------------------------------------------------------------------------------------------

紧接着，看下Effect类里这个动画效果

-----------------------------------------------------------------------------------------------------------

就是这种太阳光效果，在点击开始游戏之后，播放这个特效，并且加入回调。

[cpp] view plain copy

Effect* flareEffect = Effect::create();
CCCallFunc *callback = CCCallFunc::create(this, callfunc_selector(StartMenu::newGame));
CCLog("begin>>>StartMenu::flareEffect>>1",n);
flareEffect->flareEffect(this, callback);

以下是 flareEffect方法：

[cpp] view plain copy

//执行完这个函数跳到StartMenu::newGame()开始游戏
void Effect::flareEffect(CCNode *parent, CCCallFunc *callback)
{
int n=0;
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
// 特效图片
CCSprite *flare = CCSprite::create(s_flare);
// 设置混合模式
ccBlendFunc cbl = {GL_SRC_ALPHA, GL_ONE};
flare->setBlendFunc(cbl);
// 添加到父节点
parent->addChild(flare, 10);
// 设置初始透明度
flare->setOpacity(0);
// 设置初始位置
flare->setPosition(ccp(-30, winSize.height - 130));
// 设置初始角度
flare->setRotation(-120);
// 设置初始放大系数
flare->setScale(0.2);
// 透明度渐变
CCActionInterval *opacityAnim = CCFadeTo::create(0.5, 255);
CCActionInterval *opacDim = CCFadeTo::create(1, 0);
// 大小渐变
CCActionInterval *bigAnim = CCScaleBy::create(0.7, 1.2, 1.2);
// 渐变速度
CCEaseSineOut *biggerEase = CCEaseSineOut::create(bigAnim);
CCActionInterval *moveAnim = CCMoveBy::create(0.5, ccp(328, 0));
CCEaseSineOut *moveEase = CCEaseSineOut::create(moveAnim);
// 角度旋转
CCActionInterval *roteAnim = CCRotateBy::create(2.5, 90);
// 角度旋转速度，指数变化
CCEaseExponentialOut * rotateEase = CCEaseExponentialOut::create(roteAnim);
// 放大到原大小
CCScaleTo *bigger = CCScaleTo::create(0.5, 1);
// 动画完成后回调函数,干掉精灵
CCCallFuncN *removeFunc = CCCallFuncN::create(flare, callfuncN_selector(Effect::killSprite));
// 执行动画和回调函数
flare->runAction(CCSequence::create(opacityAnim, biggerEase, opacDim, removeFunc, callback, NULL));
flare->runAction(moveEase);
flare->runAction(rotateEase);
flare->runAction(bigger);
CCLog("end>>>Effect::flareEffect()",n);
}