游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

教程分享

关注:783

当前位置:游戏蛮牛 技术专区 教程分享

查看: 509|回复: 14

[实例教程] 使用Shader实现刮刮乐效果,简单易用

[复制链接]  [移动端链接]
7日久生情
1548/5000
排名
1494
昨日变化
4

11

主题

228

帖子

1548

积分

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

UID
99182
好友
0
蛮牛币
2019
威望
0
注册时间
2015-5-10
在线时间
515 小时
最后登录
2018-9-19
发表于 2018-9-10 15:04:34 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 Kasug 于 2018-9-10 15:37 编辑

在网上看到的刮刮乐效果,基本上都是基于RenderTexture效果实现的。虽然能满足刮的效果,但是想要恢复刮的痕迹,就不太好实现。
在这里我使用Ztest这个神奇的效果,曲线救国,实现下图中的效果。可以看到先刮了图,然后我点击右键实现了回放的操作,把图片恢复成原来的样子了。

实现效果

实现效果



好的,我们需要三个材质。

第一个就是Mask材质,直接新建一个Unlit Shader,并创建一个对应的材质球。这个材质直接赋给Mask就可以了。
第二个是我们的Main材质,也就是需要刮出来的图片。创建Unlit Shader,编写如下代码,主要是使用ZTest的效果~
  
[C#] 纯文本查看 复制代码
  SubShader
    {
        Tags { "RenderType"="Opaque" "Queue" = "Transparent"}
        Pass
        {
            ZTest Greater
            blend srcalpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);

                return col;
            }
            ENDCG
        }
    }


