界面合集
Hologrid HUD条 — 生命、法力与耐力
投射光的HUD条16个:标准、细窄与竖向框,各配三种刻度填充,另有分段、残影与护盾变体。SVG与透明PNG。

关于这个合集
180x16的条,二十格划分。投影读作数据而不是仪表,而二十个刻度让它不用数字读数也有仪器级的分辨率。
框是端头3 px的nine-slice,因此拉到任何宽度两端都不会变形——一条通屏的首领血条和一条40 px的敌人名牌条用的是同一个文件。
填充是独立的精灵图而不是烤进框里的,而在实际使用中要紧的正是这一点:你把填充宽度从零推到满,框一动不动。每个填充沿全长带着均匀的刻度,把一个百分比变成玩家不用分段框也能一眼数出来的东西。
颜色共三种,每种资源一种:生命、法力与耐力。它们不仅在色相上、也在明度上拉开距离,而这正是能挺过灰度截图和最常见色觉差异的部分。一组调到相同明度的颜色在色卡里看着齐整,到了屏幕上却会塌成一块灰。
分段变体在同一个框上加了19条刻痕线,面向计数离散单位的游戏——生命格、充能、弹药——而不是连续百分比。它是独立文件而非叠加层,因此不用改动你的进度条组件就能替换。
三种框型覆盖了进度条实际出现的位置:标准条、用于敌人名牌的细窄条,以及竖条——因为法力竖条不是把生命条转过来:旋转九宫格会让端头沿错误的轴被拉伸。每种框型都有自己的三种填充。
两种叠加填充负责单条自己表达不了的状态。残影填充是空心虚线,标出刚刚失去的那一段,于是一次受击读作变化而不是一个新数字。护盾填充用排线而不是着色,因为吸收层压在资源条上方,在那里用第二种颜色会和底下的颜色打架。全部以可编辑SVG和1x、2x、4x的平面透明PNG提供。
怎么用
- 先画框,再把填充叠上去,左边缘按端头宽度3 px内收;只对填充宽度做动画,框的两端就完全不动。
- 在Unity中把填充图设为Image Type Filled并选Fill Method Horizontal,或者用Sliced图并对RectTransform宽度做动画——两种都行,因为填充本身没有圆角。
- 在Godot 4中,把框设为Under Texture、填充设为Progress Texture的TextureProgressBar无需代码即可完整复现,Stretch Mode设为Tile可保住端头。
- 按格计数的资源请用分段框,并把填充宽度吸附到内宽的20分之一的整数倍,这样填充边缘总会落在刻口上。
许可
可复制的署名文字
"Hologrid HUD条 — 生命、法力与耐力" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hologrid-hud-bars


