Unity背包系统笔记01：UI界面设计（以原神为例）

目录

菜单背景设计

滚动容器

武器描述

删除提示

其他交互

总结

---

任何系统无外乎五个阶段：需求分析、技术分析、框架设计、细节实现、维护与改进。事实上，背包系统是任何较大游戏中非常关键的一部分，是RPG类游戏延长玩家游戏寿命的主要核心之一。

这篇笔记来源于打工人小棋的B站视频

注意！本篇笔记只是极为简单地记下了一些UI的摆放顺序以备自查，建议看视频！

菜单背景设计

首先新建Canvas，随后在下方新建主界面Panel，设置好背景图片和颜色，在正上方添加几个Menu，设置一个Layout Group，随后设置好各自的图片，透明度等等。

为各个上方菜单添加Button组件，并且子物体添加不同状态下对应的图片和高亮选中时下方淡色的横方框。配置好所有的界面之后，再尝试去添加一些脚本。

滚动容器

在正中央设置一个对象并且将滚动容器设置为该物体的子物体，并且添加Scroll Rect组件。Scroll Rect组件是一个方形滚动容器组件。

接下来对滚动容器内部展示的内容进行编辑。首先添加Layout Group 和Size Fitter组件。

接下来设置武器的预制件。同理，设置未选中，选中，删除选中和新获得几种状态，分别配置对应的图片。接着，放置一张图片用于获取武器贴图。在下方还可以添加一些其他UI，比如说等级和稀有度等等。

武器描述

武器描述分为上中下三个部分，其中上部是武器的名称，中部是关于武器的贴图和背景图片（包含稀有度）；底部则显示了武器的详细描述。都可以使用和滚动容器相同的方法来完成。

删除提示

当进入删除模式时，在底部设置分类，删除和返回三个按钮，并且设置了偏红的背景图片。

其他交互

退出交互界面按钮和切换武器/食物界面按钮等等，都可以通过相同的方式去实现。再次提醒，第一步只做排版而不编写脚本，应当专注把图片的大小、颜色、位置、透明度等等设置好，并且注意对象的层级关系。

总结

根据主要界面的八个位置设置对应的空对象，再在空对象下去设置更多的相应位置的对象作为子物体是一种不错的分类方式；

在进行单个对象的编辑（尤其是按钮）时，可以设置多个image，在点击事件发生时进行切换是一个非常不错的方式。

在单个对象的编辑时，如果需要其他的小的附属物体，需要注意从属关系。