Cocos Creator 行为树可视化编辑插件[20170319更新]

#Cocos Creator 行为树可视化编辑插件

好吧,折腾了几天终于写出来了。
我想到哪写到哪吧。

##Behavior3
所使用的行为树js库是Behavior.com
还是挺好用的。官网的文档有介绍行为树的基本概念和B3库的使用方法。还是很贴心的233。
Behavior3的配套的在线编辑器
一开始的打算是直接移植到cocos creator 然而太大了。
附B3自带的编辑器界面:

用起来还是很棒的。然而太大了。

所以我打算写一个编辑器。
用到了下面的绘制库

#GOJS
GOJS内置了非常多的流程图操作。以至于常用的功能只需要修改一行代码就能够实现。
代价是那一行代码得让你找上老半天。GOJS万恶的API2333。
而且有一个迷之链接。它归属于GOJS,但是无法从官网任何地方进入。
好吧 这不是重点。
总之墙裂推荐GOJS绘制插件UI操作。简直是奇葩版的cocos creator编辑器。
为什么说它奇葩呢。
因为它内置了很多非常非常有用的快捷键操作。
You can interact with this diagram in many ways:

  • You can select a part by clicking on it. Selected nodes are highlighted with an Adornment that is a blue rectangle surrounding the node. Selected links are highlighted with a blue line following the path of the link.(单击选中图形或线)
  • Multiple parts may be selected at once. Hold the Shift key down when clicking to add to the selection. Hold the Control key down when clicking to toggle whether that part is selected.(shift + 单击 多选, ctrl + 单击来取消选中多选中某一个)
  • Another way to multi-select is to mouse-down at a point in the background (not on a part), wait a moment, and then drag a box. Parts that are in the box when the mouse-up occurs are selected. The Shift and Control modifiers work then as well.(鼠标在画布上按住原地等待一小会,再拖动,可以多选)
  • Ctrl-A selects all parts in the diagram.(ctrl + A 全选)
  • Move one or more parts by selecting them and dragging.(图形可以直接拖拽)
  • Copying selected parts works with either copy/paste (Ctrl-C/Ctrl-V) or with Ctrl-mouse-drag.(ctrt+c/v复制粘贴)
  • Delete selected parts with the Delete key.(del 删除)
  • If scrollbars are visible or if the whole collection of parts is smaller than the viewable area of the diagram (the “viewport”), you can pan the diagram with a mouse-down in the background (not on a part) if you drag without waiting.(拖拽画图移动视口)
  • Use the mouse wheel to scroll up and down (滚轮上下移动视口)
  • and Shift-mouse-wheel to scroll left and right. (shift+滚轮左右移动视口)
  • Ctrl-mouse-* wheel zooms in and out.(ctrl + 滚轮远近移动视口)

提示:滚轮上下移动视口太惨无人道了,我覆写为远近移动视口,按下滚轮可以切换这两个模式
好了,上面只是第一批快捷键,下面还有一批
虽然有重复的。但是都贴过来吧

  • Ctrl-X & Shift-Del invoke cutSelection (剪切)
  • Ctrl-C & Ctrl-Insert invoke copySelection (复制)
  • Ctrl-V & Shift-Insert invoke pasteSelection (粘贴)
  • Del & Backspace invoke deleteSelection (删除)
  • Ctrl-A invokes selectAll (全选)
  • Ctrl-Z & Alt-Backspace invoke undo (退回上一步)
  • Ctrl-Y & Alt-Shift-Backspace invoke redo (重做前一步)
  • Up & Down & Left & Right (arrow keys) call Diagram.scroll (滚动视口)
  • PageUp & PageDown call Diagram.scroll (滚动视口again)
  • Home & End call Diagram.scroll (滚动视口again and again)
  • Space invokes scrollToPart (这个厉害了,选中的图形缓动到视口中央)
  • Ctrl-- & Keypad-- (minus) invoke decreaseZoom (拉远视口)
  • Ctrl-+ & Keypad-+ (plus) invoke increaseZoom (拉近视口)
  • Ctrl-0 invokes resetZoom (重置视口缩放)
  • Shift-Z invokes zoomToFit; repeat to return to the original scale and position (锁定视口缩放)
  • Ctrl-G invokes groupSelection (这个没试过)
  • Ctrl-Shift-G invokes ungroupSelection (这个也没)
  • F2 invokes editTextBlock (编辑图形上的文字,实际上我复写了editable属性,可以直接双击)
  • Menu Key invokes showContextMenu (没试过)
  • Esc invokes stopCommand (也没试过)

