下载并导入UI资源
前往Unity Assets Store
中下载添加此资源
打开Unity中的Package Manager
,选择My Assets,点击Import导入项目中
取消选择Scene,其他的全都勾选上,然后点击Import
然后在Assets文件夹下方会出现M Studio
文件夹,此处就是插件的目录
打开Color Palette
,能够看到不同前缀对应着不同的颜色
在Player名称前面加上“///”,即可标记此名称
创建Convas
Hierarchy窗口鼠标右击选择UI,选择Convas
会自动创建一个EventSystem
EventSystem会利用事件系统去触发UI的所有点击、滑动等操作带来的一系列事件
由于当前使用的是新版输入系统,所以点击Replace
进行替换
将此Actions Asset
,选为自己创建的PlayerInputControl
选择Convas。在右侧窗口中,Render Mode
为Screen Space - Overlay
,代表Convas为满屏填充,无论设备屏幕什么大小,都能够自适应填充整个屏幕
Convas Scaler
可以调整现在的比例是采用什么样的模式
将UI Scale Mode选择为Scale With Screen Size
,能够根据实际游戏的画面分辨率来调整UI布局
因此将下方的Reference Resolution
选择为1920 * 1080
Screen Match Mode
为Match Width Or Height
,即按什么样的比例优先排列
Match
为优先权重,0则最优先考虑宽度,1则最优先考虑高度
Reference Pixels Per Unit
为像素比例,此项目的所有素材都是以16像素绘制,因此输入16
创建Image
在Convas下选择UI,创建一个Image
选中Image,在右侧Rect Transform
中,点击此处Anchor Presets
能够选择不同的锚点进行绘制
代表绘制出来的Image,是依据锚点为基准,进行一定的位移来绘制的。因此可以根据需求选择不同的锚点,在不同画幅的设备上能够呈现相同的位置
在Anchor Presets中,按住alt+shift
键,点击“左上角”,Image则会自动吸附至Convas的左上角位置
创建血条UI
打开UI文件夹
对Base-UI
进行调整
点击Slice
,选择自动切割(有些UI模块会切割错误,需要自行调整)
对一部分需要的模块进行重命名
遇到没有自动识别到的模块,按住鼠标左键拖动
进行绘制,即可识别
打开Image,在Source Image
中,选择血条Frame。刚创建的血条Frame是Image的方形,点击下方的Set Native Size
,即可还原UI的原始比例
将其移动到合适的位置,并把Scale
都设置为1,不进行倍率放大处理。在此基础上,设置合适的大小
复制一个出来,并将Source Image
选择绿色血条
会发现,绿色血条覆盖了血条框,则将绿色血条移动至上方
调整绿色血条的位置和大小
选择绿色血条素材,将Image Type
选择Filled
填充。将Fill Method
填充方式,选择Horizontal
水平的方式。调整下方的Fill Amount
即可实现血条减少增多的效果了
复制绿色血条出来,更名为HealthFillRed
,用于处理扣血时的延迟特效
选中三个组件,右击点击Create Empty Parent
,命名为Health Bar,生成一个父类用于便捷管理血条栏
创建能量条UI
将Health Bar复制粘贴一个出来命名为Power Bar
,作为能量条组件
根据需要调整素材
选中两个组件,创建一个父类,命名为Player State Bar
创建头像UI
在此父类下面创建一个Image
,作为玩家头像,选择合适的素材,并调整它的位置
在Face Frame下方创建一个Cut,再创建一个Face,用于选择玩家角色图片
再右侧Image中的Source Image
选择待机图片,调整大小至头部能够适合头像框
选择Cut,并点击Add Component
,选择Mask
取消勾选Show Mask Graphic
,这样背景就不是白色了
调整至合适的位置