Unity3d UGUI 实现刮刮卡效果

发表于2018-11-20
评论0 1.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
上一篇给大家介绍了如何使用shader实现刮刮卡效果,这篇就来介绍下如何使用UGUI实现刮刮卡效果的。

下面说下实现方式。
这里主要使用到一个脚本和一个Shader。
Shader "Unlit/Transparent Colored Eraser"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _RendTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
    }
    SubShader
    {
        LOD 200
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }
        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Fog { Mode Off }
            Offset -1, -1
            ColorMask RGB
            AlphaTest Greater .01
            Blend SrcAlpha OneMinusSrcAlpha
            ColorMaterial AmbientAndDiffuse
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _RendTex;
            struct appdata_t
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
            };
            struct v2f
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
            };
            v2f vert (appdata_t v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.color = v.color;
                o.texcoord = v.texcoord;
                return o;
            }
            half4 frag (v2f IN) : COLOR
            {
                // Sample the texture
                half4 col = tex2D(_MainTex, IN.texcoord) * IN.color; 
                half4 rnd = tex2D(_RendTex, IN.texcoord) * IN.color;
                col.a =  rnd.a;
                return col;
            }
            ENDCG
        }
    }
}

另一个脚本
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;  
public class UIEraserTexture : MonoBehaviour ,IPointerDownHandler,IPointerUpHandler{
    public  RawImage image; 
    public  int brushScale = 4;
    Texture2D texRender; 
    RectTransform mRectTransform; 
    Canvas canvas;  
    void Awake(){
        mRectTransform = GetComponent<RectTransform> (); 
        canvas = GameObject.Find("Canvas").GetComponent<Canvas>();
    }
    void Start () {
        texRender = new Texture2D(image.mainTexture.width, image.mainTexture.height,TextureFormat.ARGB32,true);
        Reset ();
    }
    bool isMove = false;
    public void OnPointerDown(PointerEventData data){
        Debug.Log ("OnPointerDown..."+data.position);
        start = ConvertSceneToUI (data.position);
        isMove = true;
    }
    public void OnPointerUp(PointerEventData data){
        isMove = false;
        Debug.Log ("OnPointerUp..."+data.position);
        OnMouseMove (data.position);
        start = Vector2.zero;
    }
    void Update(){
        if (isMove) {
            OnMouseMove (Input.mousePosition);
        }
    }
    Vector2 start = Vector2.zero;
    Vector2 end = Vector2.zero;
    Vector2 ConvertSceneToUI(Vector3 posi){
        Vector2 postion;
        if(RectTransformUtility.ScreenPointToLocalPointInRectangle(mRectTransform , posi, canvas.worldCamera, out postion)){
            return postion;
        } 
        return Vector2.zero;
    }
    void OnMouseMove(Vector2 position)
    {    
        end = ConvertSceneToUI (position); 
        Draw (new Rect (end.x+texRender.width/2, end.y+texRender.height/2, brushScale, brushScale));
        if (start.Equals (Vector2.zero)) {
            return;
        }
        Rect disract = new Rect ((start+end).x/2+texRender.width/2, (start+end).y/2+texRender.height/2, Mathf.Abs (end.x-start.x), Mathf.Abs (end.y-start.y));
        for (int x = (int)disract.xMin; x < (int)disract.xMax; x++) {
            for (int y = (int)disract.yMin; y < (int)disract.yMax; y++) {
                Draw (new Rect (x, y, brushScale, brushScale));
            }    
        }     
        start = end;
    }
    void Reset(){
        for (int i = 0; i < texRender.width; i++) {
            for (int j = 0; j < texRender.height; j++) {
                Color color = texRender.GetPixel (i,j);
                color.a = 1;
                texRender.SetPixel (i,j,color); 
            }  
        }   
        texRender.Apply ();
        image.material.SetTexture ("_RendTex",texRender);
    }
    void Draw(Rect rect){ 
        for (int x = (int)rect.xMin; x < (int)rect.xMax; x++) {
            for (int y = (int)rect.yMin; y < (int)rect.yMax; y++) {
                if (x < 0 || x > texRender.width || y < 0 || y > texRender.height) {
                    return;
                }   
                Color color = texRender.GetPixel (x,y);
                color.a = 0;
                texRender.SetPixel (x,y,color);
            }    
        }     
        texRender.Apply(); 
        image.material.SetTexture ("_RendTex",texRender);
    }
}

使用效果图


自己PS一张遮挡图吧,我随便P的。

新建一个材质球,给他选择上面的Shader,可以不需给它预设纹理,等下在脚本里赋予。挂在UGUI的Image上,脚本也挂在Image上面,RawImage和Image随便。

