Паки интерфейса

Oak Ячейки инвентаря — сетка 72px

72×72 ячейки инвентаря в тёплый дуб: состояния пустая, наведение, выбранная и заблокированная плюс три рамки редкости. SVG и прозрачный PNG.

  • ui
  • svg
  • прозрачный png
  • инвентарь
  • ячейка инвентаря
  • рамка предмета
  • редкость
  • сетка
  • фэнтези
  • рпг
  • дерево
Ряд квадратных ячеек инвентаря на шахматном фоне: состояния пустая, наведение, выбранная с метками по углам и заблокированная с диагональной штриховкой, далее цветные рамки редкости и сетка из восьми ячеек
превью 1600×651прозрачность показана шахматкой

Об этом паке

Деталь, которая фэнтезийному инвентарю действительно нужна: квадрат, который повторяется. Семьдесят два пикселя достаточно велики, чтобы граница с двойной рамкой всё ещё оставляла место предмету, а это тот размер, на котором большинство наборов инвентаря перестают работать.

Сетке инвентаря не нужна панель, ей нужен квадрат, который повторяется: 7 файлов по 72×72, все с одинаковыми внешними границами, чтобы их ряд выстраивался без арифметики зазоров. Разнесите их на 76 px, и границы прочитаются как единая сетка, а не как ряд отдельных коробок.

Состояния нарисованы как структура, а не как цвет. Выбранная ячейка получает метки по углам, заблокированная — диагональную штриховку, ячейка под курсором поднимает границу на ступень. Это намеренно: экран инвентаря — самая шумная поверхность в большинстве игр, он лежит под графикой предметов всех оттенков сразу, и состояние, которое сводится к цвету границы, становится невидимым, как только в ячейке оказывается красный меч.

Три рамки редкости берут цвета здоровья, маны и выносливости из остального семейства, у каждой есть угловая метка вдобавок к цветной границе — так игрок, сортирующий по редкости, читает два сигнала, и ни один из них не спорит с графикой предмета в центре ячейки.

Всё включено как редактируемый SVG и как плоский прозрачный PNG в 1x, 2x и 4x. Внутренности ячеек прозрачны, поэтому сквозь них видно то, что вы рендерите за сеткой, а не запечённый цвет фона.

Загрузка

Прямая ссылка · без регистрации · без страницы ожидания
Скачать ZIP29 kB

Полный комплект — исходники SVG, экспорт PNG в 1x/2x/4x, лицензия и readme

Файлы, входящие в этот пак
ФайлФорматВесЗагрузка
Полный комплект — исходники SVG, экспорт PNG в 1x/2x/4x, лицензия и readmeZIP29 kB Получить →
Пустая ячейка, редактируемый SVGSVG930 B Получить →
Выбранная ячейка с метками по углам, редактируемый SVGSVG1.4 kB Получить →

Как использовать

  1. Разложите ячейки с шагом 76 px — спрайт 72 px плюс 4 px промежутка — и границы останутся на расстоянии одного пикселя вместо удвоения.
  2. Рисуйте иконку предмета по центру ячейки примерно на 50 px; внутренняя выемка — 66 px, так что всё, что больше, коснётся края и съест рамку.
  3. Подменяйте весь спрайт ячейки для состояний выбранная и заблокированная вместо наложения тона, потому что метки по углам и штриховка — часть спрайта.
  4. Рамки редкости заменяют пустую ячейку один в один — те же границы, та же выемка — так что смена редкости это одна подмена текстуры без правки вёрстки.
  5. Ячейка 72 px рассчитана на иконку предмета 48 px с запасом воздуха; на 64 px двойная рамка начинает поджимать предмет, а граница редкости перестаёт читаться.

Лицензия

Creative Commons «С указанием авторства» 4.0 — Бесплатно для коммерческого использования. Указание авторства обязательно. Полные условия · Что это значит на практике

Строка упоминания для копирования
"Oak Ячейки инвентаря — сетка 72px" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-inventory-slots