
> **学习时间**: 2026 年 3 月 14 日
> **文档来源**: https://docs.cocos.com/cocos2d-x/v4/manual/zh/
> **文档版本**: Cocos2d-x v4 用户手册 Q3 2019 R.1
一、文档目录结构
📚 完整章节
| 章节 | 子章节 |
|------|--------|
| **一、新手入门** | v4 升级指南、范例、API 变更、迁移指南 |
| **二、了解引擎** | 引擎优势、学习资源、获取帮助、参与开发 |
| **三、基本概念** | 导演、场景、精灵、动作、序列、节点关系、日志 |
| **四、基本功能** | 精灵、动作、场景、UI 组件 |
| **五、进阶内容** | 特殊节点、事件分发、3D 支持、脚本、物理引擎、音频、高级话题 |
| **六、环境与工具** | 环境搭建、引擎工具、常见问题 |
二、核心概念详解
2.1 Director (导演)
**概念**:导演就像电影导演一样,控制着游戏的方方面面。
**职责**:
-
控制游戏流程
-
管理场景切换
-
处理游戏循环
-
协调各个组件
**v4 API 变更**:
```cpp
// ❌ 已废弃
CC_DEPRECATED_ATTRIBUTE static Director* sharedDirector();
void setDepthTest(bool on);
// ✅ 新方式
Director::getInstance();
Director::getInstance()->getRenderer()->setDepthTest(true);
```
2.2 Scene (场景)
**概念**:Scene 是一个容器,包含游戏所需的 Sprites、Labels、Nodes 和其他对象。
**特点**:
-
场景是游戏的独立单元
-
每个场景包含完整的游戏逻辑
-
可以包含多个子节点
**场景图 (Scene Graph)**:
```
Scene (场景)
└── Layer (层)
├── Sprite (精灵)
├── Node (节点)
│ └── Sprite (精灵)
└── UI (界面)
```
2.3 Sprite (精灵)
**概念**:Sprite 是一个 2D 图像,可以通过改变其属性来进行动画或变换。
**用途**:
-
游戏角色
-
敌人
-
道具
-
背景元素
**创建方法**:
```cpp
// 从图片创建
auto sprite = Sprite::create("player.png");
// 从精灵帧缓存创建
auto sprite = Sprite::createWithSpriteFrameName("player_01.png");
// 从纹理创建
auto texture = Director::getInstance()->getTextureCache()->addImage("texture.png");
auto sprite = Sprite::createWithTexture(texture);
```
2.4 Node (节点)
**核心特性**:
-
**变换**: 位置、旋转、缩放
-
**锚点**: 定位参考点 (Anchor Point)
-
**Z 顺序**: 渲染层级
-
**子节点**: 树形层级关系
-
**标签/名称**: 节点标识
-
**动作支持**: 执行 Action
-
**事件处理**: 触摸、键盘等
**节点关系**:
```cpp
// 添加子节点
parent->addChild(child);
parent->addChild(child, zOrder);
parent->addChild(child, zOrder, tag);
// 获取子节点
auto child = parent->getChildByTag(tag);
auto child = parent->getChildByName("name");
// 移除节点
node->removeFromParent();
parent->removeChild(child);
parent->removeAllChildren();
```
2.5 Action (动作)
**动作类型**:
| 类型 | 说明 | 示例 |
|------|------|------|
| **即时动作** | 立即完成 | `Show`, `Hide`, `FlipX`, `FlipY` |
| **间隔动作** | 持续一段时间 | `MoveTo`, `RotateBy`, `ScaleTo` |
| **缓动动作** | 带缓动效果 | `EaseIn`, `EaseOut`, `EaseElastic` |
| **复合动作** | 组合其他动作 | `Sequence`, `Spawn`, `Repeat` |
**基本动作示例**:
```cpp
// 移动
auto moveTo = MoveTo::create(2.0f, Vec2(100, 100));
auto moveBy = MoveBy::create(2.0f, Vec2(50, 50));
// 旋转
auto rotateTo = RotateTo::create(2.0f, 90.0f);
auto rotateBy = RotateBy::create(2.0f, 45.0f);
// 缩放
auto scaleTo = ScaleTo::create(2.0f, 2.0f);
auto scaleBy = ScaleBy::create(2.0f, 0.5f);
// 透明度
auto fadeIn = FadeIn::create(1.0f);
auto fadeOut = FadeOut::create(1.0f);
// 变色
auto tintTo = TintTo::create(2.0f, 255, 0, 0);
auto tintBy = TintBy::create(2.0f, -50, -50, -50);
```
2.6 Sequence (序列动作)
**概念 **:多个 `Action` 对象按**指定顺序依次执行**。
**示例**:
```cpp
auto mySprite = Node::create();
auto moveTo1 = MoveTo::create(2, Vec2(50,10));
auto moveBy1 = MoveBy::create(2, Vec2(100,10));
auto moveTo2 = MoveTo::create(2, Vec2(150,10));
auto delay = DelayTime::create(1);
// 按顺序执行:moveTo1 → delay → moveBy1 → delay.clone() → moveTo2
mySprite->runAction(Sequence::create(moveTo1, delay, moveBy1, delay.clone(),
moveTo2, nullptr));
```
**执行流程**:
```
moveTo1 (2s) → delay (1s) → moveBy1 (2s) → delay (1s) → moveTo2 (2s)
```
2.7 Spawn (并行动作)
**概念 **:多个 `Action` 对象**同时执行**。
**示例**:
```cpp
auto myNode = Node::create();
auto moveTo1 = MoveTo::create(2, Vec2(50,10));
auto moveBy1 = MoveBy::create(2, Vec2(100,10));
auto moveTo2 = MoveTo::create(2, Vec2(150,10));
// 同时执行所有动作
myNode->runAction(Spawn::create(moveTo1, moveBy1, moveTo2, nullptr));
```
**执行流程**:
```
moveTo1 (2s) ──┐
moveBy1 (2s) ──┼── 同时开始,独立执行
moveTo2 (2s) ──┘
```
2.8 动作最佳实践
-
**动作复用**: 使用 `clone()` 方法复用动作对象
-
**终止符**: `create()` 方法必须以 `nullptr` 结尾
-
**组合使用**: 可以在 Sequence 中嵌套 Spawn,或在 Spawn 中嵌套 Sequence
-
**反向执行**: Sequence 支持 `reverse()` 方法反向执行
-
**时间规划**: Spawn 中各动作独立计时,需考虑协调
三、事件分发机制
3.1 五种监听器类型
| 监听器类型 | 用途 |
|-----------|------|
| `EventListenerTouchOneByOne` | 单点触摸,逐个处理 |
| `EventListenerTouchAllAtOnce` | 多点触摸,一次性处理所有触摸点 |
| `EventListenerKeyboard` | 键盘输入事件 |
| `EventListenerMouse` | 鼠标事件(移动、滚动、按键) |
| `EventListenerCustom` | 自定义事件监听 |
3.2 事件优先级系统
-
**数值越小,优先级越高**
-
优先级为负数的监听器会先于正数优先级被触发
-
相同优先级的监听器按注册顺序触发
```cpp
auto listener = EventListenerTouchOneByOne::create();
listener->setPriority(1); // 数字越小优先级越高
```
3.3 触摸事件示例
```cpp
auto touchListener = EventListenerTouchOneByOne::create();
touchListener->onTouchBegan = \[\](Touch* touch, Event* event) {
CCLOG("Touch began at: %f, %f", touch->getLocation().x, touch->getLocation().y);
return true; // 返回 true 表示继续处理触摸
};
touchListener->onTouchMoved = \[\](Touch* touch, Event* event) {
CCLOG("Touch moved");
};
touchListener->onTouchEnded = \[\](Touch* touch, Event* event) {
CCLOG("Touch ended");
};
_eventDispatcher->addEventListenerWithSceneGraphPriority(touchListener, this);
```
3.4 键盘事件示例
```cpp
auto keyboardListener = EventListenerKeyboard::create();
keyboardListener->onKeyPressed = \[\](EventKeyboard::KeyCode keyCode, Event* event) {
CCLOG("Key pressed: %d", keyCode);
};
keyboardListener->onKeyReleased = \[\](EventKeyboard::KeyCode keyCode, Event* event) {
CCLOG("Key released: %d", keyCode);
};
_eventDispatcher->addEventListenerWithSceneGraphPriority(keyboardListener, this);
```
3.5 自定义事件示例
```cpp
// 创建自定义事件监听器
auto customListener = EventListenerCustom::create("my_custom_event",
\[\](EventCustom* event) {
CCLOG("Custom event triggered!");
});
_eventDispatcher->addEventListenerWithSceneGraphPriority(customListener, this);
// 触发自定义事件
EventCustom customEvent("my_custom_event");
_eventDispatcher->dispatchEvent(&customEvent);
```
3.6 移除事件监听器
```cpp
// 移除特定监听器
_eventDispatcher->removeEventListener(touchListener);
// 移除所有监听器
_eventDispatcher->removeAllEventListeners();
// 移除某类事件的所有监听器
_eventDispatcher->removeCustomEventListeners("my_custom_event");
```
四、UI 组件
4.1 基本 UI 控件
| 控件 | 类名 | 说明 |
|------|------|------|
| 标签 | `Label` | 文本标签 (TTF/BMFont) |
| 菜单 | `Menu` / `MenuItem` | 菜单系统 |
| 按钮 | `Button` | 按钮控件 |
| 复选框 | `CheckBox` | 复选框 |
| 进度条 | `LoadingBar` | 进度条 |
| 滑动条 | `Slider` | 滑动条 |
| 文本框 | `TextField` | 文本输入框 |
| 滚动视图 | `ScrollView` | 滚动容器 |
| 列表视图 | `ListView` | 列表容器 |
| 分页视图 | `PageView` | 分页容器 |
4.2 Label 创建方法
```cpp
// TTF 字体
auto label = Label::createWithTTF("Hello World", "fonts/arial.ttf", 24);
// 系统字体
auto label = Label::createWithSystemFont("Hello World", "Arial", 24);
// BMFont
auto label = Label::createWithBMFont("fonts/bitmapFont.fnt", "Hello World");
```
4.3 Button 使用示例
```cpp
auto button = Button::create("button_normal.png", "button_pressed.png");
button->setTitleText("Click Me");
button->addClickEventListener(\[\](Ref* sender) {
CCLOG("Button clicked!");
});
this->addChild(button);
```
五、3D 功能
5.1 Sprite3D (3D 精灵)
```cpp
auto sprite3d = Sprite3D::create("orc.c3b");
sprite3d->setPosition3D(Vec3(0.0f, 0.0f, 0.0f));
sprite3d->setRotation3D(Vec3(0.0f, 180.0f, 0.0f));
```
5.2 Animation3D (3D 动画)
```cpp
auto animation = Animation3D::create("orc.c3b");
if (animation)
{
auto animate = Animate3D::create(animation);
sprite3d->runAction(RepeatForever::create(animate));
}
```
5.3 Billboard (广告牌)
广告牌是一种特殊的 3D 精灵,**总是面向摄像机**。
**创建方式**:
```cpp
// 面向摄像机所在点
auto billboard = BillBoard::create("Blue_Front1.png", BillBoard::Mode::VIEW_POINT_ORIENTED);
// 面向摄像机所在平面 (XOY 平面)
auto billboard = BillBoard::create("Blue_Front1.png", BillBoard::Mode::VIEW_PLANE_ORIENTED);
```
**两种模式对比**:
| 模式 | 说明 |
|------|------|
| `VIEW_POINT_ORIENTED` | 广告牌面向摄像机所在的点 |
| `VIEW_PLANE_ORIENTED` | 广告牌面向摄像机所在的平面 |
5.4 PUParticleSystem3D (3D 粒子系统)
支持 **Particle Universe** 编辑器创建的 `.pu` 格式粒子文件。
**创建方式**:
```cpp
// 方式 1:传入粒子文件和材质文件 (推荐)
auto ps = PUParticleSystem3D::create("lineStreak.pu", "pu_mediapack_01.material");
ps->startParticleSystem();
this->addChild(ps);
// 方式 2:仅传入粒子文件
auto ps = PUParticleSystem3D::create("electricBeamSystem.pu");
ps->startParticleSystem();
this->addChild(ps);
```
**粒子控制方法**:
| 方法 | 说明 |
|------|------|
| `startParticleSystem()` | 开始粒子系统 |
| `stopParticleSystem()` | 停止粒子系统 |
| `pauseParticleSystem()` | 暂停粒子系统 |
| `resumeParticleSystem()` | 恢复粒子系统 |
| `getAliveParticleCount()` | 获取存活粒子总数 |
**将粒子绑定到 3D 模型**:
```cpp
auto sprite3d = Sprite3D::create("orc.c3b");
// ... 添加动画 ...
// 创建粒子并绑定到模型的特定节点
auto handler = PUParticleSystem3D::create("lightningBolt.pu");
handler->startParticleSystem();
sprite3d->getAttachNode("Bip001 L Hand")->addChild(handler);
this->addChild(sprite3d);
```
六、着色器与材质
6.1 着色器概念
**着色器 **是运行在 **GPU** 上的程序,用于绘制不同的 Cocos2d-x 节点。
Cocos2d-x 使用 **OpenGL ES Shading Language v1.0** 作为着色器语言。
6.2 ProgramState (程序状态)
**ProgramState 对象包含两个重要内容**:
-
**Program(程序)**: 基本上就是着色器,包含顶点着色器和片段着色器
-
**State(状态)**: 着色器的 uniforms(统一变量)
**自定义着色器**:
```cpp
sprite->setProgramState(programState);
sprite3d->setProgramState(programState);
```
**设置 Uniforms**:
```cpp
auto mvpMatrixLocation = _programState->getUniformLocation("u_MVPMatrix");
const auto& projectionMat = Director::getInstance()->getMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
_programState->setUniform(mvpMatrixLocation, projectionMat.m, sizeof(projectionMat.m));
```
**使用回调设置 Uniform**:
```cpp
auto location = _programState->getUniformLocation("u_progress");
_programState->setCallbackUniform(location, \[\](backend::ProgramState *programState, backend::UniformLocation uniform)
{
float random = CCRANDOM_0_1();
programState->setUniform(uniform, &random, sizeof(random));
});
```
6.3 Material (材质)
**为什么需要材质**:
-
拥有多个纹理
-
支持多通道渲染
-
更多功能特性(光照、模糊等)
**材质文件结构**:
```glsl
material spaceship
{
technique normal
{
pass 0
{
shader
{
vertexShader = Shaders3D/3d_position_tex.vert
fragmentShader = Shaders3D/3d_color_tex.frag
u_color = 0.9,0.8,0.7
sampler u_sampler0
{
path = Sprite3DTest/boss.png
mipmap = true
wrapS = CLAMP
wrapT = CLAMP
}
}
renderState
{
cullFace = true
cullFaceSide = FRONT
depthTest = true
}
}
}
}
```
**使用材质**:
```cpp
Material* material = Material::createWithFilename("Materials/3d_effects.material");
sprite3d->setMaterial(material);
// 切换不同 Technique
material->setTechnique("normal");
```
6.4 Technique (技术)
-
可以定义多个 Technique,并给它们不同的名称
-
每个 Technique 可以有不同的渲染技术
-
运行时可使用 `Material::setTechnique(const std::string& name)` 更改
**实用场景**:
-
处理不同的光照组合
-
当对象远离相机时,使用低质量渲染技术
6.5 Pass (通道)
一个 Technique 可以有一个或多个 Pass(多通道渲染)。
**每个 Pass 包含**:
-
**RenderState**: GPU 状态信息(depthTest、cullFace、stencilTest 等)
-
**GLProgramState**: 着色器及其 uniforms
七、物理引擎
7.1 支持的物理引擎
-
**Box2D**: 2D 物理引擎 (C++)
-
**Chipmunk**: 轻量级 2D 物理引擎
7.2 物理系统功能
| 功能 | 说明 |
|------|------|
| **刚体模拟** | 动态、静态、运动学刚体 |
| **碰撞检测** | 碰撞形状、碰撞回调 |
| **物理查询** | 射线检测、区域检测 |
| **关节约束** | 各种物理关节 |
| **调试绘制** | 可视化物理世界 |
7.3 物理世界创建
```cpp
// 创建物理世界
auto physicsWorld = PhysicsWorld::create();
physicsWorld->setGravity(Vec2(0, -9.8f));
// 创建物理刚体
auto body = PhysicsBody::createBox(Size(50, 50));
body->setDynamic(true);
body->setGravityEnable(true);
// 将刚体附加到节点
auto sprite = Sprite::create("box.png");
sprite->setPhysicsBody(body);
```
7.4 碰撞检测
```cpp
// 创建碰撞监听器
auto contactListener = EventListenerPhysicsContact::create();
contactListener->onContactBegin = \[\](PhysicsContact& contact) {
CCLOG("Collision detected!");
return true;
};
_eventDispatcher->addEventListenerWithSceneGraphPriority(contactListener, this);
// 设置碰撞类别
body->setCategoryBitmask(0x01);
body->setCollisionBitmask(0x01);
body->setContactTestBitmask(0x01);
```
八、音频系统
8.1 音频功能
| 功能 | 说明 |
|------|------|
| **背景音乐** | 循环播放长音频 |
| **音效** | 短音频播放 |
| **3D 音效** | 空间音频 |
| **音量控制** | 独立控制 BGM/音效 |
| **录音功能** | 音频录制 |
8.2 音频使用示例
```cpp
#include "audio/include/AudioEngine.h"
using namespace experimental;
// 播放背景音乐
int bgmId = AudioEngine::play2d("music/bgm.mp3", true, 0.5f);
// 播放音效
int effectId = AudioEngine::play2d("sound/effect.wav");
// 音量控制
AudioEngine::setVolume(bgmId, 0.3f);
// 停止播放
AudioEngine::stop(bgmId);
// 停止所有
AudioEngine::stopAll();
```
九、v4 升级指南
9.1 Metal 渲染系统
**核心变化**:
-
Apple 平台采用 **Metal** 作为渲染引擎
-
性能提升高达 **10 倍** (3D 图形)
-
仅支持支持 Metal 的 iOS/macOS 设备
**渲染架构**:
```
Renderer/
├── backend/
│ ├── metal/ # Metal 渲染后端
│ └── opengl/ # OpenGL ES 渲染后端
└── shaders/ # 着色器文件
```
9.2 破坏性变更
Director 类移除接口
```cpp
// ❌ 已废弃
CC_DEPRECATED_ATTRIBUTE static Director* sharedDirector();
void setDepthTest(bool on);
void pushProjectionMatrix(size_t index);
// ✅ 新方式
Director::getInstance();
Director::getInstance()->getRenderer()->setDepthTest(true);
```
Texture2D 变更
```cpp
// ❌ 已废弃
Texture2D::PixelFormat::RGBA8888;
texture->getName(); // GLuint
// ✅ 新方式
backend::PixelFormat::RGBA8888;
backend::Texture2DBackend* _texture;
```
9.3 Shader 系统升级
-
新增 `GLProgramState`、`backend::ProgramState` 类
-
Metal 使用 **MSL** 着色器语言
-
使用 `glsl-optimizer` 转换 GLSL → MSL
-
着色器文件移至 `renderer/shaders/`
-
Uniform 和 Texture 需显式声明
9.4 CMake 构建系统
-
使用 CMake 构建**所有平台**
-
统一构建流程,简化跨平台开发
**平台运行方式**:
| 平台 | 运行方式 |
|------|----------|
| Mac | 使用 `cocos` 命令或 CMake |
| iOS | 使用 CMake 生成 Xcode 项目 |
| Android | 使用 `cocos` 命令或 Android Studio |
| Windows | 使用 `cocos` 命令或 CMake |
| Linux | 使用 `cocos` 命令或 CMake |
十、环境搭建
10.1 前置要求
| 平台 | 要求 |
|------|------|
| **Windows** | Windows 7+, Visual Studio 2015+, CMake 3.6+ |
| **macOS** | macOS 10.9+, Xcode 8+, CMake 3.6+ |
| **Linux** | Ubuntu 14.04+, GCC 4.9+, CMake 3.6+ |
| **Android** | Android Studio 3.0+, NDK r17+, JDK 8+ |
| **iOS** | Xcode 9+, iOS 8.0+ (Metal 支持设备) |
10.2 引擎安装
```bash
1. 下载引擎
git clone https://github.com/cocos2d/cocos2d-x.git
cd cocos2d-x
2. 下载依赖
python download-deps.py
3. 安装引擎
python setup.py
4. 刷新环境变量
source FILE_TO_SAVE_YOUR_SHELL_PROFILE
```
10.3 创建项目
```bash
创建 C++ 项目
cocos new MyGame -p com.mycompany.mygame -l cpp -d ./Projects
创建 Lua 项目
cocos new MyGame -p com.mycompany.mygame -l lua -d ./Projects
创建 JS 项目
cocos new MyGame -p com.mycompany.mygame -l js -d ./Projects
```
十一、性能优化
11.1 渲染优化
| 技术 | 说明 |
|------|------|
| **纹理压缩** | PVR/ETC1 格式 |
| **纹理图集** | SpriteFrameCache 合并纹理 |
| **批量渲染** | SpriteBatchNode |
| **自动合批** | 相同纹理自动合并绘制 |
| **剔除优化** | 视锥体剔除 |
11.2 内存优化
-
**资源加载**: 按需加载,及时释放
-
**对象池**: 复用频繁创建的对象
-
**纹理管理**: 统一纹理尺寸 (2 的幂次)
-
**音频管理**: 背景音乐与音效分离
11.3 CPU 优化
-
**减少 draw call**: 合并渲染批次
-
**缓存计算结果**: 避免重复计算
-
**使用对象池**: 减少内存分配
-
**Lua 性能**: 避免频繁创建 table
十二、学习资源
12.1 官方资源
| 资源 | 链接 |
|------|------|
| **GitHub** | https://github.com/cocos2d/cocos2d-x |
| **官方网站** | https://www.cocos.com/en/cocos2d-x |
| **API 文档** | https://docs.cocos2d-x.org/cocos2d-x/v4/en/api/ |
| **升级指南** | https://docs.cocos2d-x.org/cocos2d-x/v4/en/upgradeGuide/ |
| **论坛** | https://forum.cocosengine.org/ |
12.2 学习建议
-
**逐步学习**: 将游戏分解成小块,逐个攻克
-
**参考文档**: API Reference 和 cpp-tests 是最好的参考资料
-
**实践为主**: 安装 Cocos2d-x 后创建新项目开始开发
-
**阅读源码**: `cpp-tests` 包含完整的代码示例
十三、总结
13.1 Cocos2d-x v4 核心特性
| 特性 | 说明 |
|------|------|
| 🎯 **跨平台** | iOS/Android/Windows/macOS/Linux 全覆盖 |
| 🚀 **高性能** | Metal/OpenGL ES 双渲染后端 |
| 📝 **多语言** | C++/Lua/JavaScript 支持 |
| 🔧 **可扩展** | 模块化设计,易于定制 |
| 📚 **生态完善** | 丰富的文档和社区支持 |
| 💰 **开源免费** | MIT 许可证,商业友好 |
13.2 与 v3.x 的对比
| 对比项 | v3.x | v4 |
|--------|------|-----|
| **渲染后端** | OpenGL ES | Metal (Apple) / OpenGL ES |
| **构建系统** | 多套构建 | CMake 统一 |
| **Shader 语言** | GLSL | GLSL + MSL |
| **Texture2D** | OpenGL 纹理 | backend 抽象 |
| **Director API** | sharedDirector | getInstance |
13.3 官方建议
> ⚠️ **官方建议 **: 新项目优先使用 **Cocos Creator**,cocos2d-x 主要作为 Cocos Creator 1.x & 2.x 的基础框架继续维护。
> **学习完成时间**: 2026 年 3 月 14 日
> **文档版本**: Cocos2d-x v4 用户手册 Q3 2019 R.1
> **下一步**: 可将学习成果应用到实际项目中
*报告生成完毕* ✅