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

作者：Allenice
原地址： http://blog.youkuaiyun.com/allenice1/article/details/7745227

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

1. var MenuTest=cc.Layer.extend({ 
   
2.     init:function  () { 
   
3.  
   
4.         //创建一个绿色层 
   
5.         var greenLayer=cc.LayerColor.create(cc.ccc4(0,255,0,255),320,480); 
   
6.  
   
7.         //创建菜单文字菜单要用到的Label 
   
8.         var menuLabel1=cc.LabelTTF.create("menuItem1","Arial",20); 
   
9.  
   
10.         //创建菜单项（MenuItem） 
    
11.         var menuItem1=cc.MenuItemLabel.create(menuLabel1); 
    
12.  
    
13.         //创建游戏菜单（Menu） 
    
14.         var menu=cc.Menu.create(menuItem1); 
    
15.  
    
16.         //将菜单添加到绿色层里 
    
17.         greenLayer.addChild(menu); 
    
18.         this.addChild(greenLayer); 
    
19.  
    
20.         return true; 
    
21.     } 
    
22. }); 

复制代码

效果如图：

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

1. var menuLabel2=cc.LabelTTF.create("menuItem2","Arial",20); 
   
2.         var menuItem2=cc.MenuItemLabel.create(menuLabel2); 
   
3.         menuLabel2.setColor(cc.ccc3(0,0,0));

复制代码

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

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

复制代码

效果如图：

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

1. menuItem2.setPosition(cc.ccp(100,100)); 

复制代码

效果如图

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

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

复制代码

效果如图：

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

1. menuItem1.setPosition(cc.ccp(0,30)); 
   
2. menuItem2.setPosition(cc.ccp(0,-30)); 

复制代码

效果如下：

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

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

复制代码

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

复制代码

点击menuItem1 ,效果如图：


3. 场景转换cocos2d有很多种类的场景转换，使用方法也差不多，我只写一种，其他的就要自己看API了（cc.Scene）。
第一个场景是现在这个绿色场景，第二个是我之前做的黄色场景。我们的目的是点击menuItem2，然后第二个场景用0.5秒从左到右出来。主要代码如下：

1. var scene2=Yellow.scene(); 
   
2.         var tranScene=cc.TransitionMoveInL.create(0.5,scene2); 
   
3.         cc.Director.sharedDirector().replaceScene(tranScene);

复制代码

1. var MenuTest=cc.Layer.extend({ 
   
2.     init:function  () { 
   
3.  
   
4.         //创建一个绿色层 
   
5.         var greenLayer=cc.LayerColor.create(cc.ccc4(0,255,0,255),320,480); 
   
6.  
   
7.         //创建菜单文字菜单要用到的Label 
   
8.         var menuLabel1=cc.LabelTTF.create("menuItem1","Arial",20); 
   
9.         var menuLabel2=cc.LabelTTF.create("menuItem2","Arial",20); 
   
10.  
    
11.  
    
12.         //创建菜单项（MenuItem） 
    
13.         var menuItem1=cc.MenuItemLabel.create(menuLabel1,this,this.menu1Selected); 
    
14.         var menuItem2=cc.MenuItemLabel.create(menuLabel2,this,this.menu2Selected); 
    
15.  
    
16.         //创建游戏菜单（Menu） 
    
17.         var menu=cc.Menu.create(menuItem1,menuItem2); 
    
18.  
    
19.         //将菜单添加到绿色层里 
    
20.         greenLayer.addChild(menu); 
    
21.         this.addChild(greenLayer); 
    
22.  
    
23.         //设置 
    
24.         menuLabel2.setColor(cc.ccc3(0,0,0)); 
    
25.         menuItem1.setPosition(cc.ccp(0,30)); 
    
26.         menuItem2.setPosition(cc.ccp(0,-30)); 
    
27.  
    
28.         return true; 
    
29.     }, 
    
30.     menu1Selected:function (e) { 
    
31.         window.alert(e.getLabel().getString()); 
    
32.     }, 
    
33.     menu2Selected:function (e) { 
    
34.         var scene2=Yellow.scene(); 
    
35.         var tranScene=cc.TransitionMoveInL.create(0.5,scene2); 
    
36.         cc.Director.sharedDirector().replaceScene(tranScene); 
    
37.     } 
    
38. }); 

复制代码