界面合集

Sumi 背包格 — 76px网格

水墨罩染的76×76背包格13个:空、悬停、选中、锁定、拒收与放置态,圆形与六角装备格,快捷栏,三种稀有度框。

  • ui
  • svg
  • 透明png
  • 背包
  • 背包格
  • 物品框
  • 稀有度
  • 网格
  • 赛璐璐着色
  • 墨线
  • 深色界面
  • 动作
棋盘格背景上的一排方形背包格,依次为空、悬停、带角标的选中、斜线填充的锁定状态,随后是彩色稀有度框和一个八格网格
预览 1600×656透明部分以棋盘格显示

关于这个合集

配套条为九格的76px格子。动作游戏显示的是一条小快捷栏而不是完整网格,因此格子大,选中态用的是能在明亮技能美术之上留住的角标。

背包网格需要的不是面板,而是能拼接的方格。这里每个格子都是76×76,外框尺寸一致;唯一的例外是放大件物品的双格,152×76,它是独立文件而不是拉伸后的方格,因为拉伸非九宫格的格子会让转角变形。按80px的间距摆放,边框就读作一整片网格,而不是一排独立的盒子。

状态是用结构而不是颜色画出来的。选中的格子加角标,锁定的加斜向排线,悬停的把边框抬高一级,拒收的带一个叉,放置目标带一圈虚线强调框。这是刻意的:背包界面是多数游戏里最嘈杂的一块,底下压着各种色调的物品图,只靠边框颜色表达的状态,在格子里放进一把红色的剑那一刻就看不见了。

拒收和锁定是刻意分开的两张图。锁定的格子以后可能打开;拒收的格子是在拒绝当前光标上的物品。把两者画成一样,正是背包把错误规则教给玩家的路径。装备格跳出方格也是同样的道理——饰品槽是圆的,宝石槽是六角的,形状比任何提示框都更早说明什么该放进去。

三个稀有度框沿用系列其余部分中生命、法力与耐力的颜色,每个除彩色边框外还带一个角标——这样按稀有度整理的人读到的是两个信号,而两者都不会跟格子中央的物品美术打架。

全部以可编辑的SVG提供,并附1x、2x与4x的平面透明PNG。格子内部是透明的,因此你在网格后面渲染的东西会直接透出来,而不是一层烤死的背景色。

下载

直接链接 · 无需注册 · 没有等待页
下载ZIP127 kB

全套 — SVG源文件、1x/2x/4x的PNG导出、许可与readme

这个合集包含的文件
文件格式体积下载
全套 — SVG源文件、1x/2x/4x的PNG导出、许可与readmeZIP127 kB 获取 →
空格子,可编辑SVGSVG772 B 获取 →
带角标的选中格,可编辑SVGSVG1.2 kB 获取 →

怎么用

  1. 格子按80 px的步距排布——76 px的精灵图加4 px间隙——边框就会保持一个像素的间距,而不是叠成双份。
  2. 物品图标居中画在格子里,约53 px;内凹区域是70 px,再大就会碰到边框、把框吃掉。
  3. 选中与锁定状态请整体替换格子精灵图,而不是叠一层色调,因为角标和斜线本身就是精灵图的一部分。
  4. 稀有度框可以直接替换空格子——外框相同、内凹相同——所以改稀有度只是一次纹理替换,不用动布局。

许可

知识共享 署名 4.0 — 商业用途也免费。需要署名。 完整条款 · 实际是什么意思

可复制的署名文字
"Sumi 背包格 — 76px网格" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/sumi-inventory-slots