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

扫一扫,访问微社区

开发者专栏

关注:2210

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

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

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

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

[复制链接]  [移动端链接]
2初来乍到
147/150
排名
31724
昨日变化
43

6

主题

12

帖子

147

积分

Rank: 2Rank: 2

UID
73054
好友
3
蛮牛币
228
威望
0
注册时间
2015-2-4
在线时间
23 小时
最后登录
2018-4-29

专栏作家

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

回复

使用道具 举报

排名
7579
昨日变化
7

8

主题

73

帖子

353

积分

Rank: 9Rank: 9Rank: 9

UID
237154
好友
17
蛮牛币
1165
威望
0
注册时间
2017-8-12
在线时间
124 小时
最后登录
2018-5-12

专栏作家

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

回复

使用道具 举报

排名
43747
昨日变化
45

0

主题

10

帖子

18

积分

Rank: 1

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

回复 支持 反对

使用道具 举报

7日久生情
2533/5000
排名
3332
昨日变化
4

2

主题

1780

帖子

2533

积分

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

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

回复

使用道具 举报

7日久生情
1873/5000
排名
1199
昨日变化
3

1

主题

571

帖子

1873

积分

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

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

回复

使用道具 举报

7日久生情
4048/5000
排名
3184
昨日变化
33

5

主题

3109

帖子

4048

积分

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

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

回复

使用道具 举报

7日久生情
1741/5000
排名
2797
昨日变化
13

1

主题

882

帖子

1741

积分

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

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

回复

使用道具 举报

7日久生情
1551/5000
排名
1078
昨日变化
8

5

主题

102

帖子

1551

积分

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

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

回复 支持 反对

使用道具 举报

7日久生情
1552/5000
排名
1222
昨日变化
4

1

主题

97

帖子

1552

积分

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

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

回复

使用道具 举报

7日久生情
2645/5000
排名
398
昨日变化
1

1

主题

339

帖子

2645

积分

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

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

回复 支持 反对

使用道具 举报

5熟悉之中
963/1000
排名
2469
昨日变化
2

9

主题

95

帖子

963

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

4四处流浪
305/500
排名
7515
昨日变化
8

0

主题

69

帖子

305

积分

Rank: 4

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

回复 支持 反对

使用道具 举报

4四处流浪
483/500
排名
7136
昨日变化
8

0

主题

255

帖子

483

积分

Rank: 4

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

回复

使用道具 举报

5熟悉之中
666/1000
排名
2876
昨日变化
19

0

主题

42

帖子

666

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
2645/5000
排名
398
昨日变化
1

1

主题

339

帖子

2645

积分

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

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

回复

使用道具 举报

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

本版积分规则

关闭

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

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