cocos creator学习笔记

学习 博主章鱼仔的相关笔记，以此备忘录。

欢迎使用 cocos creator 编辑器

cocos creator编辑器 是触控公司全资子公司雅基软件的最新H5引擎编辑器，有3D和2D版本，该引擎借鉴了U3D引擎重新编写了，使用java语言，目前还有很多地方不成熟和不完善，但是相对游戏包小，中文比较达意，支持微信等国内的快节奏平台，目前使用者正在上涨。

一、场景节点：树杈结构的Node

cc.Node属性

属性名	功能
name	获取节点的名字
active	即该节点是否可见
position	节点相对坐标（相对于父节点）
rotation	旋转度，cocos以顺时针为正数
scale	缩放
anchor	锚点位置
Size	节点大小
Color	填涂颜色
Opacity	节点透明度
Skew	节点偏斜
Group	分组，节点的分组将关系到节点的碰撞组件可以与哪些碰撞组件相碰撞。
parent	父节点
children	父节点的所有子节点
childrenCount	子节点的数目
tag	节点标签

cc.Component

cc.class{}是继承至cc.Component
因此每个组件的实例会相应地调用入口函数

入口函数	调用周期
onLoad	在组件加载的时候调用
start	组件第一次激活前调用
update	每次场景刷新时就会调用
lateUpdate	在update之后调用
enable	组件是否被启用
onEnable	组件在允许的时候调用
onDisable	组件在不被允许的时候调用

创建cc.class的实例对象

创建实例对象非常简单，只要将相应的组件脚本挂载到节点之中即可。cocos creator会自动new一个实例化对象，此时代码之中的this就是指当前组件实例，并且我们可以通过this.node 访问当前节点对象。

cc.Node的一些方法

方法	功能
addChild	添加子节点，并且可以修改该节点的 局部 Z 顺序和标签。
removeFromParent	从父节点上删除该节点
removeAllChild	移除节点所有的子节点
setLocalZorder	类似photo的图层覆盖关系，这个方法可以调整图层关系
setPosition	设置节点坐标（相对父节点）
getPosition	获取节点坐标（相对父节点）
getChildByName	通过名称获取节点的子节点。
getChildByTag	通过标签获取节点的子节点。
cc.find()	通过路径查找节点(当项目比较大型时比较吃资源)

二、cc.Nodesh事件响应

触摸事件

基本事件类型	相应事件
TOUCH_START	触摸开始事件
TOUCH_MOVE	在屏幕上目标节点区域内移动时
TOUCH_END	在目标节点区域内离开屏幕时
TOUCH_CANCEL	在目标节点区域外离开屏幕时

cocos中所有事件都能够使用监听函数监听这类事件
使用Node.on(EventType,callback,target,useCapture)注册函数进行监听事件触发
1.callback函数中传入一个触摸对象
2.callback函数中的this对象指向target

cc.Touch

callback内传入的是一个cc.Touch对象，以下为常见的cc.Touch方法

getLocation()

可以返回触摸位置信息对象

this.node.on(cc.Node.EventType.TOUCH_START,function(e){
      var pos = e.getLocation();
      cc.log(pos);
},this);

Delta()

可以返回距离上次触摸偏移量,因此可以利用下列代码实现节点随触摸移动而移动

start(){
    this.node.on(cc.Node.EventType.TOUCH_MOVE,function(e){
          var delta = e.getDelta();
          this.node.x += delta.x;
          this.node.y += delta.y;
    },this);
},

事件传递

cocos内，节点是往父节点上传递的
stopPropagationImmediate()与 stopPropagation()

按键事件

基本事件类型	相应事件
KEY_DOWN	按键按下
KEY_UP	按键弹起

与触摸事件同理，需要一个函数监听，即事件注册函数
cc.systemEvent.on(EventType,callback,target,useCapture)

keyCode

KEY是cc模块的枚举类型，结合switch()使用

cc.systemEvent.on(cc.SystemEventType.KEY_DOWN,function(e){
    switch(e.keyCode){
        case cc.KEY.space:
             cc.log("space key down");
             break;
    }
},this);

自定义事件

自定义事件需要监听与发送事件

自定义事件的接收者on

this.node.on(string,callback.target,useCapture);
其中第一个参数为自定义的字符串
可以接收发送过来的事件(字符串)

自定义事件的发送者emit

this.node.emit(string,[detail]);
第二个参数是一个表，可以从callback传入的对象中访问

向上派送事件EventCustom

dispatchEvent(new cc.Event.EventCustom(“name”, bool));
第二个参数告诉编译器是否向上传递派送事件

注销事件监听

off(type,callback,target,useCapture)
删除之前与同类型，回调，目标或 useCapture 注册的回调,例如：

test:function(e){
    cc.log("test");
},
this.node.on(cc.Node.EventType.TOUCH_MOVE,this.test,this);
this.node.off(cc.Node.EventType.TOUCH_MOVE,this.test,this);

还可以使用targetoff(target)移除这个目标所有事件监听

this.node.on(cc.Node.EventType.TOUCH_MOVE,this.test,this);
this.node.targetoff(this.node);

三、cc.Node坐标空间

