用unity shaderlab 实现「影之诗」中的闪卡特效（一）

最新推荐文章于 2024-08-20 18:17:03 发布

9级铁甲蛹

最新推荐文章于 2024-08-20 18:17:03 发布

阅读量5.9k

点赞数 1

分类专栏：游戏开发文章标签： unity shader 图形学游戏开发

本文链接：https://blog.csdn.net/nannan0811666/article/details/79033180

版权

本文介绍了如何使用Unity ShaderLab复现「影之诗」中的闪卡特效，特别是卡牌上的波动效果。通过周期函数调整每个片元的UV偏移量，模拟波浪和滚动效果。作者还分享了如何应用遮罩层控制动态效果的强度和范围，以及如何从原图处理得到遮罩图的技巧。

摘要由CSDN通过智能技术生成

引言

大家好我是9级铁甲蛹，我从今天开始写博客了。虽然之前总想过要写写技术博客，但是觉得自己之前的学习经验对大家可能没什么帮助，而且网上许多资料非常详细。现在决定写一来是因为最近做了些有意思的东西，恰巧网上没什么具体的内容。二来是因为假期到了没之前那么忙，可以静下心来总结一下之前的学习。希望大家有什么问题多多交流。

「影之诗」中的闪卡特效

去年cygames在unite2017 Tokyo上分享了他们制作「影之诗」的经历，其中专门讲了他们是如何制作卡牌特效的。对相关的具体内容感兴趣的朋友可以看看游戏葡萄和旅法师营地的文章。
其实本质上就是一个有多种动画效果的shader，只是他们用一张图的rgb三个通道，分别作为不同效果的遮罩层，并且详细指定了各通道实现的效果类型。这样既能通过对遮罩层的详细绘制来控制效果的细节，又能通过shaderlab的便利在unity编辑器里通过调节不同参数实现不同效果。

「影之诗」中闪卡的效果大致分为三种(毕竟他们只用一张图的三个通道做遮罩层)。

图中物体各种动感的效果，比如图中人物的头发、衣物的飘动效果。这些部分都是图中原有的部分，它们基本在一定的范围内运动。
在原图上添加的有动态效果的部分，比如左图中龙口中的火焰，图中上半部分的气流，以及右图中的飘动的雾气，这些是原图中没有，是在原图基础上混合进去的部分，大多伴有简单的运动规律，如平移、旋转等。
是图片中的部分区域存在的颜色变化，比如右图中的弓上的流光。

接下来我就这三种类型的效果详细展示各效果的实现思路，效果和代码。

卡牌上的波动效果

报道的译文中提到他们可以选择“滚动”、“回旋”、“极坐标”等移动方式，刚看到这三词时我也没想到到底它们指那些变化方式，尤其是“滚动”，后来看到OpenCanvas7里滤镜变形里就三个选项“旋涡”“波浪”“极坐标”大概就猜到是指什么了。对应PS中的就是波浪、旋转扭曲、和极坐标这些滤镜的效果。实际上“滚动”跟PS里的“波浪”不太一样，不过算法只差一点。讲的时候我会将“波浪”和“滚动”两种效果对比展示一下。