下面是NGUI的简单例子:
using UnityEngine;
using System.Collections; 
public class EraserTexture : MonoBehaviour {
    struct EraserPoint {
        public int x;
        public int y;
        public bool flag;
        public EraserPoint(int _x,int _y,bool _flag){
            this.x = _x;
            this.y = _y;
            this.flag = _flag;
        }
        public override string ToString ()
        {
            return string.Format ("[EraserPoint: x={0}, y={1}, flag={2}]", x, y, flag);
        }
    }
    public  UITexture image;
    public  int brushScale = 4;
    GameObject mEventTarget;
    string mEventHander;
    bool isGame = false;
    int ctx = 0;
    int cty = 0;
    Texture2D texRender; 
    Camera canvas; 
    public void SetTarget(GameObject _target,string _hander){
        this.mEventTarget = _target;
        this.mEventHander = _hander;
    }
    void Awake(){
        canvas = NGUITools.FindCameraForLayer (gameObject.layer);
        if (image == null)
            image = GetComponent<UITexture> ();
    }
    void Start () {
        texRender = new Texture2D(image.width, image.height,TextureFormat.ARGB32,true);
        ctx = texRender.width/2;
        cty = texRender.height/2;
        Reset ();
    }
    void OnPress (bool isPressed){
        if (isGame == false)
            return;
        start = ConvertSceneToUI (Input.mousePosition);
        OnMouseMove (start);
    }
    void OnDrag (Vector2 delta){
        if (isGame == false)
            return;
        start += delta;
        OnMouseMove (start);
    }
    Vector2 start = Vector2.zero;
    Vector2 ConvertSceneToUI(Vector3 posi){
        Vector2 postion;
        postion = canvas.ScreenToWorldPoint (posi);
        postion = transform.InverseTransformPoint (postion);
        return postion;
    }
    void OnMouseMove(Vector2 end)
    {   
        Rect rect = new Rect (end.x + (texRender.width-brushScale)/2, end.y + (texRender.height-brushScale)/2, brushScale, brushScale);
        Draw (rect);
    }
    public void Reset(){
        if (texRender == null)
            return;
        for (int i = 0; i < texRender.width; i++) {
            for (int j = 0; j < texRender.height; j++) {
                Color color = texRender.GetPixel (i,j);
                color.a = 1;
                texRender.SetPixel (i,j,color);
            } 
        }  
        texRender.Apply ();
        image.material.SetTexture ("_RendTex",texRender);
        isOver = false;
        isGame = false;
    }
    void Draw(Rect rect){
        for (int x = (int)rect.xMin; x < (int)rect.xMax; x++) {
            for (int y = (int)rect.yMin; y < (int)rect.yMax; y++) {
                if (x < 0 || x > texRender.width || y < 0 || y > texRender.height) {
                    return;
                }  
                Color color = texRender.GetPixel (x,y);
                if(color.a==0)
                {
                    continue;
                }
                color.a = 0;
                texRender.SetPixel (x,y,color);
            }   
        }    
        texRender.Apply();
        image.material.SetTexture ("_RendTex",texRender);
        if (!isOver) {
            isOver = IsOver ();
        }  
        if (isOver) {
            isGame = false;
            int minx = mDataPoints[0].x-8;
            int miny = mDataPoints[0].y-8;
            int maxx = mDataPoints[8].x+8;
            int maxy = mDataPoints[8].y+8;
            for (int x = minx; x <= maxx; x++) {
                for (int y = miny; y <= maxy; y++) { 
                    Color color = texRender.GetPixel (x,y);
                    if(color.a==0)
                    {   
                        continue;
                    }   
                    color.a = 0;
                    texRender.SetPixel (x,y,color);
                }
            }    
            texRender.Apply();
            image.material.SetTexture ("_RendTex",texRender);
            if(mEventTarget!=null && !string.IsNullOrEmpty(mEventHander)){
                mEventTarget.SendMessage(mEventHander,SendMessageOptions.DontRequireReceiver);
            }   
            Debug.Log("isOver.");
        }  
    }
    bool isOver = false;
    EraserPoint[] mDataPoints = new EraserPoint[9];
    public void Set(int w,int h){
        int w2 = w/2-8;
        int h2 = h/2-8;
        mDataPoints [0] = new EraserPoint (ctx-w2,cty-h2,false);
        mDataPoints [1] = new EraserPoint (ctx-w2,cty,false);
        mDataPoints [2] = new EraserPoint (ctx-w2,cty+h2,false);
        mDataPoints [3] = new EraserPoint (ctx,cty-h2,false);
        mDataPoints [4] = new EraserPoint (ctx,cty,false);
        mDataPoints [5] = new EraserPoint (ctx,cty+h2,false);
        mDataPoints [6] = new EraserPoint (ctx+w2,cty-h2,false);
        mDataPoints [7] = new EraserPoint (ctx+w2,cty,false);
        mDataPoints [8] = new EraserPoint (ctx+w2,cty+h2,false);
        Reset ();
        isGame = true;
    }
    public bool IsOver(){
        for (int i = 0; i < mDataPoints.Length; i++) { 
            EraserPoint point = mDataPoints[i];
            if(point.flag)
                continue;
            bool ret = false;
            for (int x = point.x-4; x <= point.x+4; x++) {
                for (int y = point.y-4; y <= point.y+4; y++) { 
                    if(texRender.GetPixel(x,y).a==0){
                        mDataPoints[i].flag = ret = true; 
                        break;
                    }   
                }
                if(ret) break;
            }   
            if(!ret) return false;
        }  
        return true;
    }
}

