CVP认证学习笔记--李天宇003实现文本菜单层

 这是正式课的第一节，代码量也随之增加，这也在预料之中。下面是我本节课的心得体会。

 这回我们先从头分析一下app.js这个文件。它主体包含两部分内容，一部分是Layer图层，一部分是Scene场景。那我们要添加的精灵、菜单这些内容都应该放到Layer中。然后将Layer添加到Scene中，这是一个总体流程。那我们本节课的修改内容就在这个ctor函数中进行添加代码的任务即可完成。首先我创建了一个logo对象(Resource.js文件中已经预加载过这个logo)。这里只演示自己添加的代码。源代码就不摘了~

        var logo = new cc.Sprite(res.CVPlogo_png);

        logo.x = size.width / 2;

        logo.y = size.height / 2+150;

        this.addChild(logo,6);

 

 然后，我就该添加菜单层了。这里调用的是cc.MenuItemFont这个函数。那么我们不光需要了解知道这个函数，还需要知道其他的菜单，因为不是所有菜单都是用文字做的。还有其他的，所以我们可以查看www.cocos.com去查阅相关的API。进行查阅后，我们发现还有精灵菜单。MenuItemSprite;MenuItemToggle;MenuItemImage,这些都是菜单。这里不做过多阐述。

 MenuItemFont继承自MenuItemLabel。它的create方法如下：

var create (

var text,//显示的文本

var callback//回调的函数

)

如果需要给文本菜单进行字体和字号的设定，需要用到setFontSize和setFontName。具体代码如下：

  cc.MenuItemFont.setFontName("Times New Roman");

  cc.MenuItemFont.setFontSize(80);

     var item1=new cc.MenuItemFont("left",this.callBack1,this);

        item1.setPosition(size.width/2-600,size.height/2-200);

        var item2=new cc.MenuItemFont("right",this.callBack2,this);

        item2.setPosition(size.width/2-180,size.height/2-200);

        var item3=new cc.MenuItemFont("up",this.callBack3,this);

        item3.setPosition(size.width/2-400,size.height/2-75);

        var item4=new cc.MenuItemFont("down",this.callBack4,this);

        item4.setPosition(size.width/2-400,size.height/2-400);

        var menu=new cc.Menu(item1,item2,item3,item4);

        this.addChild(menu);

        logo.setTag(111);

return true;

 由于在模拟器上坐标位置不好确定，这里用了固定的数值。到此菜单设定完毕。下面看一下我写的CallBack1-4函数。来进行边界判断的。

callBack1:function(){

      var nowlabel=this.getChildByTag(111);      nowlabel.setPosition(nowlabel.getPositionX()-10,nowlabel.getPositionY());

      if(nowlabel.getPositionX()<55){

          nowlabel.setPositionX(55);

      }

    },

callBack2:function(){

      var nowlabel=this.getChildByTag(111);      nowlabel.setPosition(nowlabel.getPositionX()+20,nowlabel.getPositionY());

      if(nowlabel.getPositionX()>750){

          nowlabel.setPositionX(750);

      }

    },

    callBack3:function(){

      var nowlabel=this.getChildByTag(111);      nowlabel.setPosition(nowlabel.getPositionX(),nowlabel.getPositionY()+10);

      if(nowlabel.getPositionY()>430){

          nowlabel.setPositionY(430);

      }

    },

    callBack4:function(){

      var nowlabel=this.getChildByTag(111);      nowlabel.setPosition(nowlabel.getPositionX(),nowlabel.getPositionY()-10);

      if(nowlabel.getPositionY()<20){

          nowlabel.setPositionY(20);

      }

    }

 完成以上内容，即可完成上下左右的logo移动过程。

 最后附上作业链接：http://www.cocoscvp.com/usercode/2016_04_06/b19f8adc983f1c74f8d0a4ecc4bcdd882de601da/