像素专业版Graph可视化操作入门

傷城~ 2023-10-11 17:47 7阅读 0赞

## Graph 简介 ##

在像素专业版中，Graph也叫可视化创作，主要用于控制一些对象实体以及其对应的参数。

![在这里插入图片描述][d800bede43ec41eaacefe10dc1919ba9.png]  
比如说这里我们新建一个人脸生成对象，添加一个欧美脸效果。那么我们现在想做点击屏幕再变宝宝效果和欧美脸效果之间切换，这要怎么完成呢？graph 就是在做这件事。他会针对这些对象编写一套控制，完成一套对应的流程！

--------------------

## Graph 入门案例 ##

知道了Graph能做什么后，那我们接下来通过几个案例来看看它具体是怎么实现的。

### 案例一 ###

第一个案例我们要实现的是当镜头内的人点头的时候就会变成光头。这个逻辑相信计算机专业的同学们有一点点编程基础都很好理解，Graph只是将我们平日里写的代码封装成了可视化面板，让我们通过更简单的连接方式即可完成一套业务逻辑。

如果把这个操作转为开发者们更好理解的方式就如下段代码所示。

if(检测点头){
        
    	//执行变光头操作
    }

那么在我们Graph界面怎么实现该操作呢？

![在这里插入图片描述][b22f3e7ee1be4837ac671f71dba2a9b8.png]  
![在这里插入图片描述][3d30581cf5ec4677a65fb6c4e3c5e8ca.png]

在graph中我们只要添加了点头动作检测节点就可以检测视窗中人的动态特征，如果捕获到点头操作那么这条线的逻辑就触发了，就会产生一个向右的连接箭头，到此我们的 **if 判断** 操作就完成了。

`这里需要注意：我们窗口中的人脸是从0开始的，即第0个人脸就说明第一个`

![在这里插入图片描述][c1a22594e599404896a0a0e9c2e24db0.png]

完成了 if 判断后我们来添加变光头效果。

1.  添加面部生成效果对象
2.  调整参数为发型生成/变光头
3.  关闭启用按钮，让我们一开始打开摄像机发型是正常的。

![在这里插入图片描述][ee36a5bfea9345f1abc0af6d115249c8.png]

上文说到，graph是通过链接的方式进行编程，我们如何在检测到点头的同时让他开启变光头效果呢？那我们是不是要对启动的set方法重新赋值。(get：获取值/set：赋值) 让他开启光头效果，并和检测操作进行链接呢？

![在这里插入图片描述][9c01efcb92884f1ba76cb7a86565e0ae.png]

现在我们的变光头业务流程就在可视化窗口体现出来了,在镜头中进行点头即可启用光头效果。下面我们进行进一步的测试。

![在这里插入图片描述][852044b31c6c4c348d5341c585f1b262.png]

达到了我们预期的效果案例一完成！

--------------------

### 案例二 ###

第二个案例我们来实现抖音上很火的人脸变焦操作。通过眨眼进行控制！

步骤如案例一基本一样，第一步添加眨眼动作检测

![在这里插入图片描述][24cfdfb5001f4855a33d437b578db4c6.png]![在这里插入图片描述][250f3bca9bfd41fd83b61304e16c1ff4.png]

第二步添加人脸聚焦效果对象，默认为关闭状态

![在这里插入图片描述][13ef1ef88fcb4111a959efcff4f68fba.png]

第三步选择聚焦跟踪相机，设置其set方法，与我们的眨眼检测进行链接。当我们检测到眨眼操作后启动聚焦跟踪相机对象。

![在这里插入图片描述][f15b96b75c39436fb03b0a26550749ea.png]

下面我们进行眨眼动作测试

![在这里插入图片描述][fd2430ac16824bd5802b7e3412ec0bb7.png]

达到了我们预期的效果案例二完成！

--------------------

### 案例三 ###

第三个案例我们来点复杂的，通过比心手势来控制序列帧动画。要想完成这个案例第一步我们要先准备一个由15张图组成的png序列帧动画。

![在这里插入图片描述][62a66b62b3244556b393aef3c8cbb6fe.png]

第二步创建单手比心手势检测

![在这里插入图片描述][f785fbe5513d49a19ec36710c63f77a9.png]

第三步新建前景贴纸并添加序列帧控制器组件。

![在这里插入图片描述][01fc43a5369d4bafbb02a5a5a70dcb6d.png]

![在这里插入图片描述][23d272231d3f4236aa45f6fef08a6530.png]

第四步为序列帧控制器添加2d动画材质并调整其大小

![在这里插入图片描述][46ea9aff067d4223bb4fa02b4269ffaf.png]

