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);
},
只要获得了相对父节点的坐标,就是我们需要设置的世界坐标.