Unity背包系统(二)背包UI设计

上篇文章介绍了背包系统开发中需要使用到数据存储

本人使用并介绍LitJson进行生成、解析Json文件

在本文介绍背包系统的UI设计

大家别小瞧这个UI设计,一个好的UI设计方便我们管理,并且对代码扩展性与自适应性起到至关重要作用

【背包面板的设计】

先来看看UI图(图片自己在网上找到,不太好看)

Unity背包系统(二)背包UI设计_第1张图片

该背包U里面有很多矩形方框,我叫做物品槽,用于存放物品

Unity背包系统(二)背包UI设计_第2张图片

该背包UI目录结构图如下

Unity背包系统(二)背包UI设计_第3张图片

其中物品槽的父节点SlotsPanel添加了一个组件 Gird Layount Ground组件

该会按你的设置进行自定义布局,这样方便了们将多个物品槽排布到面板上

Unity背包系统(二)背包UI设计_第4张图片


【提示面板的设计】

提示面板是将鼠标放在物品槽里显示该槽里物品的的信息的面板

当你鼠标移除物品槽后,提示面板将消失

我们的需求:

提示面板会随内容的长高进行缩放

当内容宽,面板会变宽

内容变高,面板会变高

Unity背包系统(二)背包UI设计_第5张图片

设计目录结构如下图


其中ToolTilePanel是一个UI Text(改变其内容时,大小会改变,并且子节点ToolTileBg也会改变)

ToolTileBg是UI Image(提示面板背景图片)

ToolTileText是一个UI Text(显示内容)

在ToolTilePanel和ToolTileText两个对象上添加 Content Size Fitter组件,并按如下图修改属性,这样才能随Text内容改变而改变大小


为什么要添加两个UI Text呢?

ToolTileBg的图片会把ToolTilePanel的文字内容遮挡

两个UI Text内容都是一样的

ToolTilePanel是控制面板大小

ToolTileText是控制内容的显示


UI的设计介绍到这里,大家可以下载我的工程源码来学习


本人也在寻找一份游戏开发实习工作,如果大佬们需要开发人员,请把我带走

这是我的简历:resume.liujunliang.com.cn/resume.pdf

作品的话可以私聊我哦!



你可能感兴趣的:(游戏开发,移动游戏开发,移动游戏开发,unity3d,unity3d,Unity游戏开发)