下面补充针对全屏擦拭的方法,使用Unity相机处理,UGUI实现

核心代码如下:
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections; 
[ExecuteInEditMode]
[AddComponentMenu("Image Effects/Eraser")]
public class UIEraserEffect : MonoBehaviour ,IPointerDownHandler,IPointerUpHandler{
    public  int brushScale = 4;
    public Shader blurShader = null;   
    Texture2D texRender;
    RectTransform mRectTransform;
    Camera camera;
    Vector2 start = Vector2.zero;
    Vector2 end = Vector2.zero;
    //private static string blurMatString =
    static Material m_Material = null;
    protected Material material {
        get {
            if (m_Material == null) {
                m_Material = new Material(blurShader);
                m_Material.hideFlags = HideFlags.DontSave;
            }
            return m_Material;
        }
    }
    protected Texture2D TexRender{
        get{
            if(texRender==null){
                texRender = new Texture2D (Screen.width,Screen.height,TextureFormat.Alpha8,false);
            }
            return texRender;
        }
    }
    protected void OnDisable() {
        if( m_Material ) {
            DestroyImmediate( m_Material );
        }
    }  
    bool isMove = false;
    public void OnPointerDown(PointerEventData data){ 
        start = ConvertSceneToUI (data.position);
        isMove = true;
    }
    public void OnPointerUp(PointerEventData data){
        isMove = false;
        OnMouseMove (data.position);
        start = Vector2.zero;
    }
    void Update(){
        if (isMove) {
            OnMouseMove (Input.mousePosition);
        }
    }
    Vector2 ConvertSceneToUI(Vector3 posi){
        Vector2 postion;
        if(RectTransformUtility.ScreenPointToLocalPointInRectangle(mRectTransform , posi, camera, out postion)){
            return postion;
        }
        return Vector2.zero;
    }
    void OnMouseMove(Vector2 position)
    {  
        end = ConvertSceneToUI (position);
        Rect rect = new Rect (end.x + (TexRender.width-brushScale)/2, end.y + (TexRender.height-brushScale)/2, brushScale, brushScale);
        Draw (rect);
        start = end;
    }
    void Reset(){
        for (int i = 0; i < TexRender.width; i++) {
            for (int j = 0; j < TexRender.height; j++) {
                Color color = TexRender.GetPixel (i,j);
                color.a = 1;
                TexRender.SetPixel (i,j,color);
            } 
        }   
        TexRender.Apply (); 
    }
    void Draw(Rect rect){ 
        for (int x = (int)rect.xMin; x < (int)rect.xMax; x++) {
            for (int y = (int)rect.yMin; y < (int)rect.yMax; y++) {
                if (x < 0 || x > TexRender.width || y < 0 || y > TexRender.height) {
                    return;
                }  
                Color color = TexRender.GetPixel (x,y);
                if(color.a==0) continue;
                color.a = 0;
                TexRender.SetPixel (x,y,color);
            }   
        }     
        TexRender.Apply(); 
    }
    // --------------------------------------------------------
    protected void Start()
    {
        // Disable if we don't support image effects
        if (!SystemInfo.supportsImageEffects) {
            enabled = false;
            return;
        }   
        mRectTransform = transform.FindChild ("Canvas").GetComponent<RectTransform>();
        camera = GetComponent<Camera> ();
    }
    // Called by the camera to apply the image effect
    void OnRenderImage (RenderTexture source, RenderTexture destination) { 
        material.SetTexture("_MainTex", source );
        material.SetTexture("_RendTex", TexRender );
        Graphics.Blit(source, destination,material);
    }  
}

将改脚本挂在相机上,设置Shader,还是最上面那个Shader。建议使用一个单独的相机处理遮挡层,不使用时将其隐藏或销毁。需要设置遮挡层的 Canvas的Rander Mode 为 Sceen Space-Camera 模式,并指定对应的相机。改脚本只是简单实现。避免全屏卡顿的现象。
来自:https://www.cnblogs.com/angelbird/p/5083499.html

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台