UI介面製作
阿新 • • 發佈:2018-12-27
- Project 檢視——》 Scene 資料夾——》滑鼠右鍵——》Create——》Scene——》重新命名為 GameStart
- Project——》 Prefabs 資料夾——》Project1_Domino ——》Inspector 檢視——》設定屬性 ——》 Add Component——》 Scripts ——》 SelfRotate 指令碼 ——》旋轉速度設定為 10
- MainCamera——》設定 Position 屬性
- 設定天空盒: Window 選單——》 Lighting 選項——》SkyBox 屬性右側的小圓圈 ——》 Sky天空材質
Text控制元件:
- Hierarchy 檢視——》滑鼠右鍵——》 UI——》Text——》 Canvas 物件重新命名為 StartCanvas
- Inspector 檢視——》Canvas Scaler——》 UI Scale Mode 屬性——》Scale With Screen Size (Canvas 中的 UI 就會根據使用者螢幕的實際大小進行自動的縮放)
- Reference Resolution(參考解析度)——》 1280×720 ——》Screen Match Mode ——》設定為 Match Width Or Height——》 Match 設定為 0.5 (Canvas 在縮放時就會同時考慮水平和垂直兩個方向上的變化)
- 選中Text UI 控制元件——》重新命名為 Author——》Text 輸入框
- Rect Transform——》Width:300, Height:50(方框)——》Font(字型)Size 設定為 35——》 將 Color 設定為白色 ——》錨點為螢幕左下角 ——》Position 設定為 165 25,0(方框中心相對於錨點)
Image 控制元件
- StartCanvas——》建立——》UI——》Image控制元件 WindowPanels (控制面板)
- Source Image 屬性——》設定為 SF Window ——》Color 設定為 R G B A 100 100 255 以及 100 ,Alpha 設定為 100 (以半透明的形式顯示) 主控面板
- WindowPanels 控制元件——》建立空物件InitSubPanel 表示遊戲的初始面板(通過不同的空物件包含不同的按鈕,此時的錨點按照WindowPanels) ——》Pos X 和 Y 都設定為 0
Button 控制元件
- Hierarchy 檢視——》新建空物件GameSetting ——》 新增GameSetting 指令碼——》設定指令碼屬性(UI控制元件通過指令碼控制遊戲)
- InitSubPanel ——》建立Button 控制元件StartButton——》 duplicate 方法複製兩個 StartButton——》禁用 InitSubPanel
- On Click 列表——》右下角的 + 建立一個點選事件——》 GameSetting 物件的 ActiveStartPanel(將當前面板切換至遊戲開始面板) 作為事件的響應函式。
- Username ——》建立UI Text 控制元件——》建立 InputField 該物件將用於接收玩家名稱的輸入 ——》刪除其中的 PlaceHolder ——》修改Text 物件
Toggle控制元件
WindowPanels ——》建立空物件OptionSubPanel ——》建立 Toggle ——》 Label 子物件 ——》其內容修改為聲音開關
On Value Changed 列表中——》新增事件SwitchSound
進行時介面與結束介面的製作
Hierarchy 檢視——》建立空物件UI——》 Reset Transform 元件——》建立UI Image 控制元件——》 Canvas 物件重新命名為 Playing Canvas ——》 Image 重新命名為 Sightbead ——》 Source Image 選項設定為 Sightbead
Canvas 物件——》建立Text UI 物件 Time Text
新增血條物件: Canvas ——》建立空物件Health ——》建立UI Text 控制元件Health Label
Slider 控制元件
- Health 物件——》 建立 UI Slider 控制元件 HealthSlider ——》子物件 Fill Area ——》Left 和 Right 設定為 5 ——》 Fill 子物件——》Color 設定為紅色 ——》刪除 Hander Slide Area子物件
製作玩家受到攻擊後螢幕泛出紅光的效果
- Canvas ——》建立UI Image 物件HurtImage ——》 Inspector——》錨點設定——》按住 Alt 鍵 ——》選擇 Stretch 拉伸 將 Image 擴充套件到整個螢幕——》Color 設定為紅色 ——》Alpha 值設定為 0 表示透明。
注意將 HurtImage 放置到 Canvas 所有子物件中的最後一個。 這樣可以保證 HurtImage 在渲染時遮擋該 Canvas 中的其他控制元件。
Project 檢視——》Prefabs 資料夾——》GameResultCanvas 預製件(用於在遊戲結束後顯示排行榜資訊)——》新增到 UI 物件 ——》設定Game Result Canvas物件的兩個按鈕的相關函式