融入動畫技術的互動應用——堆高高遊戲

背景及創意

       這個遊戲的靈感來源于微信小程式堆高高。在遊戲中，玩家通過點選螢幕控制方塊的疊加，方塊重疊面積越多，存留的方塊就越大，新産生的方塊面積就多大，通過一層層的疊加，記分闆累計玩家的得分，當方塊無法重疊時，遊戲結束。玩家需要根據底層方塊的位置及新産出的移動方塊的位置、來判斷點選螢幕的時機。

       本文主要闡述了基于Unity 3D引擎堆高高遊戲的設計與實作的詳細過程，利用簡單的cube模型，通過C#語言編寫腳本實作遊戲邏輯，并利用簡單的粒子特效以及Unity 3D自帶的實體引擎實作了這款靈活小遊戲。

功能及用法

1. 進入遊戲，場景為一個底座方塊，并有一個移動的方塊。
2. 點選滑鼠左鍵，方塊有點選特效，疊加到底座之上。
3. 長時間不點選滑鼠左鍵，方塊移動到結界場邊緣，觸發粒子特效。
4. 點選滑鼠右鍵并進行移動滑鼠可改變遊戲視野。
5. 滑動滑鼠滾輪，界面改變大小。
6. 對于新産生的方塊，如果錯過底座，遊戲結束，産生爆炸銷毀特效。
7. 此時界面顯示重新開始按鈕，點選按鈕，界面初始化為開始界面。
8. 不停的疊加方塊，底座不斷增高，并産生顔色漸變，邊角料顔色變淺直至消失。
9. 點選鍵盤按鍵ESC，遊戲跳轉為重新開始。

使用到《代碼本色》中的動畫技術

1. 向量

舉例：如CubeMove類中的初始化、平移、轉換方法均用到向量。以Transformation方法為例，利用向量插值方法實作移動方塊的飛行轉換，顔色插值改變方塊顔色，方塊到達了目标點則擷取方塊Transform屬性及color。

void Transformation(Vector3 pos, Vector3 local, Vector3 euler, Color color) //轉換
    {
        //如果有重力元件則删除
        if (gameObject.GetComponent<Rigidbody>())
            Destroy(gameObject.GetComponent<Rigidbody>());
        //移動方塊往該處飛行轉換
        transform.position = Vector3.Lerp(transform.position, pos, 0.1f);
        transform.localScale = Vector3.Lerp(transform.localScale, local, 0.1f);
        transform.eulerAngles = Vector3.Lerp(transform.eulerAngles, euler, 0.1f);
        GetComponent<MeshRenderer>().material.color = Color.Lerp(GetComponent<MeshRenderer>().material.color, color, 0.1f);
        //如果快飛到了
        if ((transform.position - pos).magnitude < 0.01f)
        {
            //确定位置尺寸旋轉和顔色
            transform.position = pos;
            transform.localScale = local;
            transform.eulerAngles = euler;
            GetComponent<MeshRenderer>().material.color = color;
            //往回轉換時,禁用文字還原狀态
            if (pause == false && cubeState == CubeState.Pause)
            {
                texter.SetActive(false);
                cubeState = state;               
            }
        }
    }
           

2. 力

阻力效果

重力效果

彈力效果

3. 粒子系統

子產品之間的關系

說明：

1. CubeMove與CameraFollow由内部觸發（滑鼠按鍵）事件并由内部處理按鍵事件。

2. EventTrigger挂載到MoveCube物體上，選擇Pointer Down 事件，其中MoveCube 是CubeMove.ComeAgain()要執行的需要觸發函數所在腳本的gameobject，當點 擊“重新開始”便會加載初始場景。

流程邏輯

以落下方塊切入的狀态為X_Move舉例：

重要算法

1. 底座，底座頂層，新頂層，Cffcut坐标系擷取方法

設原底座的頂層坐标為Vector3(tPox.x,tPos.y,tPos.z),那麼設右方向為X軸正方向，

顯然由圖可知目前落下方塊切入的狀态為X_Move,那麼産生的Cffcut的坐标為：

