跳转至

3.2 可视化交互编辑器介绍

交互编辑器概览

为什么你要使用可视化交互编辑器?

使用一个东西前,我们应该先问自己一个问题,为什么我们要用它,它能帮助我们做到什么?

首先我们要明白的是,可视化的交互编辑器其实也需要用户对于事物的基本行逻辑有一定的基础了解,比如理解条件的意义,一般来说,一个条件都会导致两个结果,一个是条件达到,另一个是条件没有达到, 这方面的理解有时会让用户觉得,那不是跟写代码一样吗,为什么我要使用可视化交互编辑器呢

关于为什么用户应该使用它,答案很简单,因为它可以帮助用户非常快捷的做到一些,写脚本(代码)需要很大篇幅才能完成的事情

它能为用户做到什么?

  • 鼠标节点 让你能够快捷的设置鼠标点击指定的区域或者模型,来触发后续事件

  • 空间触发器节点 让你能够在人物模型或者摄像机进入某一区域时,触发事件,比如人物走到自动门附近,自动门进行打开操作(这里需要参考动画制作版块),或者隐藏显示某样东西

  • 多人协同节点 让你能够只拖出一个节点,就可以同步客户端和服务器的操作结果,实际应用场景可以是,老师为学生展示操作过程,也可以是多人交互的场景

  • 具体的节点信息,请参照下方的具体节点说明

界面与常用操作

界面布局

image

创建脚本

image

image

上图为从场景树上方,以及节点右键添加脚本的局部截图

image

上图为从可视化脚本编辑器中添加脚本的局部截图

逻辑单元与连线

image

上面的gif展示了以下内容:

  • 创建主任务: 主任务以及初始化节点的创建和删除

image

  • 拖入逻辑单元: 其余常规节点的创建和删除

  • 逻辑连线: 常规的连线方式演示

image

  • 拖入节点: 在拖拽期间按住Ctrl可以获取节点Obj(在鼠标拣选时使用),直接拖入可以搜索该节点类型的相关函数

  • 获取/设置 属性或节点的正确操作方式: 对于属性节点,先不要按住Ctrl,直接使用鼠标左键拖拽起后,再按住Ctrl,释放后得到的结果就是获取属性值,而如果没有按住Ctrl就释放的话,得到的节点是属性的设置节点 image 如果要获取节点(场景树中的某一节点),直接使用鼠标拖拽后释放,就可以得到该节点,而如果想在释放后调用该节点的智能引用函数,则可以按住Ctrl后再进行释放 image

image

  • 拖入属性: 拖入节点属性的方式,直接拖入为设置属性值,拖入期间按住Ctrl为获取属性值

image

  • 右键搜索: 鼠标空白处右键搜索功能函数的方法

  • 连线智能搜索 连线时使用Ctrl的智能函数匹配模式,以及自动连线功能

image

注释的使用

善用注释的话,可以帮助你分块管理你的逻辑,让它们看起来更清晰,且注释中的节点会跟随整个注释框一起移动,方便快捷 image

画布与快捷操作

  • 左键:选择、框选
  • 滚轮键按下: 平移视图
  • 滑动滚轮:视图上下平移
  • 空白处右键: 打开函数搜索页面
  • ctrl+滚轮: 视图缩放 ,视图缩放的位置根据鼠标悬浮的位置来定
  • 双击画布逻辑单元,如果是节点相关的逻辑单元, 定位到节点树 及场景中的节点高亮

交互调试方法

image

从上图我们可以看出并不是所有的调试信息都成功输出了,查看对应的节点,我们可以发现有些流程是不满足条件的,这可能也是你的脚本没有成功运行的原因之一

当你的脚本不能正常工作的时候,你可以参考本段对你的脚本进行调试

  • 首先 在你制作脚本的时候,应该保持较高频率的测试(开启场景看你的脚本是否达到了你想要的效果),而不是一次性制作很大规模的脚本再开始运行找错

  • 其次 如果你忘记了进行中途的测试,已经形成了较大规模脚本,这时要想办法去除一些逻辑流程,断开一些连线,再对简单的逻辑进行测试(这也是为什么推荐使用任务拆分节点,不要把所有逻辑都连城一根线)

image

  • 最后 当你大体定位了哪一个逻辑流程有问题后,你可以尝试加入Print节点(上图),继续打印信息,查找具体的问题节点,比如你的流程节点现在有ABC3个,顺序是A->B->C,如果你不确定问题出在哪里,可以在AB和BC之间都加上Print,随意打印一些信息,再运行场景时,观察你的打印信息是否被输出, 比如这里你加在AB之间的信息打印了出来,但是BC之间却没有打印,那么就说明BC的流程没有走通(很可能是因为条件不满足造成的) ,这时你就应该有针对性的去看节点B为什么没有满足,进一步锁定最后的问题点

  • gif中输出的打印信息,用到了变量,下面会对变量的创建和使用有介绍

