界面合集
Blocks HUD条 — 生命、法力与耐力
厚重体素的nine-slice条框，含三种带刻度填充与一个分段变体，168×28，端头6 px。SVG与PNG。
关于这个合集
配合方块面板、用刻度图案而不是平滑填充的状态条。框读作在实心方块上挖出的一道槽——填充坐在里面，而不是浮在上面。
框是端头6 px的nine-slice，因此拉到任何宽度两端都不会变形——一条通屏的首领血条和一条40 px的敌人名牌条用的是同一个文件。
填充是独立的精灵图而不是烤进框里的，而在实际使用中要紧的正是这一点：你把填充宽度从零推到满，框一动不动。每个填充沿全长带着均匀的刻度，把一个百分比变成玩家不用分段框也能一眼数出来的东西。
颜色共三种，每种资源一种：生命、法力与耐力。它们不仅在色相上、也在明度上拉开距离，而这正是能挺过灰度截图和最常见色觉差异的部分。一组调到相同明度的颜色在色卡里看着齐整，到了屏幕上却会塌成一块灰。
分段变体在同一个框上加了7条刻口线，面向按个数（心、充能、弹药）而不是连续百分比来计的游戏。它是独立文件而不是叠层，因此不用改你的条形控件就能换上。全部以可编辑的SVG提供，并附1x、2x与4x的平面透明PNG。
怎么用
- 先画框，再把填充叠上去，左边缘按端头宽度6 px内收；只对填充宽度做动画，框的两端就完全不动。
- 在Unity中把填充图设为Image Type Filled并选Fill Method Horizontal，或者用Sliced图并对RectTransform宽度做动画——两种都行，因为填充本身没有圆角。
- 在Godot 4中，把框设为Under Texture、填充设为Progress Texture的TextureProgressBar无需代码即可完整复现，Stretch Mode设为Tile可保住端头。
- 按格计数的资源请用分段框，并把填充宽度吸附到内宽的八分之一的整数倍，这样填充边缘总会落在刻口上。
许可
更多界面合集
查看全部 →
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。