界面合集

Charcoal 背包格 — 76px网格

石板粉笔的76×76背包格:空、悬停、选中、锁定四态,外加三种稀有度框。SVG与透明PNG。

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

关于这个合集

内部打了排线的76px背包格。恐怖游戏展示的物品少而且大;这里要紧的不是网格而是那一件东西,格子是按美术而不是按密度定的尺寸。

背包网格需要的不是一块面板,而是一个能重复的正方形:7个76×76的文件,外框完全一致,排成一行时不用算间隙。让它们相隔80 px,边框就会读作一整片网格,而不是一排各自为政的盒子。

状态是用结构而不是颜色画出来的。选中的格子得到角标,锁定的格子得到斜排线,悬停的格子把边框抬高一档。这是刻意的:背包界面是多数游戏里最吵的一块面,它压在各种色相的物品美术之下,而一个只是边框颜色的状态,在格子里出现一把红剑的瞬间就看不见了。

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

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

下载

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

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

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

怎么用

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

许可

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

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