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 模式，并指定对应的相机。改脚本只是简单实现。避免全屏卡顿的现象。

转载于:https://www.cnblogs.com/angelbird/p/5083499.html

• 点赞
• 收藏
• 分享
• 文章举报