Behavior Creator 行为树可视化编辑器

这是一款为 CocosCreator 深度定制的行为树可视化编辑器插件
已实现 Selector、Sequence、Parallel 三种组合节点
已实现 Conditional、Decorator 两种装饰器
已实现 Service 服务类型
已实现 Task 任务类型
支持自定义节点注册到行为树编辑器
支持类属性差异化更新
支持节点生命周期 onEnable、onUpdate、onDisable 等通用事件委托

注意

仅支持在 CocosCreator v3.3.0 及以上版本中使用
本插件的实现综合参考UE行为树和Unity行为树Behavior Designer

效果预览

快速开始

在 CocosCreator 编辑器菜单 扩展 --> 商城 中搜索 BehaviorCreator 即可找到该插件，购买后下载到本地
导入插件 oreo-behavior-creator 并启用

在 资源管理器 面板中看到 oreo-behavior-creator 运行时 已载入，则表示插件导入成功
注意，因插件需要导入运行时脚本，在CocosCreator编辑器已打开状态下可能会出现以下错误，此时需要重启编辑器

插件入口

行为树编辑器是由 json 数据驱动的，其入口已集成到 BehaviorTree 组件的属性检查器面板，可通过以下方式启动
1. 新建空节点，在节点上挂载 BehaviorTree 组件
2. 新建内容为空{} 的json资源，并关联到 BehaviorTree 的 JsonAsset 属性。点击 Edit Behavior 即可打开行为树编辑器

加载示例

在运行时目录extensions\oreo-behavior-creator\runtime\examples\data 中提供了一些简单示例，可以通过 Load 菜单加载到行为树编辑区，Save 保存后下一步运行查看效果。

运行效果

BehaviorTree 组件默认是没有启用 LogTaskChanges 属性的，我们先勾选以便在控制台输出 log。

注：当行为树某次执行结果不是 Running 状态时，本次运行结束。如果需要重新开始，需要勾选 RestartWhenComplete 。

示例分析

我们通过分解行为树并编写代码逻辑，一步步实现以下效果

巡逻行为分析

我们设定一次巡逻主要包括以下逻辑
1. 在指定区域目标点之间来回移动
  
  通用 Task 任务节点
2. 到达指定点后原地休息等待一段时间
  
  Wait 任务节点
由于上述是一个连续有序的行为，因此需要将它们挂载到 Sequence 父节点

Sequence 序列节点
整体巡逻行为如图所示

场景搭建

如图所示，我们在场景中添加了一个 AIEnemy 敌人 AI 以及三个巡逻目标点

代码逻辑

随机移动

在巡逻行为树结构中，随机移动 节点是一个通用 Task 任务节点，需要我们定制 onUpdate 任务更新逻辑。

新建 AIEnemy.ts 组件类并实现找点随机移动逻辑，挂载到 AIEnemy 场景节点上。主要逻辑包含两点：

1、到达目标点时返回 Success 表示成功，由父节点 Sequence 顺序执行下一个子节点的行为，即 原地休息

2、未到达目标点时返回 Running 表示任务还在持续，由父节点 Sequence 下一次 tick 继续执行

具体实现如下：

onRandomMove(){this._playAnim("run", 1);//这里为了方便，只是按点索引顺序移动let point = this.patrolPoints[this._index];//自身点位置pos1.set(this.target.position);//目标点位置pos2.set(point.position);//朝向this.target.lookAt(pos2);//目标点达标与否阈值判断if(Vec3.distance(pos1, pos2) < 0.1){this._index++;if(this._index>=this.patrolPoints.length){this._index = 0;}this._playAnim("idle");//到达目标点时返回成功，由父节点 `Sequence` 顺序执行下一个子节点的行为，即 `原地休息`return bt.BehaviorStatus.Success;}else{let pos = this.lerp(out, pos1, pos2, 0.02);this.target.setPosition(pos);  //未到达目标点时返回 Running ，由父节点 `Sequence` 下一次 tick 继续执行return bt.BehaviorStatus.Running;  }
}

原地休息

