【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能

这篇具有很好参考价值的文章主要介绍了【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

推荐阅读

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

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

一、前言

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

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

【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
接下来就来看一下如何实现吧。

二、正文

2-1、实现原理

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

2-2、实现步骤

(1)设置摄像机的属性
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
Projection设置为Orthographic

(2)新建一个Canvas,设置属性:
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
Render ModeScreen Space-Camera
Render Camera摄像机对象
UI Scale ModeScale With Screen Size
Reference Resolution1920 * 1080

(3)新建一个Image,再新建一个RawImage
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
底板和蒙版的图:
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能

【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
(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对象上:
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
(4)运行程序
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能

三、后记

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


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

博主主页有联系方式。

博主还有跟多宝藏文章等待你的发掘哦:文章来源地址https://www.toymoban.com/news/detail-442748.html

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

到了这里,关于【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Unity3D日常开发】Unity3D中实现单例模式详解

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 首先,说一下,什么是 单例模式(Singleton) 。 单例模式是设计模式中常见的一种设计模式,目的是为了

    2024年02月02日
    浏览(48)
  • 【Unity3D日常开发】Unity3D中实现不同脚本之间的执行顺序控制

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 首先,来了解一下事件函数的执行顺序,下图是官方给的脚本中事件函数的执行顺序: 众所周知,U

    2024年02月02日
    浏览(40)
  • 【Unity3D编辑器开发】Unity3D中实现Transform快速复制粘贴【非常实用】

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 在开发中,常常会遇到频繁复制粘贴物体的坐标、旋转、缩放的操作。 使用Unity自带的组件复制粘贴比

    2024年02月07日
    浏览(39)
  • Unity3D中实现动画的方式:

    Unity3D中实现动画的方式有很多种,以下是其中两种常用的方式: 1. 使用Animation组件 使用Animation组件可以制作简单的关键帧动画。步骤如下: 将需要动画的物体选中,然后在Inspector面板中点击Add Component按钮,选择Animation组件。 在Project面板中创建动画剪辑(Animation Clip)。

    2024年02月08日
    浏览(60)
  • 【Unity3D编辑器开发】Unity3D中实现查看键盘对应KeyCode值面板【方便开发】

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 在开发中,会遇到要使用监控键盘输入的KeyCode值来执行代码的情况。 比如说: 但是,如果是一些不常

    2024年02月08日
    浏览(52)
  • Unity3d C#利用Editor编辑器拓展实现配置UI背景样式一键设置UI背景样式功能(含源码)

    在开发UI滚动列表的时候,经常会有每项的背景图不统一的情况,会间隔重复的情况居多。这种情况下,手动去设置间隔一行的背景图或者颜色是比较麻烦的。在此背景下,笔者尝试写个小工具,在搭建UI时配置一下循环背景的样式,可以通过一键点击后设置UI背景的样式,省

    2024年02月03日
    浏览(37)
  • Unity3D中实现Player的第一人称视角

    效果,上面为Scene场景,下面为Game场景 0创建地形,当然可以先简单的创建一个空白的Terrain。这里我已经对地形进行了初步的编辑和渲染。 1.在Hierarchy视图中右键创建一个胶囊体(Capsule)作为Player,添加好后重置胶囊体的位置,并且调整胶囊体在一个合适的位置。  2.将Main

    2023年04月08日
    浏览(43)
  • Unity3D中实现人物的第一人称视角

    打开unity创建一个场景地图可以添加一个Plane作为地面 在Hierarchy视图中右键创建一个胶囊体(Capsule)作为Player,添加好后重置胶囊体的位置,并且调整胶囊体在一个合适的位置。 将Main Camera拖拽到到player内作为子对象,重置一下Main Camera的transform,并且再调整一下它在player中

    2024年02月11日
    浏览(45)
  • unity3D之UI

    1.canvas介绍 (1)Canvas属于Unity的UGUI,UGUI提供了强大的可视化编辑,大大提高了GUI的开发效率。 (2)Canvas是所有UI组件的父物体,也就是说每一个UI组件都必须在Canvas下,作为Canvas的子物体,当你创建一个UI控件时,如果在Hierarchy下没有Canvas组件的话,Unity会帮你自动创建一个Canva

    2024年02月04日
    浏览(95)
  • 【Unity3D】UI Toolkit简介

            UI Toolkit 是一种基于 Web 技术的 GUI 框架,是为了解决 UGUI 效率问题而设计的新一代 UI 系统(UGUI 的介绍详见→UGUI概述)。与 UGUI 不同,UI Toolkit 没有采用 GameObject 的方式,而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据,而不是整个界面状态,

    2024年02月10日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包