Почему нельзя просто отдать программистам макеты из Figma
Допустим, мы утвердили макеты интерфейсов для новой игровой механики. Дальше нужно передать их программистам, чтобы они собрали интерфейсы в Unreal / Unity, а также настроили логику их работы
Мы не можем просто передать макеты из Figma, потому что не все программисты умеют ей пользоваться, и не всем будет комфортно добывать графику из макетов
Поэтому будет лучше, если мы сами нарежем графику, передадим её программистам и вместе обсудим то, как интерфейсы будут собираться в Unreal / Unity. На картинке ниже пример с парой нарезанных элементов
Под какое разрешение нарезать графику для игрового UI
Если размер текстур будет недостаточным, они будут размываться и оформление потеряет в качестве. Поэтому нам нужен размер, который не даст графике размываться на устройствах с высоким разрешением
Здесь более или менее универсальный вариант — это нарезать графику под разрешение 4K. Такой формат покроет мониторы, телевизоры, планшеты и телефоны с высоким разрешением, а также не даст графике размываться на дисплеях с повышенной плотностью пикселей (Retina).
Почему не нарезать всё под 8к?
К сожалению, нарезать все текстуры в гигантском размере мы тоже не можем. Если огромную текстуру показывать в небольшом размере в движке, она будет пикселить. Ниже пример такого эффекта
Поэтому золотая середина — это нарезка под разрешение в 4K — так текстуры не будут мыться на устройствах с большим разрешением и не будут пикселить, когда мы добавим их в виджеты в движке
В каком разрешении удобнее верстать игровые интерфейсы
По моим ощущениям, хоть в итоге мы и нарезаем графику под разрешение в 4K, сами интерфейсы удобнее верстать в разрешении 1920 х 1080
Графику можно рисовать в большом размере, подходящим под 4K, а для вёрстки уменьшать элементы под 1920 x 1080
Подробности про рисование графики для игровых интерфейсов можно посмотреть в этом плейлисте
Как нарезать элементы с несколькими состояниями
У нас могут быть элементы с несколькими состояниями. Например, в слоте предмета при его выборе может появляться рамка селекта
Чтобы было удобно позиционировать элементы, из которых состоит слот, можно дать им одинаковые габаритные размеры и положить в одинаковые координаты. Это упростит сборку виджета в Unreal / Unity и гарантирует, что элементы будут правильно расположены друг относительно друга
Как нарезать элементы UI, тянущиеся по горизонтали
Некоторые элементы интерфейса могут иметь разные размеры, например, нам могут понадобиться кнопки, растягивающиеся по ширине, и такие кнопки нужно будет нарезать особым образом
Если на кнопке нет текстур, можно разрезать её на три части. Для боковых сделать фиксированную ширину, а центральный элемент сделать шириной в 1 пиксель и заставить тянуться по горизонтали
Если на кнопке есть текстуры, мы не сможем бесконечно растягивать центральную часть, потому что это повлияет на качество картинки
Но есть и позитивный момент — мы можем копировать центральную часть, если она бесшовно стыкуется сама с собой и с боковыми элементами
Правда здесь, чтобы не были видны швы, мы вынуждены изменять ширину кнопки на величину, кратную ширине центральной части
Также есть ещё более позитивный момент — можно располагать элементы кнопки на разных слоях. На нижний слой положить центральную текстуру, которая умеет бесконечно стыкуется сама с собой, а на верхнем слое положить боковые текстуры, которые плавно переходят в прозрачность
Так боковые текстуры будут бесшовно переходить в центральную при любой ширине кнопки, и мы сможем задавать для неё любые размеры по ширине
Подробости про нарезку таких элементов можно посмотреть в ролике
Как нарезать элементы UI, тянущиеся в двух направлениях
У нас также могут быть объекты, которые тянутся в нескольких направлениях, например, подложки
Если у подложки нет текстур, достаточно нарезать её на девять частей. Угловые части не будут меняться в размерах, а центральные будут растягиваться по вертикали и горизонтали
У нас также могут быть подложки с текстурами, их тоже можно научить растягиваться по горизонтали и вертикали, нарезав элементы по аналогии с кнопкой с текстурами
Только таких “кнопок” будет несколько, и некоторые из них будут растягиваться не только по горизонтали, но и по вертикали. Подробности про сборку таких сложных элементов в Figma можно посмотреть в ролике
Заключение
Мы с вами поговорили о том, как нарезать графику для игровых интерфейсов, вот до чего договорились:
Если нарезать графику в недостаточном размере, она будет мылиться
Если нарезать в слишком большом размере, она будет пикселить
Плюс - минус универсальным вариантом выглядит нарезка под разрешение 4K
При этом верстать удобнее в 1920 на 1080
Если у виджета несколько состояний, можно нарезать его элементы в одинаковом размере, чтобы упростить позиционирование
Чтобы заставить кнопку тянуться по горизонтали, достаточно нарезать её на три части и заставить центральный элемент тянуться. Работает если на кнопке нет текстур
Если у кнопки есть текстуры, можно собрать её на нескольких слоях
Если элемент должен тянуться в двух направлениях, достаточно нарезать его на девять частей
Если у такого элемента есть текстуры, можно собрать его части по аналогии с кнопкой с текстурами
Надеюсь что эта статья упростит ваши трудовые подвиги. Желаю всем удачи и творческих успехов 🌞
Я регулярно пишу статьи и видео про дизайн игровых интерфейсов, часть материалов есть в видео и статьях ниже
Полезные ссылки:
📺 Видео про нарезку графики для игровых интерфейсов
📺 Видео про сборку тянущихся элементов UI в Figma
📺 Youtube канал «Good Game UI»
🔗 Телеграм-канал «Good Game UI»
Полезные плейлисты:
⚙️ Как проектировать игровой UX дизайн
🎨 Как рисовать UI art
🧩 Как верстать игровой UI
🧰 Как собирать интерфейсы в Figma
🪶 Как работать с текстом при дизайне UI
