```
feat(mcp-bridge): 添加 MCP 桥接插件实现 Cocos Creator 与外部工具集成 - 新增 main.js 实现 MCP 服务器，提供 HTTP 接口供外部工具调用 - 实现 5 个核心工具接口：获取选中节点、修改节点名称、保存场景、 获取场景层级结构、更新节点变换属性 - 添加 panel 面板用于测试 MCP 功能，包含节点 ID 获取和名称修改功能 - 实现场景脚本 scene-script.js 处理节点属性修改和层级数据导出 - 配置 package.json 定义插件入口文件和菜单项 - 支持跨域请求便于调试，返回符合 MCP 规范的工具定义格式 ```
This commit is contained in:
火焰库拉
186
main.js
Normal file
186
main.js
Normal file
@@ -0,0 +1,186 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const http = require("http");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
"scene-script": "scene-script.js",
|
||||||
|
load() {
|
||||||
|
// 插件加载时启动一个微型服务器供 MCP 使用 (默认端口 3000)
|
||||||
|
this.startMcpServer();
|
||||||
|
},
|
||||||
|
|
||||||
|
unload() {
|
||||||
|
if (this.server) this.server.close();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 暴露给 MCP 或面板的 API 封装
|
||||||
|
messages: {
|
||||||
|
"open-test-panel"() {
|
||||||
|
Editor.Panel.open("mcp-bridge");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取当前选中节点信息
|
||||||
|
"get-selected-info"(event) {
|
||||||
|
let selection = Editor.Selection.curSelection("node");
|
||||||
|
if (event) event.reply(null, selection);
|
||||||
|
return selection;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改场景中的节点（需要通过 scene-script）
|
||||||
|
"set-node-property"(event, args) {
|
||||||
|
Editor.log("Calling scene script with:", args); // 打印日志确认 main 进程收到了面板的消息
|
||||||
|
|
||||||
|
// 确保第一个参数 'mcp-bridge' 和 package.json 的 name 一致
|
||||||
|
Editor.Scene.callSceneScript("mcp-bridge", "set-property", args, (err, result) => {
|
||||||
|
if (err) {
|
||||||
|
Editor.error("Scene Script Error:", err);
|
||||||
|
}
|
||||||
|
if (event && event.reply) {
|
||||||
|
event.reply(err, result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// 简易 MCP 桥接服务器
|
||||||
|
startMcpServer() {
|
||||||
|
const http = require("http");
|
||||||
|
|
||||||
|
this.server = http.createServer((req, res) => {
|
||||||
|
// 设置 CORS 方便调试
|
||||||
|
res.setHeader("Access-Control-Allow-Origin", "*");
|
||||||
|
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
|
||||||
|
res.setHeader("Content-Type", "application/json");
|
||||||
|
|
||||||
|
if (req.method === "OPTIONS") {
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let body = "";
|
||||||
|
req.on("data", (chunk) => {
|
||||||
|
body += chunk;
|
||||||
|
});
|
||||||
|
req.on("end", () => {
|
||||||
|
try {
|
||||||
|
// 简单的路由处理
|
||||||
|
if (req.url === "/list-tools" && req.method === "GET") {
|
||||||
|
// 1. 返回工具定义 (符合 MCP 规范)
|
||||||
|
const tools = [
|
||||||
|
{
|
||||||
|
name: "get_selected_node",
|
||||||
|
description: "获取当前编辑器中选中的节点 ID",
|
||||||
|
inputSchema: { type: "object", properties: {} },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "set_node_name",
|
||||||
|
description: "修改指定节点的名称",
|
||||||
|
inputSchema: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
id: { type: "string", description: "节点的 UUID" },
|
||||||
|
newName: { type: "string", description: "新的节点名称" },
|
||||||
|
},
|
||||||
|
required: ["id", "newName"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "save_scene",
|
||||||
|
description: "保存当前场景的修改",
|
||||||
|
inputSchema: { type: "object", properties: {} },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "get_scene_hierarchy",
|
||||||
|
description: "获取当前场景的完整节点树结构（包括 UUID、名称和层级关系）",
|
||||||
|
inputSchema: { type: "object", properties: {} },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "update_node_transform",
|
||||||
|
description: "修改节点的坐标、缩放或颜色",
|
||||||
|
inputSchema: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
id: { type: "string", description: "节点 UUID" },
|
||||||
|
x: { type: "number" },
|
||||||
|
y: { type: "number" },
|
||||||
|
scaleX: { type: "number" },
|
||||||
|
scaleY: { type: "number" },
|
||||||
|
color: { type: "string", description: "HEX 颜色代码如 #FF0000" },
|
||||||
|
},
|
||||||
|
required: ["id"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
res.end(JSON.stringify({ tools }));
|
||||||
|
} else if (req.url === "/call-tool" && req.method === "POST") {
|
||||||
|
// 2. 执行工具逻辑
|
||||||
|
const { name, arguments: args } = JSON.parse(body);
|
||||||
|
|
||||||
|
if (name === "get_selected_node") {
|
||||||
|
let ids = Editor.Selection.curSelection("node");
|
||||||
|
res.end(JSON.stringify({ content: [{ type: "text", text: JSON.stringify(ids) }] }));
|
||||||
|
} else if (name === "set_node_name") {
|
||||||
|
Editor.Scene.callSceneScript(
|
||||||
|
"mcp-bridge",
|
||||||
|
"set-property",
|
||||||
|
{
|
||||||
|
id: args.id,
|
||||||
|
path: "name",
|
||||||
|
value: args.newName,
|
||||||
|
},
|
||||||
|
(err, result) => {
|
||||||
|
res.end(
|
||||||
|
JSON.stringify({
|
||||||
|
content: [
|
||||||
|
{ type: "text", text: err ? `Error: ${err}` : `Success: ${result}` },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
} else if (name === "save_scene") {
|
||||||
|
// 触发编辑器保存指令
|
||||||
|
Editor.Ipc.sendToMain("scene:save-scene");
|
||||||
|
res.end(JSON.stringify({ content: [{ type: "text", text: "Scene saved successfully" }] }));
|
||||||
|
} else if (name === "get_scene_hierarchy") {
|
||||||
|
Editor.Scene.callSceneScript("mcp-bridge", "get-hierarchy", (err, hierarchy) => {
|
||||||
|
if (err) {
|
||||||
|
res.end(
|
||||||
|
JSON.stringify({
|
||||||
|
content: [
|
||||||
|
{ type: "text", text: "Error fetching hierarchy: " + err.message },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
res.end(
|
||||||
|
JSON.stringify({
|
||||||
|
content: [{ type: "text", text: JSON.stringify(hierarchy, null, 2) }],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (name === "update_node_transform") {
|
||||||
|
Editor.Scene.callSceneScript("mcp-bridge", "update-node-transform", args, (err, result) => {
|
||||||
|
res.end(
|
||||||
|
JSON.stringify({
|
||||||
|
content: [{ type: "text", text: err ? `Error: ${err}` : result }],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
res.statusCode = 404;
|
||||||
|
res.end(JSON.stringify({ error: "Not Found" }));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
res.statusCode = 500;
|
||||||
|
res.end(JSON.stringify({ error: e.message }));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.server.listen(3456);
|
||||||
|
Editor.log("MCP Server standard interface listening on http://localhost:3456");
|
||||||
|
},
|
||||||
|
};
|
||||||
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "mcp-bridge",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Cocos Creator MCP Bridge",
|
||||||
|
"author": "User",
|
||||||
|
"main": "main.js",
|
||||||
|
"scene-script": "scene-script.js",
|
||||||
|
"main-menu": {
|
||||||
|
"Packages/MCP Bridge/Open Test Panel": {
|
||||||
|
"message": "mcp-bridge:open-test-panel"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"panel": {
|
||||||
|
"main": "panel/index.js",
|
||||||
|
"type": "dockable",
|
||||||
|
"title": "MCP Test Panel",
|
||||||
|
"width": 400,
|
||||||
|
"height": 300
|
||||||
|
}
|
||||||
|
}
|
||||||
17
panel/index.html
Normal file
17
panel/index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<div style="padding: 10px;">
|
||||||
|
<ui-prop name="Node ID">
|
||||||
|
<ui-input id="nodeId" placeholder="Click 'Get' to fetch ID"></ui-input>
|
||||||
|
</ui-prop>
|
||||||
|
<ui-prop name="New Name">
|
||||||
|
<ui-input id="newName" placeholder="Enter new name"></ui-input>
|
||||||
|
</ui-prop>
|
||||||
|
|
||||||
|
<div style="margin-top: 10px; display: flex; flex-direction: column; gap: 5px;">
|
||||||
|
<ui-button id="btn-get" class="green">获取选中节点 ID</ui-button>
|
||||||
|
<ui-button id="btn-set" class="blue">修改节点名称</ui-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="log" style="margin-top: 15px; font-size: 12px; color: #66ccff; border-top: 1px solid #555; padding-top: 5px;">
|
||||||
|
Status: Ready
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
59
panel/index.js
Normal file
59
panel/index.js
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
Editor.Panel.extend({
|
||||||
|
// 读取样式和模板
|
||||||
|
style: fs.readFileSync(Editor.url("packages://mcp-bridge/panel/index.html"), "utf-8"),
|
||||||
|
template: fs.readFileSync(Editor.url("packages://mcp-bridge/panel/index.html"), "utf-8"),
|
||||||
|
|
||||||
|
// 面板渲染成功后的回调
|
||||||
|
ready() {
|
||||||
|
// 使用 querySelector 确保能拿到元素，避免依赖可能为 undefined 的 this.$
|
||||||
|
const btnGet = this.shadowRoot.querySelector("#btn-get");
|
||||||
|
const btnSet = this.shadowRoot.querySelector("#btn-set");
|
||||||
|
const nodeIdInput = this.shadowRoot.querySelector("#nodeId");
|
||||||
|
const newNameInput = this.shadowRoot.querySelector("#newName");
|
||||||
|
const logDiv = this.shadowRoot.querySelector("#log");
|
||||||
|
|
||||||
|
if (!btnGet || !btnSet) {
|
||||||
|
Editor.error("Failed to find UI elements. Check if IDs in HTML match.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试获取信息
|
||||||
|
btnGet.addEventListener("confirm", () => {
|
||||||
|
Editor.Ipc.sendToMain("mcp-bridge:get-selected-info", (err, ids) => {
|
||||||
|
if (ids && ids.length > 0) {
|
||||||
|
nodeIdInput.value = ids[0];
|
||||||
|
logDiv.innerText = "Status: Selected Node " + ids[0];
|
||||||
|
} else {
|
||||||
|
logDiv.innerText = "Status: No node selected";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 测试修改信息
|
||||||
|
btnSet.addEventListener("confirm", () => {
|
||||||
|
let data = {
|
||||||
|
id: nodeIdInput.value,
|
||||||
|
path: "name",
|
||||||
|
value: newNameInput.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data.id) {
|
||||||
|
logDiv.innerText = "Error: Please get Node ID first";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Editor.Ipc.sendToMain("mcp-bridge:set-node-property", data, (err, res) => {
|
||||||
|
if (err) {
|
||||||
|
logDiv.innerText = "Error: " + err;
|
||||||
|
} else {
|
||||||
|
logDiv.innerText = "Success: " + res;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
91
scene-script.js
Normal file
91
scene-script.js
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
"set-property": function (event, args) {
|
||||||
|
const { id, path, value } = args;
|
||||||
|
|
||||||
|
// 1. 获取节点
|
||||||
|
let node = cc.engine.getInstanceById(id);
|
||||||
|
|
||||||
|
if (node) {
|
||||||
|
// 2. 修改属性
|
||||||
|
if (path === "name") {
|
||||||
|
node.name = value;
|
||||||
|
} else {
|
||||||
|
node[path] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 【解决报错的关键】告诉编辑器场景变脏了（需要保存）
|
||||||
|
// 在场景进程中，我们发送 IPC 给主进程
|
||||||
|
Editor.Ipc.sendToMain("scene:dirty");
|
||||||
|
|
||||||
|
// 4. 【额外补丁】通知层级管理器（Hierarchy）同步更新节点名称
|
||||||
|
// 否则你修改了名字，层级管理器可能还是显示旧名字
|
||||||
|
Editor.Ipc.sendToAll("scene:node-changed", {
|
||||||
|
uuid: id,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (event.reply) {
|
||||||
|
event.reply(null, `Node ${id} updated to ${value}`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (event.reply) {
|
||||||
|
event.reply(new Error("Scene Script: Node not found " + id));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"get-hierarchy": function (event) {
|
||||||
|
const scene = cc.director.getScene();
|
||||||
|
|
||||||
|
function dumpNodes(node) {
|
||||||
|
// 【优化】跳过编辑器内部的私有节点，减少数据量
|
||||||
|
if (node.name.startsWith("Editor Scene") || node.name === "gizmoRoot") {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let nodeData = {
|
||||||
|
name: node.name,
|
||||||
|
uuid: node.uuid,
|
||||||
|
active: node.active,
|
||||||
|
position: { x: Math.round(node.x), y: Math.round(node.y) },
|
||||||
|
scale: { x: node.scaleX, y: node.scaleY },
|
||||||
|
size: { width: node.width, height: node.height },
|
||||||
|
// 记录组件类型，让 AI 知道这是个什么节点
|
||||||
|
components: node._components.map((c) => c.__typename),
|
||||||
|
children: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
for (let i = 0; i < node.childrenCount; i++) {
|
||||||
|
let childData = dumpNodes(node.children[i]);
|
||||||
|
if (childData) nodeData.children.push(childData);
|
||||||
|
}
|
||||||
|
return nodeData;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hierarchy = dumpNodes(scene);
|
||||||
|
if (event.reply) event.reply(null, hierarchy);
|
||||||
|
},
|
||||||
|
|
||||||
|
"update-node-transform": function (event, args) {
|
||||||
|
const { id, x, y, scaleX, scaleY, color } = args;
|
||||||
|
let node = cc.engine.getInstanceById(id);
|
||||||
|
|
||||||
|
if (node) {
|
||||||
|
if (x !== undefined) node.x = x;
|
||||||
|
if (y !== undefined) node.y = y;
|
||||||
|
if (scaleX !== undefined) node.scaleX = scaleX;
|
||||||
|
if (scaleY !== undefined) node.scaleY = scaleY;
|
||||||
|
if (color) {
|
||||||
|
// color 格式如 "#FF0000"
|
||||||
|
node.color = new cc.Color().fromHEX(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
Editor.Ipc.sendToMain("scene:dirty");
|
||||||
|
Editor.Ipc.sendToAll("scene:node-changed", { uuid: id });
|
||||||
|
|
||||||
|
if (event.reply) event.reply(null, "Transform updated");
|
||||||
|
} else {
|
||||||
|
if (event.reply) event.reply(new Error("Node not found"));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user