界面合集
Hyperlane HUD条 — 生命、法力与耐力
街机速度感的nine-slice条框，含三种光泽填充与一个分段变体，240×28，端头8 px。SVG与PNG。
关于这个合集
240x28的条，六格划分——是目录里最宽也最高的条。竞速HUD是在高速中、用余光读的，这就排除了细刻度。
框是端头8 px的nine-slice，因此拉到任何宽度两端都不会变形——一条通屏的首领血条和一条40 px的敌人名牌条用的是同一个文件。
填充是独立的精灵图而不是烤进框里的，而在实际使用中要紧的正是这一点：你把填充宽度从零推到满，框一动不动。每个填充在高度一半处以硬边而不是渐变分开，而正是这一点在1x下不花一个柔和像素就读作玻璃。
颜色共三种，每种资源一种：生命、法力与耐力。它们不仅在色相上、也在明度上拉开距离，而这正是能挺过灰度截图和最常见色觉差异的部分。一组调到相同明度的颜色在色卡里看着齐整，到了屏幕上却会塌成一块灰。
分段变体在同一个框上加了5条刻口线，面向按个数（心、充能、弹药）而不是连续百分比来计的游戏。它是独立文件而不是叠层，因此不用改你的条形控件就能换上。全部以可编辑的SVG提供，并附1x、2x与4x的平面透明PNG。
怎么用
- 先画框，再把填充叠上去，左边缘按端头宽度8 px内收；只对填充宽度做动画，框的两端就完全不动。
- 在Unity中把填充图设为Image Type Filled并选Fill Method Horizontal，或者用Sliced图并对RectTransform宽度做动画——两种都行，因为填充本身没有圆角。
- 在Godot 4中，把框设为Under Texture、填充设为Progress Texture的TextureProgressBar无需代码即可完整复现，Stretch Mode设为Tile可保住端头。
- 按格计数的资源请用分段框，并把填充宽度吸附到内宽的六分之一的整数倍，这样填充边缘总会落在刻口上。
许可
可复制的署名文字
"Hyperlane HUD条 — 生命、法力与耐力" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hyperlane-hud-bars更多界面合集
查看全部 →
Aetherlab 背景图
7个背景与叠层素材（魔导科技）。面向深色界面，实验室藏青配以太青点缀。SVG与透明PNG 1x/2x/4x。
Aetherlab 卡牌框
11个卡牌与通知组件（魔导科技）。面向深色界面，实验室藏青配以太青点缀。SVG与透明PNG 1x/2x/4x。
Aetherlab 对话套件
7个对话组件（魔导科技）。面向深色界面，实验室藏青配以太青点缀。SVG与透明PNG 1x/2x/4x。
Aetherlab HUD条 — 生命、法力与耐力
冷以太的nine-slice条框，含三种空芯填充与一个分段变体，200×20，端头4 px。SVG与PNG。