創建UI界面
先創建一個畫布（canvas），改名爲KnapsackUI，把UI縮放的模式改成隨着屏幕大小縮放：
在Canvas Scaler（script）中有一個滑桿：
如果是豎版遊戲就把它拖到左邊width，如果是橫板遊戲就拖到右邊height，我們把它拖到左邊就可以了
然後我們給canvas添加一個UI：panel，調整大小位置合適，改名爲GridPanel
然後在Panel中創建一個image，改名爲Grid，把Source Image改爲UISprite
創建一個prefeb文件夾，把這個Image存爲預製體
給GridPanel添加一個自動排序的組件：Grid Layout Group(Script)
然後就可以看到image自動排到了Panel的左上角：
然後調整Grid Layout Group(Script)的邊距padding
然後選中Grid按Ctrl+D，複製多個格子，它會自動排好順序（如果感覺Panel的大小不合適可以改一下）：
然後可以給這些格子設置一個間隔，這樣更好看一些
給Panel添加一個C#腳本GridPanelUI（），這個腳本屬於視圖層，所以給Script文件夾下添加一個文件夾：View，並把這個腳本拖進去（有規律地存放腳本是個好習慣）。
注：當編寫一個視圖層的腳本的時候，不需要給他添加太多複雜的邏輯，他只用來控制顯示即可。
然後創建物品：在Panel同級創建一個image，改名爲Item，把Image組件移除，在Item下創建一個Text，叫做Name，調整大小與Item相同，修改text的value爲武器的名字，大小爲40左右，左右上下居中，設置顏色
然後再給字體添加一個外邊框（outline）組件
給Item添加一個腳本ItemUI，在實際做遊戲的時候我們一般會放一個圖片，但是我們沒有美工幫我們做，就暫時先用文字代替，如果是用圖片的話，給image的Source Image換成相應的圖片就可以了
我們用的是文字，這個物體只有一個Name來給我們顯示，所以我們只需要提供一個更新UI的接口就可以了
如果是圖片的話也一樣，替換成這樣即可：
然後我們把Item拖到prefeb裏面製成一個預製體，把場景中的刪除
當格子中有物體的時候，該Grid即有一個子物體Item
我們根據這一點來創建GridPanelUI腳本：
首先，要獲取到所有格子，先創建一個transform的數組
public transform[] Grids;
然後給它賦值
- 小技巧：賦值要選中所有的Grid，給GridPanel中的腳本賦值，但是我們選中Grid的時候，這個Inspector就改變了，拖不進去了，這時候我們就要選中GridPanel，點擊右上角的小鎖圖標，就可以鎖定住，再點擊其他就不會變了
![在這裏插入圖片描述]()
點第一個，然後按住shift點最後一個就可以選中全部了，拖到這裏即可賦值
然後我們寫一個函數返回一個沒有物體的格子
這個腳本就完成了（可以發現這兩個視圖層的腳本都很簡單，這是因爲他們不需要跟其他的有牽扯）