恩 功能十分强大,然而重点是,我不知道怎么改快捷键的映射啊摔,有些快捷键很惨无人道啊摔。

好吧 这不是重点,其实把快捷键列出来是因为:
1.行为树插件的界面上有一些操作只能通过快捷键实现, 比如删除
2.防范按到奇怪的快捷键,因为我不知道怎么关掉这个快捷键233

实际上都是一些很贴心的快捷键。应该很容易上手。

然后再介绍一个JSON编辑器

#JSONeditor
因为我发现behavior3某些内置树节点是需要传参数的,比如repeat 要传循环的次数。而且按照我的设计。
这个操作是不适合延迟到脚本里面实现的。所以我在行为树编辑器的右侧加了一个JSON的编辑器。
具体的操作待会介绍。这是JSONeditor的github
是一个功能强大,接口简单的jsoneditor,非常非常棒。使用方式这里就不介绍了。大家都是程序员嘛2333

好了 bb了这么久,进入正题吧。我们的behaviortree-editor插件

#behaviortree-editor可视化编辑插件

这个编辑器融合了非常多的东西(并不)。
它具有的功能是:

  1. 添加行为树库b3.js到项目中
  2. 绘制行为树
  3. 编辑行为树上树节点(这里指明树节点用于区分creator中的节点,切记切记)的参数
  4. 生成行为树脚本组件
  5. 生成树节点模板脚本组件
  6. 重新编辑行为树

[fix]修复装饰节点limiter不能不断重置i导致不能限制进入次数的问题
好吧,那么我们从安装开始吧。
首先直接解压behaviortree-editor.rar (469.0 KB)到项目的packages文件夹中。


打开项目后会在菜单栏看到bt-editor菜单项

接着点击bt-editor中的open选项就会打开behaviortree-editor编辑器

单击bt编辑器下方的addBehaviorTreeLib按钮
添加行为树库b3.js到项目中(实际上在做其他任何操作前,都应该先保证b3库被加到项目中,不然会报错。)

然后我们可以开始正式编辑我们的行为树了。
这里简单介绍一下几类行为树节点的功能,具体的话看behavior3文档的介绍吧。非常详细。(这里的节点指树节点)
1.Composite 组合节点,可以连接多个子节点,用于决策行为树走向
2.Decorator 装饰节点, 可以连接一个子节点, 用于修饰子节点的返回值
3. Action 行为节点, 可以执行行为 (实际上也应该返回值)
4. Condition 条件节点, 可以用于做出判断并返回不同的值
上面四种节点是一种理念,不是一种实现上的限制,实际上他们除了可以拿到的参数不同,就没什么区别了。
行为树会通过访问子节点,并根据子节点的返回值决定逻辑在树中的走向。
实际上就是可视化,规范化的与或非,子交并补,if else switch case for while
依据这个理念衍生出了很多不同的节点。
就b3库而言 有
Composite衍生的有:
1.Sequence 节点 顺序执行子节点,当子节点返回b3.SUCCESS直接访问下一个子节点,直到所有子节点都返回b3.SUCCESS,才从当前节点返回b3.SUCCESS,当子节点返回b3.FAILURE,则直接从当前节点返回b3.FAILURE 类似于逻辑与的概念。
2.Priority 节点 选择执行子节点,当子节点返回b3.FAILURE直接访问下一个子节点,直到所有子节点都返回b3.FAILURE,才从当前节点返回b3.FAILURE,当子节点返回b3.SUCCESS,则直接从当前节点返回b3.SUCCESS 类似于逻辑或的概念。
3.MemSequence 节点 逻辑和Sequence一样,但是这里涉及到一个b3.RUNNING的返回值,就是子节点并不知道执行结果是成功还是失败,我得晚一点才能告诉你,那如何处理这种情况咧?对于Sequence节点,当它再次遍历子节点的时候,还是从第一个子节点开始遍历,但是MemSequence却会记住之前在Running的子节点,然后下次遍历的时候,直接从Running的那个子节点开始,这可以很方便的继续之前中断的逻辑决策。
4.MemPriority 节点 逻辑和Priority一样,然后Running的概念和MemSequence一样。
Decorator衍生的有:
1.Repeator 节点,重复执行子节点maxLoop次
2.RepeatUntilFailure 节点 ,重复执行子节点直到子节点返回Faiilure
3.RepeatUntilSuccess 节点, 你懂的
4.Limiter 节点 限制进入子节点的上限次数为maxLoop
5.Inverter 节点 反转返回值
6.MaxTime 节点 限制子节点可以执行的时间为maxTime毫秒
Action衍生的有:
1.Successder 节点 返回b3.SUCCESS
2.Failer节点 返回b3.FAILURE
3.Error节点 返回b3.ERROR(调试用)
4.Runner节点 返回b3.RUNNING
5.Wait 节点 等待milliseconds毫秒

