【Unity3D日常开发】Unity3D中实现UI擦除效果、刮刮卡功能

news2024/11/25 2:58:10

推荐阅读

  • CSDN主页
  • GitHub开源地址
  • Unity3D插件分享
  • 简书地址
  • 我的个人博客

大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。

一、前言

使用Unity3D实现UI的擦拭效果、刮刮卡功能的效果实现方式比较多,比如说用Shader、Texture渲染都是可以的。

本篇文章就使用Texture渲染来实现擦除的效果,效果图如下:

在这里插入图片描述
接下来就来看一下如何实现吧。

二、正文

2-1、实现原理

(1)取得遮罩图的像素数据。
(2)在鼠标滑动的时候,将屏幕坐标转换到遮罩在父节点下的坐标。
(3)以鼠标点击的点为中心,生成需要擦除的区域大小,通过与记录的遮罩数据进行对比,替换擦除的区域的像素值。
(4)计算每一个像素的alpha值,设置为0,达到透明的效果。
(5)拖动的话使用了贝塞尔平滑,让擦除更加的丝滑。

2-2、实现步骤

(1)设置摄像机的属性
在这里插入图片描述
Projection设置为Orthographic

(2)新建一个Canvas,设置属性:
在这里插入图片描述
Render ModeScreen Space-Camera
Render Camera摄像机对象
UI Scale ModeScale With Screen Size
Reference Resolution1920 * 1080

(3)新建一个Image,再新建一个RawImage
在这里插入图片描述
在这里插入图片描述
底板和蒙版的图:
在这里插入图片描述

在这里插入图片描述
(4)新建脚本命名为EraseMask.cs,双击打开脚本,修改脚本:

