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

扫一扫,访问微社区

开发者专栏

关注:1667

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

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

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

[再来一次] UnityShader学习笔记(二) 让贴图纹理动起来(河流瀑布特效、精灵序列帧实现)

[复制链接]  [移动端链接]
排名
1819
昨日变化
1

31

主题

259

帖子

1249

积分

Rank: 9Rank: 9Rank: 9

UID
41125
好友
3
蛮牛币
5627
威望
0
注册时间
2014-8-21
在线时间
417 小时
最后登录
2017-4-21

专栏作家

QQ
发表于 2017-1-12 11:00:18 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 仅为年时 于 2017-1-12 11:04 编辑

       大家好,我是Zander。这一章我们将使用纹理贴图实现动画、混合和真实特效来达到理想的效果。
       纹理贴图可以使我们的着色器快速的实现逼真的效果,但是如果添加的纹理贴图过多,会非常影响游戏性能,特别是在移动设备上,需要将纹理贴图的数目降到最小,这样才能使应用程序加载更快,运行起来更加流畅。
      下面带着大家用图片来实现一个河流的效果:
      water.gif
       首先创建一个材质和一个新的着色器文件。为着色器添加属性如下:
[AppleScript] 纯文本查看 复制代码
Properties {
                _MainTint ("Diffuse Tint", Color) = (1,1,1,1)
                _MainTex ("Base (RGB)", 2D) = "white" {}
                _ScrollXSpeed ("X Scroll Speed",Range(0,10)) = 2
                _ScrollYSpeed ("Y Scroll Speed",Range(0,10)) = 2
        }

      然后在SubShader中修改CGPROGRAM部分的CG属性,添加变量便于访问
[AppleScript] 纯文本查看 复制代码
 fixed4  _MianTint;
                fixed   _ScrollXSpeed;
                fixed   _ScrollYSpeed;
                sampler2D _MainTex;
     修改surf()函数,通过tex2D()函数来改变UV坐标,然后使用内置的_Time变量来实现动态纹理
[AppleScript] 纯文本查看 复制代码
void surf (Input IN, inout SurfaceOutputStandard o) 
                {
                    //创建一个变量 存储图片UV
                    fixed2 scrolledUV  = IN.uv_MainTex;

                        //创建临时变量存储 X Y 
                        fixed xScrollValue  = _ScrollXSpeed * _Time;
                        fixed yScrollValue  = _ScrollYSpeed * _Time;

                        //计算X Y 的偏移
                        scrolledUV += fixed2(xScrollValue,yScrollValue);

                        half4 c = tex2D(_MainTex,scrolledUV);
                        o.Albedo = c.rgb;
                        o.Alpha = c.a;
                }


所用的贴图
WaterfallGraph_Diffuse.jpg


运行Unity,就可以看到河流的效果了
全部代码如下:

[AppleScript] 纯文本查看 复制代码
Shader "Custom/TexSurfaceShader" {
        Properties {
                _MainTint ("Diffuse Tint", Color) = (1,1,1,1)
                _MainTex ("Base (RGB)", 2D) = "white" {}
                _ScrollXSpeed ("X Scroll Speed",Range(0,10)) = 2
                _ScrollYSpeed ("Y Scroll Speed",Range(0,10)) = 2
        }
        SubShader {
                Tags { "RenderType"="Opaque" }
                LOD 200
                
                CGPROGRAM
                // Physically based Standard lighting model, and enable shadows on all light types
                #pragma surface surf Standard fullforwardshadows

                // Use shader model 3.0 target, to get nicer looking lighting
                #pragma target 3.0

                fixed4  _MianTint;
                fixed   _ScrollXSpeed;
                fixed   _ScrollYSpeed;
                sampler2D _MainTex;

                struct Input {
                        float2 uv_MainTex;
                };

                void surf (Input IN, inout SurfaceOutputStandard o) 
                {
                    //创建一个变量 存储图片UV
                    fixed2 scrolledUV  = IN.uv_MainTex;

                        //创建临时变量存储 X Y 
                        fixed xScrollValue  = _ScrollXSpeed * _Time;
                        fixed yScrollValue  = _ScrollYSpeed * _Time;

                        //计算X Y 的偏移
                        scrolledUV += fixed2(xScrollValue,yScrollValue);

                        half4 c = tex2D(_MainTex,scrolledUV);
                        o.Albedo = c.rgb;
                        o.Alpha = c.a;
                }
                ENDCG
        }
        FallBack "Diffuse"
}

接下来 我们来进一步扩展 。来实现一个类似于2D序列帧动画的效果。
    jdfw.gif
首先准备一张序列帧的图,
Chapter02_SpriteSheet005.png
创建一个新的材质 和一个shader,
在新的着色器中添加属性:

