3.3 在Cocos2d-x中使用菜单
在上一节的范例中,展示了一个利用Cocos2d-x制作的游戏开始界面,在这个界面的右侧有3个用来作为按钮使用的对象。在实际使用时肯定是不能这个样子就让人去单击的,因为点上去也不会有什么效果。要让它有效果的话就需要学习本节要介绍的按钮菜单了。
在源文件本章目录存放的项目中实现了对上一节实例中界面的修改,为右侧的两个按钮加入了交互,实现用户单击的功能,其中关键代码如范例3-7所示。
【范例3-7】在Cocos2d-x中使用菜单按钮。
01 //右侧第二个按钮 02 auto* pButton2 = MenuItemImage::create("button1.png", //按钮正常状态下的图片 03 "button2.png",//按钮被按下时显示的图片 04 this, //当前场景 05 menu_selector(HelloWorld::menu)); //响应用户单击的操作 06 auto* button2 = Menu::create(pButton2, NULL); //创建菜单 07 button2->setAnchorPoint(Vec2(0,0)); //设置锚点 08 button2->setPosition(550, size.height / 2 - 60); //设置按钮位置 09 button2->setScale(0.6f); //对按钮图像进行缩放 10 addChild(button2); //加入按钮到当前场景 11 //第三个按钮 12 auto* pButton3 = MenuItemImage::create("button1.png", //按钮正常状态下的图片 13 "button2.png",//按钮被按下时显示的图片 14 this, //当前场景 15 menu_selector(HelloWorld::menu)); //响应用户单击的操作 16 auto* label3 = LabelTTF::create("start", "Arial", 40); //按钮所使用的标签 17 auto* pLabel3 = MenuItemLabel::create(label3, this, menu_selector (HelloWorld::menu)); //创建文字菜单 18 auto* button3 = Menu::create(pButton3, pLabel3, NULL); //将按钮菜单和文字菜单加入到菜单对象中 19 button3->setAnchorPoint(Vec2(0, 0)); //设置锚点 20 button3->setPosition(550, size.height / 2 - 120); //设置按钮位置 21 button3->setScale(0.6f); //对按钮图像进行缩放 22 addChild(button3); //加入按钮到当前场景
运行之后的效果如图3-7所示。可以看出,除了第三个按钮加入了文字之外,看上去第二个按钮与沿用了过去使用精灵类显示出来的按钮图案并没有什么不同。但是当用户单击时就会发生一些变化,如表3-1所示,该范例中所使用的图片素材如图3-8所示。
图3-7 使用按钮菜单之后在默认状态下与使用精灵显示图片效果相同
表3-1 右侧第二、三个按钮被点击后的效果
图3-8 本范例中所使用的素材
下面来介绍本范例中所使用的方法。在Cocos2d-x中创建一个菜单按钮的方法非常简单,主要分为两个步骤:
(1)创建新的菜单项如MenuItemImage(范例第02行)、MenuItemLabel(范例第17行)或MenuItemToggle等,并设置相应的回调函数(在本例中用的是HelloWorld::menu)。
(2)将菜单添加到菜单创建参数中,如范例第06行仅加入了pButton2一个菜单项,而在范例第18行则加入了两个菜单项pButton3和pLabel3,最后以NULL作为最后一个参数结尾。然后再对菜单的位置尺寸等进行设置和调整,最终加入到场景中。
在范例第02~10行创建了界面中右侧的第二个按钮,首先在第02~05行创建了一个新的菜单项pButton2,其中第1、2个参数分别为按钮在默认情况下与单击时所显示的图片素材的文件名,第3个参数为this指针指向当前的场景,最后一个参数则为当按钮被单击时所执行的操作,将它们封装在一个函数中(在本例中一律使用menu方法来实现)。然后在第06行创建Menu类型的对象button2,其中参数就是之前创建的菜单项pButton2,然后将其加入到场景中就能实现对用户操作的响应了。
而范例的第11~24行的第三个按钮的使用方法与之前的非常类似,只不过还加入了一个菜单标签(即具有用户单击响应功能的文字标签)使用方法如范例第17行所示。由于在该按钮中单击标签和按钮底部会出现不同的效果,因此在实际使用时不建议这样使用,本例只是为了展示一下该用法。