using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class EraseMask : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
{
    [Header("是否启用")] public bool isEnable = true;  //是否启用
    [Header("毛刷大小")] public int brushSize = 50; //毛刷大小
    [Header("擦拭比例")] public int rate = 90;      //可以设置当到达一定比例后全部显示

    Action eraserEvent;         //擦拭事件
    RawImage uiTex;             //渲染对象

    Texture2D MyTex;            //渲染材质
    int mWidth, mHeight;        //宽,高
    int maxColor, startColor;   //最大颜色量,开始颜色量
    bool twoPoints = false;     //判断鼠标是否松开
    Vector2 startPos, endPos;   //开始点,结束点
    float radius = 12f;         //平滑的段数
    float distance = 1f;        //鼠标滑动的距离
    double fate;                //进度

    void Awake()
    {
        if (!isEnable) { return; }
        uiTex = GetComponentInChildren<RawImage>();
        Texture2D tex = (Texture2D)uiTex.mainTexture;
        MyTex = new Texture2D(tex.width, tex.height, TextureFormat.ARGB32, false);
        mWidth = MyTex.width;
        mHeight = MyTex.height;
        MyTex.SetPixels(tex.GetPixels());
        MyTex.Apply();
        uiTex.texture = MyTex;
        maxColor = MyTex.GetPixels().Length;
        startColor = 0;
        eraserEvent += getTransparentPercent;
    }

    #region 事件
    public void OnPointerDown(PointerEventData eventData)
    {
        if (!isEnable) { return; }
        startPos = eventData.position;
        CheckPoint(startPos);
    }

    public void OnDrag(PointerEventData eventData)
    {
        if (!isEnable) { return; }
        if (twoPoints && Vector2.Distance(eventData.position, endPos) > distance)//如果两次记录的鼠标坐标距离大于一定的距离,开始记录鼠标的点
        {
            Vector2 pos = eventData.position;
            float dis = Vector2.Distance(endPos, pos);

            CheckPoint(eventData.position);
            int segments = (int)(dis / radius);//计算出平滑的段数                                              
            segments = segments < 1 ? 1 : segments;
            if (segments >= 10) { segments = 10; }
            Vector2[] points = Beizier(startPos, endPos, pos, segments);//进行贝塞尔平滑
            for (int i = 0; i < points.Length; i++)
            {
                CheckPoint(points[i]);
            }
            endPos = pos;
            if (points.Length > 2)
                startPos = points[points.Length - 2];
        }
        else
        {
            twoPoints = true;
            endPos = eventData.position;
        }
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        if (!isEnable) { return; }
        twoPoints = false;
    }
    void CheckPoint(Vector3 pScreenPos)
    {
        Vector3 worldPos = Camera.main.ScreenToWorldPoint(pScreenPos);
        Vector3 localPos = uiTex.gameObject.transform.InverseTransformPoint(worldPos);

        if (localPos.x > -mWidth / 2 && localPos.x < mWidth / 2 && localPos.y > -mHeight / 2 && localPos.y < mHeight / 2)
        {
            for (int i = (int)localPos.x - brushSize; i < (int)localPos.x + brushSize; i++)
            {
                for (int j = (int)localPos.y - brushSize; j < (int)localPos.y + brushSize; j++)
                {
                    if (Mathf.Pow(i - localPos.x, 2) + Mathf.Pow(j - localPos.y, 2) > Mathf.Pow(brushSize, 2))
                        continue;
                    if (i < 0) { if (i < -mWidth / 2) { continue; } }
                    if (i > 0) { if (i > mWidth / 2) { continue; } }
                    if (j < 0) { if (j < -mHeight / 2) { continue; } }
                    if (j > 0) { if (j > mHeight / 2) { continue; } }

                    Color col = MyTex.GetPixel(i + (int)mWidth / 2, j + (int)mHeight / 2);
                    if (col.a != 0f)
                    {
                        col.a = 0.0f;
                        startColor++;
                        MyTex.SetPixel(i + (int)mWidth / 2, j + (int)mHeight / 2, col);
                    }
                }
            }
            //开始刮的时候 去判断进度
            if (isEnable)
            {
                eraserEvent.Invoke();
            }
            MyTex.Apply();
        }
    }
    #endregion

    /// <summary> 
    /// 检测当前刮刮卡 进度
    /// </summary>
    /// <returns></returns>
    public void getTransparentPercent()
    {
        if (!isEnable) { return; }
        fate = (float)startColor / maxColor * 100;
        fate = (float)Math.Round(fate, 2);
        Debug.Log("当前百分比: " + fate);
        if (fate >= rate)
        {
            isEnable = false;
            uiTex.gameObject.SetActive(false);
        }
    }


    /// <summary>
    /// 贝塞尔平滑
    /// </summary>
    /// <param name="start">起点</param>
    /// <param name="mid">中点</param>
    /// <param name="end">终点</param>
    /// <param name="segments">段数</param>
    /// <returns></returns>
    public Vector2[] Beizier(Vector2 start, Vector2 mid, Vector2 end, int segments)
    {
        float d = 1f / segments;
        Vector2[] points = new Vector2[segments - 1];
        for (int i = 0; i < points.Length; i++)
        {
            float t = d * (i + 1);
            points[i] = (1 - t) * (1 - t) * mid + 2 * t * (1 - t) * start + t * t * end;
        }
        List<Vector2> rps = new List<Vector2>();
        rps.Add(mid);
        rps.AddRange(points);
        rps.Add(end);
        return rps.ToArray();
    }
}

将脚本附到Canvas对象上:
在这里插入图片描述
(4)运行程序
在这里插入图片描述

三、后记

如果觉得本篇文章有用别忘了点个关注,关注不迷路,持续分享更多Unity干货文章。


你的点赞就是对博主的支持,有问题记得留言:

博主主页有联系方式。

博主还有跟多宝藏文章等待你的发掘哦:

专栏方向简介
Unity3D开发小游戏小游戏开发教程分享一些使用Unity3D引擎开发的小游戏,分享一些制作小游戏的教程。
Unity3D从入门到进阶入门从自学Unity中获取灵感,总结从零开始学习Unity的路线,有C#和Unity的知识。
Unity3D之UGUIUGUIUnity的UI系统UGUI全解析,从UGUI的基础控件开始讲起,然后将UGUI的原理,UGUI的使用全面教学。
Unity3D之读取数据文件读取使用Unity3D读取txt文档、json文档、xml文档、csv文档、Excel文档。
Unity3D之数据集合数据集合数组集合:数组、List、字典、堆栈、链表等数据集合知识分享。
Unity3D之VR/AR(虚拟仿真)开发虚拟仿真总结博主工作常见的虚拟仿真需求进行案例讲解。
Unity3D之插件插件主要分享在Unity开发中用到的一些插件使用方法,插件介绍等
Unity3D之日常开发日常记录主要是博主日常开发中用到的,用到的方法技巧,开发思路,代码分享等
Unity3D之日常BUG日常记录记录在使用Unity3D编辑器开发项目过程中,遇到的BUG和坑,让后来人可以有些参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/461373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python基于Pytorch Transformer实现对iris鸢尾花的分类预测,分别使用CPU和GPU训练

