一、前言
点关注不迷路,持续输出干货文章。
嗨,大家好,我是向宇。
之前有小伙伴对我提了一个问题,想要做一个image上鼠标拖动,能改变透明度的效果
我们先来看看视频效果
其实这个无疑就是一个刮刮乐的效果
本文我实现了两种效果,最终效果如下:
工程源码见文章末尾。
二、原理
原理就是利用Alpha通道,Alpha为0时透明,我们可以使用一张RenderTexture作为Alpha通道图,与UI的主贴图的Alpha通道图相乘即可。
根据鼠标刮的位置,在RenderTexture上对应的位置画笔刷印记即可。
三、实操
1.安装环境
新建项目,安装ShaderGraph和升级URP项目
具体如何升级URP可以看我之前写的文章:
2. 渲染纹理RenderTexture
首先,创建一个渲染纹理
设置一下Render Texture的尺寸和格式
用photoshop做两张图,一张纯黑色的方图(用于初始化填充Render Texture),一张笔刷图,简单起见,笔刷图案我就用一个白点。
如下:
3.写脚本:ScratchUI.cs
代码的注释我写得比较清晰了,大家应该能看懂
// ScratchUI.cs using UnityEngine; using UnityEngine.EventSystems; /// <summary> /// 刮刮乐UI /// </summary> public class ScratchUI : MonoBehaviour, IPointerDownHandler, IPointerUpHandler { /// <summary> /// 绘制的目标图片 /// </summary> public RenderTexture renderTexture; /// <summary> /// 笔刷 /// </summary> public Texture brushTexture; /// <summary> /// 空白图 /// </summary> public Texture blankTexture; /// <summary> /// mask的RectTransform /// </summary> public RectTransform rectTransform; /// <summary> /// 画布 /// </summary> public Canvas canvas; private bool m_isMove = false; private void Start() { DrawBlank(); } /// <summary> /// 初始化RenderTexture /// </summary> private void DrawBlank() { // 激活rt RenderTexture.active = renderTexture; // 保存当前状态 GL.PushMatrix(); // 设置矩阵 GL.LoadPixelMatrix(0, renderTexture.width, renderTexture.height, 0); // 绘制贴图 Rect rect = new Rect(0, 0, renderTexture.width, renderTexture.height); Graphics.DrawTexture(rect, blankTexture); // 弹出改变 GL.PopMatrix(); RenderTexture.active = null; } /// <summary> /// 在RenderTexture的(x,y)坐标处画笔刷图案 /// </summary> /// <param name="x">Graphics坐标系下的x</param> /// <param name="y">Graphics坐标系下的y</param> private void Draw(int x, int y) { // 激活rt RenderTexture.active = renderTexture; // 保存当前状态 GL.PushMatrix(); // 设置矩阵 GL.LoadPixelMatrix(0, renderTexture.width, renderTexture.height, 0); // 绘制笔刷图案 x -= (int)(brushTexture.width * 0.5f); y -= (int)(brushTexture.height * 0.5f); Rect rect = new Rect(x, y, brushTexture.width, brushTexture.height); Graphics.DrawTexture(rect, brushTexture); // 弹出改变 GL.PopMatrix(); RenderTexture.active = null; } /// <summary> /// 按下 /// </summary> public void OnPointerDown(PointerEventData data) { m_isMove = true; } /// <summary> /// 抬起 /// </summary> public void OnPointerUp(PointerEventData data) { m_isMove = false; } private void Update() { if (m_isMove) { OnMouseMove(Input.mousePosition); } } /// <summary> /// 刮卡 /// </summary> /// <param name="position">刮卡的屏幕坐标</param> private void OnMouseMove(Vector2 position) { // 获取刮的位置的ui局部坐标 var uiLocalPos = ScreenPosToUiLocalPos(position, rectTransform, canvas.worldCamera); // 将局部坐标转化为uv坐标 var uvX = (rectTransform.sizeDelta.x / 2f + uiLocalPos.x) / rectTransform.sizeDelta.x; var uvY = (rectTransform.sizeDelta.y / 2f + uiLocalPos.y) / rectTransform.sizeDelta.y; // 将uv坐标转化为Graphics坐标 var x = (int)(uvX * renderTexture.width); // 注意,uv坐标系和Graphics坐标系的y轴方向相反 var y = (int)(renderTexture.height - uvY * renderTexture.height); Draw(x, y); } /// <summary> /// 将屏幕坐标抓话为目标RectTransform的局部坐标 /// </summary> /// <param name="screenPos">屏幕坐标</param> /// <param name="transform">目标RectTransform</param> /// <param name="cam">摄像机</param> /// <returns>ui局部坐标</returns> private Vector2 ScreenPosToUiLocalPos(Vector3 screenPos, RectTransform transform, Camera cam) { Vector2 uiLocalPos; if (RectTransformUtility.ScreenPointToLocalPointInRectangle(transform, screenPos, cam, out uiLocalPos)) { return uiLocalPos; } return Vector2.zero; } }
4.ShaderGraph
创建一个Unlit ShaderGraph,实现UI主贴图的Alpha通道与和RenderTexture的相乘。
注意Graph Settings设置Surface为Transparent,Blend设置为Alpha。
暴露出两个变量,方便在材质球中设置参数。
5. UI制作
准备刮刮乐的UI图片,导入Unity中
拼成界面,如下。mask层就是要被刮掉的层。text可以写文字,比如恭喜中奖之类的
新建一个摄像机,用于渲染UI
最终效果
6.材质球
创建一个材质球ScratchMaterial,使用上面做的ShaderGraph,给材质球赋值贴图。
最后将材质赋给mask的Material。
7.挂脚本
将ScratchUI.cs脚本挂到mask上,并设置好参数。
RenderTexture:用于Alpha通道图;
Brush Texture:笔刷图案,一个白点;
Blank Texture:一张纯黑色的空白图;
RectTransform:mask的RectTransform,用于坐标转换;
Canvas:用于坐标转换。
四、运行测试
五、不同素材实现相同的效果
这是网友提供的素材
新建材质做相应的修改
其他照旧
最终效果
源码
本文Demo工程已上传到git,感兴趣的同学可自行下载学习。
https://gitcode.net/unity1/guagua
注意,我使用的Unity版本是2021版