Unity UI. Более продвинутые Button

Привет. Недавно (тут) мы разбирали Button, т.е. кнопки. Были основные моменты настройки и даже был пример с простой анимацией. Теперь же предлагаю сделать акцент на их внешнем виде. Материал пишу на базе этого видео.

Материальный Button

Много лет, работая на Android, я жил материальным дизайном. Возможно, из-за этого дефолтная кнопка в Unity мне совсем не по душе. А может она просто не очень. Особенно напрягают моменты, когда видишь её без изменений в какой-то инди игре. Пример:

Игра не моя. Досталась бесплатно в Steam, но вообще за неё и денег просят

Кстати, игра не такая плохая. Могла бы быть. Это что-то вроде симулятора экономического. Просто им бы графику починить, да идеи доразвить. Ссылка на игру.

Ладно. Фишка в том, что, чтобы сделать простую кнопку с заливкой – нам вообще не нужны никакие спрайты.

Добавим две кнопки у одной изменим спрайт на None.

Выберем какой-то цвет заливки и поправим цвет текста для большего соответствия. Можно докинуть ещё тень, и получаем такой вот результат:

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

Button с Image и Text

Кнопка с текстом — это хорошо, но иногда нам нужны кнопки, где будет не только текст, но и какая-то иконка. Сделать это не сложно. Копируем оранжевую Button ниже и добавляем в неё Image.

В качестве иконки я взял спрайт из этого пака.

В Button добавляем новый компонент Horizontal Layout Group:

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

Смотрим что вышло. Как вы поняли, этот компонент расположил дочерние элементы горизонтально:

Выглядит не особо, так что переходим в Image, и туда добавляем компонент Layout Element. Тут укажем предпочитаемый размер дочернего элемента:

И да, Image надо бы поставить раньше текста.

Теперь вернемся к Horizontal Layout Group и укажем Spacing. Эта величина отвечает за отступ между элементами.

И добавим ещё один очень полезный компонент. Он будет подгонять размер кнопки под ширину содержимого.

Называется он Content Size Fitter. Указываем для горизонтальной величины:

И получаем соответствующую контенту кнопку:

Теперь в Horizontal Layout Group добавим отступы (Padding) и будет выглядеть просто шикарно!

Главный прикол компонента Content Size Fitter в том, что если мы добавим текст побольше, то кнопка станет больше вместе с ним:

Это нужно не всегда, но знать о таком компоненте стоит.

Rounded Button

Кнопка с кругленькими углами достаточно частое явление. Сделать её очень просто, но для этого нам нужен круглый спрайт. Буквально круг.

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

Больше анимаций!

Теперь добавим стандартные анимации для разных состояний. Для этого создаём ещё один Animator Controller и открываем окошко Animation (Ctrl+6).

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

Для этого сначала укажем нормальное состояние:

Тут указываем стандартные величины, это будет отправная точка для анимации.

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

А для нажатия уменьшим эти же величины:

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

Кстати, в анимацию можно включить большую часть изменяемых значений. Например цвет. Нужно добавить нормальный цвет, как и для масштаба. А потом, например, для анимации при нажатии, где он будет темнее.

Чтобы не запутаться в величинах и значениях есть такая классная функция, как захват изменений. Я её так называю -_-

Суть в том, что после нажатия на кнопку записи, в анимацию будут добавлены все изменённые поля. При этом можно по кадрово их изменять и анимировать. Очень удобно.

Результат сегодняшних мучений вот:

На этом пока всё, спасибо за внимание!

Список всех материалов по Unity

3 комментария к “Unity UI. Более продвинутые Button”

  1. Пингбэк: Уроки по Unity – GeekStand

  2. Пингбэк: Unity UI. Создаём простое главное меню – GeekStand

  3. Пингбэк: Unity UI. Чекбоксы (Toggle). Toggle Group – GeekStand

Оставьте комментарий

Прокрутить наверх