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

扫一扫,访问微社区

教程分享

关注:793

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

查看: 1160|回复: 18

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

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

11

主题

240

帖子

1670

积分

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

UID
99182
好友
0
蛮牛币
2562
威望
0
注册时间
2015-5-10
在线时间
557 小时
最后登录
2018-11-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, 下载次数: 46

售价: 5 蛮牛币  [记录]

工程文件


回复

使用道具 举报

7日久生情
1560/5000
排名
3412
昨日变化
12

2

主题

832

帖子

1560

积分

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

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

回复

使用道具 举报

5熟悉之中
798/1000
排名
2736
昨日变化
1

0

主题

17

帖子

798

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
1670/5000
排名
1386
昨日变化
7

11

主题

240

帖子

1670

积分

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

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

多谢支持

回复 支持 反对

使用道具 举报

7日久生情
1670/5000
排名
1386
昨日变化
7

11

主题

240

帖子

1670

积分

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

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

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

回复 支持 反对

使用道具 举报

7日久生情
1565/5000
排名
2489
昨日变化
2

12

主题

632

帖子

1565

积分

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

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

回复 支持 反对

使用道具 举报

5熟悉之中
971/1000
排名
2969
昨日变化
2

0

主题

261

帖子

971

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

5熟悉之中
822/1000
排名
4610
昨日变化
25

7

主题

214

帖子

822

积分

Rank: 5Rank: 5

UID
193233
好友
4
蛮牛币
2024
威望
0
注册时间
2016-12-17
在线时间
287 小时
最后登录
2018-11-19

迈向小康

发表于 2018-9-11 10:31:10 | 显示全部楼层
sup123 发表于 2018-9-11 09:57
看到那个球...突然有个大胆的想法!学习一下!

咳咳,兄弟,跑错片场了

回复 支持 反对

使用道具 举报

5熟悉之中
822/1000
排名
4610
昨日变化
25

7

主题

214

帖子

822

积分

Rank: 5Rank: 5

UID
193233
好友
4
蛮牛币
2024
威望
0
注册时间
2016-12-17
在线时间
287 小时
最后登录
2018-11-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熟悉之中
697/1000
排名
16386
昨日变化
4

0

主题

446

帖子

697

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

5熟悉之中
524/1000
排名
5322
昨日变化
27

13

主题

61

帖子

524

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

7日久生情
1670/5000
排名
1386
昨日变化
7

11

主题

240

帖子

1670

积分

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

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

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

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1479/1500
排名
1534
昨日变化
1

0

主题

423

帖子

1479

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

7日久生情
1948/5000
排名
2870
昨日变化
7

0

主题

1149

帖子

1948

积分

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

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

回复

使用道具 举报

排名
33793
昨日变化
5

0

主题

3

帖子

17

积分

Rank: 1

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

回复 支持 反对

使用道具 举报

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

本版积分规则

关闭

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

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