Unity3d UGUI 实现刮刮卡 橡皮擦

有个朋友问我怎么在Unity中使用 UGUI 实现刮刮卡功能，之前确实没有做过，但我想了下，应该使用 Shader 可以达到。于是花了点时间实现了下改功能。 

 

下面说下实现方式。

这里我主要使用到一个脚本和一个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 模式，并指定对应的相机。改脚本只是简单实现。避免全屏卡顿的现象。