修改AppDelegate中内容，将setDesignResolutionSize中改为

<span style="font-size:14px;">(960, 640, ResolutionPolicy::FIXED_HEIGHT)</span>

保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度

通过：

auto scene = WelcomeScene::createScene();
director->runWithScene(scene);

来启动新的场景，进入开始游戏界面

首先是Kingdom Rush的LOGO以及该LOGO的动画

加载资源文件xx.plist

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("mainmenu_spritesheet_32_1-hd.plist");

添加背景图片

//从SpriteFrameCache中加载图片
auto sprite_background = Sprite::createWithSpriteFrameName("mainmenu_bg.png");//设置位置
sprite_background->setPosition(Point(visibleSize.width/2,visibleSize.height/2));

//添加背景，Zorder设置为-1为此场景最底层
addChild(sprite_background,-1);

然后添加kingdom Rush Logo

sprite_Logo = Sprite::createWithSpriteFrameName("logo.png");
//计算Logo图应该在的位置
point_Logo.x = visibleSize.width/2,visibleSize.height;
point_Logo.y = visibleSize.height-(sprite_Logo->getContentSize().height/2);
//设置位置,初始大小
sprite_Logo->setScale(0.2f);
sprite_Logo->setPosition(point_Logo);
addChild(sprite_Logo,1);

这样LOGO就显示在了背景图片之上，初始大小为0.2倍，给它设置一个ScaleTo的动画例如 ScaleTo::create(0.5,1.5,1.5)，然后播放即可

在LOGO缩放动画完成后，会有Kingdom从左到右闪烁的动画，通过查看原游戏资源图片发现这是一个帧动画，每一帧的图片已经保存在plist当中，通过播放帧动画即可实现效果。

//从资源中加图片，设置位置
auto sprite = Sprite::createWithSpriteFrameName("logo_brillo_0001.png");sprite->setPosition(point_Logo);
//生成帧动画
//参见http://www.cnblogs.com/onlycxue/p/3509610.html
SpriteFrame* frame = NULL;
Vector<SpriteFrame*> aFrames(20);for (int len = 1;len <= 21; len++)
{frame = SpriteFrameCache::getInstance()->spriteFrameByName(String::createWithFormat("logo_brillo_00%02d.png",len)->getCString());if(frame!=nullptr)aFrames.pushBack(frame);
}addChild(sprite,2);auto animation = Animation::createWithSpriteFrames(aFrames,0.1f);//播放动画sprite->runAction(RepeatForever::create(Animate::create(animation)));

动画RepeatForever::create创建一个不间断播放的动画，放置在Logo上覆盖，动画效果完成。

创建一个动画序列Sequence，在序列中加入logo的缩放动画和帧动画，即可在logo缩放动画完成之后链接上帧动画，达到原有游戏效果。

接下来是开始按键的生成以及动画

cocos2dx中，可以采用MenuItemSprite来定义一个精灵按键，方便设置按键效果以及监听

本文采用给Sprite添加监听的方式来实现一个按键

首先是加载资源图片

在上述动画序列Sequence的最后再添加一个开始按键的下移动画MoveTo即可实现，代码略

创建一个监听

auto button_Start_listener = EventListenerTouchOneByOne::create();

设置onTouchBegan即点击后的相应

button_Start_listener->onTouchBegan = [&](Touch* touch, Event* event){//获取点击目标auto target = static_cast<Sprite*>(event->getCurrentTarget());//获取将世界坐标中触摸点转换为模型坐标后的点击坐标Point locationInNode = target->convertTouchToNodeSpace(touch);//获取目标的大小Size size = target->getContentSize();//创建rect区域Rect rect = Rect(0+40, 0+30, size.width-80, size.height/3 +15);//当点击坐标在区域内时if (rect.containsPoint(locationInNode)){  //改变Button式样达到点击效果target->setDisplayFrame(SpriteFrameCache::getInstance()->spriteFrameByName("menu_startchain_0002.png"));			return true;  }  return false;  
};