[AppleScript] 纯文本查看 复制代码
Properties {
                _MainTex ("Base (RGB)", 2D) = "white" {}
                _TexWidth("Sheet Width",float)=0.0
                _CellAmout("Cell Amount",float) = 0.0
                _Speed("Speed",Range(0.01,32)) = 12
        }

修改Surf()函数里面的内容:

[AppleScript] 纯文本查看 复制代码
void surf (Input IN, inout SurfaceOutputStandard o) 
                {
                    float2 spriteUV  = IN.uv_MainTex; //将输入的UV值存储到临时变量

                        float cellPixelWidth  = _TexWidth/_CellAmout; //得到每个精灵的宽度
                        float cellUVPercentage = cellPixelWidth/_TexWidth ;  //计算每个精灵在整张图中的百分比

                        float timeVal = fmod(_Time.y *_Speed , _CellAmout);
                        timeVal  = ceil(timeVal);

                        float xValue  = spriteUV.x;

                        //计算精灵在X方向上UV偏移量
                        xValue += cellUVPercentage * timeVal * _CellAmout;  
                        xValue *= cellUVPercentage;

                        spriteUV = float2(xValue,spriteUV.y);
                        // Albedo comes from a texture tinted by color
                        fixed4 c = tex2D (_MainTex, spriteUV) ;
                        o.Albedo = c.rgb;
                
                        o.Alpha = c.a;
                }

里面用到的两个数学函数:

函数描述
fmod(x,y)返回x/y的余数,符号同x。如果y为0,结果不可预料
ceil(x)对输入参数向上取整
全部代码如下:

[AppleScript] 纯文本查看 复制代码
Shader "Custom/SpriteAnimationShader" {
        Properties {
                _MainTex ("Base (RGB)", 2D) = "white" {}
                _TexWidth("Sheet Width",float)=0.0
                _CellAmout("Cell Amount",float) = 0.0
                _Speed("Speed",Range(0.01,32)) = 12
        }
        SubShader {
                Tags { "RenderType"="Opaque" }
                LOD 200
                
                CGPROGRAM
                // Physically based Standard lighting model, and enable shadows on all light types
                #pragma surface surf Standard fullforwardshadows

                // Use shader model 3.0 target, to get nicer looking lighting
                #pragma target 3.0


                sampler2D _MainTex;
                fixed  _TexWidth;
                fixed   _CellAmout;
                fixed   _Speed;


                struct Input {
                        float2 uv_MainTex;
                };



                void surf (Input IN, inout SurfaceOutputStandard o) 
                {
                    float2 spriteUV  = IN.uv_MainTex; //将输入的UV值存储到临时变量

                        float cellPixelWidth  = _TexWidth/_CellAmout; //得到每个精灵的宽度
                        float cellUVPercentage = cellPixelWidth/_TexWidth ;  //计算每个精灵在整张图中的百分比

                        float timeVal = fmod(_Time.y *_Speed , _CellAmout);
                        timeVal  = ceil(timeVal);

                        float xValue  = spriteUV.x;

                        //计算精灵在X方向上UV偏移量
                        xValue += cellUVPercentage * timeVal * _CellAmout;  
                        xValue *= cellUVPercentage;

                        spriteUV = float2(xValue,spriteUV.y);
                        // Albedo comes from a texture tinted by color
                        fixed4 c = tex2D (_MainTex, spriteUV) ;
                        o.Albedo = c.rgb;
                
                        o.Alpha = c.a;
                }
                ENDCG
        }
        FallBack "Diffuse"
}


好了,这一章就写到这,欢迎大家加入QQ群:280993838 。或者关注我的公众号



回复

使用道具 举报

4四处流浪
487/500
排名
7127
昨日变化
1

0

主题

281

帖子

487

积分

Rank: 4

UID
156480
好友
0
蛮牛币
734
威望
0
注册时间
2016-7-12
在线时间
90 小时
最后登录
2017-4-24
发表于 2017-1-12 13:47:46 | 显示全部楼层
6666666666666666666

回复 支持 反对

使用道具 举报

3偶尔光临
241/300
排名
11142
昨日变化
213

0

主题

169

帖子

241

积分

Rank: 3Rank: 3Rank: 3

UID
95669
好友
0
蛮牛币
491
威望
0
注册时间
2015-4-27
在线时间
20 小时
最后登录
2017-4-24
发表于 2017-1-12 17:57:44 | 显示全部楼层
常常吸取前輩的實務經驗才能增長自己的實力!
[发帖际遇]: pivisy 在论坛发帖时没有注意,被小偷偷去了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

3偶尔光临
299/300
排名
8434
昨日变化
3

1

主题

111

帖子

299

积分

Rank: 3Rank: 3Rank: 3

UID
116097
好友
0
蛮牛币
274
威望
0
注册时间
2015-7-31
在线时间
101 小时
最后登录
2017-4-19
发表于 2017-1-12 22:25:42 | 显示全部楼层
87878766666666666

回复 支持 反对

使用道具 举报

