Unity2D游戲開發之Sprite碎裂特效的實作（獨立解耦的組件，附詳細流程和代碼）-有解無憂

先上實際效果

如上圖所示，效果很直觀，即原始的Sprite影像的破碎組件觸發后，會將原圖碎裂成無數小塊，且使之炸裂，那么，要實作這個功能就有如下幾點需求：

對于任意大小形狀的Sprite，僅通過一個方法就能使其破碎；
盡可能的保證碎片的形狀大小具有隨機性，但是碎片不能太大，否則不美觀；
觸發完之后要讓碎片炸開來；
考慮到復用性，要封裝成一個組件，以便與工程解耦，

一、Sprite隨機分割點生成

我們依然拿原圖舉例子，隨機裁切的本質，即是在Sprite的矩形框內，隨機找分割點，并對分割的軸做垂線，重新生成四個新的矩形區域，如下圖所示：

只不過，用完全隨機的方式來生成多個切割點的時候，如果兩個點的坐標比較相近，那么實際效果就會很不美觀（有些地方特別大，有些地方特別小），如下圖：
在這里插入圖片描述
所以，我們的目的是要分割點均勻的隨機（沒錯，就是有前提的隨機）；
舉個例子：如果我們希望生成9張碎裂后的子圖片，則需要有2個分割點來分割影像，即N個分割點，生成(N+1)(N+1)張子圖，可以采取如下圖的區域劃分方法，

先將區域劃分為5X5的區域（即(2N+1)*(2N+1)）；
設左上方的子區域為S00，則于主對角線上，所有i和j坐標均為奇數的區域Sij內生成亂數（黃點所在區域）；
對亂數生成的坐標進行升序排序；
從左上角的點依次分割至左下角，

演算法如上所述那樣，通過區域劃分法，在對應子區域內生成分割點，即可以保證隨機性，又不會使分割效果太丑，那么，生成了隨機分割點之后，我們應該如果去分割Sprite呢？

二、Sprite的裁切

U3D的Sprite類內并沒有直接提供裁切的API，但是Sprite.Create()方法卻可以以Sprite物件的一部分來生成一個新的Sprite，它的API是這樣的：

Sprite.Create(Texture texture, Rect rect, Vector2 vector);

第二個引數就是新Sprite對應原始Sprite的矩形區域，

三、碎片彈射

碎片彈射效果，我們采用的是給碎片加力的方式來實作的，這樣一來，就要求碎片必須是一個剛體，于是，在碎片物件生成的部分，我們使用如下代碼來執行，

	/// <summary>
    /// 彈射一個碎片物件，
    /// </summary>
    /// <param name="fragment">碎片物件，</param>
    private void Ejection(GameObject fragment)
    {
        Vector2 start = fragment.transform.position;
        Vector2 end = gameObject.transform.position;
        Vector2 direction = end - start;
        fragment.GetComponent<Rigidbody2D>().AddForce(direction * forceMultiply, ForceMode2D.Impulse);
    }

	/// <summary>
    /// 創造一個碎片物件，
    /// </summary>
    /// <param name="sprite">碎片貼圖，</param>
    /// <param name="position">碎片貼圖位置，</param>
    /// <returns>碎片物件，</returns>
    private GameObject CreateFragment(Sprite sprite, Vector2 position)
    {
        GameObject fragment = new GameObject("Fragment");
        fragment.layer = LayerMask.NameToLayer(layerName);
        fragment.transform.position = position;
        fragment.AddComponent<SpriteRenderer>().sprite = sprite;
        // 可以將碎片視作剛體，這樣會有與地形的碰撞效果
        fragment.AddComponent<Rigidbody2D>();
        fragment.AddComponent<BoxCollider2D>();
        fragment.AddComponent<FadeOut>().delaySecond = delaySecond;     // 添加淡出效果
        return fragment;
    }

在上述代碼中，我們默認了碎片是剛體，我們還添加了一個碰撞盒，以便它在與地形碰撞時有真實的物理效果，而不是穿模，但是，能碰撞的剛體碎片存在一個問題，就是它也會與玩家/敵人物件碰撞，可能會因為XX碎了一地而把角色卡在墻角，所以，我們傳入一個LayerName引數，去標定碎片生成的Layer，并在Project Setting–>Physics2D中修改碰撞串列，使它只與特地Layer的物體碰撞，這種方式會讓Unity直接過濾兩個Layer之間的碰撞（不會被OnTrigger/OnCollision檢測到），效率較高，

四、碎片回收

碎片本質上是一種垃圾物件，它在效果執行完畢之后便應當被立即回收掉，我們可以單獨構造一個FadeOut組件類，讓它持續一段時間后能夠自動消失， （注：此組件會逐漸使物體的alpha值減小，減為0時Destroy掉物體，如果不需要改變alpha值而直接Destroy的話，就使用協程來做） FadeOut類的代碼如下：

