Cocos2d-x for WindowsPhone:一个按钮走天下

在玩游戏的过程中，按钮可算是界面里最不可缺少的元素，可以说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场景。

运行起来看看效果：

看起来不赖，有点意思了吗？点击一下看看效果吧。

  源代码

点击这里下载源代码