4四处流浪
366/500
排名
28395
昨日变化
25

0

主题

250

帖子

366

积分

Rank: 4

UID
134576
好友
0
蛮牛币
330
威望
0
注册时间
2016-1-13
在线时间
110 小时
最后登录
2017-4-20
发表于 2017-1-13 09:10:22 | 显示全部楼层
66666666666666666666666

回复 支持 反对

使用道具 举报

3偶尔光临
264/300
排名
10380
昨日变化
2

0

主题

170

帖子

264

积分

Rank: 3Rank: 3Rank: 3

UID
181594
好友
0
蛮牛币
135
威望
0
注册时间
2016-11-7
在线时间
36 小时
最后登录
2017-4-22
发表于 2017-1-13 09:19:06 | 显示全部楼层
感谢分享呀吼
[发帖际遇]: 萨满狼骑 捡了钱没交公 蛮牛币 降了 1 . 幸运榜 / 衰神榜

回复

使用道具 举报

5熟悉之中
794/1000
排名
1663
昨日变化
1

0

主题

42

帖子

794

积分

Rank: 5Rank: 5

UID
10898
好友
0
蛮牛币
1561
威望
0
注册时间
2013-12-22
在线时间
184 小时
最后登录
2017-4-24
QQ
发表于 2017-1-13 09:59:27 | 显示全部楼层
真水,这不就是那本书上的例子吗?  而且 有个搞图形学的美女,已经分享过了,嘲讽

回复 支持 反对

使用道具 举报

3偶尔光临
264/300
排名
10380
昨日变化
2

0

主题

170

帖子

264

积分

Rank: 3Rank: 3Rank: 3

UID
181594
好友
0
蛮牛币
135
威望
0
注册时间
2016-11-7
在线时间
36 小时
最后登录
2017-4-22
发表于 2017-1-13 10:10:53 | 显示全部楼层
蛮牛B蛮牛B

回复

使用道具 举报

4四处流浪
490/500
排名
4705
昨日变化

0

主题

145

帖子

490

积分

Rank: 4

UID
136927
好友
2
蛮牛币
409
威望
0
注册时间
2016-2-18
在线时间
143 小时
最后登录
2017-4-24
发表于 2017-1-13 10:36:53 | 显示全部楼层
学习了 ,谢楼主

回复

使用道具 举报

排名
20796
昨日变化
8

0

主题

4

帖子

24

积分

Rank: 1

UID
200493
好友
0
蛮牛币
153
威望
0
注册时间
2017-1-11
在线时间
8 小时
最后登录
2017-1-21
发表于 2017-1-13 11:46:36 | 显示全部楼层
正是需要的!!!

回复

使用道具 举报

6蛮牛粉丝
1293/1500
排名
836
昨日变化
1

0

主题

49

帖子

1293

积分

Rank: 6Rank: 6Rank: 6

UID
98081
好友
0
蛮牛币
2389
威望
0
注册时间
2015-5-6
在线时间
372 小时
最后登录
2017-4-24
发表于 2017-1-13 15:57:25 | 显示全部楼层
直接把书上的就给照搬了。。。

回复 支持 反对

使用道具 举报

4四处流浪
302/500
排名
7564
昨日变化
2

14

主题

99

帖子

302

积分

Rank: 4

UID
179609
好友
2
蛮牛币
549
威望
0
注册时间
2016-10-31
在线时间
77 小时
最后登录
2017-4-22
QQ
发表于 2017-1-13 17:48:31 | 显示全部楼层
不错很好的教程,学习了

回复 支持 反对

使用道具 举报

5熟悉之中
998/1000
排名
18325
昨日变化
1085

1

主题

845

帖子

998

积分

Rank: 5Rank: 5

UID
185807
好友
0
蛮牛币
989
威望
0
注册时间
2016-11-22
在线时间
136 小时
最后登录
2017-4-24
发表于 2017-1-14 15:40:22 | 显示全部楼层
学习一下
[发帖际遇]: 东坡肘子2010 乐于助人,奖励 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
13302
昨日变化
3

0

主题

36

帖子

99

积分

Rank: 2Rank: 2

UID
149699
好友
0
蛮牛币
228
威望
0
注册时间
2016-5-24
在线时间
29 小时
最后登录
2017-2-21
发表于 2017-1-14 16:11:45 | 显示全部楼层
15910603534 发表于 2017-1-13 15:57
直接把书上的就给照搬了。。。

请问是哪本书啊

回复 支持 反对

使用道具 举报

排名
13302
昨日变化
3

0

主题

36

帖子

99

积分

Rank: 2Rank: 2

UID
149699
好友
0
蛮牛币
228
威望
0
注册时间
2016-5-24
在线时间
29 小时
最后登录
2017-2-21
发表于 2017-1-14 16:13:47 | 显示全部楼层
题目很实用

回复

使用道具 举报

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

本版积分规则

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