{ "schemaVersion": "0.11.0", "canonical": "https://www.pystone.net/notes/cocos-engine-tech/", "atlas": "https://www.pystone.net/?node=cocos-engine-tech#knowledge-atlas", "markdown": "https://www.pystone.net/notes/cocos-engine-tech.md", "context": "https://www.pystone.net/notes/cocos-engine-tech.context.json", "knowledgeVersion": "224c990773de.5fa8af6e39fa", "build": { "siteCommit": "224c990773de166d23a886306577dd90379529ce", "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a", "builtAt": "1970-01-01T00:00:00.000Z", "version": "224c990773de.5fa8af6e39fa" }, "id": "note:cocos-engine-tech", "slug": "cocos-engine-tech", "title": "Cocos Engine 技术", "type": "note", "visibility": "public", "idStability": "rename-stable", "author": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "publisher": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "aliases": [], "summary": "Cocos Engine 技术", "contentRole": "unspecified", "isMoc": false, "mocRecognition": "none", "generated": false, "attribution": "unspecified", "domain": "10-计算机、信息技术与工程", "tags": [], "mocs": [], "contentHash": "9484ae958f6983f31599a33635b779f8653306c1d981aa56ed558e40c97a7060", "assets": [ { "reference": "assets/image-20250701184651274.png", "url": "/media/6a94b6be7dde18af132a.png", "mediaType": "image/png", "contentHash": "6a94b6be7dde18af132a5bb21ad1f024164de458566e21b61961b99101554a25", "byteLength": 38855, "width": 1176, "height": 450 } ], "headings": [ { "depth": 1, "text": "Cocos Engine 技术", "anchor": "cocos-engine-技术", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#cocos-engine-%E6%8A%80%E6%9C%AF" }, { "depth": 2, "text": "脚本编写", "anchor": "脚本编写", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#%E8%84%9A%E6%9C%AC%E7%BC%96%E5%86%99" }, { "depth": 2, "text": "构建", "anchor": "构建", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#%E6%9E%84%E5%BB%BA" }, { "depth": 2, "text": "框架 ( ChatGPT 推测视角)", "anchor": "框架-chatgpt-推测视角", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#%E6%A1%86%E6%9E%B6-chatgpt-%E6%8E%A8%E6%B5%8B%E8%A7%86%E8%A7%92" }, { "depth": 2, "text": "0 | WebGL 应用的容器三件套", "anchor": "0-webgl-应用的容器三件套", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#0-webgl-%E5%BA%94%E7%94%A8%E7%9A%84%E5%AE%B9%E5%99%A8%E4%B8%89%E4%BB%B6%E5%A5%97" }, { "depth": 2, "text": "1 | 涉猎语言与职责", "anchor": "1-涉猎语言与职责", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#1-%E6%B6%89%E7%8C%8E%E8%AF%AD%E8%A8%80%E4%B8%8E%E8%81%8C%E8%B4%A3" }, { "depth": 2, "text": "2 | 编译工具链", "anchor": "2-编译工具链", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#2-%E7%BC%96%E8%AF%91%E5%B7%A5%E5%85%B7%E9%93%BE" }, { "depth": 2, "text": "3 | 运行时调用链", "anchor": "3-运行时调用链", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#3-%E8%BF%90%E8%A1%8C%E6%97%B6%E8%B0%83%E7%94%A8%E9%93%BE" }, { "depth": 2, "text": "4| 核心模块速览", "anchor": "4-核心模块速览", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#4-%E6%A0%B8%E5%BF%83%E6%A8%A1%E5%9D%97%E9%80%9F%E8%A7%88" }, { "depth": 2, "text": "5 | JS ↔ C++ 互操作（JSB）", "anchor": "5-js-c-互操作jsb", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#5-js-c-%E4%BA%92%E6%93%8D%E4%BD%9Cjsb" }, { "depth": 2, "text": "6 | 多线程、文件系统与扩展", "anchor": "6-多线程文件系统与扩展", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#6-%E5%A4%9A%E7%BA%BF%E7%A8%8B%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F%E4%B8%8E%E6%89%A9%E5%B1%95" }, { "depth": 2, "text": "8 | Unity-WebGL vs Cocos-WebGL", "anchor": "8-unity-webgl-vs-cocos-webgl", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#8-unity-webgl-vs-cocos-webgl" }, { "depth": 2, "text": "框架 - 文档介绍", "anchor": "框架---文档介绍", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#%E6%A1%86%E6%9E%B6---%E6%96%87%E6%A1%A3%E4%BB%8B%E7%BB%8D" }, { "depth": 2, "text": "插件开发", "anchor": "插件开发", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91" }, { "depth": 2, "text": "语言互操作", "anchor": "语言互操作", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#%E8%AF%AD%E8%A8%80%E4%BA%92%E6%93%8D%E4%BD%9C" }, { "depth": 2, "text": "Native插件", "anchor": "native插件", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#native%E6%8F%92%E4%BB%B6" }, { "depth": 2, "text": "JS - WebAssembly", "anchor": "js---webassembly", "citation": "https://www.pystone.net/notes/cocos-engine-tech/#js---webassembly" } ], "claims": [], "outgoing": [], "incoming": [ { "id": "note:game-graphics-and-runtime", "title": "游戏图形与运行时", "url": "https://www.pystone.net/notes/game-graphics-and-runtime/", "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas", "label": "游戏图形与运行时", "origin": "explicit", "humanReviewed": true, "context": "WebGL中的“Cocos Engine 技术”导航项", "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl" } ], "contentMarkdown": "# Cocos Engine 技术\n\n\nCocos2d-x: 跨平台，C++，Lua，JavaScript\ncocos2d-x\ncocos2d-x-lua\ncocos2d-x-js\ncocos2d-x 3.x 有对3D的支持，但是在3D项目方面，不如Cocos Creator 3 稳定\n\nCocos Creator: 2D，3D\n1.x 只支持2D\n2.x 引入TypeScript\n3.x 完整2D/3D游戏开发\n3.8 - LTS\n\nCocos Runtime: 支持内容免安装即可运行的商业化SDK （集成SDK后，应用可作为小游戏宿主）\n\n## 脚本编写\n```ts\nimport { _decorator, Component, Node } from 'cc';\nconst { ccclass, property } = _decorator;\n\n@ccclass('ButtonHandler')\nexport class ButtonHandler extends Component {\n\n startCrashWatcher() {\n // This function is intentionally left empty to simulate a crash.\n // In a real scenario, you would implement logic here that could potentially cause a crash.\n console.log(\"Crash watcher started.\");\n }\n\n onClickStartCrashWatcher(event: cc.Event, customEventData: string) {\n this.startCrashWatcher();\n console.log(\"Button clicked: Crash watcher started.\");\n }\n}\n\n```\n\n## 构建\n\n```text\n为了完成Cocos引擎插件开发(包括C++和JavaScript, 运行在WebGL平台),我需要深入理解并熟悉Cocos引擎的完整架构,特别是编译器,运行时环境,语言,层次结构,语言之间的互操作机制与支持. 我已了解WebGL应用(Unity Engine)的基本框架. 请仿照此,帮我介绍Cocos引擎构建的WebGL应用的框架全貌.\n```\n\n## 框架 ( ChatGPT 推测视角)\n\n## 0 | WebGL 应用的容器三件套\n\n| 概念 | 浏览器态 | 微信/抖音小游戏态 | 备注 |\n| ---------- | --------------------- | --------------- | ------------------------ |\n| **脚本运行时** | V8/SpiderMonkey | QuickJS 裁剪版 | Creator 主逻辑全部在 TS/JS |\n| **渲染容器** | `` + WebGL(2) | 小游戏 WebGL 上下文 | Cocos WebGL 封装与 Unity 类似 |\n| **系统调用网关** | Web API | `wx.*` / `tt.*` | Creator 引擎在 JS 层适配 |\n\n> 与 Unity 相同：单线程事件循环、沙箱文件系统、通过 JSBridge 取得原生能力。\n\n---\n\n## 1 | 涉猎语言与职责\n\n| 语言 | 典型产物 | 在构建链的角色 |\n| --------------------------- | ----------------------------- | ------------------------------- |\n| **TypeScript / JavaScript** | `*.ts` ➜ `*.js` | 游戏脚本、编辑器扩展 |\n| **C++** | `engine/core/*.cpp` | 渲染、物理、资源系统 |\n| **WebAssembly (binary)** | `cocos2d.wasm` / `spine.wasm` | C++ 核心在浏览器侧的执行体 |\n| **Glue JS** | `cocos2d-js.js`、各模块 `*.js` | 加载 Wasm、映射 GL/FS/Pthreads API |\n| **HTML** | `index.html` | 宿主页面，插入 Application/Settings 脚本 |\n\n## 2 | 编译工具链\n\n```text\nC++ ─► Clang/LLVM ─► wasm32\n ▲\nTypeScript ─► tsc\n ▼ (via CMake + Emscripten)\n jsb-bindings ←─ CodeGen.py (Auto JSB)\n```\n\n* **Emscripten** 负责把 C++ 目标产出 `.wasm + *.js` 并注入 POSIX/GL shim。\n* **JSB CodeGen**：扫描 `engine/bindings/` 配置，生成 `auto/jsb_*.cpp`，再同一并编译到 Wasm 里。\n\n---\n\n## 3 | 运行时调用链\n\n```mermaid\n\ngraph TD\nA[index.html] --> B(application.js)\nB --> C{下载 settings.json + wasm + bundles}\nC --> D[WebAssembly.instantiateStreaming]\nD --> E[cocos::Application]\nE --> F[jsb::ScriptEngine <==> V8]\nF --> G[scripts TS→JS ]\nG -->|通过 jsb 调度| H(WebGL / Audio / FS)\n\n```\n\n* **Glue JS** 完成 Wasm 实例化并创建全局 `cc` 命名空间。\n* C++ → JS：使用 **`se::ScriptEngine::evalString`**；JS → C++：自动/手动 JSB 绑定函数指针。\n* 资源加载由 **AssetManager** 驱动；若资源为 `.wasm/.mem`，需要在脚本侧手动注册 ArrayBuffer 下载器。\n\n\n## 4| 核心模块速览\n\n| 层级 | 关键文件 | 主要职责 | 向下调用 |\n| -------------------- | --------------------------- | ------------------------------- | -------------- |\n| **Boot** | `application.js` | CDN 路径映射、解压、进度条 | Glue |\n| **Glue / Engine JS** | `cocos2d-js.js` | 注册 `cc.*`、映射 `gl*`, `sys.*`、堆管理 | Wasm / Browser |\n| **Wasm VM** | `spine.wasm` / `box2d.wasm` | 渲染管线、物理、内存池 | Glue |\n| **浏览器 API** | WebGL/WebAudio | GPU/音频/输入 | – |\n\n## 5 | JS ↔ C++ 互操作（JSB）\n\n* JS 侧可直接\n`import { JSB } from 'cc/env'; JSB.reflection.callStaticMethod(...)`；\n\n底层通过 `jni` 或 `Obj-C runtime` 实现。\n* 性能敏感场景推荐 **Auto-Binding**：一键生成 `jsb_*.cpp`，自动完成功能转发、类型封装，避免 JNI 反射性能坑。\n\n## 6 | 多线程、文件系统与扩展\n\n* **Pthreads**：Creator 3.x 支持 `cocos2d.worker.js`，需浏览器端 COOP/COEP 安全头。\n* **Virtual FS**：内置 **MEMFS + IndexedDB**；支持自定义加载其他 Wasm 模块并挂载到泊位路径（见官方示例代码行 33-36）。\n* **Build Hook**：通过扩展 **Build Process Hooks** 或自定义 `build-templates/` 注入自家监控代码，所有插件参数在 `options.packages[...]` 中暴露。\n\n## 8 | Unity-WebGL vs Cocos-WebGL\n\n| 维度 | **Unity** | **Cocos Creator** |\n| ------ | ------------------------- | ----------------------------------------- |\n| 脚本层 | C# (IL2CPP) | TS/JS (原生语法) |\n| 引擎核心 | C++ Runtime | C++ cocos2d-x core |\n| Web 产物 | `*.framework.js + *.wasm` | `application.js + cocos2d-js.js + *.wasm` |\n| 资源系统 | `*.data` 统一包 | Bundle/AssetManager 分包 |\n| 插件注入 | `*.jslib` | Build Hook / JSB / Editor Extension |\n| 包体 | 5-20 MB | 3-15 MB（裁剪后） |\n\n## 框架 - 文档介绍\n\nCocos Creator 拥有两套引擎内核，C++ 内核 和 TypeScript 内核。C++ 内核用于原生平台，TypeScript 内核用于 Web 和小游戏平台。 在引擎内核之上，是用 TypeScript 编写的引擎框架层，用以统一两套内核的差异，让开发更便捷。\n\n![](assets/image-20250701184651274.png)\n\n\n## 插件开发\n\n## 语言互操作\n\n## Native插件\n\n## JS - WebAssembly\n" }