建立一個 UI 上的圖片按鈕

前置作業

Canvas 設定請參照先前文章的「Canvas 設定」環節: 新建一個 UI 視窗

PNG 圖片按鈕製作器

請先進去製作器做好五張不同顏色的 Start 圖片並下載下來

按鈕 (Button)

新增一個 2D 專案

新增一個按鈕 (Button)

在「階層」視窗按下右鍵，選擇「UI」「Button」

再來要設定 Canvas 部分，請參照: 新建一個 UI 視窗

將開頭製作好的五張圖片放進資源管理器

再來設定按鈕的圖片，在「Button」物件的「Image」屬性裡面的「源影像」將圖片拉進去

將階層裡面「Button」底下的文字 (Text) 刪除

設定「Button」物件的屬性「Button」，將「過濾」設定為「Sprite 交換」

接下來設定屬性「Button」的四張圖片，四張圖片分別為：

• Highlighted Sprite – 滑鼠移動到按鈕上的圖片
• Pressed Sprite – 滑鼠按下按鈕當下的圖片
• Selected Sprite – 按鈕被按下之後的圖片
• Disabled Sprite – Interactable (可互動按鈕) 尚未勾選時顯示的圖片

那就把圖片都拉進去吧!!

圖片按鈕完成