簡介

當我們在Unity製作App、Game等等有關UI的Interface時，想必都會遇到按下按鈕並轉場的情況，一般最常見的轉場就是淡入淡出，而這篇我們就來運用套件來快速製作並達到我們想要的轉場效果，除了Fade之外，還會講到Wipe效果，可以先看看展示影片。

元件設定

在實際操作前，我們先聚焦幾個程式元件：

Main Component : 1.Screen Camera Control

Options Component : 1.Fade/Wipe Screen 2.Fade/Wipe Camera

由於我們先聚焦於UI的應用，所以我們就選用Fade/Wipe來做實操分享。首先我們先創建一個空物件，並把上圖標示的程式元件加進來。內容就是我們在先前提到的主要與次要元件。

先看到第一個，Fade Camera 與 Wipe Camera這邊我們用不到，你可以改程式碼，將Code hide起來，或是你把場景中的Main Camera給他，我們這篇沒使用到Fade Camera / Wipe Camera所以不會有所反應。

Fade Screen / Wipe Screen則是我們圖中所標示的2,3程式元件，你沒有塞這兩個元件則不會成功展示的，放置好後我們將該物件拖曳到上述的欄位中(你沒掛載Fade/Wipe code則無法拖拉近欄位中）。

Overlay Texture，是放置你要轉場的圖片，這邊有點可惜，只能放置圖片，有時間我會改寫程式，讓他可以放置GameObject等等Unity元件。完成後如上圖所示。

Wipe Textures，該套件值得可取的地方要說一下這裡，在這個欄位放置黑白圖或是灰階圖，程式會依照圖片中的黑白色塊去進行轉場的效果，上圖是套件提供的圖，你也可以自己做自己喜歡的黑白alpha圖。

將黑白圖拖拉近去該欄位後（你可以全選圖，一次拖進去），如上圖呈現。

接著可以看到Fade/Wipe程式元件的設定，其實基本上跟上一篇Basic Transition的位移、旋轉等物件設定差不多，這篇可以設定的是他轉場的『曲線』，而圖片他會透過剛剛的Main Component來給予圖片，元件設定基本到此為止。

動作設定

接著我們要設定觸發按鈕，並讓他可以切換『Effect , Color , Softness』，這邊我們就用程式來講解。先新增一個按鈕並在『onClick』給予『DemoScreen』觸發函示。而設定好之後我們play看看，其實就已經有淡入淡出轉場效果，如上影片，但我們還可以有更多的轉場選項。

我們假如要新增其他轉場效果，透過按鈕發送好我們寫的程式，就必須使用BeautifulTransition的namespace（介面），如上圖，我們可以在『GetComponent』直接使用，而上圖所列出的是轉場的所有參數。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using BeautifulTransitions;

public class ScreenTransitionEggy : MonoBehaviour
{
    [Header("Softness")]
    public float softnessValue = 0;
    [Header("Effect")]
    public int EffectNum = 0;

    public void StartDemo()
    {
        //手動設定softness
FindObjectOfType<BeautifulTransitions._Demo.Transitions.Scripts.ScreenCameraController>().SetSoftness(softnessValue);
//手動設定轉場效果
        FindObjectOfType<BeautifulTransitions._Demo.Transitions.Scripts.ScreenCameraController>().SetEffect(EffectNum);
//手動設定轉場顏色        FindObjectOfType<BeautifulTransitions._Demo.Transitions.Scripts.ScreenCameraController>().SetColorBlue();

  //開始執行      FindObjectOfType<BeautifulTransitions._Demo.Transitions.Scripts.ScreenCameraController>().DemoScreen();
    }
}

我直接貼上我寫的簡單程式碼，內容包含設定剛剛所講的所有參數，並把程式元件加在某一個GameObject並給予執行Button進行onClick設定。如上圖，你可以自己改Softness的數值，與Effect Type，如此一來就完成了。

小結

這篇我列出的是BeautifulTransition中轉場效果最必要也最精簡的元素，只要取Main & Option Component就可以無痛移植到不同的專案中，但最好還是import整個套件包避免出錯。