夜雨聆风一、5 分钟看懂 MCP 是什么
MCP 是 Anthropic 在 2024 年底开放的协议标准，本质上是一个"AI 与外部工具之间的统一插座"。你可以把它想象成：
• 以前： 每个 AI 应用各自封装自己的工具调用接口，谁也对不上谁。 • 现在： AI 客户端（Claude、Cursor、Cline 等）只要支持 MCP，就能即插即用任何 MCP Server 暴露出来的工具。
具体到 Cocos Creator 场景，链路是这样的：
┌─────────────┐ JSON-RPC over HTTP ┌────────────────────┐ Editor API ┌──────────────────┐
│ Claude / │ ────────────────────► │ Cocos MCP Server │ ─────────────► │ Cocos Creator │
│ Cursor 等 │ │ （编辑器扩展插件） │ │ 3.8.8 编辑器 │
│ AI 客户端 │ ◄──────────────────── │ │ ◄───────────── │ │
└─────────────┘ 工具结果 / 数据 └────────────────────┘ 场景/节点/脚本 └──────────────────┘• AI 客户端：你日常聊天的窗口（Claude Code、Cursor、Cline 等）。 • MCP Server：以 Cocos 扩展插件的形式跑在编辑器里，对外暴露一组工具（如"创建节点"、"挂载组件"、"执行脚本"）。 • Cocos Creator 编辑器：真正干活的人，被 MCP Server 通过官方 Editor API 间接驱动。
知道这三层关系，后面所有配置都是水到渠成的事。
二、环境准备清单
开干之前，确认手头有这些东西：
三、第一步：把 MCP Server 装进 Cocos 项目
社区目前比较成熟的方案是 DaxianLee/cocos-mcp-server，它把 150+ 个细粒度工具融合成了 50 个高复用的核心工具，token 消耗砍掉一半，AI 调用成功率显著提升。我们就用它。
3.1 下载并放置插件
把 cocos-mcp-server 整个文件夹丢进项目根目录的 extensions/ 下，目录结构如下：
YourCocosProject/
├── assets/
├── extensions/
│ └── cocos-mcp-server/ ← 插件就放这里
│ ├── source/
│ ├── dist/
│ ├── package.json
│ └── ...
├── settings/
└── package.json如果项目里没有 extensions/ 目录，自己手动建一个就行。
3.2 在编辑器里激活插件
打开 Cocos Creator 3.8.8 → 顶部菜单 扩展（Extension） → 扩展管理器 → 项目页签下找到 cocos-mcp-server → 点击右侧开关启用。
tips: 如果进去后没有找到，可以点击右上角的刷新按钮，然后选择已安装扩展
启用后，菜单栏会多出一个 MCP Server 入口，点进去能看到一个控制面板：
┌──────────────────────────────────────┐
│ Cocos MCP Server 控制面板 │
├──────────────────────────────────────┤
│ 端口：[ 3000 ] │
│ 状态：● 已启动 │
│ 端点：http://127.0.0.1:3000/mcp │
│ │
│ [ 启动 ] [ 停止 ] [ 重启 ] │
└──────────────────────────────────────┘上面只是包含了面包上的部分内容，实际界面跟这个有出入
确认状态是"已启动"、端点能访问就行。如果 3000 端口被占用，改成 3001、3002 都可以，记住自己用的端口号。
3.3 一个让人少踩坑的细节
启动 MCP Server 之前，先打开一个场景。MCP 的很多工具（节点创建、组件挂载）都依赖"当前激活场景"上下文，没场景就调用，会反复抛 Scene not ready 报错。
四、第二步：把 AI 客户端连到 MCP Server
4.1 使用Claude Code CLI
打开终端，敲一行命令：
claude mcp add --transport http cocos-creator http://127.0.0.1:3000/mcp这里有三个参数要理解：
• --transport http：MCP 支持多种传输方式，Cocos 这边走的是 HTTP。• cocos-creator：给这个 MCP Server 起的本地别名，后面可以用claude mcp list看到。• URL：就是上一步控制面板里的端点。
作用域选择： Claude Code 支持三种作用域，按需挑：
local | ~/.claude.json | |
project | .mcp.json | |
user |
团队协作场景，强烈建议加 --scope project，让 .mcp.json 跟代码一起进仓库，新人 clone 完不用重新配。
验证连接：
claude mcp list
# 应该能看到 cocos-creator 在列表里，状态 connected五、第三步：摸清 AI 的"工具箱"
调教 AI 之前，得先知道它有什么牌打。DaxianLee 这套方案的 50 个工具按类别分布大致是：
scene_management | ||
scene_hierarchy | ||
scene_execution_control | ||
node_query | ||
node_lifecycle | ||
node_transform | ||
node_hierarchy | ||
node_clipboard | ||
记几个关键点就够了：AI 现在能看场景、能改场景、能跑代码。 这三件事就是"全自动生成核心逻辑"的物理基础。
六、第四步：用一个真实需求跑通"一键生成"
6.1 需求
"我要做一个 2D 飞机大战，玩家飞机用 WASD 移动，按空格发射子弹，子弹打到屏幕外自动销毁。帮我从零搭出来。"
放在传统流程下，这是一个至少 30 分钟的活：建场景、做飞机预制体、做子弹预制体、写 PlayerController、写 BulletController、写发射器、挂组件、调参数。
放在 MCP 加持的 AI 代理面前，是一次对话的事。
6.2 给 AI 的提示词（直接复用）
在客户端聊天框贴下面这段（注意根据项目实际情况微调资源名）：
我们的 Cocos Creator 3.8.8 项目已经连上了 MCP Server。
帮我完整实现一个 2D 飞机大战的基础玩法，要求：
1. 在 assets/scenes 下创建一个新场景 GameMain.scene 并打开。
2. 创建 Canvas，下面挂一个 Player 节点（用 cc.Sprite，颜色 #00FFFF 占位即可）。
3. 写一个 PlayerController.ts 组件挂到 Player 上：
- WASD 控制移动，速度 300。
- 按空格在 Player 当前位置实例化一个 Bullet 节点。
4. 写一个 BulletController.ts：
- 子弹每秒向上飞 600。
- 子弹 y 坐标超过 720 时自动销毁。
5. Bullet 不需要预制体，直接用代码创建带 cc.Sprite 的节点，颜色 #FFFF00。
6. 完成后保存场景，并通过 scene_execution_control 验证场景结构正确。
每一步执行前简要说明你要做什么，执行后报告结果。6.3 AI 会怎么干
接下来你会在客户端窗口看到 AI 像下面这样自动连续调用工具（节选）：
✓ 第 1 步：创建并打开 GameMain.scene
✓ 第 2 步：创建 PlayerController.ts 和 BulletController.ts 脚本
✓ 第 3 步：创建 Canvas 和 Player 节点
✓ 第 4 步：挂载 PlayerController 到 Player
✓ 第 5 步：保存场景并验证结构
整个过程你只需要做一件事：盯着屏幕看，必要时回一句"继续"或者说是“同意”操作。
6.4 生成出来的代码长啥样
AI 会生成出两个文件，大致结构如下（关键骨架）：
// assets/scripts/PlayerController.ts
import { _decorator, Component, Node, Vec3, input, Input, EventKeyboard, KeyCode, instantiate, Sprite, Color, UITransform } from'cc';
const { ccclass, property } = _decorator;
@ccclass('PlayerController')
exportclassPlayerControllerextendsComponent {
@property
speed: number = 300;
private _move = newVec3();
private _keys = newSet<number>();
onLoad() {
input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
input.on(Input.EventType.KEY_UP, this.onKeyUp, this);
}
onDestroy() {
input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this);
input.off(Input.EventType.KEY_UP, this.onKeyUp, this);
}
onKeyDown(event: EventKeyboard) {
switch (event.keyCode) {
caseKeyCode.KEY_W:
this._keyState.w = true;
break;
caseKeyCode.KEY_A:
this._keyState.a = true;
break;
caseKeyCode.KEY_S:
this._keyState.s = true;
break;
caseKeyCode.KEY_D:
this._keyState.d = true;
break;
caseKeyCode.SPACE:
this.fire();
break;
}
}
onKeyUp(event: EventKeyboard) {
switch (event.keyCode) {
caseKeyCode.KEY_W:
this._keyState.w = false;
break;
caseKeyCode.KEY_A:
this._keyState.a = false;
break;
caseKeyCode.KEY_S:
this._keyState.s = false;
break;
caseKeyCode.KEY_D:
this._keyState.d = false;
break;
}
}
update(deltaTime: number) {
this._moveDir.set(0, 0, 0);
if (this._keyState.w) this._moveDir.y += 1;
if (this._keyState.s) this._moveDir.y -= 1;
if (this._keyState.a) this._moveDir.x -= 1;
if (this._keyState.d) this._moveDir.x += 1;
if (this._moveDir.lengthSqr() > 0) {
this._moveDir.normalize();
const pos = this.node.position;
this.node.setPosition(pos.x + this._moveDir.x * this.speed * deltaTime, pos.y + this._moveDir.y * this.speed * deltaTime, pos.z);
}
}
fire() {
const bullet = newNode('Bullet');
bullet.layer = this.node.layer;
const ui = bullet.addComponent(UITransform);
ui.setContentSize(10, 20);
const label = bullet.addComponent(Label);
label.string = '子弹';
label.fontSize = 20;
label.color = Color.RED;
bullet.addComponent(BulletController);
const parent = this.node.parent;
if (parent) {
parent.addChild(bullet);
const pos = this.node.position;
bullet.setPosition(pos.x, pos.y, pos.z);
}
}
}// assets/scripts/BulletController.ts
import { _decorator, Component } from'cc';
const { ccclass } = _decorator;
@ccclass('BulletController')
exportclassBulletControllerextendsComponent {
@property
speed: number = 600;
@property
maxY: number = 720;
update(deltaTime: number) {
const pos = this.node.position;
const newY = pos.y + this.speed * deltaTime;
this.node.setPosition(pos.x, newY, pos.z);
if (newY > this.maxY) {
this.node.destroy();
}
}
}到这一步，你按下编辑器里的"运行"按钮，已经能开打了。全程没碰过键盘写一行业务代码，也没拖过一次 Inspector。
七、第五步：让 AI 更听话的三条心法
跑完上面例子你会发现：能不能"一键生成"，关键不在 MCP，而在你怎么写提示词。 同一套 MCP 工具，给一段模糊需求，AI 也只能瞎搭；给一段结构化、有验证步骤的需求，AI 就能交出生产级代码。
下面三条是反复实践提炼出来的，照做能少走 80% 弯路：
7.1 用 CLAUDE.md 给项目"打底"
在项目根创建 CLAUDE.md，写清楚你的项目约定：
# 项目约定
## 技术栈
- Cocos Creator 3.8.8 + TypeScript
- 屏幕设计分辨率 720 × 1280（竖屏）
## 代码规范
- 所有脚本放在 assets/scripts/ 下，按模块建子目录
- 类名 PascalCase，文件名与类名一致
- @property 必填 type 与默认值
- 优先用 instantiate(prefab)，不要手动 new Node 再 addComponent
## 资源约定
- 预制体放 assets/prefabs/
- 美术资源 assets/textures/
- 音效 assets/audios/Claude Code 会自动读这个文件，每次对话都自带这些约束，AI 不会再给你写出风格混乱的代码。
7.2 把"验证"写进提示词
在任务最后一步永远加一句：
完成后用
scene_execution_control调用scene_hierarchy.get验证节点结构，并通过scene_execution_control执行测试脚本确认行为符合预期。
这一句话能逼 AI 用 MCP 工具走完闭环，而不是"我觉得应该这样就好了"。
7.3 分阶段交付，别一口吃成胖子
"做一个完整的塔防游戏"——这种需求 AI 大概率会做到一半上下文炸了。
把它拆成：
1. 先做主菜单 + 关卡选择（提示词 A） 2. 再做塔的放置系统（提示词 B） 3. 再做敌人路径与寻路（提示词 C） 4. 再做战斗逻辑（提示词 D）
每一阶段跑完确认无误再开下一阶段。MCP 让单步开发飞快，但整体节奏控制权永远在你手里。
