今天大概就簡單介紹一下各種UI的設計與使用，基本上不是很困難，但還是想透過實作來分享一些平常我常使用到的 UI 元件。當然如果你已經非常清楚這些元件那今天的介紹就會是牛刀小試。那我就廢話不多說直接開始!

建置場景

Slider and Audio Mixer

1. 首先新增一個 Slider。
   

2. 撰寫一個 SettingMenu Script。目的是要去控制該 Slider 當前的數值。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SettingsMenu : MonoBehaviour
{
    public void setVolume(float volume)
    {
        Debug.Log(volume);
    }    
}

3. 接著回到 Unity 中的 Slider 內部的 OnValueChanged( ) 這邊新增，如同 Button 類似。
   
   

4. 到 Window 去新增Audio Mixer，目的是希望我們可以更精確地調整該 Slider 的數值，也可以透過新增更多的 Audio Mixer 來控制不同 Slider 的變化。
   

• 設定一個 Audio Mixer 去控制 Volume。
  

• 點選 master ，到右邊Inspector 中去點選 Expose ….
  

• 到下方去變更該Audio Mixer 的名稱。
  

5. 撰寫控制 AudioMixer 的程式碼。注意到說 SetFloat 要與之前上方的 Setting Volume 要取相同的名稱去避免出錯。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Audio;
public class SettingsMenu : MonoBehaviour
{
    public AudioMixer audioMixer;
    public void setVolume(float volume)
    {
        audioMixer.SetFloat("Volume", volume);
    }    
}

6. 回到 Unity 的 Canvas 中去將AudioMixer 拉近到宣告的物件裡面。接下來你可以嘗試去調整Audio Mixer 的數值就會看到該 Slider 會有所變化。
   

DropDown UI

1. 首先新增一個 DropDown UI 在我們的環境中。
   

2. 接下來設定一下該Dropdown UI上的元素，調整該 Options
   

3. 到我們 Edit > Project Setting > Quality 中去了解該畫面的精確度最高到多少。每個電腦螢幕解析度不同，取決於你自身的顯示器。
   

4. 撰寫該Quality 控制的方法。去設定該畫面的解析度。
   

5. 回到 Unity 中去將我們的腳本放置到 Dropdown 內部去，類似放進Button 的 OnClick 中。之後選擇上面的 SetQuality 在Dynamic int 上面。
   

6. 我們調整該DropDown 後就會變更該 Unity Edit > Project Setting > Quality 的數值。點選下拉式的任一選單就會有對應的Quality。會依照你當前電腦的配置顯示不相同的 Quality。
   

Toggle Button

1. 首先設計一個 Toggle Button。主要是去調整畫面大小的按鈕。
   

2. 撰寫文本的方法，控制該頁面大小的變化。並且以 bool 的形式去判斷。
   

3. 回到 Unity 去設定我們要的 Action 在我們的 Toggle 中。
   

4. 接下來為了可以隨機設定不同大小的畫面，我們仍需要使用 Dropdown 當作我們設定畫面大小的參數設定。接著我們新增一個 DropDown 並且設定該內部的 Option 。
   

5. 撰寫 Resolution 的文本。
   

• 首先宣告一個陣列來儲存該 Unity 自身的 Resolution，且宣告一個 Dropdown 。

Resolution[] resolutionsArr;
public Dropdown resolutionDropdown;

• 一開始需要去存去所有的Resolution。並且清空我們的 Dropdown。

void Start()
{
	resolutionsArr = Screen.resolutions;
	resolutionDropDown.ClearOptions();
}

• 為了要將所有資料存取至 Dropdown 中，而Dropdown 僅接受 List 的形式，所以要先將該 Array 的內容先轉換成 string List 的型態故在 Start 中宣告一個新的 List。

void Start()
{
	List<string> optionList = new List<string>();
	for(int i = 0; i < resolutionsArr.Length; i++)
	{
		string options = resolutionsArr[i].width + " x " + resolutionsArr[i].height;
		optionList.Add(options);
	}

	resolutionDropdown.AddOptions(optionList)    // Dropdown need to store the List member
}

6. 回到Unity 並將我們的 Resolution Drop Down 拉到環境當中。
   

7. 為了要解決當我按下下拉選單的時候可以顯示我當前的選擇的 Resolution。故我們要新增一個判斷。來了解我們當前自身的 resolution 為多少。

int currentResolutionIndex = 0;

// for 迴圈內
if(resolutionArr[i].width == Screen.currentResolution.width && resolutionArr[i].height == Screen.currentResolution.height)
{
	currentResolutionIndex = i;
}

// for 迴圈外

resolutionDropdown.value = currentResolutionIndex;
resolutionDropdown.RefreshShowValue();

8. 接下來你 Demo 的時候就會看到整個頁面的轉變。
   

9. 撰寫腳本，設定我們的 Resolution 。
   

10. 回到 Unity 中在我們的 ResolutionDropdown 中去設定 OnValueChange ，將 Canvas 拉近到環境中，同時設定 SetResolution。
    

11. 執行後就可以在遊戲的時候設定遊戲畫面的長寬高。

結論

1. 今天就介紹幾種簡單UI 的使用，希望幫助一些對 UI 還不是很熟悉的人會有幫助。
2. Audio Mixer 可以去調整一些需要更細微變化的UI元件。
3. 透過簡單的 UI 使用可以幫助之後去做其他功能的結合與使用。