[Cocos2d塔防遊戲開發]Cocos2dx-3.X完成塔防遊戲《王國保衛戰》--遊戲開始界面

修改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;  
}  

下一張將講如何自定義一個跳轉場景