在玩游戲的過程中，按鈕可算是界面里最不可缺少的元素，可以說UI交互基本上都是各種按鈕對玩家之間的交互，其實開始寫的時候有點猶豫不決，到底是否要將按鈕放在最前面，思量了很久之后才發現，沒這個部分的例子，后面幾乎都不好走下去，一些交互操作全部都可以通過按鈕來完成，省去很多的講解麻煩。
| 關於按鈕 |
在cocos2d-x引擎中提供了幾個常用按鈕，他們是：
CCMenuItemFont
CCMenuItemLabel
CCMenuItemImage
CCMenuItemSprite
其實還有一個CCMenuItemToggle以后再專門提它。
這些按鈕都是繼承自CCMenuItem，這個類在結構上表現為CCMenu的子項，CCMenu相當於菜單整合組，其實就是一個CCLayer，主要用來管理這些CCMenuItem，所以在實際用的時候，任何的CCMenuItem繼承類單獨添加到其他的CCNode里的時候是沒有作用的，只有在CCMenu里才可以執行邏輯。
按鈕的制作比較容易，在場景中就可以實現，比如說我們將上篇的TestScene代碼改一下：《Cocos2d-x for WindowsPhone:從開始到一個場景再一張圖片》
public class TestScene : CCScene
{
public TestScene()
{
InitScene();
}
public void InitScene()
{
CCSprite image = CCSprite.spriteWithFile("HelloWorld");
image.position = new CCPoint(200, 240);
this.addChild(image);
//圖片按鈕
CCMenuItemImage menu01 = CCMenuItemImage.itemFromNormalImage("Images/startgame01", "Images/startgame01",this,startGame);
menu01.position = new CCPoint(50, 0);
CCMenu menugroup = CCMenu.menuWithItems(menu01);
this.addChild(menugroup);
}
public void startGame(CCObject sender)
{
} }
上面代碼中使用CCMenuItemImage.itemFromNormalImage方法從兩張圖片中構建了一個按鈕項，這兩張照片分別代表為普通狀態（normal）和選定狀態（selected），圖片當然要先准備好添加到Content里。
運行一下看看，在界面中按鈕已經出現。
| 更多的按鈕 |
為了更好的說明各種按鈕的用法，我們先建立一個新的場景，名字叫MenuShow，這個場景里帶了四種按鈕測試，代碼如下：
public class MenuShow : CCScene
{
static MenuShow _instance;
public static MenuShow getInstance()
{
if (_instance == null)
_instance = new MenuShow();
return _instance;
}
private MenuShow()
{
//普通文字按鈕
CCMenuItemFont textmenu = CCMenuItemFont.itemFromString("Text Button", this, OnTextmenu_Click);
//普通按鈕，來自CCLabelTTF，其實里面可以套任何的CCNode
CCMenuItemLabel labelmenu = CCMenuItemLabel.itemWithLabel(CCLabelTTF.labelWithString("Label Button", "Arial", 24), this, OnLabelmenu_Click);
//圖片按鈕
CCMenuItemImage imagemenu01 = CCMenuItemImage.itemFromNormalImage("Images/startgame01", "Images/startgame01", this, OnImagemenu_Click);
//精靈按鈕
var mole = new Mole();
CCMenuItemSprite spritemenu01 = CCMenuItemSprite.itemFromNormalSprite(mole, CCSprite.spriteWithFile("Images/marmot_4"), this, OnSpritemenu_Click);
CCMenu menu = CCMenu.menuWithItems(textmenu,labelmenu, imagemenu01, spritemenu01);
menu.alignItemsVerticallyWithPadding(20);
this.addChild(menu);
}
void OnTextmenu_Click(CCObject sender)
{
ShowMessageBox("TextMenu被點擊了！");
}
void OnLabelmenu_Click(CCObject sender)
{
ShowMessageBox("Label Button被點擊了！");
}
void OnImagemenu_Click(CCObject sender)
{
ShowMessageBox("Image Button被點擊了！");
}
void OnSpritemenu_Click(CCObject sender)
{
ShowMessageBox("Sprite Button被點擊了！");
}
//一個簡單的messagebox方法
public static void ShowMessageBox(string message)
{
List MBOPTIONS = new List();
MBOPTIONS.Add("OK");
if (!Guide.IsVisible)
{
//暫停一下
CCDirector.sharedDirector().pause();
Guide.BeginShowMessageBox("Message", message, MBOPTIONS, 0, MessageBoxIcon.Alert, new AsyncCallback(messageCallBack), null);
}
}
private static void messageCallBack(IAsyncResult result)
{
//回調並重新開始運行
CCDirector.sharedDirector().resume();
}
}
其中有一個Mole類精靈，想起來之前的那位可憐小地鼠了嗎？不知道的可以看：《Cocos2d-x for WindowsPhone:開發一個打地鼠游戲（上）》
代碼實現如下：
public class Mole : CCNode
{
CCSprite body;
CCActionInterval showAction;
//動畫序列幀
static List frames;
public Mole()
{
//讀取一張鼴鼠身體的圖片並設置為默認的圖像
body = CCSprite.spriteWithFile("Images/marmot_3");
body.anchorPoint = new CCPoint(0, 0);
//設置內容的大小，用繼承類時，contentSize不會被刷新，需要自己指定
contentSize = body.contentSize;
this.addChild(body);
//創建靜態的幀列表，這樣做的目的是防止多次創建無用的CCSpriteFrame
if (frames == null)
{
frames = new List();
for (int i = 1; i < 4; i++)
{
CCTexture2D texture = CCTextureCache.sharedTextureCache().addImage("Images/marmot_" + i);
//這里存在一個引擎的bug，如果不設置的話，就會播放不出來動畫
texture.Name = (uint)i;
var frame = CCSpriteFrame.frameWithTexture(texture, new CCRect(0, 0, texture.ContentSizeInPixels.width, texture.ContentSizeInPixels.height));
frames.Add(frame);
}
}
//鑽出動畫
CCAnimation marmotShowanimation = CCAnimation.animationWithFrames(frames, 0.1f);
CCAnimate action = CCAnimate.actionWithAnimation(marmotShowanimation, false);
showAction = CCRepeatForever.actionWithAction(action);
//讓body身體執行鑽出動畫
body.runAction(showAction);
}
}
好了，現在你可以在CCApplication里直接跳轉場景，但這次我們要測試前面的按鈕，現在打開TestScene，找到void startGame(CCObject sender)，寫如下代碼：
public void startGame(CCObject sender)
{
CCDirector.sharedDirector().pushScene(MenuShow.getInstance());
}
這時在TestScene里的開始按鈕被點擊的時候將會跳轉到MenuShow場景。
運行起來看看效果：
看起來不賴，有點意思了嗎？點擊一下看看效果吧。
| 源代碼 |