1、鸢尾花数据iris.csv iris数据集是机器学习中一个经典的数据集&#xff0c;由英国统计学家Ronald Fisher在1936年收集整理而成。该数据集包含了3种不同品种的鸢尾花&#xff08;Iris Setosa&#xff0c;Iris Versicolour&#xff0c;Iris Virginica&#xff09;各50个样本&am…

BatchNormalization和LayerNormalization的理解、适用范围、PyTorch代码示例

文章目录 为什么要NormalizationBatchNormLayerNormtorch代码示例 学习神经网络归一化时&#xff0c;文章形形色色&#xff0c;但没找到适合小白通俗易懂且全面的。学习过后&#xff0c;特此记录。 为什么要Normalization 当输入数据量级极大或极小时&#xff0c;为保证输出数…

【算法基础】直接插入排序 + 希尔排序

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;【C/C】算法 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵 希望大佬指点一二 如果文章对你有…

基于人类反馈的强化学习(RLHF)在LLM领域是如何运作的?

基于人类反馈的强化学习在LLM领域是如何运作的&#xff1f; 为什么需要强化学习RLHFPre-training modelReward ModelFine-tune with RL 参考 为什么需要强化学习 指标无法衡量。在过去的nlp任务中&#xff0c;词性标注、机器翻译、语义判别等任务是nlp任务的主力军&#xff0c…

Hytrix原理

这里写目录标题 Hytrix容错机制熔断资源隔离线程池隔离信号量隔离 服务降级请求缓存请求合并 Hystrix流程图 Hytrix容错机制 熔断 在一个统计时间窗口&#xff08;HYST rixCommandProperties.metricsRollingStatisticalWindowInMilliseconds()&#xff09;内&#xff0c;处理…

转化率双倍暴涨——客户自助服务门户

近年来&#xff0c;社交媒体的兴起使客户负责品牌对话。随着电子商务和在线帮助需求的扩大&#xff0c;公司必须满足并超越新的期望&#xff0c;以保持客户满意度。 通过SaleSmartly&#xff08;ss客服&#xff09;自动化流程功能建立客户自助服务是一种双赢的决策&#xff0c…

Ajax XHR响应

文章目录 AJAX 服务器 响应服务器响应responseText 属性responseXML 属性 AJAX 服务器 响应 服务器响应 如需获得来自服务器的响应&#xff0c;请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 属性描述responseText获得字符串形式的响应数据。responseXML…

2015年下半年软件设计师下午试题

试题一 【说明】 某慕课教育平台欲添加在线作业批改系统&#xff0c;以实现高效的作业提交与批改&#xff0c;并进行统计。学生和讲师的基本信息已经初始化为数据库中的学生表和讲师表。系统的主要功能如下&#xff1a; 提交作业。验证学生标识后&#xff0c;学生将电子作业通…

Ajax 数据库

文章目录 AJAX Database 实例AJAX 数据库实例实例解释 showCustomer() 函数AJAX 服务器页面 AJAX Database 实例 AJAX 可用来与数据库进行动态通信。 AJAX 数据库实例 下面的例子将演示网页如何通过 AJAX 从数据库读取信息&#xff1a; 请在下面的下拉列表中选择一个客户&…

【wpf】转换器 Converter

今天积攒了一个转换器的用法&#xff0c;分享给各位。 我们经常会有这种需求&#xff1a; 某些控件有时需要显示&#xff0c;有时需要隐藏&#xff0c;比如&#xff1a; 那&#xff0c;我就想通过一个bool变量和是否显示绑定。 但是我们知道&#xff0c;是否显示&#xff0c;…