逻辑单元功能介绍

节点端口说明

image

以任意节点为例,整个节点可以按照左右和上下来进行整体的功能区分: + 首先从左右分开的话,左侧是都是输入部分,右侧是输出部分 + 从上下分开的话,上面是流程的控制,下面是变量的控制 + 从图形区分的话,三角端口代表流程的连接,圆圈代表的是各种变量(值)

主任务节点

image

功能作为整个可视化脚本的运行开端(一般来说是100%需要存在的节点) ,此节点会在场景运行时,循环的每帧调用

初始化节点

image

功能 :可以作为可视化脚本的运行开端, 但是本节点以及节点后连接的流程只会调用一次 ,一般在初始化一些资源或者连接信号时使用,因为这些操作只需要执行一次,无需反复执行

任务拆分节点

image image

功能 :将本来的任务线分割为多个子任务,任务数量选中节点后,可以在属性面板中调整,需要注意的是子任务的执行顺序,是从上到下的,0,1,2...,此举的意义在于对用户的操作逻辑进行分流处理,否则都连成一条线的话,后面再看这个脚本就很难理解了,另外从布局的层面来讲,也更加方便

流程控制节点

image

功能 :控制该节点(后面)的流程是否执行,如果执行,是否只执行一次,需要注意的一个特别典型的误用就是,把按键接在这个控制节点后,并且只执行一次,因为该节点只控制从这个节点开始之后的流程,所以你即便没有按下键盘,也算是一次执行,所以你应该做的是,把按键的节点放到控制的前面,如果你的本意是只响应一次按键的话

键盘节点

image

功能 :响应键盘按键,左下角的输入值可以支持捕获键盘上的字符输入,以及,暂不支持其他按键响应,右侧输出的话,第一个“按下”(指按下时),表示你按下按键的第一次响应,后面的按下保持输出则响应你的按住按键的操作,最后的释放时操作,则响应你按键抬起的瞬间(也只响应一次)

鼠标节点

image

功能 :处理鼠标按键,滚轮,坐标,拣选(鼠标选中物体),左侧输入变量可以选择键位(左键,右键,中键),左侧输入还有一个很重要的变量输入,就是需要检测拣选的节点,一般来说可以设置一些具体的模型的节点

如何使用鼠标节点实现点击模型或区域触发特定事件

请先观看gif操作,后面会给出具体的实现步骤说明

image

上面的gif展示了如何点击实体Mesh,用来触发后续事件的流程:

1.首先创建MeshInstance,并选取一种网格实例,我们这里选择的是CubeMesh

2.选择一个节点创建ivs的脚本,拖入循环(主任务)节点,连接鼠标节点,右键搜索condition(可以不添加condition,此处为严谨流程编写),添加条件判断节点,判断的流程在鼠标单击后,判断的依据为拣选标识的输出值

3.从场景树中点击MeshInstance节点后,从右侧的属性栏中拖入可见性节点,连接在条件节点后,将设置的可见性设置为假(false),这样在我们成功检测到鼠标单击且点击到该物体时,会将该物体隐藏

image

上面的gif展示了如何点击一个看不到区域,来触发鼠标拣选事件,主要的不同点在于,设置鼠标拣选的方式不同,这次我们点击了鼠标节点,并在右侧的属性栏,添加了Area节点 Area节点的创建过程在gif中已经展示了出来,这里就不再赘述 至于看到的动画部分,需要在手册中的动画创建部分进行学习(也很简单,加油)

空间触发器(AreaTrigger)

image

功能 :空间触发器的使用方法比较类似于鼠标拣选的不可见模式,其中最大的不同在于,我们不是用鼠标触发,而且判断一个物体是否进入了该区域(比如摄像机或者人物的角色)

定时器(Timer)

image

上图展示了使用计时器实现每秒转换一次物体的显隐,获取节点的指定属性,需要按住ctrl来拖入该属性,即为获取,普通拖入为设置

功能 :于指定的时间到期后,触发指定的事件,需要注意的是,因为定时器也受整体流程的影响,所以你如果将定时器放在了只执行一次的任务后,是无法正常触发的,使用定时器时,最好将其放在单独的流程中(且前序流程没有被控制)

任务组合

image

上图中展示了,在鼠标拖动的流程下,检测鼠标是否按下,并结合是否按下了W键,如果两者都满足的话,我们就隐藏掉指定节点,比较常用的用法还有检测是否几个按键都同时按下了,或者配合鼠标拣选的结果可以创作出一些独特的组合模式

这里涉及到了一些变量的创建和使用,下面会有专门的分块进行介绍

功能 :此功能并不复杂,只是同时判断几个条件是否成功,都成功后,才会触发后续的流程,需要注意的点是,一般组合判断都是放在流程的最后(拆分任务的话),这样可以先得到正确的条件结果后再进行判断

