找回密码
 注册帐号

扫一扫,访问微社区

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

22
回复
2994
查看
[ 复制链接 ]
7日久生情
2060/5000
排名
1058
昨日变化

13

主题

275

帖子

2060

积分

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

UID
99182
好友
0
蛮牛币
10411
威望
0
注册时间
2015-5-10
在线时间
724 小时
最后登录
2019-6-12
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, 下载次数: 106

售价: 5 蛮牛币  [记录]

工程文件

回复

使用道具 举报

7日久生情
2279/5000
排名
2612
昨日变化

2

主题

1120

帖子

2279

积分

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

UID
209046
好友
0
蛮牛币
3217
威望
0
注册时间
2017-3-30
在线时间
603 小时
最后登录
2019-7-23
2018-9-10 17:18:59 显示全部楼层
不错的 赞
回复

使用道具 举报

5熟悉之中
833/1000
排名
2760
昨日变化

0

主题

17

帖子

833

积分

Rank: 5Rank: 5

UID
177881
好友
0
蛮牛币
1380
威望
0
注册时间
2016-10-24
在线时间
288 小时
最后登录
2019-6-13
2018-9-10 17:25:03 显示全部楼层
牛!!!!
回复

使用道具 举报

7日久生情
2060/5000
排名
1058
昨日变化

13

主题

275

帖子

2060

积分

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

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

多谢支持
回复 支持 反对

使用道具 举报

7日久生情
2060/5000
排名
1058
昨日变化

13

主题

275

帖子

2060

积分

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

UID
99182
好友
0
蛮牛币
10411
威望
0
注册时间
2015-5-10
在线时间
724 小时
最后登录
2019-6-12
楼主 2018-9-10 18:20:43 显示全部楼层

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

使用道具 举报

7日久生情
2058/5000
排名
1896
昨日变化

45

主题

754

帖子

2058

积分

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

UID
214924
好友
5
蛮牛币
19637
威望
0
注册时间
2017-3-28
在线时间
543 小时
最后登录
2019-7-23
2018-9-11 09:22:59 显示全部楼层
66666666666666666666666
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1013/1500
排名
3034
昨日变化

0

主题

269

帖子

1013

积分

Rank: 6Rank: 6Rank: 6

UID
70462
好友
0
蛮牛币
1383
威望
0
注册时间
2015-1-22
在线时间
256 小时
最后登录
2019-4-20
QQ
2018-9-11 09:57:18 显示全部楼层
看到那个球...突然有个大胆的想法!学习一下!
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1256/1500
排名
3220
昨日变化

9

主题

262

帖子

1256

积分

Rank: 6Rank: 6Rank: 6

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

咳咳,兄弟,跑错片场了
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1256/1500
排名
3220
昨日变化

9

主题

262

帖子

1256

积分

Rank: 6Rank: 6Rank: 6

UID
193233
好友
6
蛮牛币
8352
威望
0
注册时间
2016-12-17
在线时间
511 小时
最后登录
2019-7-12
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]);
        }
    }
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1122/1500
排名
16955
昨日变化

1

主题

727

帖子

1122

积分

Rank: 6Rank: 6Rank: 6

UID
199204
好友
1
蛮牛币
1012
威望
0
注册时间
2017-1-5
在线时间
354 小时
最后登录
2019-7-23
2018-9-11 11:06:32 显示全部楼层
谢谢楼主分享
回复

使用道具 举报

5熟悉之中
748/1000
排名
4012
昨日变化

13

主题

103

帖子

748

积分

Rank: 5Rank: 5

UID
284790
好友
1
蛮牛币
6669
威望
0
注册时间
2018-6-7
在线时间
280 小时
最后登录
2019-5-29
2018-9-11 12:32:24 显示全部楼层
thanks for the share!!666
回复 支持 反对

使用道具 举报

7日久生情
2060/5000
排名
1058
昨日变化

13

主题

275

帖子

2060

积分

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

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

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

使用道具 举报

7日久生情
1905/5000
排名
1192
昨日变化

1

主题

559

帖子

1905

积分

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

UID
87577
好友
0
蛮牛币
7827
威望
0
注册时间
2015-3-31
在线时间
367 小时
最后登录
2019-7-23

锦衣玉食

2018-9-12 08:25:05 显示全部楼层
too good too strong!
回复 支持 反对

使用道具 举报

7日久生情
2309/5000
排名
2248
昨日变化

0

主题

1285

帖子

2309

积分

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

UID
189581
好友
0
蛮牛币
3553
威望
0
注册时间
2016-12-5
在线时间
398 小时
最后登录
2019-7-22
2018-9-12 09:25:20 显示全部楼层
给力啊强大啊啊
回复

使用道具 举报

排名
31431
昨日变化

0

主题

3

帖子

20

积分

Rank: 1

UID
265392
好友
0
蛮牛币
32
威望
0
注册时间
2018-1-19
在线时间
7 小时
最后登录
2019-3-13
2018-9-12 10:42:44 显示全部楼层
真的强,谢谢大佬分享
回复 支持 反对

使用道具 举报

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

本版积分规则