Graph-常用节点
一、常用事件触发节点
本身可以触发事件的发生,比如开拍时触发,检测到人脸触发,手势触发等。可以理解为交互发生的起因。
1.1 时间触发
因为时间的关系而产生的触发。
1.1.1 开始触发
节点信息
节点说明 | 特效开始时自动触发 |
输入端口 | |
输出端口 |
|
举个例子
在特效一开始时,我们先不让一个3D球体出现在特效中,后续通过某种触发再使其出现在屏幕中
Step 1:
新建一个3D物体,在这里我们创建一个3D球体,并拖拽到屏幕中可见位置
Step 2:
在 Graph 操作面板内添加 开始触发 节点,并将球体所在元件的 可见性 参数进行 Set(设置参数)到 Graph 内进行设置受控,并连接控制端口
Step 3:
将可见性进行更改,将启用的勾选点掉
可以看到此时屏幕中的球形消失了,我们可以通过后续的节点再次更改此参数使其可见
1.1.2 每帧触发
节点信息
节点说明 | 特效的每一帧都会触发后续的执行 |
输入端口 | |
输出端口 |
|
举个例子
通过此节点,我们使3D元件在每一帧都进行一次可见性切换。也就是在第一帧的时候,如果当前3D对象在屏幕中可见,那我们将其设置为不可见,反之我们将其设置为可见。那么在屏幕中,由于反复设置可见性,3D元件会产生闪烁的效果
Step 1:
新建一个3D物体,在这里我们创建一个3D球体,并拖拽到屏幕中可见位置
Step 2:
在 Graph 操作面板内添加 每帧触发 节点,并将球体所在元件的 可见性 参数进行 Set(设置参数)到 Graph 内进行设置受控,生成一个该3D物体的 见性设置 节点并连接控制端口
Step 3:
将球体所在元件的 可见性 参数进行 Get(获取参数)到 Graph 内获取该参数;再在分类逻辑判断内找到 与或非运算节点 并进行添加,将 Get 到的参数通过连线进行一次非运算,再将结果连接至 可见性设置 节点的设置值输入端口内,此时3D球体开始闪烁
工程文件
时间触发-每帧触发
1.1.3 定帧触发和定时触发
节点信息
节点说明 | 特效的每一帧都会触发后续的执行 | 节点说明 | 以时间为单位的循环,每隔单位时间会触发一次后续执行 |
输入端口 |
| 输入端口 |
|
输出端口 |
| 输出端口 |
|
定帧触发与定时触发逻辑基本一致,分别是以时间为单位和帧数为单位的循环触发
举个例子
通过此节点,我们使3D元件在每间隔5帧都进行一次可见性切换。也就是在第一帧的时候,如果当前3D对象在屏幕中可见,在5帧后我们将其设置为不可见,反之我们将其设置为可见。那么在屏幕中3D元件会每间隔5帧显示一次,而后5帧后消失
新建一个3D物体,在这里我们创建一个3D球体,并拖拽到屏幕中可见位置
Step 2:
在 Graph 操作面板内添加 定帧触发 节点,将触发次数设置为9999(无限触发),再将触发间隔改为5,即每5帧触发一次,并将球体所在元件的 可见性 参数进行 Set(设置参数)到 Graph 内进行设置受控,生成一个该3D物体的 见性设置 节点并连接控制端口,
Step 3:
将球体所在元件的 可见性 参数进行 Get(获取参数)到 Graph 内获取该参数;再在分类逻辑判断内找到 与或非运算节点 并进行添加,将 Get 到的参数通过连线进行一次非运算,再将结果连接至 可见性设置 节点的设置值输入端口内,此时3D球体开始每间隔5帧进行一次现隐切换
1.1.4 点击屏幕
节点信息
节点说明 | 点击屏幕时会触发后续的执行 |
输入端口 | |
输出端口 |
|
举个例子
在该例子中,我们可以使3D小球点击一次出现,再点击一次消失
Step 1:
新建一个3D物体,在这里我们创建一个3D球体,并拖拽到屏幕中可见位置
Step 2:
在 Graph 操作面板内添加 点击屏幕 节点,将球体所在元件的 可见性 参数进行 Set(设置参数)到 Graph 内进行设置受控,生成一个该3D物体的 见性设置 节点并连接至点击屏幕触发端口
Step 3:
将球体所在元件的 可见性 参数进行 Get(获取参数)到 Graph 内获取该参数;再在分类逻辑判断内找到 与或非运算节点 并进行添加,将 Get 到的参数通过连线进行一次 非运算,再将结果连接至 可见性设置 节点的可见输入端口内,此时点击屏幕,会切换3D球体的可见和不可见
1.2 面部信息检测
1.2.1 面部动作检测以及手势检测
节点信息
节点说明 | 屏幕中出现的面部动作与所选的面部动作匹配时触发 | 检测到手势时触发 |
输入端口 |
|
|
输出端口 |
|
|
举个例子
首先我们先看 检测到面部动作时触发 、未检测到面部动作时触发、面部动作从无到有时触发 和 面部动作从有到无时触发 这四个端口可能会产生迷惑,他们到底有什么区别?通过下面的例子我们将为大家讲解他们的区别
检测到面部动作时触发 、未检测到面部动作时触发 这两个端口是指 只要屏幕中的面部出现了对应的面部动作,就会在面部动作存在或不存在的每一帧都会触发后续的节点
面部动作从无到有时触发 和 面部动作从有到无时触发 则是指你所选择的面部动作从未发生到发生进行切换时触发一次
这里我们以张嘴动作来触发3D小球切换显隐的形式来观察一下这四个端口是如何触发后续节点的
Step 1:
我们在3D空间内添加了2个小球,调整到屏幕可见位置,并给他们挂上了不同的材质球进行区分
Step 2:
在节点列表内的事件触发分类内找到面部动作检测节点并添加
将第一个小球的可见性通过 set 操作,添加到操作面板并连接至 检测到面部动作时触发 端口
将第一个小球的可见性通过 get 操作添加到操作面板,通过 与或非运算 节点进行一次非运算后,连接到小球的 可见性set 节点的数据输入端口
同样将第二个小球的可见性通过 set 操作,添加到操作面板并连接至 检测到面部动作时触发 端口,后续操作与第一次个小球的处理一致
Step 3:
用同样的方式将小球的可见性设置连接到 面部动作从无到有时触发 和 面部动作从有到无时触发 这两个端口上
Step 4:
接下来我们来看一下,检测到面部动作时触发 和 面部动作从无到有时触 在检测条件上有什么不同呢?
与刚才使用的人物视频进行预览不同,这一次我们通过识别一张静态图片来看一下,当预览中的人物保持张嘴动作不变时会发生什么样的情况?
我们先将银色小球和黑色小球同时设置为不可见,再通过两个触发端口使其可见,以此来看一下这两个端口的具体表现
我们先将预览中的视频替换为一张张嘴的静态图片
然后在参数面板将两个小球均设置为不可见,再将 检测到面部动作时触发 和 面部动作从无到有时触发 分别连接两个小球的可见性设置节点,可以看到当两个节点连接到触发节点时,只有银色小球出现了,也就是说只有银色小球连接的 检测到面部动作时触发 进行了触发,而 面部动作从无到有时触发 端口并没有进行触发黑色小球的可见
工程文件
面部动作检测以及手势检测
1.2.2 人脸检测以及人手检测
节点信息
节点说明 | 以人脸出现为结果的触发 | 检测到画面中有人手时触发 |
输入端口 |
|
|
输出端口 |
|
|
1.2.3 性别检测
节点信息
节点说明 | 实时检测当前屏幕中人脸的性别 |
输入端口 |
|
输出端口 |
|
举个例子
通过这个例子,我们让男性用户出现时,屏幕中出现银色的小球,女性用户出现时,屏幕中出现黑色小球,当男性和女性同时出现时,两只小球均出现
Step 1:
新建两个球体并放置在屏幕中可见位置,建立一个黑色材质球再建立一个银色材质球,并分别挂载到两个球体上
Step 2:
将两个小球先设置为不可见,再将分别可其见参数进行 Set操作 添加到操作面板内,在列表内添加性别检测节点并分别连接两个小球,并在操作面板内将可见勾选
Step 3:
我们在预览中切换至男女双人时,发现屏幕中两个小球都出现了,在切换至女性单人时,只有黑色小球出现
二、常用检测判断节点
2.1 2D对象位置获取与矩形框包含关系判断
节点信息
节点说明 | 获取一个2D对象在屏幕中的长方形归一化坐标(XYWH) | 判断一个矩形框区域是否在目标矩形框区域内 |
输入端口 |
|
|
输出端口 |
|
|
补充阅读:什么是归一化坐标
归一化坐标以及XYWH
在了解归一化坐标之前,我们先了解一下 像塑专业版在2D图片、2D画板等2D元件中是如何进行坐标处理的。
我们处理2D元件是通过正交相机进行观察,与一般的透视相机不同,正交相机仅有XY坐标而没有Z轴,因此2D变化组件只有XY坐标可以调节。2D操作空间是宽高为 720*1280 像素,中心点为坐标原点的矩形区域,如下图所示
那么归一化坐标是什么样的呢?
与2D以像素为单位的坐标不同,归一化坐标是一种比例坐标。归一化坐标是以屏幕左上角为原点,屏幕的宽高最大值为1,每一个坐标点的XY值均为其在屏幕中的比例位置
可以看到,若想使某个坐标点保持在屏幕中,则其XY取值范围最大只能在0~1之间
为什么要使用归一化坐标?
使用归一化坐标的主要目的是满足不同手机屏幕的适配需求
我们设计时,是在 720*1280 像素的屏幕空间上进行操作,但是当用户使用时,会存在不同的设备机型,屏幕分辨率也各不相同,若依据像素进行对齐时,原本对齐好的元素在不同屏幕尺寸上会出现各种各样的偏移。而归一化坐标作为一种比例坐标,能够保证元素在不同机型上保持相同的比例位置,从而确保位置的准确性。
归一化坐标如何使用
为了让大家在操作面板内进行位置调整时更直观,2D元件在操作时使用的是像素坐标,而 Graph 的处理是按照归一化坐标进行处理的,在节点中输出为归一化坐标的端口已经做出说明
所以这里就涉及到归一化坐标与像素坐标之间进行转化的操作,在节点中我们已经提供了该节点,使用方式如下
归一化坐标转换为像素坐标 | 像素坐标转换为归一化坐标 |
XYWH是什么
XYWH分别代表了X 坐标、Y 坐标、W 宽度 和 H 高度,这些变量描述了一个矩形区域的位置以及大小,其中的XY坐标为矩形框的左上角坐标
通过这样一组坐标我们就可以知道一个矩形框所在的位置以及大小了,矩形框经常被用于素材的位置、人脸的位置、人手的位置等常见元素的位置信息。
补充阅读完毕。
举个例子
当检测到人手在屏幕中的虚线框内时,使屏幕中的小球出现
Step 1:
新增一个小球并调整到屏幕可见位置,并将小球的可见性参数 Set(设置操作) 到 Graph 的操作面板内;新增一个2D图片元件,将已经准备好的虚线框放置到屏幕中间位置
Step 2:
添加人手检测节点和矩形框包含关系判断节点,将人手检测节点的人手区域数据连接至判断对象端口,将人手检测节点的检测到人手触发端口连接至矩形框包含关系判断的开始运行端口
Step 3:
在节点列表内添加每帧触发节点、2D位置获取节点并进行连接;将虚线框的2D变化组件添加到控制面板并连接至2D位置获取的2D变化组件端口;将将2D位置获取节点输出的位置信息连接到矩形框包含关系判断的目标区域端口,将小球的可见性调整节点连接至矩形框包含关系判断的在目标区域内触发端口
Step 4:
将预览切换至摄像头预览,当将手部放置在虚线框区域内时,可以看到小球出现了!
工程文件
2D对象位置获取与矩形框包含关系判断
2.2 坐标点包含关系判断
节点信息
节点说明 | 判断一个点是否在目标矩形框区域内 |
输入端口 |
|
输出端口 |
|
2.3 时间相关
2.3.1 延时等待
将上一节点输出的触发进行延时处理后输出给下一节点
如开始触发后3秒开始播放特效,即可以在开始触发节点后添加延时等待节点
节点信息
节点说明 | 触发后等待一段时间后继续触发 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
等待时长 | 在节点被触发时多久以后会触发后续执行 | |
输出端口 | 触发 | 延时结束后触发后续执行 |
举个例子
将小球设置成开始后延时3秒消失
step1: 创建一个3D小球,获取它的可见性节点
step2: 在Graph面板添加开始触发节点,连接小球的可见性节点,并将小球设置为开始触发后不可见
step3: 在开始触发后插入逻辑判断-延时触发节点,将等待时长参数设置为3,再将触发连入小球的可见性节点
2.4 人脸相关
2.4.1 年龄检测
节点信息
节点说明 | 检测当前屏幕中人脸的年龄并输出 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
第几张人脸 | 需要检测出现屏幕中的第几张人脸 | |
输出端口 | 触发 | 触发后续执行 |
年龄数值 | 检测的年龄值,结果为浮点型,精确到小数点后两位 |
举个例子
检测镜头中的第一个人脸,若年龄检测超过30岁,则使小球消失
step1: 创建一个3D小球,获取它的可见性节点
step2: 在Graph面板添加每帧触发节点,连接小球的可见性节点,并将小球设置为开始触发后不可见
step3: 在开始触发后插入逻辑判断-年龄检测节点;再在后续连接一个逻辑判断-数值比较节点,将数值比较节点的数值类型设为double类型,再将年龄检测节点的年龄数值端口连如数值比较节点的数据B端口;最后再将数值比较的a小于b端口输出连接至小球的可见性端口
节点说明 | 作为脸部检测触发后对于面部动作的进一步判断 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
要检测的面部动作 | 要去检测的面部动作 | |
第几张人脸 | 需要检测出现屏幕中的第几张人脸,默认为全部人脸 | |
输出端口 | 触发 | 触发后续执行 |
输出状态 | 描述当前屏幕内是否存在目标面部动作,输出布尔值true或false |
举个例子
检测镜头中第一个人的表情,挑眉时使小球可见
step1: 创建一个3D小球,获取它的可见性节点
step2: 在Graph面板添加每帧触发节点,连接小球的可见性节点,并将小球设置为默认不可见
step3: 在开始触发后插入逻辑判断-面部动作判断节点,设置要检测的面部动作为挑眉,第几张人脸为1,最后再将输出状态至小球的可见性端口,触发连接至小球的可见性节点
三、常用数据处理节点
3.1 布尔值判断
节点信息
节点说明 | 对输入的布尔值进行判断 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
判断条件 | 将前置的输出用于判断的条件 | |
第几张人脸 | 需要检测出现屏幕中的第几张人脸,默认为全部人脸 | |
输出端口 | 条件为true | 当前判断结果为真时触发后续执行 |
条件为false | 当前判断结果为假时触发后续执行 |
举个例子
检测镜头中第一个人的表情,挑眉时使小球可见
step1: 创建一个3D小球,获取它的可见性节点
step2: 在Graph面板添加每帧触发节点,连接小球的可见性节点,并将小球设置为默认不可见
step3: 在开始触发后插入逻辑判断-面部动作判断节点,设置要检测的面部动作为挑眉,第几张人脸为1,最后再将输出状态至小球的可见性端口,触发连接至小球的可见性节点
3.2 数值比较
节点信息
节点说明 | 两个数字的大小判断 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
数据A | 参与运算的第一个值,可以是一个整数/浮点数 | |
数据B | 参与运算的第二个值,可以是一个整数/浮点数 | |
输出端口 | A大于B | A大于B时触发后续执行 |
A大于等于B | A大于等于B时触发后续执行 | |
A等于B | A等于B时触发后续执行 | |
A小于B | A小于B时触发后续执行 | |
A小于等于B | A小于等于B时触发后续执行 |
举个例子(同年龄检测)
检测镜头中的第一个人脸,若年龄检测超过30岁,则使小球消失
step1: 创建一个3D小球,获取它的可见性节点
step2: 在Graph面板添加每帧触发节点,连接小球的可见性节点,并将小球设置为默认不可见
step3: 在开始触发后插入逻辑判断-年龄检测节点;再在后续连接一个逻辑判断-数值比较节点,将数值比较节点的数值类型设为double类型,再将年龄检测节点的年龄数值端口连如数值比较节点的数据B端口;最后再将数值比较的a小于b端口输出连接至小球的可见性端口
3.3 数值运算
节点信息
节点说明 | 两个数字的加减乘除和取余运算 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
数据A | 参与运算的第一个值,可以是一个整数/浮点数 | |
数据B | 参与运算的第二个值,可以是一个整数/浮点数 | |
输出端口 | A+B | 输出A+B的值 |
A-B | 输出A-B的值 | |
A*B | 输出A*B的值 | |
A/B | 输出A/B的值 | |
A%B | 输出A%B的值 |
举个例子
将手动输入的数值进行加减乘除运算后输出
step1: 在Graph面板单击右键添加一个逻辑判断-数值运算节点
step2: 再在Graph面板添加一个Utility-Value节点,再连接端口,在数值运算节点上写入需要计算的数值即可。
3.4 与或非运算
节点信息
节点说明 | 布尔值的与或非运算 | |
输入端口 | 数据A | 参与运算的第一个布尔值 |
数据B | 参与运算的第二个布尔值 | |
输出端口 | A与B | 输出A与B的布尔值 |
A或B | 输出A或B的布尔值 | |
A的非 | 输出A的非值 |
举个例子
使小球的可见性在每帧都发生变化
step1: 创建一个3D小球,获取它的可见性节点
step2: 在Graph面板添加每帧触发节点,连接小球的可见性节点,并将小球设置为默认不可见
step3: 获取小球的可见性get节点,再新建逻辑判断-与或非运算节点,将小球的可见性get输出端口连上与或非运算的数据A输入端口。再将A的非输出端口连给小球的可见性set节点。
3.5 数值渐变
节点信息
节点说明 | 设置从A到B的数值渐变,可以用来控制对象的位置变化/缩放变化/旋转变化等多重数据变化 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
暂停运行 | 被触发时暂停数值变化 | |
初始值 | 数据的初始值,支持数值、坐标、颜色等多种数据类型 | |
目标值 | 最终变为的值、支持数值、坐标、颜色等多种数据类型 | |
时长 | 从初始值变化到目标值需要的时间,单位为秒,精确到两位消暑 | |
曲线 | 变化速率的曲线 | |
循环次数 | 变化的循坏次数,当值为9999时为无限循环 | |
输出端口 | 开始变化时触发 | 数据变化开始时触发后续执行 |
开始结束时触发 | 数据变化结束时触发后续执行 | |
变化数据输出 | 每帧输出变化数据的输出 |
举个例子
使小球在X轴上从左往右移动
step1: 创建一个3D小球,然后获取它的变化-位置get节点
step2: 在Graph面板添加逻辑判断-数值渐变节点,并将节点的数值类型变更为Vetcor3f,再将小球的位置get节点连接到数值渐变的初始值端口。再将数值渐变的目标值改为X:20.00、时长:5.00
step3: 获取小球的变化-位置set节点,并连接至数值渐变的变化数据输出端口。同时给小球的位置set节点添加一个每帧触发节点,最终给数值渐变节点添加一个开始触发节点。
3.6 计数器
节点信息
节点说明 | 每被触发一次进行一次累加或者累减,达到最大值后会充值计数器 | |
输入端口 | 增加计数 | 被触发时增加一次计数 |
减少计数 | 被触发时减少一次计数 | |
初始值 | 计数器的初始值 | |
最大值 | 计数器累加后的最大值 | |
最小值 | 计数器累减后的最小值 | |
输出端口 | 触发 | 当计数器累加至最大值时触发 |
输出数据 | 实时输出当前数据 |
举个例子
计算眨眼次数
step1: 在Graph面板添加逻辑判断-计数器节点,将最大值设为9999,并在输出端口连出Utility-Value节点
step2: 在Graph面板添加事件触发-面部动作检测节点,将要检测的动作设为“眨眼”,并将面部动作动物到有时触发连接至增加计数,这时打开眨眼视频预览,value值会显示出眨眼触发的次数
四、常用执行控制节点
4.1 脉冲执行
节点信息
节点说明 | 每被触发一次会按照顺序执行一次后续触发,即首次被触发执行1,第二次被触发执行2,一次类推。可以定义随机从某一执行数开始,结束后循环 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
随机开始 | 定义是从第一个端口开始顺序执行还是随机从某一个端口开始顺序触发执行 | |
输出端口 | 执行1 | 触发后续执行 |
执行2 | 触发后续执行 | |
执行3 | 触发后续执行 | |
执行4 | 触发后续执行 | |
执行5 | 触发后续执行 |
举个例子
连接眨眼使图片一个接一个消失
step1: 在特效信息面板新增5个2D图片, 再分别移动5个图片的初始位置
step2: 在Graph面板添加行为动作-脉冲执行节点,同时添加一个事件触发-面部动作检测节点
step3: 再将每个2D图片的可见性set节点获取到Graph面板,并将可见性设为不可见,按顺序连接脉冲执行节点
4.2 随机执行
节点信息
节点说明 | 每被触发一次会随机执行一次后续某个已连接触发 | |
输入端口 | 开始运行 | 被触发时执行该节点 |
输出端口 | 执行1 | 触发后续执行 |
执行2 | 触发后续执行 | |
执行3 | 触发后续执行 | |
执行4 | 触发后续执行 | |
执行5 | 触发后续执行 |
举个例子
连接眨眼使图片一个接一个随机消失
step1: 在特效信息面板新增5个2D图片, 再分别移动5个图片的初始位置
step2: 在Graph面板添加行为动作-随机执行节点,同时添加一个事件触发-面部动作检测节点
step3: 再将每个2D图片的可见性set节点获取到Graph面板,并将可见性设为不可见,按顺序连接随机执行节点
4.3 循环执行
节点信息
节点说明 | 被触发后自动循环执行,当1执行完毕时,才会执行2,一次类推。可以定义你循环次数以及定义随机从某一执行数开始(循环次数为负数时无限循环) | |
输入端口 | 开始运行 | 被触发时执行该节点 |
停止运行 | 被触发时停止循环执行 | |
输出端口 | 执行1 | 触发后续执行 |
执行2 | 触发后续执行 | |
执行3 | 触发后续执行 | |
执行4 | 触发后续执行 | |
执行5 | 触发后续执行 |
举个例子
连接眨眼使图片一个接一个消失
step1: 在特效信息面板新增5个2D图片, 再分别移动5个图片的初始位置
step2: 在Graph面板添加行为动作-循环执行节点,同时添加一个事件触发-面部动作检测节点
step3: 再将每个2D图片的可见性set节点获取到Graph面板,并将可见性设为不可见,按顺序连接循环执行节点
4.4 序列帧动画控制
节点信息
节点说明 | 控制帧动画的播放以及相关属性,必须配合序列帧组件进行使用 | |
输入端口 | 开始播放 | 被触发时开始序列帧播放 |
停止播放 | 被触发时停止序列帧播放 | |
暂停播放 | 被触发时暂停序列帧播放 | |
重置进度 | 充值序列帧的播放进度,使序列帧从头播放 | |
控制组件 | 连接至序列帧组件实现对应组件的控制 | |
从第几帧开始播放 | 定义序列帧动画从第几帧开始播放 | |
播放至第几帧结束 | 定义许了帧动画播放至第几帧停止播放,9999时全部播完 | |
循环次数 | 序列帧循环播放的次数,最小为1,当值为9999时无限循环 | |
结束时停留在最后一帧 | 序列帧播放结束时是否停留在最后一帧展示在屏幕上 | |
输出端口 | 触发 | 触发后续执行 |
开始播放触发 | 序列帧开始播放后触发后续执行 | |
播放完成触发 | 序列帧播放完成后触发后续执行 | |
播放进度 | 序列帧播放的进度,最大值为1,最小为0 |
举个例子
张嘴时使序列帧暂停播放
step1: 在资源管理面板导入本地的序列帧,并在特效信息面板新增一个2D画板
step2: 在Graph面板添加行为动作-循环执行节点,同时添加一个事件触发-面部动作检测节点
step3: 再将每个2D图片的可见性set节点获取到Graph面板,并将可见性设为不可见,按顺序连接循环执行节点