第五步在可视化创作窗口添加序列帧动画控制

![在这里插入图片描述][333b28c5bc9d41df84d4561ce2d9efc4.png]

第六步将序列帧控制器加入到可视化窗口，这里的序列帧控制器代表的是一个资源，注意区分序列帧动画控制与序列帧控制器的区别。

![在这里插入图片描述][02c6a1c61c164128b72459ded8c2497a.png]

第七步我们来链接这些控件。单手比心时触发序列帧动画控制再执行序列帧控制器组件

![在这里插入图片描述][fd302c9772384a2ea31f032284e7c8a1.png]

经过测试发现达到了我们预期的效果

![在这里插入图片描述][d920104573e84f878cef574a860474fc.png]  
![在这里插入图片描述][5b54a78f545b491b8b9c75465ce36651.png]

--------------------

通过这两个案例我们的入门操作就完成了，后续还会更新更多Graph的使用大家持续关注吧！

[d800bede43ec41eaacefe10dc1919ba9.png]: https://img-blog.csdnimg.cn/d800bede43ec41eaacefe10dc1919ba9.png
[b22f3e7ee1be4837ac671f71dba2a9b8.png]: https://img-blog.csdnimg.cn/b22f3e7ee1be4837ac671f71dba2a9b8.png
[3d30581cf5ec4677a65fb6c4e3c5e8ca.png]: https://img-blog.csdnimg.cn/3d30581cf5ec4677a65fb6c4e3c5e8ca.png
[c1a22594e599404896a0a0e9c2e24db0.png]: https://img-blog.csdnimg.cn/c1a22594e599404896a0a0e9c2e24db0.png
[ee36a5bfea9345f1abc0af6d115249c8.png]: https://img-blog.csdnimg.cn/ee36a5bfea9345f1abc0af6d115249c8.png
[9c01efcb92884f1ba76cb7a86565e0ae.png]: https://img-blog.csdnimg.cn/9c01efcb92884f1ba76cb7a86565e0ae.png
[852044b31c6c4c348d5341c585f1b262.png]: https://img-blog.csdnimg.cn/852044b31c6c4c348d5341c585f1b262.png
[24cfdfb5001f4855a33d437b578db4c6.png]: https://img-blog.csdnimg.cn/24cfdfb5001f4855a33d437b578db4c6.png
[250f3bca9bfd41fd83b61304e16c1ff4.png]: https://img-blog.csdnimg.cn/250f3bca9bfd41fd83b61304e16c1ff4.png
[13ef1ef88fcb4111a959efcff4f68fba.png]: https://img-blog.csdnimg.cn/13ef1ef88fcb4111a959efcff4f68fba.png
[f15b96b75c39436fb03b0a26550749ea.png]: https://img-blog.csdnimg.cn/f15b96b75c39436fb03b0a26550749ea.png
[fd2430ac16824bd5802b7e3412ec0bb7.png]: https://img-blog.csdnimg.cn/fd2430ac16824bd5802b7e3412ec0bb7.png
[62a66b62b3244556b393aef3c8cbb6fe.png]: https://img-blog.csdnimg.cn/62a66b62b3244556b393aef3c8cbb6fe.png
[f785fbe5513d49a19ec36710c63f77a9.png]: https://img-blog.csdnimg.cn/f785fbe5513d49a19ec36710c63f77a9.png
[01fc43a5369d4bafbb02a5a5a70dcb6d.png]: https://img-blog.csdnimg.cn/01fc43a5369d4bafbb02a5a5a70dcb6d.png
[23d272231d3f4236aa45f6fef08a6530.png]: https://img-blog.csdnimg.cn/23d272231d3f4236aa45f6fef08a6530.png
[46ea9aff067d4223bb4fa02b4269ffaf.png]: https://img-blog.csdnimg.cn/46ea9aff067d4223bb4fa02b4269ffaf.png
[333b28c5bc9d41df84d4561ce2d9efc4.png]: https://img-blog.csdnimg.cn/333b28c5bc9d41df84d4561ce2d9efc4.png
[02c6a1c61c164128b72459ded8c2497a.png]: https://img-blog.csdnimg.cn/02c6a1c61c164128b72459ded8c2497a.png
[fd302c9772384a2ea31f032284e7c8a1.png]: https://img-blog.csdnimg.cn/fd302c9772384a2ea31f032284e7c8a1.png
[d920104573e84f878cef574a860474fc.png]: https://img-blog.csdnimg.cn/d920104573e84f878cef574a860474fc.png
[5b54a78f545b491b8b9c75465ce36651.png]: https://img-blog.csdnimg.cn/5b54a78f545b491b8b9c75465ce36651.png