iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0
自我挑戰組

從零開始學習Unity引擎系列 第 29

unity學習day29--製作遊戲(8)

  • 分享至 

  • xImage
  •  

接下來做UI

在“階層”右鍵,點擊“UI”,選擇“畫布”,建立之後會多出“Canvas”和“EventSystem”
https://ithelp.ithome.com.tw/upload/images/20251001/20178373NaZSRtuhSO.png

在“Canvas”的檢查器設置“UI 縮放模式”為“隨螢幕大小縮放”,“參考解析度”設“1920 x 1080”。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373kgvEW54214.png

然後右鍵“Canvas”,點擊“UI”,選擇“面板”,並且把建立出來的子物件命名為“MainMenu”,在檢查器的“Image”點擊“顏色”,把A(透明度)拉到160。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373tBYnYzaNIw.png

右鍵“MainMenu”,選擇“UI”,點擊“按鈕 - TextMeshPro”(若跳出導入 TMP 視窗,按「Import TMP Essentials」)。把第一顆命名“Btn_Start”,裡面的文字改為”Start”(因為中文似乎不兼容,所以用英文), 複製一顆並命名為“Btn_Help”,文字改為 “Instructions”。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373ju7S1kVFjD.png

繼續右鍵“MainMenu”,選擇“UI”,點擊“面板” 命名“HelpPanel”,在檢查器把的 A(透明度) 調到160(和剛剛的Canvas一樣)。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373CYbL0GuAdv.png

右鍵“HelpPanel”選擇“UI”,點擊“文字 - TextMeshPro”命名為“HelpText”,並且在裡面寫關於遊戲的操作說明,同樣是英文,在場景中顯示的文字根據自己的喜好放置就好。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373Kbg2Q88O1T.png

右鍵“HelpPanel”選擇“UI”,點擊“按鈕 - TextMeshPro”命名為“Btn_Back”,把“Btn_Back”放在角落就好,這個是用來從遊戲說明返回起始頁面的,最後把“HelpPanel”檢查器左上角的勾選取消,後續再用腳本叫出。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373L2Zt8Xmzr0.png

在“Scripts”下面建立腳本命名為“MainMenuUI”,它的作用是控制遊戲的開始,然後把它掛到“MainMenuUI”上。
https://ithelp.ithome.com.tw/upload/images/20251001/2017837396kl8x7hBd.png

分別在“Btn_Start”、“ Btn_Help”、“ Btn_Back”檢查器的“Botton”欄位把“Canvas”拖進去,接著按順序分別選擇“MainMenuUI.OnStartGame()”、“ MainMenuUI.OnShowHelp()”、“ MainMenuUI.OnCloseHelp()”,這裡就只拿“Btn_Start”做演示。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373uat3sjwBSv.png

然後執行unity,試試UI成不成功,可以看到確實成功了。
https://ithelp.ithome.com.tw/upload/images/20251001/20178373cGuPguFxoA.png
https://ithelp.ithome.com.tw/upload/images/20251001/201783737pUSh9FFHX.png


上一篇
unity學習day28--製作遊戲(7)
下一篇
unity學習day30--製作遊戲(完)
系列文
從零開始學習Unity引擎30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言