我们谈一谈CocosCreator

作者：不洗碗工作室 - 欣仔

版权归作者所有，转载请注明出处

节点操作

我们创建一个场景时，默认会创建一个Canvas节点，之后我们可以在Canvas下创建子节点或在Canvas同级创建兄弟节点。

在节点上，我们可以挂载各种各样的组件，也可以自定义自己的脚本组件，当我们挂载了脚本组件在一个节点上的时候我们可以在脚本中如下操作节点的属性:

this   // 代表了当前的组件
this.node   // 代表该组件挂载的节点
this.node.parent   // 该组件挂载节点的父节点
this.node.children   // 该组件挂载节点的子节点数组
this.node.getChildByName('子节点的名字')   // 获取指定子节点

一个比较好的拿到节点的方式是可以在properties中定义cc.Node，然后我们拖节点到该属性中

查找节点

cc.find

// 找node-1下node-2中的精灵组件
cc.find('node-1/node-2<cc.Sprite>')

动作

动作的API由节点提供，所以我们使用this.node调用，节点的位置是相对父节点定位的

时间间隔动作

cc.moveTo(持续时间，位置)
cc.moveTo(1, cc.v2(1, 1))或cc.moveTo(1, 1, 1)
/*  旋转  */
cc.rotateTo(1, 180)   // 1s 旋转180度
/*  缩放  */
cc.scareTo(1, 2, 2)   // 1s 放大1倍
/*  透明度  */
cc.fadeOut(1)   // 1s 变透明

即时动作

cc.removeSelf()  // 将自己从父节点删除（不代表自己被删除）
cc.removeSelf(true)   // 将自己删除
cc.sequence()   // 动画顺序执行
cc.callFunc(回调，this指向，传入的参数)
(self, args) => {}   // 回调
easing()   // 缓动函数，传入缓动类型

事件

// 自定义事件
this.node.on('eventName', 'func', context)
this.node.emit('eventName', args)
this.node.once
this.node.off
(e) => e.detail   //e.detail为传入的参数

系统事件

触摸事件

事件有节点的作用域，在该节点定义的事件只有在该节点范围内点击才有效

this.node.on('touchstart', (e) => {}, this)
this.node.on('touchmove', (e) => {}, this)
this.node.on('touchend', (e) => {}, this)
this.node.on('touchcancel', (e) => {}, this)  // 移到节点外
/*  坐标转换  */
this.node.on('touchstart', (e) => {
    e.getLocation()   // 得到全局坐标系的坐标，（以左下角为坐标原点）
    // 从全局坐标系转到本地坐标系
    // 转到this.node坐标系下的相对坐标系
    let locationOfThisNode = this.node.convertToNodeSpaceAR(e.getLocation())
    // 转到父节点下的坐标系
    let locationOfThisNodeParent = this.node.parent.convertToNodeSpaceAR(e.getLocation())
    // 这样就将节点移到点击的位置了
    this.node.position = locationOfThisNodeParent
})

鼠标事件

this.node.on('mouseup', () => {}, context)
this.node.on('mousemove', () => {}, context)
this.node.on('mousedown', () => {}, context)
this.node.on('mouseenter', () => {}, context)
this.node.on('mouseleave', () => {}, context)
this.node.on('mousewheel', () => {}, context)

键盘事件

cc.systemEvent.on('keydown', () => {}, context)
cc.systemEvent.on('keyup', () => {}, context)
cc.systemEvent.on('keydown', (e) => {
    if(e.keyCode === cc.KEY.w) {
        console.log('按下了w')
    }
})

预制体

我们来动态生成一个节点

let tmpNode = new cc.Node()
tmpNode.name = '新节点'
// 将该节点添加到节点树中
this.node.addChild(tmpNode)
/*  下面是组件  */
let sprite = this.node.addComponent('cc.Sprite')
this.node.removeComponent('cc.Sprite')
this.node.getComponent('cc.Sprite')

下面用预制体生成节点

let node = cc.instantitate('预制体')
this.node.addChild(node)

预制体只能保存本组件内的东西，如果里面有其他组件的引用，则不会保存

全局变量

// 设置在window上的属性是全局可用的，因为window是全局可用的
window.a = 1
// module.export 和 require
module.export = {a, b, c}
let {a, b, c} = require('模块名')
// static定义的变量会在实例中共享
static: {a: 1}
// addPersistRootNode
cc.game.addPersistRootNode('node1')   // 将节点常驻内存中，不会因为场景的切换而销毁
cc.game.removePersistRootNode('node1')
cc.director.getScene().getChildByName('node1')
// 相当于localStorage
cc.sys.localStorage.getItem()
cc.sys.localStorage.setItem()

计时器

this.schedule(func, 1)
this.unschedule(func)
this.scheduleOnce(func, 1)