因为点击整个场景的所有精灵时，都会依次执行所有的 EventListenerTouchOneByOne，所以需要在onTouchBegan中加入对点击区域的判断，以此来判断是否点击在所需精灵中，rect即精灵所在区域，这里对原有精灵的rect进行了修正，即去掉START按键中链子以及其他的部分，当点击是，改变改精灵的图片，达到点击效果。

设置点击后释放动作监听

button_Start_listener->onTouchEnded = [&](Touch* touch, Event* event){auto target = static_cast<Sprite*>(event->getCurrentTarget());static_cast<Sprite*>(event->getCurrentTarget())->setDisplayFrame(SpriteFrameCache::getInstance()->spriteFrameByName("menu_startchain_0001.png"));button_Start->runAction(MoveTo::create(0.3f, Point(point_Logo.x,point_Logo.y)));button_Start->setVisible(false);setSaveMenuVisible();
};

点击后开始按键MoveTo到Logo后，隐藏，然后将开始游戏菜单上移

三个“NEW GAME”的背景图片是一个SPRITE,"CLOSE"按键设置监听方式与上述开始按键类似，也可使用MenuItemSprite方式，当点击开始按键后，给这些精灵添加MoveTo动画，移动到场景上。

“NEW GAME”采用新建一个自定义精灵的方式

class SlotMenu : public Sprite
{
public:SlotMenu();~SlotMenu();virtual bool initWithNum(int num);CREATE_FUNC(SlotMenu);void button_Savelot_Delete_callback(Ref* pSender);void conform_delete(Ref* pSender);void cancel_delete(Ref* pSender);void createNewGame();static SlotMenu* createMenu(int num);
protected:Label* label_hint;MenuItemSprite* button_Savelot_Delete;Sprite* savelot;
};

首先我们自定义一个创建方法：

具体可参见http://cn.cocos2d-x.org/tutorial/show?id=1987

SlotMenu* SlotMenu::createMenu(int num)
{auto slotMenu = new SlotMenu();if (slotMenu && slotMenu->initWithNum(num)){slotMenu->autorelease();return slotMenu;}CC_SAFE_DELETE(slotMenu);return NULL;
}

其中num为传入参数，设置为3个NEW GAME中的哪一个按键
在initWithNum(int num)中，依次添加所有精灵

通过UserDefault::getInstance()->getBoolForKey方式设置某个记录游戏是否开始，

若存在则显示当前记录并且将X按键显示如右图，所不存在则显示NEW GAME

点击X按键，显示“DELETE SLOT”和两个按键

例如删除按键：

auto confirm_Delete = MenuItemSprite::create(Sprite::createWithSpriteFrameName("mainmenu_saveslot_confirmdelete_0001.png"),Sprite::createWithSpriteFrameName("mainmenu_saveslot_confirmdelete_0001.png"),CC_CALLBACK_1(SlotMenu::conform_delete, this));

以及该按键监听：

void SlotMenu::conform_delete(Ref* pSender)
{savelot->getChildByTag(LABEL_HINT)->setVisible(false);savelot->removeChildByTag(NEWGAME);createNewGame();UserDefault::getInstance()->setBoolForKey(String::createWithFormat("<span style="font-family: Arial, Helvetica, sans-serif;">is_savelot_%d_exit</span>",this->num)->getCString,false);
}

文字采用Label方式创建，3个按键采用MenuItemSprite方式设置监听以及点击效果，监听内设置逻辑判断哪一项该隐藏哪一项该显示，具体代码略。

将整个精灵的底层精灵设置监听，点击后跳转到新游戏界面

if (rect.containsPoint(locationInNode)&&!savelot->getChildByTag(LABEL_HINT)->isVisible())
{  target->setDisplayFrame(SpriteFrameCache::getInstance()->spriteFrameByName("mainmenu_saveslot_0002.png"));			return true;  
}  

下一张将讲如何自定义一个跳转场景