5-6 Knapsack User Interface

本章要來製作背包的介面，由於步驟繁雜，所以程式碼的實作留待下一章再跟大家介紹。好的，首先素材的部分請大家自己Google找找，不方便將一些付費的素材分享給大家。在Asset Store上亦有不少便宜好看的UI唷。

接著，在場景中選擇UI/Canvas。

在Canvas內再選擇UI/Panel。

Canvas Scaler的UI Scale Mode設定中，選擇Scale With Screen Size，這樣介面就會隨著不同解析度的螢幕進行延展了。

Reference Resolution設定為1920x1080，這是目前主流的螢幕解析度，即便是行動平台的螢幕大多也不會比這個數值還低唷。

然後請大家自行將Google找來的背包介面的背景放入Source Image，Color的Alpha請設定為255，避免背景變成半透明。

在Anchor Presets的部分，我選擇的是middle center，這是指介面的對齊點在哪邊。若選擇middle center代表上下左右都置中，當螢幕解析度有變化時，會以中心點的位置進行介面的延展。

這時，在場景中應該會看見如下畫面。

接著在Knapsack Panel底下選擇UI/Image，我們要接著放置關閉按鈕。

取名為Close Btn，Anchor Presets選擇top right，讓關閉按鈕對齊左上角，然後請大家放Source Image。

在場景中看看實際畫面。

接著，在Close Btn裡面增加Button組件。

將Transition選擇Sprite Swap，這個效果可以讓按鈕按下、放開後使用不同的Image，如果大家在網路上找到的按鈕素材有不同狀態的按鈕，就可以依序放入唷！假如沒有也沒關係，使用Color Tin t也可以模擬類似的效果。

若大家找到的按鈕是如下圖一樣，有各種不同狀態的圖示，就能使用Sprite Swap唷。

如下圖，依序放入圖片。

接著再新增一個UI/Panel，這要用來放道具框的，取名為Slot。

 道具框的背景如下圖。

在Slot底下新增一個Empty GameObject取名為Item，Item底下有UI/Image跟UI/Text，階層如下圖，由於新增步驟比較繁瑣，我就不一一截圖給大家看了。

然後替Icon新增Button組件。

  Text設定如下圖，我將Font Size設為32，Alignment設定置右置底。

介面拉好之後，畫面如下圖，是否有越來越像背包了呢。

將Item拉進Project視窗變成Prefab。

接著將場景中的Item刪除，往後我們要利用程式碼來產生Item Prefab。

最後，請大家自己將Slot拉滿整個背包視窗吧，如下圖，我的圖檔拉滿以後剛好是20的Slot欄位。