Unity3D-Scene Transitions in Unity

內容目錄

前言

在Unity裡面不管是遊戲或是UI都會因為內容的不同而製作許多的Scene，而如果我們在轉場景的時候只是使用一般的切換會顯得無趣許多，這次的練習就是要跟大家一起學習如何在Scene Transitions 製作一些小動畫讓我們在轉場景的時候顯得更加有趣。

LevelLoader

在製作LevelLoader之前我們可以依照自己的需求製作2-3個Scene以便練習，這邊我在Unity AssetStore隨便下載了2D圖片來製作簡單的動畫場景。

這邊我場景的命名用最簡單的Scene1、2 、 3來製作

要製作的LevelLoader的方法很簡單，我們在場景新增一個空的物件並命名為LevelLoader，這時候記得將這個空物件的Transform重新Reset到0這樣才不會跑掉。

然後我們在LevelLoader新增一個Canvas，因為我們所要製作的過場畫面是要用到Unity裡面的UI系統，這邊同時也在Canvas製作一個Image當作過場用的cover

這時候在Image我們新增一個Component叫做Canvas Group，我們調整一下Aplha值就可以看到剛剛製作的 LevelLoader 黑色cover有了透明度的變化，這個就是我們這一次主要練習的過場小動畫。

CrossFade

我們將一開始建立的Canvas重新命名為CrossFade，就可以開始製作過場動畫了，首先我們點選Create Animation並建立一個動畫檔案叫做CrossfadeEnd，表示這是過場淡出

我們首先製作 CrossfadeEnd 的過場動畫，點選剛剛建立的Image在0:00的時候設定Canvas Group的Alpha值為1，接著到1:00的時間點則將 Canvas Group的Alpha值設定為0，這樣就完成了我們第一階段的 CrossfadeEnd 動畫

接著我們需要一個Start的動畫，這邊的方法很簡單!只要我們新建一個新的動畫檔案命名為CrossFadeStart並將原本的 CrossFadeEnd影格複製貼上

貼上以後我們將原本前後的位置對調，這樣就完成了我們的 CrossFadeStart 動畫影格

製作好兩個CrossFade的動畫以後記得要把LoopTime的勾選取消，不然兩個一直Loop就完全無法達到我們所要呈現的效果

製作好兩個動畫以後我們進到一開始建立的CrossFade Animator裡面可以看到已經出現了兩個動畫的State，這邊我們先在左上角的Parameters新增一個Trigger並命名為Start。

一開始的State連接應該只有Entry連接到CrossfadeEnd，我們將 CrossfadeEnd 也連接到 CrossfadeStart上面。

接著我們可以看到兩個動畫連接的地方有出現交錯的圖像表現，這邊我們只要將Has Exit Time取消勾選以及在Transition Duration的地方設定為0就可以看到兩個動畫是分開來播放的了。

LevelLoader Script

將Animator的部分設定好以後我們點選一開始製作的LevelLoader上新增語法

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class LeavelLoader : MonoBehaviour
{
    public Animator transition;

    public float transitionTime = 1f;

   //按下按鍵到下一個場景
    void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
            LoadNextLevel();
        }
    }
    public void LoadNextLevel()
    { 
        StartCoroutine(LoadLevel(SceneManager.GetActiveScene().buildIndex + 1));
    }
    IEnumerator LoadLevel(int levelIndex)
    {
        transition.SetTrigger("Start");

        yield return new WaitForSeconds(transitionTime);

        SceneManager.LoadScene(levelIndex);


    }
}

語法設定好以後我們將加了語法的LevelLeader拖到Asset變成Prfab檔案，並依序添加到Scene2、Scene3的最上層