我们可以实现自己的逻辑节点控制流程。
牢记Composite可以有多个子节点 Decorator只有一个子节点 Action 和Condition 没有子节点,所以实际实现上Action和Condition可以归为一类,但是理念把他们分开了。
总之牢记 这三类节点 区别是子节点数目不同,没了,然后该节点返回什么值取决于逻辑做什么,就酱。

回到编辑器界面
看到左侧的节点栏
第一个是Root节点,它实际上是Sequence节点,只是理念上将它从sequence分离出来。
再下面的四个CustomNode可以用于定义自己的Conposite Decorator Action Condition 实现
再往下的就都是预设的节点了。

然后我们试着给编辑器添加一个行为树的根
直接从左侧拖拽Root节点到中间的面板就可以了

然后添加一个Action节点吧 把CustomAction从左侧面板拖到中间面板

那么如何让Action节点成为Root的子节点咧。
很简单 按住 键盘a键 然后鼠标从Root按住指向Action节点 就可以了。然后再松开a键
(不要在连线中途松开a键噢,会有恶鬼缠身的!!!)
好吧 实际上这里有个小bug 连线中途松开a会无法退出连线模式,实际上松开鼠标后再按一次a键就可以了

那么这样我们就键了一个很简单很简单的行为树了。Root一进来就访问Action 然后就没了
这里我们改一下Action节点的名字,因为Action的名字就是待会我们实现Action逻辑组件所应该对应的名字
双击Action节点的名字 改为Attack

可以试着导出行为树为脚本组件了。
单击中间下面的saveAsBehaviorTree按钮,就可以生成对应的行为树组件了。

我们建立一个空的节点,然后将行为树组件挂载到这个空节点上。

这样我们就将行为树依附到这个空节点上了,那么这个行为树将反映着这个空节点的行为模式。
我们需要给这个行为模式添加更多的细节,比方说,刚刚的Attack节点,究竟想怎么Attack

回到我们的bt-editor面板,点击下侧的generateTreeNodeTemplate按钮,生成treeNode的代码模板


改名为Attack

将Attack脚本挂载到和行为树同在的节点上。

然后打开Attack的脚本:

里面有几个已经写好的空方法
这是一个对b3库的封装后的方法,实际上的使用和b3库原先的使用没有区别 具体可以看b3-wiki上面的介绍。研究我们导入的b3库源码中的注释和行为树组件中的代码可以了解更多关于b3库的使用。以后可能会详细再写,但不是现在2333

那么我们简单写一下测试代码吧。直接打log

然后在start里面调用行为树

那么一个最简单的行为树就写好了,我们试着运行看一下log结果:

很好 没有问题,我们继续,看一下如何回炉编辑已经存在的行为树组件。(请打起12分精神,这里的设计因为技术上的不明原因而采用了奇葩的设计)
回到creator的编辑器界面,选中之前的空节点 在右边的BehaviorTree组件我们可以看到一个编辑按钮


单击它,bt-editor将打开,我们将进入re-edit模式(之前的模式我称之为new模式)

咋一看好像没什么区别,(因为我们刚刚没有关掉bt-editor啊)
这时候我们需要点击loadDataFromComp按钮(我们有时候无法知道我们是否是在re-edit模式下,只要点一下loadDataFromComp按钮就能够知道是否是在re-edit模式下)
按完后,在中间面板的左下角会显示行为树组件所挂载的节点名字和行为树的名字 : 节点名<行为树组件名>

然后我们添加一个condition节点到行为树上,从左侧拖拽CustomCondition节点到面板,同样,按住a 鼠标左键按下Root指向CustomCondition节点连线,修改CustomCondition节点的名字为LookAround