using System.Collections;
using UnityEngine;

/// <summary>
/// 淡出效果組件類，
/// </summary>
public class FadeOut : MonoBehaviour
{
    #region 可視變數
    [HideInInspector] [Tooltip("消失時延，")] public float delaySecond = 5F;
    #endregion

    #region 成員變數
    private SpriteRenderer spriteRenderer = null;
    private float fadeSpeed = 0;    // 消逝速度
    #endregion

    #region 功能方法
    /// <summary>
    /// 第一幀呼叫之前觸發，
    /// </summary>
    private void Start()
    {
        if (TryGetComponent(out SpriteRenderer spriteRenderer))
            this.spriteRenderer = spriteRenderer;
        fadeSpeed = this.spriteRenderer.color.a * Time.fixedDeltaTime / delaySecond;
        //StartCoroutine(DestroyNow());
    }

    /*
    /// <summary>
    /// 定時自殺，
    /// </summary>
    /// <returns></returns>
    private IEnumerator DestroyNow()
    {
        yield return new WaitForSeconds(delaySecond);
        Destroy(gameObject);
    }
    */

    /// <summary>
    /// 降低物件透明度，為0后摧毀物件，
    /// 在固定物理幀重繪時觸發，
    /// </summary>
    private void FixedUpdate()
    {
        float alpha = spriteRenderer.color.a - fadeSpeed;
        spriteRenderer.color = new Color(spriteRenderer.color.r, spriteRenderer.color.r, spriteRenderer.color.r, alpha);
        if (alpha <= 0)
            Destroy(gameObject);
    }
    #endregion
}

完整代碼

排序演算法Sort類：

using System;

/// <summary>
/// 排序演算法類，
/// </summary>
public class Sort<T> where T : IComparable
{
    #region 基礎公有方法
    /// <summary>
    /// 陣列快速排序，
    /// </summary>
    /// <param name="array">待排序陣列，</param>
    /// <param name="low">排序起點，</param>
    /// <param name="high">排序終點，</param>
    public void QuickSort(T[] array, int low, int high)
    {
        if (low >= high)
            return;
        int first = low;
        int last = high;
        T key = array[low];
        while (first < last)
        {
            while (first < last && CompareGeneric(array[last], key) >= 0)
                last--;
            array[first] = array[last];
            while (first < last && CompareGeneric(array[first], key) <= 0)
                first++;
            array[last] = array[first];
        }
        array[first] = key;
        QuickSort(array, low, first - 1);
        QuickSort(array, first + 1, high);
    }
    #endregion

    #region 靜態私有方法
    /// <summary>
    /// 泛型物件比較大小，
    /// </summary>
    /// <param name="t1">待比較物件，</param>
    /// <param name="t2">待比較物件，</param>
    /// <returns>大于0則前者的值更大，小于0則反之，等于0則二者的值相等，</returns>
    private static int CompareGeneric(T t1, T t2)
    {
        if (t1.CompareTo(t2) > 0)
            return 1;
        else if (t1.CompareTo(t2) == 0)
            return 0;
        else
            return -1;
    }
    #endregion
}

核心代碼Crasher組件類：

using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// 物體分裂效果組件類，
/// </summary>
public class Crasher : MonoBehaviour
{
    #region 可視變數
    [SerializeField]
    [Tooltip("Sprite物件，")]
    private Sprite sprite = null;

    [SerializeField]
    [Tooltip("碎片的層次名稱，用于避碰，")]
    private string layerName = "Fragment";

    [SerializeField] [Tooltip("分割點的數量，")]
    private int splitPoint = 3;

    [SerializeField] [Tooltip("爆破力乘數，")]
    private float forceMultiply = 50F;

    [SerializeField] [Tooltip("碎片消失時延，")]
    private float delaySecond = 5F;
    #endregion

    #region 成員變數
    private int seed = 0;               // 亂數種子
    private float spriteWidth = 0;      // 貼圖實際寬度
    private float spriteHeight = 0;     // 貼圖實際高度
    private List<GameObject> fragments = new List<GameObject>();    // 碎片物件串列
    #endregion

    #region 功能方法
    /// <summary>
    /// 對物件執行粉碎特效，
    /// </summary>
    public void Crash()
    {
        // 屬性初始化
        spriteWidth = sprite.texture.width;
        spriteHeight = sprite.texture.height;
        // 獲取所有碎片物件
        GetFragments(sprite.texture, RandomSplits());
        // 彈射碎片物件
        for (int i = 0; i < fragments.Count; i++)
            Ejection(fragments[i]);
    }

