---
title: "Cocos Engine 技术"
author: "Perrin Yong"
author_profile: https://www.pystone.net/profile/
published_by: "Perrin Yong"
canonical: https://www.pystone.net/notes/cocos-engine-tech/
type: note
content_role: unspecified
visibility: public
id_stability: rename-stable
source_path: "10-计算机、信息技术与工程/05-游戏图形与运行时/WebGL/Cocos Engine 技术.md"
content_hash: 9484ae958f6983f31599a33635b779f8653306c1d981aa56ed558e40c97a7060
knowledge_version: 224c990773de.5fa8af6e39fa
site_commit: 224c990773de166d23a886306577dd90379529ce
notes_commit: 5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a
---
# 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后，应用可作为小游戏宿主）

## 脚本编写
```ts
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.");
    }
}

```

## 构建

```text
为了完成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 | 编译工具链

```text
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 | 运行时调用链

```mermaid

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 编写的引擎框架层，用以统一两套内核的差异，让开发更便捷。

![assets/image-20250701184651274.png](/media/6a94b6be7dde18af132a.png)


## 插件开发

## 语言互操作

## Native插件

## JS - WebAssembly