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:开发一个打地鼠游戏（上）》

代码实现如下：

+ View Code?

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场景。

运行起来看看效果：

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

  源代码

点击这里下载源代码