用UGUI简单实现Inventory案例

用UGUI简单实现Inventory案例

---

先贴上效果图

---

具体实现

一：新建一个unity场景，新建画布如下

将canvas改名为Scene，系统会自动生成一个EventSystem
在Scene下面新建一个子UI对象Panel（画布）如图

这样画布就建好了
但是整个UI还需要一个UI摄像机，新建摄像机重命名为UIcamera
挂载在Scene上的EventCamera
注意Scene的RenderMode要设置成World Space
UIcamera的组件如下图

二：构建背景

新建一个空对象重命名为SF Scene Elements，reset一下

然后在SF下新建一个摄像机，一个空对象还有一个粒子系统
关于摄像机，这是一个对于背景的摄像机，和上面的UI摄像机在不同层级上共同完成我们看到的界面，注意对比摄像机上layer的设置，以及相应的Camera mask，main摄像机设置如图：

关于新建的空对象是用来放背景图片的
将空对象重命名为Background，然后添加Sprite Rendera组件，
在Sprite一项选择我们的背景如图

粒子系统是为了营造更好的3D效果，用unity默认的就好，注意例子系统的位置

---

点一下运行，现在的效果如图

可以看到效果比较朦胧，是因为UI画布遮挡着背景
然后有雪花飘着，十分有立体感

---

三：构建人物模型

新建一个摄像机命名为Hero Camera，
将其clear flag设为dont clear；
layer设为0，culing musk 除去UI，如图

然后在camer下面放入我们的预设体，这里放入我在asset商店下载的一个模型A03如图

然后给A03添加一个animation，自己录制一个Idle动画，或者自己导入一个人物模型的动画都可以

---

现在点运行的效果图如下：

现在基本已经构建好场景了

---

四：完善UGUI界面

回到最开始Scene里，现在我们首先要添加物品栏
考虑到物品栏点击会有行为
所以想到用UI Button
现在panel下新建一个新的panel，重命名为Bag（作为物品栏的容器）
然后在Bag里新建一个Grid layout（格子）组件
设置好格子的间隔以及大小如图，详细具体看unity宝典

然后就可以在bag下新建button作为一个个格子
如图新建9个button，然后在button下自带的text填上相应的背包

装备栏也同理，新建一个画布，名为Equipment，
挂上格子组件，新建button子对象，如图

这里就可以在button的Image组件下的sourse Image，添加自己喜欢的贴图，这里的贴图必须是UI精灵

格子做好了，留意到最终效果还有个绿色的button和一个text

新建一个button，重命名为wear，修改text和image的color如图

再新建一个text，如图

这里的text添加了一个shadow组件，给文字上了阴影，看起来更美观

---

现在点运行的效果图如下：

整个project到这里基本已经布好局了，接下来是一些UI行为的实现

---

五：画布随鼠标旋转

新建一个c#脚本TiltWindow