Unity引擎2D游戏开发,UI绘制创建人物状态栏

发布时间 2023-12-29 15:22:26作者: 心霖の雨

下载并导入UI资源

前往Unity Assets Store中下载添加此资源
image

打开Unity中的Package Manager,选择My Assets,点击Import导入项目中
image

取消选择Scene,其他的全都勾选上,然后点击Import
image

然后在Assets文件夹下方会出现M Studio文件夹,此处就是插件的目录
image

打开Color Palette,能够看到不同前缀对应着不同的颜色
image

在Player名称前面加上“///”,即可标记此名称
image

创建Convas

Hierarchy窗口鼠标右击选择UI,选择Convas
image

会自动创建一个EventSystem
image
EventSystem会利用事件系统去触发UI的所有点击、滑动等操作带来的一系列事件

由于当前使用的是新版输入系统,所以点击Replace进行替换
image

将此Actions Asset,选为自己创建的PlayerInputControl
image

选择Convas。在右侧窗口中,Render ModeScreen Space - Overlay,代表Convas为满屏填充,无论设备屏幕什么大小,都能够自适应填充整个屏幕
image

Convas Scaler可以调整现在的比例是采用什么样的模式
image

将UI Scale Mode选择为Scale With Screen Size,能够根据实际游戏的画面分辨率来调整UI布局
image

因此将下方的Reference Resolution选择为1920 * 1080
Screen Match ModeMatch Width Or Height,即按什么样的比例优先排列
Match为优先权重,0则最优先考虑宽度,1则最优先考虑高度
Reference Pixels Per Unit为像素比例,此项目的所有素材都是以16像素绘制,因此输入16
image

创建Image

在Convas下选择UI,创建一个Image
image

选中Image,在右侧Rect Transform中,点击此处Anchor Presets能够选择不同的锚点进行绘制
image
代表绘制出来的Image,是依据锚点为基准,进行一定的位移来绘制的。因此可以根据需求选择不同的锚点,在不同画幅的设备上能够呈现相同的位置

在Anchor Presets中,按住alt+shift键,点击“左上角”,Image则会自动吸附至Convas的左上角位置
image

创建血条UI

打开UI文件夹
image

Base-UI进行调整
image

点击Slice,选择自动切割(有些UI模块会切割错误,需要自行调整)
image

对一部分需要的模块进行重命名
image

遇到没有自动识别到的模块,按住鼠标左键拖动进行绘制,即可识别
image

打开Image,在Source Image中,选择血条Frame。刚创建的血条Frame是Image的方形,点击下方的Set Native Size,即可还原UI的原始比例
image

image

将其移动到合适的位置,并把Scale都设置为1,不进行倍率放大处理。在此基础上,设置合适的大小
image

复制一个出来,并将Source Image选择绿色血条
image

会发现,绿色血条覆盖了血条框,则将绿色血条移动至上方
image

调整绿色血条的位置和大小
image

选择绿色血条素材,将Image Type选择Filled填充。将Fill Method填充方式,选择Horizontal水平的方式。调整下方的Fill Amount即可实现血条减少增多的效果了
image

复制绿色血条出来,更名为HealthFillRed,用于处理扣血时的延迟特效
image

选中三个组件,右击点击Create Empty Parent,命名为Health Bar,生成一个父类用于便捷管理血条栏
image

创建能量条UI

将Health Bar复制粘贴一个出来命名为Power Bar,作为能量条组件
image

根据需要调整素材
image

选中两个组件,创建一个父类,命名为Player State Bar
image

创建头像UI

在此父类下面创建一个Image,作为玩家头像,选择合适的素材,并调整它的位置
image

在Face Frame下方创建一个Cut,再创建一个Face,用于选择玩家角色图片
image

再右侧Image中的Source Image选择待机图片,调整大小至头部能够适合头像框
image

选择Cut,并点击Add Component,选择Mask
image

取消勾选Show Mask Graphic,这样背景就不是白色了
image

调整至合适的位置
image