第66節 - Unity: Start Screen with Glowing Animated Button
這一節我會介紹Unity: Start Screen with Glowing Animated Button,則在Splash Screen後的第一頁,當按下Start Button就會跳去下一頁,下一頁可以是Menu Screen、Main Page或任何一頁,視乎你的遊戲設計。
1) Result (執行結果):
以下是本節第66節 - Unity: Start Screen with Glowing Animated Button的執行結果:
2) Step By Step Tutorial
首先,我會建立一個Start Page,在Start Page上加上Start按鈕(Start Button),再在Start Button 上加上一個可以閃爍的光環。 之後會建立一個Main Page,在Main Page上加上Back按鈕(Back Button),再在Back Button上加上Mouse Over特效。
2.1) Start Page
- 建立一個新Project 。
- 把所有須要的圖片在你的電腦內拖放到Assets區域內。
- 選擇Main Camera。
- 設定Orthographic Size = 250/2 = 1280。
- 建立一個新Empty GameObject - Controller。
- 把C# Script拖放到Controller內。
- 建立一個MySwitchScenes()方法,用SceneManager.LoadScene()把現時的畫面轉去另一頁。
- 建立一個Canvas。
- 設定Canvas的不同值。
- 選擇Main Camera,把Main Camera拖放到Render Camera內。
- 在於Canvas內建立一個Image。
- 設定W x H = 1440 x 2560。
- 把圖片拖放到Image (Script)內。
- 在Canvas內建立另一個Image。
- 設定位置和W x H = 800 x 310。
注意: 位置Pos Z = -1,因為之後我們會在Start Button Image上加上一個Start Button光環圖片,它的Pos Z = 0,則光環圖片是在Start Button Image的上面。 - 把StartButton圖片拖放到Image (Script)內。
- 在Canvas內建立一個Button (不是Image),因為Canvas - Button內置一個OnClick()方法 。
- 設定位置和W x H = 800 x 310。
注意: 位置Pos Z = 0,則光環圖片是在Start Button Image的上面。 - 把RingButton圖片拖放到Source Image內。
- 把Controller GameObject拖放到OnClick()方法內。
- 設定OnClick()方法,選擇SwitchScene.MySwitchScenes()方法和輸入Mainpage。
- 選擇Button_RingButton。
- 選擇Animation。
- 按Create。
- Animator就會自動加入Button_RingButton內。
- 選擇Button.RingButton內的話Image.Color。
- 選擇0 - 6s。
- 選擇Image.Color。
- 0s = 1,2s = 0和6s = 1。
- 設定Sample = 120。
- 選擇Curves,大家可以改變動畫的值。
- 儲存檔案。
2.2) Main Page
- 選擇File > Save Scene as...,再選擇Main Camera。
- 設定Orthographic Size = 250/2 = 1280。
- 建立一個新Empty GameObject - Controller。
- 把C# Script拖放到Controller內。
- 建立一個Canvas。
- 設定Canvas的不同值。
- 選擇Main Camera,把Main Camera拖放到Render Camera內。
- 在Canvas內建立一個Image。
- 設定W x H = 1440 x 2560。
- 把圖片拖放到Image (Script)內。
- 在Canvas內建立一個Button (不是Image),因為Canvas - Button內置一個OnClick()方法 。
- 設定位置和W x H = 800 x 310。
注意: 位置Pos Z = 0,則光環圖片是在Start Button Image的上面。 - 把BackButton圖片拖放到Source Image內。
- 設定Highlighted Color。
- 把Controller GameObject拖放到OnClick()方法內。
- 設定OnClick()方法,選擇SwitchScene.MySwitchScenes()方法和輸入Startpage。
- 設定R=232。
- 設定A=210。
- 儲存檔案。
- 選擇PC電腦。
- 在File>Build Setting內加入兩個Scene。