cocos 2.4*版本的基础使用笔记分享（一）

开发文档地址
https://docs.cocos.com/creator/2.4/manual/zh/

挂载脚步
右键新建脚本

脚本解释
把类名和脚本名改为一致
允许其他脚本调用

export default 
1

text优先使用面板的值，property去掉则不在面板上显示

@property//去掉则不在面板上显示
text: string = 'hello';
1
2

打印输出

console.debug('调用');
1

生命周期函数解释

//初始化调用，第一个被调用
onLoad () {
    console.debug('调用');
}
//启用脚本调用，在onLoad和start之间执行，会多次调用
onEnable() {
    
}
//初始化调用，第二个被调用
start () {

}

//每帧开始调用，dt执行时间
update (dt) {}

//每帧结束调用
lateUpdate(dt) {
    
}
//禁用脚本调用
onDisable() {
    
}

//销毁时调用
onDestroy() {
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

节点的使用

start () {
    //获取子字节点
    let a = this.node.children[0];
    //根据子节点名称获取节点
    this.node.getChildByName('abc');
    //通过路径查找节点
    cc.find('Canvas/Main Camera')
    //获取父节点
    this.node.getParent();
    //设置一个父节点
    this.node.setParent(a);
    //移除所有子节点
    this.node.removeAllChildren();
    //移除某个节点
    this.node.removeChild(a);
    //从父节点移除掉,我删我自己
    this.node.removeFromParent();

    //获取位置
    this.node.x;
    this.node.y
    //设置位置
    this.node.setPosition(3,4);
    this.node.setPosition(cc.v2(3,4));
    //旋转
    this.node.rotation;
    //缩放
    this.node.scale;
    //锚点
    this.node.anchorX;
    //设置颜色
    this.node.color = cc.Color.RED;

    //节点开关
    this.node.active = false;
    //组件开关
    this.enabled = false;

    //按类型获取组件（填写组件类型）
    let sprite = this.getComponent(cc.Sprite);
    //从子集按类型获取组件
    this.getComponentInChildren(cc.Sprite);

	//创建节点
    let node = new cc.Node("New");
    //添加组件(创建一个精灵组件)
    node.addComponent(cc.Sprite);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

预设体

鼠标事件和触摸事件

//绑定事件
this.node.on(cc.Node.EventType.MOUSE_DOWN, function(event){
   console.debug('鼠标按下啦！！');
   
   //获取当前点击的位置
   event.getLocation()
   event.getLocationX()
   event.getLocationY()
   
   if(event.getButton() == cc.Event.EventMouse.BUTTON_RIGHT){
       console.debug('点击了鼠标右键！！');
   }
})

//取消绑定事件
this.node.off(cc.Node.EventType.MOUSE_DOWN,function(event){
	//用法同上
});

//触摸事件
this.node.on(cc.Node.EventType.MOUSE_DOWN, function(event){
    //按触摸id判断有几个手指
    console.debug('触摸' + event.getID());
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

鼠标事件在桌面平台才会触发，系统提供的事件类型如下：

鼠标事件（cc.Event.EventMouse）的重要 API 如下（cc.Event 标准事件 API 之外）：

触摸事件类型和事件对象
触摸事件在移动平台和桌面平台都会触发，这样做的目的是为了更好得服务开发者在桌面平台调试，只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下：

触摸事件（cc.Event.EventTouch）的重要 API 如下（cc.Event 标准事件 API 之外）：

键盘事件

/*
 * KEY_DOWN：按下
 * KEY_UP：松开
 */
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(event){
    if(event.keyCode == cc.macro.KEY.q){
        console.debug('你按下了q键！！');
    }
})
1
2
3
4
5
6
7
8
9

自定义事件

let that = this;
//触摸事件
this.node.on(cc.Node.EventType.MOUSE_DOWN, function(event){
    //触发自定义事件,第一种
    that.node.emit('myEvent');
    //触发自定义事件,第二种,true控制开启事件冒泡
    that.node.dispatchEvent(new cc.Event.EventCustom("myEvent", true));
})

//监听自定义事件
this.node.on('myEvent', function(event){
    console.debug('自定义事件');
})
1
2
3
4
5
6
7
8
9
10
11
12
13

碰撞检测
添加碰撞组件，支持三种类型，分别是方形，圆形，多边形，勾选editing可进行拖动编辑

开启碰撞检测

//初始化调用
start () {
   //开启碰撞检测
   cc.director.getCollisionManager().enabled = true;
}

/**
 * 当碰撞产生的时候调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionEnter(other, self){
    //获取碰撞组件的tag，来判断碰到的是那个物体
    console.log('碰撞发生' + other.tag);
}

/**
 * 当碰撞产生后，碰撞结束前的情况下，每次计算碰撞结果后调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionStay(other, self) {
    console.log('碰撞持续');
}

/**
 * 当碰撞结束后调用
 * @param  {Collider} other 产生碰撞的另一个碰撞组件
 * @param  {Collider} self  产生碰撞的自身的碰撞组件
 */
onCollisionExit(other, self) {
    console.log('碰撞结束');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33