跳转到内容

蓝图编辑器使用指南

本指南介绍如何在 Cocos Creator 中使用蓝图可视化脚本编辑器。

从 GitHub Release 下载最新版本(免费):

下载 Cocos Node Editor v1.2.0

技术交流 QQ 群:481923584 | 官网:esengine.cn

  1. 解压 cocos-node-editor.zip 到项目的 extensions 目录:
your-project/
├── assets/
├── extensions/
│ └── cocos-node-editor/ ← 解压到这里
└── ...
  1. 重启 Cocos Creator

  2. 通过菜单 扩展 → 扩展管理器 确认插件已启用

  3. 通过菜单 面板 → Node Editor 打开编辑器

  • 工具栏 - 位于顶部,包含新建、打开、保存、撤销、重做等操作
  • 变量面板 - 位于左上角,用于定义和管理蓝图变量
  • 画布区域 - 主区域,用于放置和连接节点
  • 节点菜单 - 右键点击画布空白处打开,按分类列出所有可用节点
操作方式
平移画布鼠标中键拖拽 / Alt + 左键拖拽
缩放画布鼠标滚轮
打开节点菜单右键点击空白处
框选多个节点在空白处拖拽
追加框选Ctrl + 拖拽
删除选中Delete 键
  1. 从节点面板拖拽 - 将节点从左侧面板拖到画布
  2. 右键菜单 - 右键点击画布空白处,选择节点
  1. 从输出引脚拖拽到输入引脚
  2. 兼容类型的引脚会高亮显示
  3. 松开鼠标完成连接

引脚类型说明:

引脚颜色类型说明
白色 ▶Exec执行流程(控制执行顺序)
青色 ◆Entity实体引用
紫色 ◆Component组件引用
浅蓝 ◆String字符串
绿色 ◆Number数值
红色 ◆Boolean布尔值
灰色 ◆Any任意类型

点击连接线选中,按 Delete 键删除。

事件节点是蓝图的入口点,当特定事件发生时触发执行。

节点触发时机输出
Event BeginPlay蓝图开始运行时Exec, Self (实体)
Event Tick每帧执行Exec, Delta Time
Event EndPlay蓝图停止时Exec

示例:游戏开始时打印消息

Event BeginPlay
Self
Print
Exec
Message "游戏开始!"

操作 ECS 实体的节点。

节点功能输入输出
Get Self获取当前实体-Entity
Create Entity创建新实体Exec, NameExec, Entity
Destroy Entity销毁实体Exec, EntityExec
Find Entity By Name按名称查找NameEntity
Find Entities By Tag按标签查找TagEntity[]
Is Valid检查实体有效性EntityBoolean
Get/Set Entity Name获取/设置名称EntityString
Set Active设置激活状态Exec, Entity, ActiveExec

示例:创建新实体

Event BeginPlay
Create Entity
Exec
Name "Bullet"
Exec
Entity
Add Transform
Exec
Entity

访问和操作 ECS 组件。

节点功能
Has Component检查实体是否有指定组件
Get Component获取组件实例
Add Component添加组件到实体
Remove Component移除组件
Get/Set Property获取/设置组件属性

示例:修改 Transform 组件

Get Self
Entity
Get Component
Entity
Transform
Set Property
Exec
Target
x 100

控制执行流程的节点。

条件判断,类似 if/else。

Branch
Exec
Condition
True
False
DoSomething
Exec
DoOtherThing
Exec

按顺序执行多个分支。

Sequence
Exec
Then 0
Then 1
Then 2
Step 1
Exec
Step 2
Exec
Step 3
Exec

循环执行指定次数。

For Loop
Exec
First Index 0
Last Index 10
Loop Body
Index
Completed
每次迭代执行
Exec
循环结束后执行
Exec

遍历数组元素。

当条件为真时持续循环。

只执行一次,之后跳过。

每次执行时交替触发 A 和 B 输出。

可通过 Open/Close/Toggle 控制是否允许执行通过。

节点功能输出类型
Delay延迟指定时间后继续执行Exec
Get Delta Time获取帧间隔时间Number
Get Time获取运行总时间Number

示例:延迟 2 秒后执行

Event BeginPlay
Delay
Exec
Duration 2.0
Done
Print
Exec
Msg "2秒后执行"
节点功能
Add / Subtract / Multiply / Divide四则运算
Abs绝对值
Clamp限制在范围内
Lerp线性插值
Min / Max最小/最大值
Random Range随机数
Sin / Cos / Tan三角函数
节点功能
Print输出到控制台

变量用于在蓝图中存储和共享数据。

  1. 在变量面板点击 + 按钮
  2. 输入变量名称
  3. 选择变量类型
  4. 设置默认值(可选)
  • 拖拽到画布 - 创建 Get 或 Set 节点
  • Get 节点 - 读取变量值
  • Set 节点 - 写入变量值
类型说明默认值
Boolean布尔值false
Number数值0
String字符串""
Entity实体引用null
Vector2二维向量(0, 0)
Vector3三维向量(0, 0, 0)

如果删除了一个变量,但画布上还有引用该变量的节点:

  • 节点会显示 红色边框警告图标
  • 需要重新创建变量或删除这些节点

可以将多个节点组织到一个可视化组框中,便于整理复杂蓝图。

  1. 框选或 Ctrl+点击 选中多个节点(至少 2 个)
  2. 右键点击选中的节点
  3. 选择 创建分组
  4. 组框会自动包裹所有选中的节点
操作方式
移动组拖拽组框头部,所有节点一起移动
取消分组右键点击组框 → 取消分组
  • 动态大小:组框会自动调整大小以包裹所有节点
  • 独立移动:可以单独移动组内的节点,组框会自动调整
  • 仅编辑器:组是纯视觉组织,不影响运行时逻辑
快捷键功能
Ctrl + S保存蓝图
Ctrl + Z撤销
Ctrl + Shift + Z重做
Ctrl + C复制选中节点
Ctrl + X剪切选中节点
Ctrl + V粘贴节点
Delete删除选中项
Ctrl + A全选
  1. 点击工具栏 保存 按钮
  2. 选择保存位置(必须保存在 assets/resources 目录下,否则 Cocos Creator 无法动态加载)
  3. 文件扩展名为 .blueprint.json

重要提示:蓝图文件必须放在 resources 目录下,游戏运行时才能通过 cc.resources.load() 加载。

  1. 点击工具栏 打开 按钮
  2. 选择 .blueprint.json 文件

蓝图保存为 JSON 格式,可与 @esengine/blueprint 运行时兼容:

{
"version": 1,
"type": "blueprint",
"metadata": {
"name": "PlayerController",
"description": "玩家控制逻辑"
},
"variables": [],
"nodes": [],
"connections": []
}

实现每帧移动实体:

Event Tick
Delta Time
Multiply
A
B (Speed) 100
Result
Set Property
Exec
Target
x

受伤后检查死亡逻辑。Event OnDamage 是一个自定义事件节点,可以通过代码 vm.triggerCustomEvent('OnDamage', { damage: 50 }) 触发:

每 2 秒生成一个敌人:

Event BeginPlay
Do N Times
Exec
N 10
Loop Body
Index
Completed
Delay
Exec
Duration 2.0
Done
Create Entity
Exec
Name "Enemy"
Entity

检查引脚类型是否匹配。执行引脚(白色)只能连接执行引脚,数据引脚需要类型兼容。

  1. 确保实体添加了 BlueprintComponent
  2. 确保场景添加了 BlueprintSystem
  3. 检查 autoStart 是否为 true

使用 Print 节点输出变量值到控制台。