Vector3(tPos.x + (tSize.x / 2 + x_Offset / 2), tPos.y + tSize.y, tPos.z）。

此時，産生的新底座頂層的坐标為：

Vector3(tPos.x + x_Offset / 2, tPos.y + tSize.y, tPos.z)。

同理，由Z軸正方向切入的方塊産生的Cffcut坐标為：

Vector3(tPos.x, tPos.y + tSize.y, tPos.z + (tSize.z / 2 + z_Offset / 2))。

此時，産生的新底座頂層的坐标為：

Vector3(tPos.x, tPos.y + tSize.y, tPos.z + z_Offset / 2)。

2. 方塊掉落效果，底座集合的管理

落下的方塊運動如下：

重疊面積部分的方塊留下，其餘産生為新的邊角料，效果如下：

将頂層加入底座集合：pedestals.Add(GameObject.Find("TopFloor").transform)。

通過改變方塊的RGB值，實作顔色的漸變，切下的邊角料顔色逐漸減弱，透明度逐漸下降，直至小于0，變成透明，然後銷毀。

3. 遊戲結束的情況

目前落下方塊切入的狀态為X_Move,如果底座頂層的坐标與落下方塊的坐标插值大于x_Offset>= tSize.x,則遊戲結束；

或目前落下方塊切入的狀态為Z_Move,如果底座頂層的坐标與落下方塊的坐标插值大于z_Offset>= tSize.z,則遊戲結束。

程式表示為：

(Mathf.Abs(transform.position.z - top.transform.position.z) >= size.z || Mathf.Abs(transform.position.x - top.transform.position.x) >= size.x)

cubeState = CubeState.Die; //變成死亡狀态

遊戲結束，調用Destroy（）方法，每次摧毀底座頂層，每摧毀一層，就将頂層名字賦給下一層。

4. 顔色漸變效果及方塊掉落效果

通過改變方塊的RGB值，實作顔色的漸變（分數顔色也随方塊顔色變化），切下的邊角料顔色逐漸減弱，透明度逐漸下降，直至小于0變成透明，然後銷毀。

void ColorGradualChange() //顔色漸變
    {
        //逐漸減少r,g,b的值
        if (reduce)
        {
            if (rgb[rgbIndex[0]] > 0)
                rgb[rgbIndex[0]] -= 0.1f;
            else if (rgb[rgbIndex[1]] > 0)
                rgb[rgbIndex[1]] -= 0.1f;
            else if (rgb[rgbIndex[2]] > 0)
                rgb[rgbIndex[2]] -= 0.1f;
            else //當三個值都小于0時,變為逐漸增加
            {
                reduce = !reduce;
                rgbIndex = RandomIndex(); //再次打亂索引順序
            }
        }
        else //逐漸增加r,g,b的值
        {
            if (rgb[rgbIndex[0]] < 1)
                rgb[rgbIndex[0]] += 0.1f;
            else if (rgb[rgbIndex[1]] < 1)
                rgb[rgbIndex[1]] += 0.1f;
            else if (rgb[rgbIndex[2]] < 1)
                rgb[rgbIndex[2]] += 0.1f;
            else //當三個值都大于1時,變為逐漸減少
            {
                reduce = !reduce;
                rgbIndex = RandomIndex(); //再次打亂索引順序
            }
        }
    }
           

public class DeleteCffcut : MonoBehaviour
{
    void Update()
    {
        Color a = GetComponent<MeshRenderer>().material.color; //擷取顔色
        a.a -= Time.deltaTime * 0.5f; //a值逐漸減小
        GetComponent<MeshRenderer>().material.color = a; //将改變後的顔色指派給自身(顔色逐漸透明)
        if (a.a < 0) //當透明度小到一定時候
            Destroy(gameObject); //銷毀自身
    }
}
           

void AddScore(Color cubeColor) //加分方法
    {
        Text score = GameObject.Find("Scroe").GetComponent<Text>();
        score.text = (System.Convert.ToInt32(score.text) + 1).ToString();
        score.color = new Color(cubeColor.r, cubeColor.g, cubeColor.b); //分數顔色随移動cube
    }
           

總結

       這一次的作業靈感來源于微信小遊戲，制作過程中把動畫與遊戲結合，設計中進行了一些優化，如遊戲界面的改進，遊戲背景起初設計為單一的Background顔色，在測試時覺得過于單調，且與結界力場AT_Field有違和感，是以在遊戲場景中再添加一個錄影機并附加了一系列的粒子特效，使其場景更加的絢麗，以及對遊戲性能的進一步優化，在測試過程中，利用profiler工具進行編譯器的資源監控，檢視資源消耗情況，并迅速的找到影響程式性能的線程和函數，進行了針對性的優化。總體來說基本達到了預想的效果，互動效果好，且易操作。

       随着數字技術以及動畫技術的不斷進步與發展，一定會有更多的動畫技術出現在各種各樣的互動應用中，為人們的生活和科技的發展提供更大的推進作用。

參考資料

1. 代碼本色 - Daniel Shiffman

2. 吳亞峰.Unity 5.X 3D遊戲開發技術詳解與案例典型[M].人民郵電出版社.2018.01

推薦

1.《Magic Network》：一個小孩都能玩的神經網絡互動系統

https://blog.csdn.net/leonardwyh789/article/details/89600881

把很抽象很概念性的神經網絡通過可視化的方式呈現給使用者，且使用者可以搭建自己的神經網絡系統并從中學習到神經網絡系統的工作原理，很實用。界面簡潔同時也很美觀，操作方式也很友好。

2. 用Processing制作一個「生态瓶」

https://zhuanlan.zhihu.com/p/64726213

這個應用系統非常有創意，簡易的生态系統很完整，使用者可以通過簡單的操作動态觀察生态系統的不同狀态，不同于普通的動畫系統，除了趣味性同樣還具有教育意義。

3.【融入動畫技術的互動應用】——PlayWithThePicture

https://blog.csdn.net/qq_41616984/article/details/89737428

這個互動應用可以讓圖檔動起來，可以自由操控，且有剪紙風格，流動性及剪紙随風而動的效果賦予了圖像生命力，非常有創意，很新穎。