第73節 - Unity: Options Menu Screen
這一節我會介紹Unity: Options Menu Screen，Options Menu Screen包括以下UI Components:
- UI - Canvas
- UI - Button
- UI - Slider
- UI - Toggle
- UI - Toggle Group
- UI - Text
1) Result (執行結果):
以下是本節第73節 - Unity: Options Menu Screen的執行結果:
2) Step By Step Tutorial
以下會詳細介紹每一個步驟:
- 選擇Main Camera。
- 設定Orthographic Size = 512。
- 加入Audio Source。
- 把兩張圖片和一個背景音樂檔案拖放到Assets區域內，再拖放背景音樂到Audio Source內。
首先我會製作以下UI Components:
- 建立一個Canvas。
- 選擇Main Camera，把Main Camera拖放到Render Camera內。
- 設定Canvas的不同值。
- 建立一個UI Panel - Panel。
- 設定Panel的Anchors位置在底部、Panel的座標、高度和寬度。
- 設定Panel的顏色。
- 加入Animator。
注意: 我們必須把Animator不勾起，因為我們不希望Panel一開始就進入畫面，而是當我們按一下按鈕後才把Panel進入畫面。
- 選擇Add Property，再選擇Panel - Anchored Position。
- 在時間軸=0時，把Panel座標設定為X = 1.25、Y = -290和Z = 0。
- 在時間軸=1秒時，把Panel座標設定為X = 1.25、Y = 352和Z = 0。
- 開啟Animator。
- 選擇Entry。
- 選擇Parmeters。
- 選擇Bool，再輸入isHidden。
- 選擇以上按鈕。
- 輸入movein。
- 設定Speed = 1。
- 選擇剛剛完成的movein按鈕、再按照Mouse右鍵，選擇Copy，然後Paste，即複製一個按鈕。
- 輸入moveout。
- 設定Speed = -1。
- 選擇以上箭咀。
- 選擇 +，再選擇isHidden和true。
- 選擇以上箭咀。
- 選擇 +，再選擇isHidden和false。
- 建立一個UI Button - BackButton。
- 設定BackButton的Anchors位置在中間、BackButton的座標、高度和寬度。
- 選擇BackButton的Text。
- 設定以上BackButton Text的所有值。
- 建立一個UI Slider - Slider。
- 設定Slider的Anchors位置在中間、Slider的座標、高度和寬度。
- 選擇Slider的Text。
- 設定Slider Text的Anchors位置在中間、Slider Text的座標、高度和寬度。
- 設定以上Slider Text的所有值。
- 選擇Slider。
- 把Main Camera拖放到OnValueChanged()方法內，再選擇AudioSource > Volume。
- 建立一個UI Toggle - Toggle。
- 設定Toggle的Anchors位置在中間、Toggle的座標、高度和寬度。
- 選擇Toogle的Background。
- 設定Toogle Background的Anchors位置在中間、Toogle Background的座標、高度和寬度。
- 把musicon圖片拖放到底Image內。
- 選擇Toogle的Checkmark。
- 設定Toogle Checkmark的Anchors位置在中間、Toogle Checkmark的座標、高度和寬度。
- 把musicoff圖片拖放到底Image內。
- 選擇Toogle的Label。
- 設定Toogle Label的Anchors位置在中間、Toogle Label的座標、高度和寬度。
- 設定以上Toogle Label的所有值。
- 選擇Toogle。
- 把Main Camera拖放到OnValueChanged()方法內，再選擇AudioSource > Mute。
- 建立一個UI Panel - SubPanel。
- 設定SubPanel的Anchors位置在底部、SubPanel的座標、高度和寬度。
- 設定SubPanel的顏色。
- 加入Toggle Group。
- 建立一個UI Toggle - Toggle1。
- 設定Toggle1的Anchors位置在中間、Toggle1的座標、高度和寬度。
- 把SubPanel拖放到Group。
- 選擇Toogle1的Label。
- 設定Toogle1 Label的Anchors位置在中間、Toogle1 Label的座標、高度和寬度。
- 設定以上Toogle1 Label的所有值。
- 建立一個UI Toggle - Toggle2。
- 設定Toggle2的Anchors位置在中間、Toggle2的座標、高度和寬度。
- 把SubPanel拖放到Group。
- 選擇Toogle2的Label。
- 設定Toogle2 Label的Anchors位置在中間、Toogle Label的座標、高度和寬度。
- 設定以上Toogle2 Label的所有值。
- 建立一個UI Text - Text。
- 設定Text的Anchors位置在中間、Text的座標、高度和寬度。
- 建立一個UI Button - OptionButton。
- 設定OptionButton的Anchors位置在底部、OptionButton的座標、高度和寬度。
- 把Controller Object拖放到OnClick()方法內，再選擇MyScript1.Option.Pressed()方法。
- 選擇OptionButton的Text。
- 設定以上OptionButton Text的所有值。
- 建立一個Empty GameObject - Controller。
- 建立一個C# Script，並把它拖放到My Script 1，最後把Text、Toggle1和平Panel GameObject拖放到以上位置。
- 建立public和private變數。
- 建立一個OptionPressed()方法。
- 建立一個BackPressed()方法。
- 在Update()方法內用if - else statement決定顯示英文或中文文字。
- 選擇BackButton。
- 把Controller拖放到OnClick()方法內，再選擇MyScript1.BackPressed()方法。
- 選擇OptionButton。
- 把Controller拖放到OnClick()方法內，再選擇MyScript1.OptionPressed()方法。
執行結果
- 執行結果，如上。