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

扫一扫,访问微社区

开发者专栏

关注:2100

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

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

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

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

[复制链接]  [移动端链接]
排名
34648
昨日变化
4

4

主题

6

帖子

68

积分

Rank: 2Rank: 2

UID
73054
好友
2
蛮牛币
174
威望
0
注册时间
2015-2-4
在线时间
16 小时
最后登录
2018-1-22

专栏作家

发表于 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 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
7313
昨日变化
1

8

主题

73

帖子

349

积分

Rank: 9Rank: 9Rank: 9

UID
237154
好友
17
蛮牛币
1154
威望
0
注册时间
2017-8-12
在线时间
122 小时
最后登录
2018-2-3

专栏作家

发表于 2017-11-24 19:35:52 | 显示全部楼层
感谢分享

回复

使用道具 举报

排名
41759
昨日变化
11

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日久生情
2510/5000
排名
3715
昨日变化
17

2

主题

1840

帖子

2510

积分

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

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

回复

使用道具 举报

7日久生情
1686/5000
排名
1306
昨日变化
1

1

主题

528

帖子

1686

积分

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

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

回复

使用道具 举报

7日久生情
3790/5000
排名
4176
昨日变化
2

5

主题

3129

帖子

3790

积分

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

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

回复

使用道具 举报

6蛮牛粉丝
1207/1500
排名
3715
昨日变化

1

主题

595

帖子

1207

积分

Rank: 6Rank: 6Rank: 6

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

回复

使用道具 举报

6蛮牛粉丝
1353/1500
排名
1184
昨日变化
1

3

主题

73

帖子

1353

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1272/1500
排名
1461
昨日变化

0

主题

82

帖子

1272

积分

Rank: 6Rank: 6Rank: 6

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

回复

使用道具 举报

7日久生情
2426/5000
排名
470
昨日变化

1

主题

321

帖子

2426

积分

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

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

回复 支持 反对

使用道具 举报

5熟悉之中
802/1000
排名
2881
昨日变化

9

主题

83

帖子

802

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

3偶尔光临
266/300
排名
7974
昨日变化
1

0

主题

65

帖子

266

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

4四处流浪
420/500
排名
8075
昨日变化
5

0

主题

236

帖子

420

积分

Rank: 4

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

回复

使用道具 举报

4四处流浪
428/500
排名
4314
昨日变化
2

0

主题

39

帖子

428

积分

Rank: 4

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

回复

使用道具 举报

7日久生情
2426/5000
排名
470
昨日变化

1

主题

321

帖子

2426

积分

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

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

回复

使用道具 举报

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

本版积分规则

关闭

站长推荐 上一条 /1 下一条

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