nssctf web

[BJDCTF 2020]easy_md5 测试发现输入的内容会通过get传递但是没有其他内容 观察一下响应头 我们看到了 select * from admin where passwordmd5($pass,true) 这里的md5(string,raw) 这里的string应该清楚就是字符串&#xff0c;是必选参数 raw是可选参数 默认不写为FA…

08 - Linux终端与进程

---- 整理自狄泰软件唐佐林老师课程 查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;Linux系统编程训练营 - 目录 文章目录 1. 详解控制台与终端1.1 问题1.2 历史回顾1.2.1 控制台(Console)1.2.2 终端&#xff08;Terminal&#xff09; 1.3 历史发展进程1.4 终端与…

【Springboot系列】项目启动时怎么给mongo表加自动过期索引

1、前言 在之前操作mongo的过程中&#xff0c;都是自动创建&#xff0c;几乎没有手动创建过表。 这次开发中有张表数据量大&#xff0c;并且不是特别重要&#xff0c;数据表维护一个常见的问题是过期数据没有被及时清理&#xff0c;导致数据量过大&#xff0c;查询变得缓慢。…

【操作系统】CPU 缓存一致性、MESI 协议

【操作系统】CPU 缓存一致性、MESI 协议 参考资料&#xff1a; CPU缓存一致性协议(MESI) 【JUC】Java并发机制的底层实现原理 CPU 缓存一致性 文章目录 【操作系统】CPU 缓存一致性、MESI 协议CPU Cache 的数据写入写直达写回 缓存一致性问题总线嗅探MESI 协议总结 CPU Cache …

电感知识大全

目录 一、电感的种类 1、共模电感 2、差模电感 3、工字电感 功率电感 4、磁珠 5、变压器 6、R棒电感、棒形电感、差模电感 二、电感符号 三、电感特性 前面在学习电容的时候&#xff0c;为了让大家更形象&#xff0c;更通俗的去理解这个元器件&#xff0c;都是拿水缸去…

IO多路复用——select函数

1.select函数原型和fd_set结构体说明 1.1 select函数原型 ​ 使用 select 这种 IO 多路转接方式需要调用一个同名函数 select&#xff0c;这个函数是跨平台的&#xff0c;Linux、Mac、Windows 都是支持的。程序员通过调用这个函数可以委托内核帮助我们检测若干个文件描述符的…

mybatisPlus·入门·贰

文章目录 1 简单CRUD接口1.1 根据id查询&#xff08;{id传参&#xff09;1.1.1 接口类直接继承IService1.1.2 controller直接调用方法 1.2 根据ids查询1.3 新增1.3.1 接口类直接继承IService1.3.2 controller直接调用方法 1.4 修改状态&#xff08;Query传参&#xff09;1.4.1 …

GPT-4 IDEA神仙插件亲测帮助亿万用户解决痛点!

最近&#xff0c;Intellij IDEA的插件商店推出了一款新的插件——Bito&#xff0c;据说使用了GPT-4和ChatGPT来帮助开发人员编写代码&#xff0c;并且下载量已经达到了65K以上。 这款插件可以将GPT-4和ChatGPT引入IDE来大大提高开发人员的效率。它使用了OpenAI的模型&#xff0…

ESP32设备驱动-BMM150数字地磁传感器驱动

BMM150数字地磁传感器驱动 文章目录 BMM150数字地磁传感器驱动1、BMM150介绍2、硬件准备3、软件准备4、驱动实现1、BMM150介绍 BMM150 是一款低功耗、低噪声的 3 轴数字地磁传感器,用于罗盘应用。 具有 1.56 x 1.56 mm 和 0.60 mm 高度的 12 引脚晶圆级芯片级封装 (WLCSP) 为…

JavaEE 2(4/24)

目录 1.线程 2.前台线程和后台线程 3.run和start的区别 4.线程的终止 5.线程等待 6.获取当前线程的引用 1.线程 创建线程需要继承Thread方法 调用start方法就会生成一个新的线程,调用run方法会在老的线程继续跑 main也是个线程,他是自动调用的.线程休息了先唤醒main和thre…