Cocos Creator 笔记

Posted on Edited on

开发环境构建

插件安装

1
npm install -D @eslint/js@^10.0.1 eslint@^10.0.3 eslint-config-prettier@^10.1.8 eslint-plugin-only-warn@^1.2.1 eslint-plugin-prettier@^5.5.5 globals@^17.4.0 prettier@^3.8.1 typescript@^5.9.3 typescript-eslint@^8.57.0

环境配置

开发

事件

useCapture

node.on(event,callback,target,useCapture)

  • true: 捕获模式，从父节点开始依次捕获事件
  • false: 冒泡模式，从子节点开始依次向父节点冒泡

阻止冒泡

node.stopPropagation()

  • 阻止向父节点冒泡,当前节点其他事件监听依然有效
  • useCapture 为 true 时阻止子节点捕获

swallowTouches

  • node._touchListener.setSwallowTouches(args:bool)
    • true:穿透触摸事件

匀速贝塞尔曲线

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
bezier(p0: cc.Vec2, p1: cc.Vec2, p2: cc.Vec2, t: number) {
    const p = p0
        .mul(Math.pow(1 - t, 2))
        .add(p1.mul(2 * t * (1 - t)))
        .add(p2.mul(Math.pow(t, 2)));
    return p;
},

async bezierUniformMove(pos: cc.Vec2, mid: cc.Vec2, target: cc.Vec2, node: cc.Node, duration: number) {
    let samples: { t: number, len: number }[] = [];
    let totalLen = 0;
    let prev = this.bezier(pos, mid, target, 0);
    for (let i = 1; i <= 100; i++) {
        let t = i / 100;
        let pt = this.bezier(pos, mid, target, t);
        let d = prev.sub(pt).mag();
        totalLen += d;
        samples.push({ t, len: totalLen });
        prev = pt;
    }

    const getTByLen = (curLen: number) => {
        for (let i = 0; i < samples.length; i++) {
            if (samples[i].len >= curLen) {
                // 线性插值
                let prev = samples[i - 1] || { t: 0, len: 0 };
                let ratio = (curLen - prev.len) / (samples[i].len - prev.len);
                return prev.t + (samples[i].t - prev.t) * ratio;
            }
        }
        return 1;
    }

    await asyncMgr.tween(cc.tween(node).to(duration, { position: target }, {
        progress: (start, end, current, ratio) => {
            const cl = totalLen * ratio;
            const t = getTByLen(cl);
            const result = this.bezier(pos, mid, target, t);
            return result;
        }
    }))
}

2.4.x更新lib库