Паки интерфейса
Paper Ячейки инвентаря — сетка 64px
13 ячеек инвентаря светлый пергамент 64×64: пустая, наведение, выбранная, запертая, запрещённая, цель; круглая и шестиугольная ячейки снаряжения, хотбар, три рамки редкости.

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