这时候有个问题,树决策的是什么方向,我这里代码写死的是树必须横向展开,从左往右展开树或从右往左展开树,然后节点从上往下执行。
所以我们如果要LookAround节点在Attack之前执行,需要将LookAround拖到Attack靠上的位置

然后我们给LookAround添加半径radio属性
选中LookAround节点 在右侧的JSONeditor添加radio属性为50

好了,我们点击saveAsBehaviorTree 这时就会直接保存到对应的组件脚本上了,而不是生成一个新的行为树脚本组件

同样的我们添加一个LookAround的脚本,在bt-editor中点击generateTreeNodeTemplate按钮,生成模板

改名为LookAround 然后挂载到和BehaviorTree组件同一个节点上
然后修改LookAround代码,这里演示如何取得JSON中设置的radio参数
它保存在参数里面的treeNode.parameter里面 (记住是parameter,不是parameters 后者是原先自带的editor用的)

代码的意思是:如果预设的半径大于25就看不到,小于25就看到了。
我们设置的radio是50 所以看不到,我们返回了b3.FAILURE 这样根据Sequence(Root节点是Sequence)的理念 后面的Attack节点就不会执行了。
我们可以试着执行一下来验证

那么它确实不会执行Attack的代码
我们回到bt-editor中,将radio修改为10

再次点击SaveAsBehaviorTree按钮,保存在行为树组件中。

再执行一次,这时应该LookAround应该就能看到了,并执行Attack

那么在re-edit模式下,会锁死只能编辑这一个行为树组件,如果要编辑新的行为树组件或者生成新的行为树组件,需要单击下侧的leaveReEditingMode按钮离开re-edit模式,进入new模式(关闭bt-editor面板并不会自动离开re-edit模式,因为状态保存在main进程中,所以再次打开bt-editor后,可以通过loadDataFromComp按钮重新恢复上次saveAsBehaviorTree所保存的数据,除非你关了整个creator,这个我服233)
离开re-edit mode后,中间面板左下角的组件名字提示将会消失

回过头来想,为啥我刚刚要一直讲行为树的理念行为树的理念行为树的理念。。
因为。。代码没有验证连线的次数。。只保证连成的是树啊摔。请自律(认真脸)。

好了先介绍到这里吧。。好困。我要睡觉了。

噢 还有一点,Custom开头的节点是需要自己实现的,这会继承自对应的节点(Composite,Decorator,Ation,Condition)
而其他的预设节点是不需要自己实现的,然而如果真的要继承这些预设节点并实现新的逻辑,应该这么做: 给他们改名,改到和原来名字不一样,然后用TreeNodeTemplate实现新的逻辑。

youtube: cocos creator visual behavior tree editor package introduction ;

[tips]挂上的和行为树相关的组件如果取下来的时候报如下错误:
Right-hand side of ‘instanceof’ is not an object
可以先将节点的active设置为false 就可以取下来了。

41赞

卧槽,楼主我找这种东西着了好久 3q 支持一波

卧槽,楼主码那么多字,幸苦了:watermelon:

强强强~~~
都找不到什么词语来赞美楼主了 ~~~

我觉得我们的插件商店已经饥不可耐了……

1赞

666
最近刚在看腾讯的behaviac,可惜js…
见了楼主帖,该玩Behavior3才是啦 233

1赞

纯支持:+1:

仰望下楼主,学习新姿势,赞赞赞~

behaviac 要是能用就好了,又是 c++ 要自己整合哎!!!

感谢楼主大神!

使用教程腾讯视频链接:
https://v.qq.com/x/page/v0383p9ze4x.html

这个屌啊!感谢楼主!

6炸了

原先的行为树库有bug 今晚直播完更新 可能需要对b3库作大改

好吧 并没有 刚好只有limiter有问题 其他都没事
之前的10个下载的同学考虑下载新的吧 已经在原来的位置更新链接了。

behavior3有0.2.0版本吧

嗯 我没细看 就看了下commit描述 好像是说 只是把0.1.0改得更方便阅读。我不确定 而且里面废了parameter参数 改成用param 如果集成0.2.0进来估计整个插件的参数乃至教程都得重新修改了。 总之是懒癌发作了2333

1赞

碉堡了

真棒:14: 1.6.1 刚用上你的插件,感谢~ Limiter是有些奇怪,我按你的改法提交个pr看看

RepeaterUntilFailure 和 RepeaterUntilSuccess 名字有误 lib是 RepeatUntilFailure 和 RepeatUntilSuccess