Cocos Engine 技术

Cocos2d-x: 跨平台，C++，Lua，JavaScript cocos2d-x cocos2d-x-lua cocos2d-x-js cocos2d-x 3.x 有对3D的支持，但是在3D项目方面，不如Cocos Creator 3 稳定

Cocos Creator: 2D，3D 1.x 只支持2D 2.x 引入TypeScript 3.x 完整2D/3D游戏开发 3.8 - LTS

Cocos Runtime: 支持内容免安装即可运行的商业化SDK （集成SDK后，应用可作为小游戏宿主）

脚本编写

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ButtonHandler')
export class ButtonHandler extends Component {

    startCrashWatcher() {
        // This function is intentionally left empty to simulate a crash.
        // In a real scenario, you would implement logic here that could potentially cause a crash.
        console.log("Crash watcher started.");
    }

    onClickStartCrashWatcher(event: cc.Event, customEventData: string) {
        this.startCrashWatcher();
        console.log("Button clicked: Crash watcher started.");
    }
}

构建

为了完成Cocos引擎插件开发(包括C++和JavaScript, 运行在WebGL平台),我需要深入理解并熟悉Cocos引擎的完整架构,特别是编译器,运行时环境,语言,层次结构,语言之间的互操作机制与支持. 我已了解WebGL应用(Unity Engine)的基本框架. 请仿照此,帮我介绍Cocos引擎构建的WebGL应用的框架全貌.

框架 ( ChatGPT 推测视角)

0 | WebGL 应用的容器三件套

概念	浏览器态	微信/抖音小游戏态	备注
脚本运行时	V8/SpiderMonkey	QuickJS 裁剪版	Creator 主逻辑全部在 TS/JS
渲染容器	<canvas> + WebGL(2)	小游戏 WebGL 上下文	Cocos WebGL 封装与 Unity 类似
系统调用网关	Web API	wx.* / tt.*	Creator 引擎在 JS 层适配

与 Unity 相同：单线程事件循环、沙箱文件系统、通过 JSBridge 取得原生能力。

---

1 | 涉猎语言与职责

语言	典型产物	在构建链的角色
TypeScript / JavaScript	*.ts ➜ *.js	游戏脚本、编辑器扩展
C++	engine/core/*.cpp	渲染、物理、资源系统
WebAssembly (binary)	cocos2d.wasm / spine.wasm	C++ 核心在浏览器侧的执行体
Glue JS	cocos2d-js.js、各模块 *.js	加载 Wasm、映射 GL/FS/Pthreads API
HTML	index.html	宿主页面，插入 Application/Settings 脚本

2 | 编译工具链

C++ ─► Clang/LLVM ─► wasm32
              ▲
TypeScript ─► tsc
              ▼               (via CMake + Emscripten)
        jsb-bindings  ←─  CodeGen.py (Auto JSB)

• Emscripten 负责把 C++ 目标产出 .wasm + *.js 并注入 POSIX/GL shim。
• JSB CodeGen：扫描 engine/bindings/ 配置，生成 auto/jsb_*.cpp，再同一并编译到 Wasm 里。

---

3 | 运行时调用链

graph TD
A[index.html] --> B(application.js)
B --> C{下载 settings.json + wasm + bundles}
C --> D[WebAssembly.instantiateStreaming]
D --> E[cocos::Application]
E --> F[jsb::ScriptEngine <==> V8]
F --> G[scripts  TS→JS ]
G -->|通过 jsb 调度| H(WebGL / Audio / FS)

• Glue JS 完成 Wasm 实例化并创建全局 cc 命名空间。
• C++ → JS：使用 se::ScriptEngine::evalString；JS → C++：自动/手动 JSB 绑定函数指针。
• 资源加载由 AssetManager 驱动；若资源为 .wasm/.mem，需要在脚本侧手动注册 ArrayBuffer 下载器。

4| 核心模块速览

层级	关键文件	主要职责	向下调用
Boot	application.js	CDN 路径映射、解压、进度条	Glue
Glue / Engine JS	cocos2d-js.js	注册 cc.*、映射 gl*, sys.*、堆管理	Wasm / Browser
Wasm VM	spine.wasm / box2d.wasm	渲染管线、物理、内存池	Glue
浏览器 API	WebGL/WebAudio	GPU/音频/输入	–

5 | JS ↔ C++ 互操作（JSB）

• JS 侧可直接 import { JSB } from 'cc/env'; JSB.reflection.callStaticMethod(...)；

底层通过 jni 或 Obj-C runtime 实现。

• 性能敏感场景推荐 Auto-Binding：一键生成 jsb_*.cpp，自动完成功能转发、类型封装，避免 JNI 反射性能坑。

6 | 多线程、文件系统与扩展

• Pthreads：Creator 3.x 支持 cocos2d.worker.js，需浏览器端 COOP/COEP 安全头。
• Virtual FS：内置 MEMFS + IndexedDB；支持自定义加载其他 Wasm 模块并挂载到泊位路径（见官方示例代码行 33-36）。
• Build Hook：通过扩展 Build Process Hooks 或自定义 build-templates/ 注入自家监控代码，所有插件参数在 options.packages[...] 中暴露。

8 | Unity-WebGL vs Cocos-WebGL

维度	Unity	Cocos Creator
脚本层	C# (IL2CPP)	TS/JS (原生语法)
引擎核心	C++ Runtime	C++ cocos2d-x core
Web 产物	*.framework.js + *.wasm	application.js + cocos2d-js.js + *.wasm
资源系统	*.data 统一包	Bundle/AssetManager 分包
插件注入	*.jslib	Build Hook / JSB / Editor Extension
包体	5-20 MB	3-15 MB（裁剪后）

框架 - 文档介绍

Cocos Creator 拥有两套引擎内核，C++ 内核 和 TypeScript 内核。C++ 内核用于原生平台，TypeScript 内核用于 Web 和小游戏平台。 在引擎内核之上，是用 TypeScript 编写的引擎框架层，用以统一两套内核的差异，让开发更便捷。

插件开发

语言互操作

Native插件

JS - WebAssembly