第三个材质,也就是线段材质。同样创建Unlit Shader。编写如下代码:
[C#] 纯文本查看 复制代码
SubShader
        {
                Tags { "RenderType"="Opaque" "Queue" = "Transparent"}
                Pass
                {
                        CGPROGRAM
                        #pragma vertex vert
                        #pragma fragment frag
                        
                        #include "UnityCG.cginc"

                        struct v2f
                        {
                                float2 uv : TEXCOORD0;
                                float4 vertex : SV_POSITION;
                        };
                        
                        v2f vert (appdata_base v)
                        {
                                v2f o;
                                o.vertex = UnityObjectToClipPos(v.vertex);
                                return o;
                        }
                        
                        fixed4 frag (v2f i) : SV_Target
                        {
                                return fixed4(0,0,0,0);
                        }
                        ENDCG
                }
        }


OK!那么主要的代码已经实现,接下来就是如何使用。我们需要按下左键来模拟刮的动作。也就是创建线段啦~好的我们直接制作一个预制体如下图:
LinePrefab.png

做好了预制体,我们只需要控制实例化线段,和它的Positions就可以啦~ 这个非常简单,就不添加代码啦。主要是ZTest在这个项目中的妙用~

最后一定要注意图片的排列顺序!一定要让Main,也就是需要刮出来的图片比Mask位置相机一点
Sort.png

文末附上项目代码,新建一个项目扔进去就可以~


Mask.rar

99.87 KB, 下载次数: 24

售价: 5 蛮牛币  [记录]

工程文件


回复

使用道具 举报

6蛮牛粉丝
1427/1500
排名
3673
昨日变化
32

2

主题

761

帖子

1427

积分

Rank: 6Rank: 6Rank: 6

UID
209046
好友
0
蛮牛币
2084
威望
0
注册时间
2017-3-30
在线时间
290 小时
最后登录
2018-9-19
发表于 2018-9-10 17:18:59 | 显示全部楼层
不错的 赞

回复

使用道具 举报

5熟悉之中
717/1000
排名
3067
昨日变化
24

0

主题

17

帖子

717

积分

Rank: 5Rank: 5

UID
177881
好友
0
蛮牛币
1153
威望
0
注册时间
2016-10-24
在线时间
254 小时
最后登录
2018-9-19
发表于 2018-9-10 17:25:03 | 显示全部楼层
牛!!!!

回复

使用道具 举报

7日久生情
1548/5000
排名
1494
昨日变化
4

11

主题

228

帖子

1548

积分

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

UID
99182
好友
0
蛮牛币
2019
威望
0
注册时间
2015-5-10
在线时间
515 小时
最后登录
2018-9-19
 楼主| 发表于 2018-9-10 18:19:36 | 显示全部楼层

多谢支持

回复 支持 反对

使用道具 举报

7日久生情
1548/5000
排名
1494
昨日变化
4

11

主题

228

帖子

1548

积分

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

UID
99182
好友
0
蛮牛币
2019
威望
0
注册时间
2015-5-10
在线时间
515 小时
最后登录
2018-9-19
 楼主| 发表于 2018-9-10 18:20:43 | 显示全部楼层

多谢支持,原理和实现都比较简单~

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1341/1500
排名
2884
昨日变化
25

11

主题

557

帖子

1341

积分

Rank: 6Rank: 6Rank: 6

UID
214924
好友
3
蛮牛币
3165
威望
0
注册时间
2017-3-28
在线时间
297 小时
最后登录
2018-9-19
发表于 2018-9-11 09:22:59 | 显示全部楼层
66666666666666666666666

回复 支持 反对

使用道具 举报

5熟悉之中
912/1000
排名
3037
昨日变化
6

0

主题

232

帖子

912

积分

Rank: 5Rank: 5

UID
70462
好友
0
蛮牛币
1227
威望
0
注册时间
2015-1-22
在线时间
228 小时
最后登录
2018-9-17
QQ
发表于 2018-9-11 09:57:18 | 显示全部楼层
看到那个球...突然有个大胆的想法!学习一下!

回复 支持 反对

使用道具 举报

5熟悉之中
645/1000
排名
5683
昨日变化
72

6

主题

182

帖子

645

积分

Rank: 5Rank: 5

UID
193233
好友
4
蛮牛币
1781
威望
0
注册时间
2016-12-17
在线时间
227 小时
最后登录
2018-9-19
发表于 2018-9-11 10:31:10 | 显示全部楼层
sup123 发表于 2018-9-11 09:57
看到那个球...突然有个大胆的想法!学习一下!

咳咳,兄弟,跑错片场了

回复 支持 反对

使用道具 举报

5熟悉之中
645/1000
排名
5683
昨日变化
72

6

主题

182

帖子

645

积分

Rank: 5Rank: 5

UID
193233
好友
4
蛮牛币
1781
威望
0
注册时间
2016-12-17
在线时间
227 小时
最后登录
2018-9-19
发表于 2018-9-11 10:54:14 | 显示全部楼层
,将预制体标签改为 “line”  右键直接删除划痕


void Update()
    {
        if (Input.GetMouseButton(1))
        {
            CleanLine();
        }
    }
    private void CleanLine()
    {
         lines_ = GameObject.FindGameObjectsWithTag("line");
        for(int i = 0; i < lines_.Length; i++)
        {
            Destroy(lines_[i]);
        }
    }

回复 支持 反对

使用道具 举报

5熟悉之中
630/1000
排名
16060
昨日变化
10

0

主题

395

帖子

630

积分

Rank: 5Rank: 5

UID
199204
好友
0
蛮牛币
345
威望
0
注册时间
2017-1-5
在线时间
195 小时
最后登录
2018-9-18
发表于 2018-9-11 11:06:32 | 显示全部楼层
谢谢楼主分享

回复

使用道具 举报

3偶尔光临
292/300
排名
7385
昨日变化
119

7

主题

40

帖子

292

积分

Rank: 3Rank: 3Rank: 3

UID
284790
好友
1
蛮牛币
1195
威望
0
注册时间
2018-6-7
在线时间
75 小时
最后登录
2018-9-19
发表于 2018-9-11 12:32:24 | 显示全部楼层
thanks for the share!!666

回复 支持 反对

使用道具 举报

7日久生情
1548/5000
排名
1494
昨日变化
4

11

主题

228

帖子

1548

积分

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

UID
99182
好友
0
蛮牛币
2019
威望
0
注册时间
2015-5-10
在线时间
515 小时
最后登录
2018-9-19
 楼主| 发表于 2018-9-11 14:19:59 | 显示全部楼层
ddddddd2 发表于 2018-9-11 10:54
,将预制体标签改为 “line”  右键直接删除划痕

这样也行,但是直接删除线段会很突兀哦。 我用的是减少LineRenderer的PositionCount实现回放功能

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1304/1500
排名
1764
昨日变化
12

0

主题

377

帖子

1304

积分

Rank: 6Rank: 6Rank: 6

UID
87577
好友
0
蛮牛币
4267
威望
0
注册时间
2015-3-31
在线时间
225 小时
最后登录
2018-9-19
发表于 2018-9-12 08:25:05 | 显示全部楼层
too good too strong!

回复 支持 反对

使用道具 举报

7日久生情
1763/5000
排名
3270
昨日变化
32

0

主题

1054

帖子

1763

积分

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

UID
189581
好友
0
蛮牛币
2399
威望
0
注册时间
2016-12-5
在线时间
289 小时
最后登录
2018-9-19
发表于 2018-9-12 09:25:20 | 显示全部楼层
给力啊强大啊啊

回复

使用道具 举报

排名
33144
昨日变化
41

0

主题

3

帖子

15

积分

Rank: 1

UID
265392
好友
0
蛮牛币
30
威望
0
注册时间
2018-1-19
在线时间
5 小时
最后登录
2018-9-15
发表于 2018-9-12 10:42:44 | 显示全部楼层
真的强,谢谢大佬分享

回复 支持 反对

使用道具 举报

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

本版积分规则

关闭

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

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