??只用一個腳本做一個刮刮樂案例，一不小心刮出來一個女朋友！??【學習娛樂一下】-有解無憂

📢博客主頁：https://blog.csdn.net/zhangay1998
📢歡迎點贊 👍 收藏 ?留言 📝 如有錯誤敬請指正！
📢本文由呆呆敲代碼的小Y 原創，首發于 CSDN🙉
📢未來很長，值得我們全力奔赴更美好的生活?

- - - 📢前言
- 🎬只用一個腳本做一個刮刮樂，一不小心刮出來一個女朋友！
- - - 🏳??🌈第一步：打開Unity，新建一個專案
    - 🏳??🌈第二步：新建一個Image圖片和RawImage圖片
    - 🏳??🌈第三步：調整相機和畫布的模式
    - 🏳??🌈第四步：寫一個腳本，并掛載到Canvas上
    - 🏳??🌈最后一步：找兩張圖片放到場景中！
  - 🎬效果展示
- 💬總結
- - - 🚀往期優質文章分享

請添加圖片描述

📢前言

前幾天CSDN一個大哥：孤寒者使用HTML做了一個刮刮樂，大家都挺喜歡看的！
我也感覺挺好玩的，那就尋思用 Unity 肯定也能做呀！ Unity 是一個容易上手的游戲引擎
做出來之后可以直接打包出來給別的小哥哥小姐姐直接在手機上玩都行！！
那就來簡單說一下怎樣實作這樣一個刮刮樂的小案例吧，只需要一個腳本就能完成~
本文章會從一個新手的角度完整的將全程序都會寫出來！老手直接看腳本掛上即可！
如果之前沒接觸過 Unity 也沒關系，這正是你入坑的一個機會！Unity免費學習專欄：🎄 Unity基礎知識學習 🎄

🎬只用一個腳本做一個刮刮樂，一不小心刮出來一個女朋友！

請添加圖片描述

🏳??🌈第一步：打開Unity，新建一個專案

既然我們是用 Unity 完成這個小專案，第一步就來新建一個專案！

如果你連 Unity 引擎是什么都不知道的話，那真的有點落伍啦~

這里推薦一個免費的 Unity 學習專欄，包括怎樣下載安裝 Unity 和配置基礎環境！

以最簡單的一個視角了解什么是Unity 和 Unity最基礎知識學習！

打開UnityHub新建一個專案，改一下專案名稱和路徑，然后點擊創建，
在這里插入圖片描述

創建完之后，就會顯示出一個默認的Unity空場景，可能視窗顯示的位置不太一樣，自己可以隨意調整，這個都不重要~
在這里插入圖片描述

🏳??🌈第二步：新建一個Image圖片和RawImage圖片

在Hierarchy面板上右鍵創建一個Image和一個RawImage

如下圖所示，只需要明白這兩個Image組件都是用來顯示圖片的組件就OK啦~ 想學習更多可以去專欄學習哦！
在這里插入圖片描述
然后將這兩個Image調整成跟Canvas一個大小！

先點擊Image，選中之后，將圖片調整成Canvas一個大小，按照下圖所示快捷操作即可

也可以手動的將Image圖片調整成跟Canvas一個大小！
在這里插入圖片描述
Image和RawImage都一樣設定一下，然后場景中變成下面這樣！

🏳??🌈第三步：調整相機和畫布的模式

先選中相機Camera，將相機的投影模式改成正交，就是改一下這個Projection設定，如下圖所示！
在這里插入圖片描述
然后再選中Canvas畫布，改成畫布的第二種模式，如下所示：

Canvas畫布概念如下：

然后還沒完，還要將Canvas畫布的縮放模式改為第二種

按照螢屏大小縮放，把解析度調成1920*1080即可！如下所示
在這里插入圖片描述

🏳??🌈第四步：寫一個腳本，并掛載到Canvas上

上面的幾步都是為了將圖片顯示的時候更加美觀到位，這一步才是這個刮刮樂最關鍵的一步！

新建一個C#腳本，然后將以下代碼復制到腳本中即可
在這里插入圖片描述

直接上代碼

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

public class Demo: MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
{
    //是否擦除了
    public bool isStartEraser;
    //是否擦除結束了
    public bool isEndEraser;
    //開始事件
    public Action eraserStartEvent;
    //結束事件
    public Action eraserEndEvent;
    public RawImage uiTex;
    Texture2D tex;
    Texture2D MyTex;
    int mWidth;
    int mHeight;
    [Header("筆刷大小")]
    public int brushSize = 50;
    [Header("刮刮樂比例")]
    public int rate = 90;
    float maxColorA;
    float colorA;
    void Awake()
    {
        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;
        maxColorA = MyTex.GetPixels().Length;
        colorA = 0;
        isEndEraser = false;
        isStartEraser = 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();
    }
    bool startDraw = false;
    bool twoPoints = false;
    Vector2 lastPos;//最后一個點
    Vector2 penultPos;//倒數第二個點
    float radius = 12f;
    float distance = 1f;
    #region 事件
    public void OnPointerDown(PointerEventData eventData)
    {
        if (isEndEraser) { return; }
        startDraw = true;
        penultPos = eventData.position;
        CheckPoint(penultPos);
    }

    public void OnDrag(PointerEventData eventData)
    {
        if (isEndEraser) { return; }
        if (twoPoints && Vector2.Distance(eventData.position, lastPos) > distance)//如果兩次記錄的滑鼠坐標距離大于一定的距離，開始記錄滑鼠的點
        {
            Vector2 pos = eventData.position;
            float dis = Vector2.Distance(lastPos, pos);

            CheckPoint(eventData.position);
            int segments = (int)(dis / radius);//計算出平滑的段數                                              
            segments = segments < 1 ? 1 : segments;
            if (segments >= 10) { segments = 10; }
            Vector2[] points = Beizier(penultPos, lastPos, pos, segments);//進行貝塞爾平滑
            for (int i = 0; i < points.Length; i++)
            {
                CheckPoint(points[i]);
            }
            lastPos = pos;
            if (points.Length > 2)
                penultPos = points[points.Length - 2];
        }
        else
        {
            twoPoints = true;
            lastPos = eventData.position;
        }
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        if (isEndEraser) { return; }
        //CheckPoint(eventData.position);
        startDraw = false;
        twoPoints = false;
    }


    #endregion
    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;
                        colorA++;
                        MyTex.SetPixel(i + (int)mWidth / 2, j + (int)mHeight / 2, col);
                    }
                }
            }
            //開始刮的時候 去判斷進度
            if (!isStartEraser)
            {
                isStartEraser = true;
                InvokeRepeating("getTransparentPercent", 0f, 0.2f);
                if (eraserStartEvent != null)
                    eraserStartEvent.Invoke();
            }
            MyTex.Apply();
        }
    }
    double fate;
    /// <summary> 
    /// 檢測當前刮刮卡 進度
    /// </summary>
    /// <returns></returns>
    public void getTransparentPercent()
    {
        if (isEndEraser) { return; }
        fate = colorA / maxColorA * 100;
        fate = (float)Math.Round(fate, 2);
         Debug.Log("當前百分比: " + fate);
        if (fate >= rate)
        {
            isEndEraser = true;
            CancelInvoke("getTransparentPercent");
            uiTex.gameObject.SetActive(false);
            //觸發結束事件
            if (eraserEndEvent != null)
                eraserEndEvent.Invoke();
        }
    }
}