Паки интерфейса
Candy Ячейки инвентаря — сетка 80px
80×80 ячейки инвентаря в сахарный блеск: состояния пустая, наведение, выбранная и заблокированная плюс три рамки редкости. SVG и прозрачный PNG.

Об этом паке
Ячейки инвентаря 80px, самые крупные здесь. Игра «три в ряд» или коллекционная показывает дюжину предметов и делает событие из каждого; рамки редкости берут полное дополнительное кольцо вместо тонкого края, потому что в этом размере тонкий край выглядит ошибкой.
Сетке инвентаря не нужна панель, ей нужен квадрат, который повторяется: 7 файлов по 80×80, все с одинаковыми внешними границами, чтобы их ряд выстраивался без арифметики зазоров. Разнесите их на 84 px, и границы прочитаются как единая сетка, а не как ряд отдельных коробок.
Состояния нарисованы как структура, а не как цвет. Выбранная ячейка получает метки по углам, заблокированная — диагональную штриховку, ячейка под курсором поднимает границу на ступень. Это намеренно: экран инвентаря — самая шумная поверхность в большинстве игр, он лежит под графикой предметов всех оттенков сразу, и состояние, которое сводится к цвету границы, становится невидимым, как только в ячейке оказывается красный меч.
Три рамки редкости берут цвета здоровья, маны и выносливости из остального семейства, у каждой есть угловая метка вдобавок к цветной границе — так игрок, сортирующий по редкости, читает два сигнала, и ни один из них не спорит с графикой предмета в центре ячейки.
Всё включено как редактируемый SVG и как плоский прозрачный PNG в 1x, 2x и 4x. Внутренности ячеек прозрачны, поэтому сквозь них видно то, что вы рендерите за сеткой, а не запечённый цвет фона.
Загрузка
Прямая ссылка · без регистрации · без страницы ожиданияПолный комплект — исходники SVG, экспорт PNG в 1x/2x/4x, лицензия и readme
| Файл | Формат | Вес | Загрузка |
|---|---|---|---|
| Полный комплект — исходники SVG, экспорт PNG в 1x/2x/4x, лицензия и readme | ZIP | 82 kB | Получить → |
| Пустая ячейка, редактируемый SVG | SVG | 816 B | Получить → |
| Выбранная ячейка с метками по углам, редактируемый SVG | SVG | 1.2 kB | Получить → |
Как использовать
- Разложите ячейки с шагом 84 px — спрайт 80 px плюс 4 px промежутка — и границы останутся на расстоянии одного пикселя вместо удвоения.
- Рисуйте иконку предмета по центру ячейки примерно на 56 px; внутренняя выемка — 74 px, так что всё, что больше, коснётся края и съест рамку.
- Подменяйте весь спрайт ячейки для состояний выбранная и заблокированная вместо наложения тона, потому что метки по углам и штриховка — часть спрайта.
- Рамки редкости заменяют пустую ячейку один в один — те же границы, та же выемка — так что смена редкости это одна подмена текстуры без правки вёрстки.
Лицензия
Creative Commons «С указанием авторства» 4.0 — Бесплатно для коммерческого использования. Указание авторства обязательно. Полные условия · Что это значит на практике
"Candy Ячейки инвентаря — сетка 80px" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/candy-inventory-slots


