Cocos Creator 开发笔记

Posted on Edited on

开发环境构建

2.4.x 开发环境

插件安装

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:穿透触摸事件

调试

iOS

devtools://devtools/bundled/js_app.html?v8only=true&ws=127.0.0.1:6086/00010002-0003-4004-8005-000600070008

USB 端口映射

1
2
brew install libusbmuxd
iproxy 6086 6086

Android

  1. 构建项目。

  2. Android Studio 打开项目 build/jsb-default/frameworks/runtime-src/proj.android-studio。

  3. 使用外部 Android 设备运行项目。

  4. App 启动后，控制台输入：

    1
    adb logcat | grep "chrome-devtools"

  5. 从输出日志里拿到调试端口后执行：

    1
    adb forward tcp:5086 tcp:5086

  6. 浏览器打开：

    devtools://devtools/bundled/inspector.html?v8only=true&ws=0.0.0.0:5086/00010002-0003-4004-8005-000600070008

远程调试接口快照

1
http://{设备ip}:6086/json

微信小游戏（3.8）

微信云托管

构建资源托管

  • remote 资源放到静态资源储存中。

域名解析配置

  • 申请证书。
  • 微信云托管添加域名。
  • 选择证书。
  • SSL 证书控制台中上传证书。
  • 修改相应域名解析到 CNAME。

构建设置

打包发布

上传到开发版本

实用片段

匀速贝塞尔曲线

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
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 库

Android Firebase Crashlytics 上传符号表

1
2
3
4
5
6
7
8
9
10
firebaseCrashlytics {
    // Enable processing and uploading of native symbols to Crashlytics servers.
    // By default, this is disabled to improve build speeds.
    // This flag must be enabled to see properly-symbolicated native
    // stack traces in the Crashlytics dashboard.
    nativeSymbolUploadEnabled true
    strippedNativeLibsDir 'build/intermediates/stripped_native_libs/'
    unstrippedNativeLibsDir 'build/intermediates/merged_native_libs'
    mappingFileUploadEnabled true
}

VibeCoding

instructions

  • copilot-instructions.md 说明项目背景与协作约定，包括项目基于 Cocos Creator 2.4.15 和 TypeScript、移动端构建需兼容 Android Studio 与 Xcode，以及 commit 时默认只提交 staged 内容并使用简短中文提交信息。

  • development-standards.instructions.md 规定日常开发规范，重点包括按钮点击监听写法、@property 属性不做空值判断、多语言调用方式、动画统一使用 cc.tween，以及弹窗节点优先复用。

  • review.instructions.md 规定代码审查流程与检查项，主要包括只审查代码文件、跳过资源与场景文件，并重点检查是否符合开发规范、是否存在逻辑问题、空值处理、命名、死代码与性能风险。