Почему нельзя просто отдать программистам макеты из Figma

Допустим, мы утвердили макеты интерфейсов для новой игровой механики. Дальше нужно передать их программистам, чтобы они собрали интерфейсы в Unreal / Unity, а также настроили логику их работы

Мы не можем просто передать макеты из Figma, потому что не все программисты умеют ей пользоваться, и не всем будет комфортно добывать графику из макетов

Поэтому будет лучше, если мы сами нарежем графику, передадим её программистам и вместе обсудим то, как интерфейсы будут собираться в Unreal / Unity. На картинке ниже пример с парой нарезанных элементов

Под какое разрешение нарезать графику для игрового UI

Если размер текстур будет недостаточным, они будут размываться и оформление потеряет в качестве. Поэтому нам нужен размер, который не даст графике размываться на устройствах с высоким разрешением 

Здесь более или менее универсальный вариант — это нарезать графику под разрешение 4K.  Такой формат покроет мониторы, телевизоры, планшеты и телефоны с высоким разрешением, а также не даст графике размываться на дисплеях с повышенной плотностью пикселей (Retina).

Почему не нарезать всё под 8к?

К сожалению, нарезать все текстуры в гигантском размере мы тоже не можем. Если огромную текстуру показывать в небольшом размере в движке, она будет пикселить.  Ниже пример такого эффекта

Поэтому золотая середина — это нарезка под разрешение в 4K — так текстуры не будут мыться на устройствах с большим разрешением и не будут пикселить, когда мы добавим их в виджеты в движке

В каком разрешении удобнее верстать игровые интерфейсы

По моим ощущениям, хоть в итоге мы и нарезаем графику под разрешение в 4K, сами интерфейсы удобнее верстать в разрешении 1920 х 1080

Графику можно рисовать в большом размере, подходящим под 4K, а для вёрстки уменьшать элементы под 1920 x 1080

Подробности про рисование графики для игровых интерфейсов можно посмотреть в этом плейлисте

Как нарезать элементы с несколькими состояниями

У нас могут быть элементы с несколькими состояниями. Например, в слоте предмета при его выборе может появляться рамка селекта

Чтобы было удобно позиционировать элементы, из которых состоит слот, можно дать им одинаковые габаритные размеры и положить в одинаковые координаты. Это упростит сборку виджета в Unreal / Unity и гарантирует, что элементы будут правильно расположены друг относительно друга

Как нарезать элементы UI, тянущиеся по горизонтали

Некоторые элементы интерфейса могут иметь разные размеры, например, нам могут понадобиться кнопки, растягивающиеся по ширине, и такие кнопки нужно будет нарезать особым образом 

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

Если на кнопке есть текстуры, мы не сможем бесконечно растягивать центральную часть, потому что это повлияет на качество картинки

Но есть и позитивный момент — мы можем копировать центральную часть, если она бесшовно стыкуется сама с собой и с боковыми элементами

Правда здесь, чтобы не были видны швы, мы вынуждены изменять ширину кнопки на величину, кратную ширине центральной части

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

Так боковые текстуры будут бесшовно переходить в центральную при любой ширине кнопки, и мы сможем задавать для неё любые размеры по ширине

Подробости про нарезку таких элементов можно посмотреть в ролике

Как нарезать элементы UI, тянущиеся в двух направлениях

У нас также могут быть объекты, которые тянутся в нескольких направлениях, например, подложки 

Если у подложки нет текстур, достаточно нарезать её на девять частей. Угловые части не будут меняться в размерах, а центральные будут растягиваться по вертикали и горизонтали 

У нас также могут быть подложки с текстурами, их тоже можно научить растягиваться по горизонтали и вертикали, нарезав элементы по аналогии с кнопкой с текстурами 

Только таких “кнопок” будет несколько, и некоторые из них будут растягиваться не только по горизонтали, но и по вертикали. Подробности про сборку таких сложных элементов в Figma можно посмотреть в ролике

Заключение

Мы с вами поговорили о том, как нарезать графику для игровых интерфейсов, вот до чего договорились:

1. Если нарезать графику в недостаточном размере, она будет мылиться 

2. Если нарезать в слишком большом размере, она будет пикселить 

3. Плюс - минус универсальным вариантом выглядит нарезка под разрешение 4K 

4. При этом верстать удобнее в 1920 на 1080 

5. Если у виджета несколько состояний, можно нарезать его элементы в одинаковом размере, чтобы упростить позиционирование

6. Чтобы заставить кнопку тянуться по горизонтали, достаточно нарезать её на три части и заставить центральный элемент тянуться. Работает если на кнопке нет текстур

7. Если у кнопки есть текстуры, можно собрать её на нескольких слоях

8. Если элемент должен тянуться в двух направлениях, достаточно нарезать его на девять частей 

9. Если у такого элемента есть текстуры, можно собрать его части по аналогии с кнопкой с текстурами 

Надеюсь что эта статья упростит ваши трудовые подвиги. Желаю всем удачи и творческих успехов ?

Я регулярно пишу статьи и видео про дизайн игровых интерфейсов, часть материалов есть в видео и статьях ниже

Полезные ссылки:
? Видео про нарезку графики для игровых интерфейсов
? Видео про сборку тянущихся элементов UI в Figma
? Youtube канал «Good Game UI» 
? Телеграм-канал «Good Game UI» 

Полезные плейлисты:
⚙️ Как проектировать игровой UX дизайн
? Как рисовать UI art
? Как верстать игровой UI
? Как собирать интерфейсы в Figma
? Как работать с текстом при дизайне UI