开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2006

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 1805|回复: 32

[elsong] [初级]UnityShader-模仿炉石传说卡牌动态效果(二)

[复制链接]  [移动端链接]
排名
33443
昨日变化
21

3

主题

5

帖子

45

积分

Rank: 1

UID
73054
好友
2
蛮牛币
140
威望
0
注册时间
2015-2-4
在线时间
15 小时
最后登录
2017-12-5
发表于 2017-11-24 17:59:56 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
在第一部分中(http://www.manew.com/thread-110739-1-1.html),鄙人简单介绍了材质编辑器的组成及特点,基本使用方法及“扰动”效果的实现思路。这第二部分,将总结“移动”、“旋转”效果的实现及两种混合效果的显示差异。

那就开车吧。



移动
移动是最容易实现的特效,最简单粗暴的方法就是采样时让UV坐标不断的增加或者减小,通常用时间 * 速度来控制移动效果,如:
↑ 一辆静止的小汽车

↑ U不断增加后的效果,快乐奔跑的小汽车

Shader写起来大概像这个样子:

需要注意的几点是:
1、选择了正确的循环模式

2、选择合适的时间



旋转
旋转效果本质上是平铺在X、Y轴上的2D图片,绕Z轴旋转,通常用时间 * 旋转速度来控制旋转效果。因此只要用旋转角度构建一个旋转矩阵,再用UV坐标与这个矩阵做乘法,即可,如:
↑一只旋转的小猪

↑旋转矩阵

因为缩放、旋转、平移矩阵的推导网上多的是,而这些又是图形学的入门知识,因此在这就不再赘述了(其实是因为我忘了,以后有机会再总结一下吧)。

Shader写起来大概像这个样子:

需要注意的几点是:
1、选择了正确的循环模式
如果选择了Repeat,那么效果就会变成:

2、选择合适的时间

3、合理的锚点
如果不修正旋转锚点的话,猪是以左下角(0,0)为锚点旋转的,如:
↑绕(0,0)点旋转的小猪

微调一下即可:



稍加延伸:移动 + 旋转 or 旋转 + 移动
旋转一定角度基础上的移动
↑通往天国的小汽车

在非中心点的地方旋转:
↑在左下角旋转的小猪

↑ 对应的shader

我个人的经验:
我从不记缩放、旋转、平移的先后顺序(因为我也记不住),试几次对了就行了。



混合效果差异
这里所指的混合效果,并非直接用shader中的Blend,因为Blend是指片段着色器的返回颜色当前颜色缓冲区颜色进行计算的逻辑,而我们的片段着色器返出的颜色,是将各个特效层颜色混合结果进行混合(有点绕)。换言之:此提及的“混合”只是将每层特效的颜色(之前提及的三层),通过某种方式叠加在一起的逻辑。
↑多层效果混合示意

我只用了两种混合模式,BLEND和ADD,名字没起好(因为BLEND就是混合的意思...),直接看公式吧:
BLEND:
混合后混合区颜色 = 当前特效图颜色 * 当前特效图Alpha +  当前混合区颜色 * (1 - 当前特效图Alpha)
ADD:
混合后混合区颜色 = 当前特效图颜色 +  当前混合区颜色
这介绍的有点了,因为这原理跟Shader的Blend没什么差别,分别对应了:
Blend SrcAlpha OneMinusSrcAlpha
Blend One One
只是将颜色缓冲区的概念换成了“当前混合区颜色”,而这种混合模式,也可完全照搬Shader中支持的各种混合模式,只要特效妹子开心就好

其实我想强调的是:
1、心里要对当前混合区颜色和效果图采样颜色有个概念。
2、处理Alpha时要稍加留意,你使用的纹理有没有Alpha通道你要知道,没有Alpha通道是让Unity按灰度值导入为Alpha通道还是自己算得清楚。
3、采样出的RGB是否要先被Alpha处理一下心里得有数。
4、没什么绝对正确或错误的混合,只要看起来是对的,它就是对的。



总结
片段着色器返出的颜色 = 原图颜色 op 特效1 op 特效2 op 特效3
特效x = 特效图颜色 * 特效混合色 * 遮罩图对应通道
特效图颜色 = tex2D(特效图, uv + 偏移量 + 扰动量)
讲到这里其实整个儿Shader的思路都已经总结的差不多了,至于真正的什么哪一层怎么处理就出什么效果?应该用几层?什么参数?没有什么太多意义,交给特效同学多配制几次就好了。



小彩蛋
其实,“移动”效果还有相对高级一点的用法,它的效果看起来像这样:

如果你用心眼去看的话,会发现这哥们手中的字儿是呈弧形的,而我们的图是这样的:

其实原理也很简单,只是用了一张Motion贴图来模拟uv,看一下他在PS中的样子你估计就明白了:

一句话总结就是:用渐变的颜色组成一张画布,这张画布就是渲染时UV采样的参照(0~1),扭曲画布,绘制效果自然也就扭曲了。

如果你用了Motion贴图,一定记得:要狠狠的减小他的尺寸,但不要压缩它的品质,更不要用Point过滤。因为:插值出来的“UV”比你在PhotoShop中通过“渐变”得来的“UV”平滑且靠谱的多。

[发帖际遇]: 一个袋子砸在了 elsong 头上,elsong 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
7287
昨日变化
4

8

主题

73

帖子

337

积分

Rank: 9Rank: 9Rank: 9

UID
237154
好友
17
蛮牛币
1124
威望
0
注册时间
2017-8-12
在线时间
120 小时
最后登录
2017-11-27
发表于 2017-11-24 19:35:52 | 显示全部楼层
感谢分享

回复

使用道具 举报

排名
40323
昨日变化
31

0

主题

6

帖子

13

积分

Rank: 1

UID
174568
好友
0
蛮牛币
2
威望
0
注册时间
2016-10-10
在线时间
3 小时
最后登录
2017-11-28
发表于 2017-11-24 21:56:12 | 显示全部楼层
ccccccccccccccccccc

回复 支持 反对

使用道具 举报

7日久生情
1525/5000
排名
5628
昨日变化
46

2

主题

1119

帖子

1525

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
241666
好友
0
蛮牛币
6002
威望
0
注册时间
2017-9-6
在线时间
208 小时
最后登录
2017-12-13
发表于 2017-11-25 08:53:41 来自Mobile--- | 显示全部楼层
感谢分享

回复

使用道具 举报

7日久生情
1539/5000
排名
1372
昨日变化
7

1

主题

465

帖子

1539

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
56496
好友
0
蛮牛币
4507
威望
0
注册时间
2014-11-19
在线时间
345 小时
最后登录
2017-12-12
发表于 2017-11-27 09:40:37 | 显示全部楼层
谢谢,学习了。。

回复

使用道具 举报

7日久生情
3280/5000
排名
4934
昨日变化
36

4

主题

2740

帖子

3280

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
209186
好友
5
蛮牛币
3787
威望
0
注册时间
2017-3-1
在线时间
306 小时
最后登录
2017-12-13
发表于 2017-11-27 09:48:53 | 显示全部楼层
谢谢分享

回复

使用道具 举报

5熟悉之中
866/1000
排名
4641
昨日变化
36

1

主题

403

帖子

866

积分

Rank: 5Rank: 5

UID
216583
好友
1
蛮牛币
1303
威望
0
注册时间
2017-4-7
在线时间
216 小时
最后登录
2017-12-12
发表于 2017-11-27 10:08:53 | 显示全部楼层
感谢感谢

回复

使用道具 举报

6蛮牛粉丝
1259/1500
排名
1247
昨日变化
1

3

主题

63

帖子

1259

积分

Rank: 6Rank: 6Rank: 6

UID
106862
好友
1
蛮牛币
4938
威望
0
注册时间
2015-6-9
在线时间
409 小时
最后登录
2017-12-13
发表于 2017-11-27 10:09:29 | 显示全部楼层
6666666666666666666666666666

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1120/1500
排名
1693
昨日变化
5

0

主题

73

帖子

1120

积分

Rank: 6Rank: 6Rank: 6

UID
64809
好友
0
蛮牛币
1734
威望
0
注册时间
2014-12-31
在线时间
407 小时
最后登录
2017-12-13
发表于 2017-11-27 11:38:01 | 显示全部楼层
很有用收藏了

回复

使用道具 举报

7日久生情
2265/5000
排名
520
昨日变化
2

1

主题

298

帖子

2265

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
2219
好友
1
蛮牛币
5706
威望
0
注册时间
2013-8-19
在线时间
722 小时
最后登录
2017-12-13
发表于 2017-11-27 14:09:03 | 显示全部楼层
没有源码如看AV啊

回复 支持 反对

使用道具 举报

5熟悉之中
645/1000
排名
3541
昨日变化
18

9

主题

71

帖子

645

积分

Rank: 5Rank: 5

UID
123642
好友
0
蛮牛币
682
威望
0
注册时间
2015-9-23
在线时间
233 小时
最后登录
2017-12-13
发表于 2017-11-27 17:46:33 | 显示全部楼层
来咯来咯。。第二波~感谢分享

回复 支持 反对

使用道具 举报

3偶尔光临
166/300
排名
10701
昨日变化
167

0

主题

51

帖子

166

积分

Rank: 3Rank: 3Rank: 3

UID
123020
好友
0
蛮牛币
234
威望
0
注册时间
2015-9-18
在线时间
45 小时
最后登录
2017-12-12
发表于 2017-11-27 22:58:50 | 显示全部楼层
多谢楼主分享 非常棒的资料!

回复 支持 反对

使用道具 举报

3偶尔光临
242/300
排名
13130
昨日变化
253

0

主题

158

帖子

242

积分

Rank: 3Rank: 3Rank: 3

UID
255058
好友
0
蛮牛币
486
威望
0
注册时间
2017-11-18
在线时间
34 小时
最后登录
2017-12-13
发表于 2017-11-28 08:17:40 | 显示全部楼层
路过看看 赞一个

回复

使用道具 举报

3偶尔光临
287/300
排名
5854
昨日变化
1

0

主题

23

帖子

287

积分

Rank: 3Rank: 3Rank: 3

UID
76365
好友
0
蛮牛币
527
威望
0
注册时间
2015-3-1
在线时间
80 小时
最后登录
2017-12-7
发表于 2017-11-28 08:55:23 | 显示全部楼层
6666666666666

回复

使用道具 举报

7日久生情
2265/5000
排名
520
昨日变化
2

1

主题

298

帖子

2265

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
2219
好友
1
蛮牛币
5706
威望
0
注册时间
2013-8-19
在线时间
722 小时
最后登录
2017-12-13
发表于 2017-11-28 09:41:20 | 显示全部楼层
源码呢呢呢

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表