    /// <summary>
    /// 根據割點獲取所有碎片物件，
    /// </summary>
    /// <param name="texture2D">原始物件的紋理，</param>
    /// <param name="splits">割點串列，</param>
    private void GetFragments(Texture2D texture2D, Vector2[] splits)
    {
        // 分別獲取x，y兩個陣列
        float[] splitXs = new float[splits.Length + 2];
        float[] splitYs = new float[splits.Length + 2];
        splitXs[0] = 0;
        splitXs[splitXs.Length - 1] = spriteWidth;
        splitYs[0] = 0;
        splitYs[splitYs.Length - 1] = spriteHeight;
        for (int i = 0; i < splits.Length; i++)
        {
            splitXs[i + 1] = splits[i].x;
            splitYs[i + 1] = spriteHeight - splits[i].y;    // y軸坐標系倒轉
        }
        // 對陣列進行升序排序
        Sort<float> sort = new Sort<float>();
        sort.QuickSort(splitXs, 0, splits.Length);
        sort.QuickSort(splitYs, 0, splits.Length);
        // 分割物體
        for (int i = 0; i < splitXs.Length - 1; i++)
        {
            for (int j = 0; j < splitYs.Length - 1; j++)
            {
                float x1 = splitXs[i];
                float y1 = splitYs[j];
                float x2 = splitXs[i + 1];
                float y2 = splitYs[j + 1];
                float centerX = gameObject.transform.position.x - gameObject.transform.localScale.x / 2 + (x1 + x2) / (2 * spriteWidth);
                float centerY = gameObject.transform.position.y - gameObject.transform.localScale.y / 2 + (y1 + y2) / (2 * spriteHeight);
                Rect rect = new Rect(x1, y1, x2 - x1, y2 - y1);
                Sprite sprite = Sprite.Create(texture2D, rect, Vector2.zero);
                Vector2 position = new Vector2(centerX, centerY);
                fragments.Add(CreateFragment(sprite, position));
            }
        }
    }

    /// <summary>
    /// 在spriteRenderer區域內獲取隨機分割點，
    /// </summary>
    /// <returns>分割點陣列，</returns>
    private Vector2[] RandomSplits()
    {
        System.Random random;
        Vector2[] splits = new Vector2[splitPoint];
        // 為了避免割點聚集，先分割區域，再于對應區域隨機取點
        float spanX = spriteWidth / (2 * splitPoint + 1);
        float spanY = spriteHeight / (2 * splitPoint + 1);
        for (int i = 0; i < splitPoint; i++)
        {
            random = new System.Random(unchecked((int)System.DateTime.Now.Ticks) + seed);
            seed++;
            double x = random.NextDouble() * spanX + 2 * (i + 1) * spanX;
            random = new System.Random(unchecked((int)System.DateTime.Now.Ticks) + seed);
            seed++;
            double y = random.NextDouble() * spanY + 2 * (i + 1) * spanY;
            splits[i] = new Vector2((float)x, (float)y);
        }
        return splits;
    }

    /// <summary>
    /// 彈射一個碎片物件，
    /// </summary>
    /// <param name="fragment">碎片物件，</param>
    private void Ejection(GameObject fragment)
    {
        Vector2 start = fragment.transform.position;
        Vector2 end = gameObject.transform.position;
        Vector2 direction = end - start;
        fragment.GetComponent<Rigidbody2D>().AddForce(direction * forceMultiply, ForceMode2D.Impulse);
    }

    /// <summary>
    /// 創造一個碎片物件，
    /// </summary>
    /// <param name="sprite">碎片貼圖，</param>
    /// <param name="position">碎片貼圖位置，</param>
    /// <returns>碎片物件，</returns>
    private GameObject CreateFragment(Sprite sprite, Vector2 position)
    {
        GameObject fragment = new GameObject("Fragment");
        fragment.layer = LayerMask.NameToLayer(layerName);
        fragment.transform.position = position;
        fragment.AddComponent<SpriteRenderer>().sprite = sprite;
        // 可以將碎片視作剛體，這樣會有與地形的碰撞效果
        fragment.AddComponent<Rigidbody2D>();
        fragment.AddComponent<BoxCollider2D>();
        fragment.AddComponent<FadeOut>().delaySecond = delaySecond;     // 添加淡出效果
        return fragment;
    }
    #endregion
}

FadeOut類的代碼已在上一節給出；
測驗類ClickImage：

using UnityEngine;

public class ClickImage : MonoBehaviour
{
    public GameObject sprite = null;

    private void Update()
    {
        if (Input.GetMouseButtonUp(0))
        {
            sprite.GetComponent<Crasher>().Crash();
            sprite.SetActive(false);
        }
    }
}

附加內容

為了單獨封裝，本專案內的碎片物件沒有用物件池來回收，實際上，反復生成的垃圾物件，用物件池的效率比較高；
不規則的Sprite也是可以破碎的，如下圖所示：

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/168902.html

標籤：其他

上一篇：天梯賽 1