cocos2d-html5学习笔记（五）--菜单和场景转换

最新推荐文章于 2020-11-20 12:02:52 发布

Allenice

最新推荐文章于 2020-11-20 12:02:52 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： cocos2d-html5 javascript

本文链接：https://blog.youkuaiyun.com/Allenice1/article/details/7745227

javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

cocos2d-html5

8 篇文章

订阅专栏

这篇博客介绍了cocos2d-html5中如何创建文字菜单及处理菜单选中后的操作，详细讲解了菜单的创建、设置菜单项位置以及锚点和坐标原点的概念。同时，博主分享了场景转换的实现，特别是如何通过点击菜单项实现场景平滑过渡的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本笔记只写文字菜单，其他种类的菜单与文字菜单差不多。

1.菜单的创建

var MenuTest=cc.Layer.extend({
	init:function  () {

		//创建一个绿色层
		var greenLayer=cc.LayerColor.create(cc.c4(0,255,0,255),320,480);

		//创建菜单文字菜单要用到的Label
		var menuLabel1=cc.LabelTTF.create("menuItem1","Arial",20);

		//创建菜单项（MenuItem）
		var menuItem1=cc.MenuItemLabel.create(menuLabel1);

		//创建游戏菜单（Menu）
		var menu=cc.Menu.create(menuItem1);

		//将菜单添加到绿色层里
		greenLayer.addChild(menu);
		this.addChild(greenLayer);

		return true;
	}
});

效果如图：

再添加一个菜单项，文字颜色设成黑色

var menuLabel2=cc.LabelTTF.create("menuItem2","Arial",20);
		var menuItem2=cc.MenuItemLabel.create(menuLabel2);
		menuLabel2.setColor(cc.c3(0,0,0));

cc.Menu.create要改一下，将menuItem2添加到Menu中

		var menu=cc.Menu.create(menuItem1,menuItem2);

效果如图：

认真看一下，其实这两个菜单重叠了。现在移动一下menuItem2的位置

		menuItem2.setPosition(cc.p(100,100));

效果如图

这里又要讲一下锚点和坐标原点，不过，先设置一下menu的位置

menu.setPosition(cc.ccp(100,100));

效果如图：

通过这三张图片可以看出，menu一开始的位置是屏幕的中间，锚点是自身的中间，坐标原点是左下角。menuItem的锚点也是自身的中间，但是坐标的原点是menu的锚点，初始位置是0,0。

现在还原成第二张图，然后设置一下位置：

menuItem1.setPosition(cc.p(0,30));
		menuItem2.setPosition(cc.p(0,-30));

效果如下：

2. 菜单选中后的操作

我们需要处理某菜单选中后的操作。比如menuItem1被选中（点击或触摸），这要改一下代码，和添加一个处理操作的方法：

MenuTest添加一个方法，方法的e参数是该菜单项，即menuItem1

menu1Selected:function (e) {
		window.alert(e.getLabel().getString());
	}

修改menuItem1

var menuItem1=cc.MenuItemLabel.create(menuLabel1,this,this.menu1Selected);

点击menuItem1 ,效果如图：

3. 场景转换

cocos2d有很多种类的场景转换，使用方法也差不多，我只写一种，其他的就要自己看API了（cc.Scene）。

第一个场景是现在这个绿色场景，第二个是我之前做的黄色场景。我们的目的是点击menuItem2，然后第二个场景用0.5秒从左到右出来。主要代码如下：

var scene2=Yellow.scene();
		var tranScene=cc.TransitionMoveInL.create(0.5,scene2);
		cc.Director.getInstance().replaceScene(tranScene);

本次笔记的代码如下：

var MenuTest=cc.Layer.extend({
	init:function  () {

		//创建一个绿色层
		var greenLayer=cc.LayerColor.create(cc.c4(0,255,0,255),320,480);

		//创建菜单文字菜单要用到的Label
		var menuLabel1=cc.LabelTTF.create("menuItem1","Arial",20);
		var menuLabel2=cc.LabelTTF.create("menuItem2","Arial",20);


		//创建菜单项（MenuItem）
		var menuItem1=cc.MenuItemLabel.create(menuLabel1,this,this.menu1Selected);
		var menuItem2=cc.MenuItemLabel.create(menuLabel2,this,this.menu2Selected);

		//创建游戏菜单（Menu）
		var menu=cc.Menu.create(menuItem1,menuItem2);

		//将菜单添加到绿色层里
		greenLayer.addChild(menu);
		this.addChild(greenLayer);

		//设置
		menuLabel2.setColor(cc.c3(0,0,0));
		menuItem1.setPosition(cc.p(0,30));
		menuItem2.setPosition(cc.p(0,-30));

		return true;
	},
	menu1Selected:function (e) {
		window.alert(e.getLabel().getString());
	},
	menu2Selected:function (e) {
		var scene2=Yellow.scene();
		var tranScene=cc.TransitionMoveInL.create(0.5,scene2);
		cc.Director.getInstance().replaceScene(tranScene);
	}
});