这是一个内置 Wait 任务节点，主要作用就是在指定时间内任务直接返回 Running 状态，表示任务还在持续，时间到达后返回 Success 表示任务完成。

Wait 任务有一个 duration 属性，表示任务持续时间。这是一个 SharedVariable 共享变量属性，与Blackboard黑板变量关联。

逻辑绑定

我们先来指定 原地休息 时间

新建一个 SharedNumber 数字类型的黑板共享变量，值设定为 2，并指定给 duration 属性，表示原地休息 2 秒

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IbeyKN8C-1651722100861)(https://www.exporter.top/behavior/zh-cn/example/img/examples-2022042706.gif)]
绑定 随机移动 任务的 onUpdate 委托逻辑。

如图，将 onUpdate 逻辑绑定到 AIEnemy 组件的 onRandomMove 方法

Delegate 委托逻辑绑定与 CocosCreator 内置按钮事件绑定过程相似

运行效果

首次运行效果如下
我们发现AI 移动到指定目标点且原地休息结束后，并没有继续移动到下一个目标点。这是因为，对于本次行为来说，Wait 执行结束并返回 Success 状态，表示行为树已经全部执行完毕。如果需要重新开始，只需勾选 BehaviorTree 组件上的 RestartWhenComplete。
最终效果如下

追逐行为分析

我们设定一次追逐主要包括以下逻辑
1. 当玩家出现在 AIEnemy 的感应区域内时，AIEnemy 立即移动并靠近玩家
  
  通用 Task 任务节点
2. 当玩家被追逐达到受击范围时，AIEnemy 发动一次攻击。我们设定一次攻击包含实际攻击和技能CD两个任务。
  
  Sequence 序列节点，通用 Task 任务节点、Wait 任务节点
由于靠近 和 一次攻击 是区分条件执行（不在受击范围就靠近，在受在范围就攻击），即一次只会执行一个分支，因此需要将它们挂载到 Selector 父节点

Selector 序列节点
此时追逐玩家行为如图所示

场景搭建

如图所示，我们在上一个场景的基础上添加了一个 AIPlayer 节点表示当前玩家

代码逻辑

靠近

靠近 节点也是一个通用 Task 任务节点，需要我们定制 onUpdate 任务更新逻辑。

更新 AIEnemy.ts 组件类并实现相关逻辑。主要逻辑包含：

1、判断玩家是否在受击范围内

2、不在范围内则靠近

3、在范围内则攻击

范围判断：

canAttack(){//当前位置pos1.set(this.target.position);//玩家位置pos2.set(this.player.position);//受击范围判断if(Vec3.distance(pos1, pos2) < 1){return bt.BehaviorStatus.Success;}return bt.BehaviorStatus.Failure;
}

移动到攻击范围

onMoveToAttack(){if(this.canAttack()==bt.BehaviorStatus.Success){return bt.BehaviorStatus.Failure;}else{pos1.set(this.target.position);pos2.set(this.player.position);this.target.lookAt(pos2);let pos = this.lerp(out, pos1, pos2, 0.03);this.target.setPosition(pos);this._playAnim("runHit");return bt.BehaviorStatus.Running;}
}

发动攻击

onAttack(){this._playAnim("attackLeft");//一次攻击结束后等待技能冷却，所以在攻击动作结束后播放防御动画 'fightIdel'this.anim.once(AnimationComponent.EventType.LASTFRAME, ()=>{this._playAnim("fightIdle");})//主角受击this.aiPlayer.beAttacked();return bt.BehaviorStatus.Success;
}

技能CD

这也是一个内置 Wait 任务节点，与上一节中 巡逻 行为的 原地休息 节点类似，只需指定持续时间 duration 即可

逻辑绑定

分别绑定 靠近 和 攻击 任务的 onUpdate 委托逻辑。
本次运行效果如下

我们看到，AI 启动后立即向玩家靠近，这不太科学。我们给 AI 添加一个感应区域作为 AI 的视野，当玩家出现在感应区域范围内时 AI 才奔向玩家。
1. 我们使用内置的 Conditional 条件元素来实现条件判断
2. 视野判断代码实现
```
onHasSight(){//当前位置pos1.set(this.target.position);//玩家位置pos2.set(this.player.position);//视野范围if(Vec3.distance(pos1, pos2) < 8){return bt.BehaviorStatus.Success;}return bt.BehaviorStatus.Failure;
}
```
3. 绑定 onUpdate 逻辑

运行效果

增加视野判断后，运行效果如下

圆形区域为 AI 视野，当玩家进入视野时，AI 开始追逐，当追逐到玩家受击范围时，展开攻击。

下一步

想学习完整示例，请前往在线文档
想集成完整功能，请前往商店支持

加入

BehaviorCreator QQ交流群:
659064495

说明

压缩包内包含完整运行时源码以及示例项目工程，详见包内 Readme.md 文档

Behavior Creator 行为树可视化编辑器相关推荐

webGL、webGPU、封装、渲染引擎 three.js、游戏引擎，定位是游戏开发，在前面的渲染引擎基础上，还提供了骨骼动画、物理引擎、AI、GUI 等功能，以及可视化编辑器来设计关卡，支撑大型游戏
https://zhuanlan.zhihu.com/p/162878354 如何选择 WebGL 框架和引擎? 知道得越多,不知道的就更多了数据可视化Sugar-百度智能云 cloud.ba ...
开源公告｜腾讯tmagic-editor页面可视化编辑器对外开源
项目简介腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,基于tmagic-editor可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面.PC页面.T ...
ggtree实现系统发育树可视化
文章原文:ggtree实现系统发育树可视化背景1:Newick格式 Newick是最常用的存储进化树的文件格式,如上面这个树,拓朴结构用newick格式可以表示为: (B,(A,C,E),D); 括 ...
android窗口泄漏,isInEditMode解决可视化编辑器无法识别自定义控件的问题
android窗口泄漏,isInEditMode解决可视化编辑器无法识别自定义控件的问题参考文章: (1)android窗口泄漏,isInEditMode解决可视化编辑器无法识别自定义控件的问题 ( ...
html+店铺+可视化编辑器,开源在线可视化HTML编辑器 – xhEditor | 骤雨打新荷
xhEditor是一款开源的在线可视化HTML编辑器,主要应用于在线编辑HTML代码,完全基于Javascript开发,您可以应用在任何的服务端语言环境下,例如:PHP.ASP.ASP.NET.JAV ...
中文-自然语言处理-开源工具-流行度调查+句法依存树可视化调研
为了找到最流行的中文自然语言处理工具,我进行了一番调研. 开源工具包百度返回网页数 NLTK 4470000 LTP 哈工大 542,000 OpenNLP 249,000 ICTCLAS 919, ...
json-schema 可视化编辑器发布了
json-schema 的用途越来越广泛,除了定义数据结构外,我们还可以使用 json-schema 验证数据格式和生成随机数据,但是编写复杂数据结构的 json-schema 是非常痛苦的事情.假设 ...
bin文件编辑_为MediaWiki安装可视化编辑器VisualEditor
这篇文章于2018年的1月份发布于本人的网站,当时偷懒,有部分内容没有写完整.直到最近重新安装可视化编辑器才发现:安装过程并不是太过复杂,基本上只要你的Parsoid安装成功并且能够运行,那么离成功也 ...
基于React+Koa实现一个h5页面可视化编辑器－Dooring
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价值. 本篇文章并非和数据可视化 ...
用户收货地址h5页面_如何实现H5可视化编辑器的实时预览和真机扫码预览功能...
前言所见即所得的设计理念在WEB IDE领域里一直是备受瞩目的功能亮点, 也能极大的提高 web coder的编程体验和编程效率. 笔者接下来就将对H5可视化编辑器的实时预览和真机扫码预览功能做一次方 ...

Behavior Creator 行为树可视化编辑器

注意

效果预览

快速开始

插件入口

加载示例

运行效果

示例分析

巡逻行为分析

场景搭建

代码逻辑

逻辑绑定

运行效果

追逐行为分析

场景搭建

代码逻辑

逻辑绑定

运行效果

下一步

加入

说明

Behavior Creator 行为树可视化编辑器相关推荐

最新文章

热门文章