CVP认证学习笔记--(何小成)003--实现文本菜单层

今天这节，算是正式课了，确实难度相对于体验课提高了，并不是简单的四行代码就能实现的了，这节课讲的内容是如何在场景中添加一个文本菜单层。
课程中是以实现左右按键来使文字左右移动为实例，目的在于让我们掌握Cocos中菜单的使用。而留下的课后作业，就是自行实现上下左右，其实原理都差不多，重点在于要让我们动手敲代码，亲身感受熟悉这个过程。

首先添加一个图片，来让我们操作

添加过程跟上节内容相同，这里直接new了

1 2	var logo = new cc.Sprite(res.logo_png); log.setTag(1);

与前面不同的是，这里为logo添加了一个tag，相当于一个标签，方便后面能在回调函数中得到这个logo控件

设置菜单字体及字体大小（当然，你不设置的话，也是会有一个默认值的）

1 2	cc.MenuItemFont.setFontName("Times New Roman"); cc.MenuItemFont.setFontSize(80);

创建菜单选项

第一个参数是文字内容，第二个参数是回调函数，第三个参数是调用对象（回调后面说）

// 左移动按键
var a=new cc.MenuItemFont("<",this.callBackLeft,this);
a.setPosition(a.width/2,size.height/2);
// 右移动按键
var d=new cc.MenuItemFont(">",this.callBackRight,this);
d.setPosition(size.width-d.width/2,size.height/2);
// 下移动按键
var s=new cc.MenuItemFont("v",this.callBackDown,this);
s.setPosition(size.width/2,s.height/2);
// 上移动按键
var w=new cc.MenuItemFont("^",this.callBackUp,this);
w.setPosition(size.width/2,size.height-w.height/2);

刚开始写的WASD。。。后来看到喵酱的<>^V，恍然大悟。。。上下左右还是这样比较美观，并且分布在屏幕四个角落的时候，在手机会好按一点，，，刚开始我wasd挤在右下角，手机上几乎都挤在一起了。。。额。。好吧，这都不是重点。。。重点是，要将四个按键规规矩矩的放在屏幕的四个中等线上还是需要稍微计算一下坐标的，上一节我只大概知道我们cocos的坐标系处于第二象限，今天听到沈大海老师在视频中提了一下，OpenGL的坐标的0,0就是在左下角位置。

添加菜单选项到菜单

cocos中，添加到图层上的是菜单，一个菜单会包含一个或多个菜单选项，我创建好了4个菜单选项，就要把菜单选项添加到一个菜单中

1
2
3

var menu=new cc.Menu(a,d,s,w);
menu.setPosition(0,0);
this.addChild(menu);

特地说明一下，为什么还要给menu设置一个Position （0,0），因为menu的默认坐标是在屏幕的正中央，而菜单选项的坐标都是以菜单的坐标为中心的相对位置，所以说，如果我不设置0,0坐标，那么右上按钮就不见了，而左下按钮在右上按钮的位置，相当于，对角线方向上偏移了一半。

写回调函数

上面说到的回调函数，就是当这个菜单按钮被按下时，所要执行的代码，所以那些按下上下左右的时候图片的相应的位移，就在回调中来实现，实现如下：

callBackLeft:function(){
      var logo=this.getChildByTag(1);
      if(logo.getPositionX()-40<=logo.width/2){
        return;
      }
      logo.setPosition(logo.getPositionX()-40,logo.getPositionY());
    },
    callBackRight:function(){
      var logo=this.getChildByTag(1);
      if(logo.getPositionX()+40>=cc.winSize.width-logo.width/2){
          return;
      }
      logo.setPosition(logo.getPositionX()+40,logo.getPositionY());
    },
    callBackDown:function(){
      var logo=this.getChildByTag(1);
      if(logo.getPositionY()-40<=logo.height/2){
          return;
      }
      logo.setPosition(logo.getPositionX(),logo.getPositionY()-40);
    },
    callBackUp:function(){
      var logo=this.getChildByTag(1);
      if(logo.getPositionY()+40>=cc.winSize.height-logo.height/2){
          return;
      }
      logo.setPosition(logo.getPositionX(),logo.getPositionY()+40);
    }

以上是回调实现，其中加上了边界判断。

总结

这一节课讲了图层中添加菜单按钮，以及按钮功能实现，知识如下：

坐标计算
回调函数
menu及menuItem使用
getChildByTag()

运行效果

http://www.cocoscvp.com/usercode/2016_04_07/a6a251fd44614c789eb99d1b12b14539635ae6bf/