Unity3d UGUI 实现刮刮卡效果
发表于2018-11-20
上一篇给大家介绍了如何使用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