重置场景

image

上图展示了按下r键后,将场景初始化为刚加载时的状态,注意,如果修改了材质则不会对材质进行重置,因为材质是独立存在的文件(相关内容可参考材质教程部分)

功能 :将场景初始化为刚加载时的状态

多人协同

image

上图展示了一下多人协同的大体功能,触发是使用的鼠标的不可见Area触发,触发后播放了一段位移动画,可看到两端是同步进行的

功能 :对多个客户端(使用了相同脚本和资源的)进行同步显示处理,目前同步的属性包含,空间位置姿态,显隐,albedo颜色和纹理

动画播放

image

上图展示了如何使用动画播放节点对想要播放的动画进行设置和播放的,并且展示了两个逻辑输出接口(动画开始和动画结束)的输出

功能 :对指定的动画节点(AnimationPlayer节点)中的指定动画进行触发播放,可指定其播放顺序(正向或者逆向播放),也可以指定是否循环播放,也能在动画开始和动画结束的瞬间指定想要进行的后续处理流程

函数,变量,信号的用法

变量和函数(中级内容)

除了一般的连线方式使用我们的可视化脚本外,我们还可以将处理的逻辑内容进行封装,这部分一般适合有一些编程基础的人继续学习(也仅仅需要入门级的编程理解就可以了) 所以这里并不是介绍变量和函数是什么,而是介绍如何使用它

变量

我们之前在任务组合节点中用到过变量,它的作用主要是为了记录和中转我们需要用到的一些值。比如有流程A和B,流程B需要对一个变量进行判断,那么这个变量可以在流程A中获取。

变量的添加

image

变量的添加,如上图所示,在左下角的自定义单元的标签页中,可以点击加号添加变量

变量的类型

image

添加后的变量都是无类型的,需要我们鼠标右键进行编辑,可以设置类型和初始值,变量的名字可以通过单击左侧的列表进行修改

变量的获取和设置

直接拖拽出来的节点是获取变量的节点,而要设置的话则需要按住ctrl+拖拽

函数

image

从图中我们可以看到,如果你使用了函数进行封装的话,那么你的逻辑将不用都写在一起,可以分块处理,这样加上注释(comment)以后,看起来就会更加的清晰,也更方便日后的修改和理解

添加函数的细节

image

当你点击了添加函数后,和变量不同,函数的主体节点就已经被自动放置到编辑页面上了,而当你需要调用它的时候,你可以从左侧列表中,拖出,连接到你想要调用的流程位置即可

信号的用法(高级内容)

这里为什么归集到高级内容是因为,上面的变量和函数,稍微接触过程序的人,应该都知道是什么东西,但是信号则不一样,信号的话,应该属于中级的程序才理解比较深刻的东西

这里不会对原理进行详细的解释,但是会大概的说明一下它在引擎中的用法 ,在我们的引擎中,有一些节点类型,比如Area类型,当我们在场景节点树中选中后,我们可以在上面的节点分页里找到此类型支持的信号,比如其中的mouse_entered,顾名思义,这个信号就会在鼠标进入Area时触发

image

从上图我们可以看到,如果选择了连接该信号,那边则会自动在脚本中,加入该信号的节点,我们可以直接在信号后面加入我们想要处理的事件,这里是输出了一些信息, 信号的逻辑流程也是可以作为单独的流程块来处理的,不需要连接到主任务的后面

手动添加自定义信号(进阶内容)

此内容只建议有较好编程经验的用户学习

除了引擎节点自带的信号外,我们还可以自定义一些信号,用于逻辑模块间的跳转处理,这样也有利于逻辑流程的分块,但是分块的同时,也要求用户对于逻辑的理解更加的深入,否则看到四处分散的逻辑可能感觉到更加的不适应

image

图中展示了手动创建自定义信号的流程,运行后,我们按下r就会触发该信号,与该信号关联的函数也会被调用 这里详细拆解一下创建的过程:

  • 首先单击信号旁边的加号,创建我们的自定义信号new_signal(名字可以根据需求更改)

  • 在激活主任务后面(因为只需要绑定一次,不需要在循环中一直绑定),链接connect节点,进行信号的绑定,绑定节点的信号参数是字符串,我们输入new_signal即可,重点是下面两个参数,代表了你要把该信号绑定哪个节点的哪个函数上,我们使用get self函数获取当前脚本的节点(也就是你最开始添加脚本的那个节点,在这里就是场景树的根节点)

  • 接着需要指定函数,函数我们也是自己创建的test_signal函数,创建的函数都属于该脚本的节点,所以和self的节点是匹配的

  • 最后在test_signal中处理我们需要的逻辑就可以了

总结

可视化脚本有很多的创作可能性,上面仅展示了最关键的入门技术,用户还可以多加摸索,就能写出更好更强的脚本