cc.Vec2

实质为JavaScript上的字典，结构{x:num,y:num};它表示 2D 向量和坐标
cc.p()与cc.v2都是cc.Vec2的对象

向量常用API

方法	功能
cc.pSub()	返回两个向量的差
cc.pAdd()	返回两个向量的和
cc.pLength()	返回指定向量的长度
cc.pLengthSQ()	返回指定向量长度的平方
cc.pAngle()	获取当前向量与指定向量之间的弧度角

创建一个Vec2对象

var pos = new cc.Vec2(100,100);//第一种方法
pos = cc.v2(100,100);//第二种方法
pos = cc.p(100,100);//第三种方法

创建一个向量

var a = cc.p(100,100);
var b = cc.p(50,50);
var ba = cc.pSub(b,a); //终点减去起点坐标即为向量
var len = cc.pLength(ba); //计算向量长度

cc.Size与cc.Rect

cc.Size本质上也是一个表结构{width:num,height:num}包含高度与宽度的表
不过从官方文档上看到其即将被cc.Vec2所取代
cc.Rect同理，结构为{x:num,y:num,width:num,height:num}的表对象
cc.Rect通常用于表示一个矩形,从x，y坐标为原点向右对角创建矩形

cc.Rect方法	功能
Rect.contains(point)	当前矩形是否包含指定坐标点,在内返回true,否则返回false
Rect.intersects()	判断当前矩形与指定矩形是否相交,相交返回true,否则返回false

创建cc.Size对象

//通过new创建对象
var s = new cc.Size(100,100);
var r = new cc.Rect(0,0,100,100);

s = cc.size(100,100);
r = cc.rect(0,0,100,100);

creator坐标系

世界坐标与相对坐标

坐标：简单来说就是屏幕坐标x和y
世界坐标：原点与安卓的坐标原点不一样，creator的坐标原点是从左下角开始的，坐标系与数学标准坐标系相同。
相对坐标：节点其实都是以锚点作为原点,并且position记录的就是相对父节点的坐标

相关API	功能
Node.convertToWorldSpace()	将一个点转换到世界空间坐标系,结果以 Vec2 为单位。
Node.convertToWorldSpaceAR()	将一个点转换到世界空间坐标系,结果以 Vec2 为单位, 返回值将基于世界坐标。
Node.convertToNodeSpace()	将一个点转换到节点 (局部) 坐标系,结果以 Vec2 为单位。
Node.convertToNodeSpaceAR()	将一个点转换到节点 (局部) 空间坐标系,结果以 Vec2 为单位, 返回值将基于节点坐标。

将节点坐标转换为屏幕坐标

把这个组件代码挂载到节点b中

 start:function(){
      cc.log(this.node.position);
       cc.log("相对于a的坐标:("+"x:"+this.node.position.x+"y:"+this.node.position.y+")");
       //以节点左下角为原点
       var Wpos = this.node.convertToWorldSpace(cc.p(0,0));  
       cc.log(Wpos);
         //加上AR后为以锚点为原点
         var WposAR = this.node.convertToWorldSpaceAR(cc.p(0,0));  
       cc.log(WposAR);
	},

将世界坐标转换为相对节点坐标

继续将组件挂载到节点b上

start:function(){
     //节点b锚点的世界坐标
     var WposAR = this.node.convertToWorldSpaceAR(cc.p(0,0));
      cc.log(WposAR);
      //以b节点左下角为原点，将该坐标(Wpos)转换为相对于b节点左下角的相对节点坐标
      var Npos = this.node.convertToNodeSpace(WposAR);
     cc.log(Npos);
     //以b节点锚点为原点，将该坐标(Wpos)转换为相对于b节点锚点的相对节点坐标
     var NposAR = this.node.convertToNodeSpaceAR(WposAR);
     cc.log(NposAR);
  },

获取包围盒

相关API	功能
Node.getBoundingBox()	获取父节点为坐标系下的包围盒
Node.getBoundingBoxToWorld()	获取世界坐标系下的包围盒

触摸事件所返回的坐标对象

触摸事件会返回用户触摸事件的世界坐标，因此每一次点击，都会返回一个坐标对象。可以利用convertToNodeSpaceAR()将其转换为以锚点为原点的节点坐标，以此获取用户点击位置

  start () {
       var pos = this.node.on(cc.Node.EventType.TOUCH_START,function(e){
           //方法1
           var Wpos = e.getLocation();
           var pos = this.node.convertToNodeSpaceAR(Wpos);
           cc.log(Wpos+"<----->"+pos);
           //方法2
           pos = this.node.convertTouchToNodeSpaceAR(e);
          cc.log("**********"+pos);
       },this);
   },

移动子节点到指定世界坐标

有时候往往需要移动某子节点到某点世界坐标系中
假如我们需要把节点b移动到世界坐标(200,200)的位置当中，因此，需要把世界坐标转为相对父节点的坐标

start () {
       var N_pos = this.node.parent.convertToNodeSpaceAR(cc.p(200,200));
       this.node.setPosition(N_pos);
    },

只要获得了相对父节点的坐标，就是我们需要设置的世界坐标.