Unity подсветка кнопки при наведении

Unity UI. Button

Привет. В этот раз у нас кнопка (Button). Это первый элемент UI, который создан для непосредственного взаимодействия с пользователем, так что он и вправду очень важный. При этом кнопки ещё и довольно частый элемент в интерфейсе. Вы могли видеть в различных меню, инвентарях и других экранах.

Добавляем элемент Button

Я продолжу предыдущий проект, но просто перемещу Text и Image элементы, чтобы они нам не мешали. В следующий раз мы к ним вернемся.

Итак. Уже привычным способом добавляем на канвас кнопку:

В результате этого в центре экрана получаем новенькую кнопку:

Важной особенностью этого элемента в Unity является то, что текст внутри – это уже знакомый элемент Text. Его мы разбирали. Ещё круче то, что в Button можно положить, допустим, Image, получив кнопку с картинкой.

Инспектор кнопки содержит больше элементов, чем предыдущие, но среди них есть известные компоненты, вроде Rect Transform (положение, размер) и Image (спрайт кнопки).

Из предыдущих уроков мы узнали достаточно чтобы кастомизировать кнопку на свой вкус, например так:

И да, тень и обводка работают и с кнопками.

Компонент Button в Unity

Но разберем же и сам Button:

Чек-бокс Interactable определяет активна ли кнопка. Если флаг стоит, то на кнопку можно нажать, но если его снять, то нажатия больше не сработают (и она вообще ни на что реагировать не будет). Сама кнопка при этом тоже изменит цвет.

Transition это переходы для отрисовки кнопки в разных состояниях. Может иметь три варианта: Color Tint, Sprite Swap и Animation.

Color Tint, это когда мы выбираем один спрайт для кнопки, но меняем лишь цвета. Т.е. цветовой переход, как сейчас. У нас есть цвета для нормального состояния, при наведении курсора, при нажатии, при выделении и для неактивного состояния.

Fade Duration это длительность перехода.

Sprite Swap позволяет просто выбрать отдельные спрайты для этих же состояний:

Animation один из самых интересных. Тут можно создать полноценный контроллер анимации и задать отдельные анимации для разных состояний.

Жмём Auto Generate Animation. И сохраняем в новую папку Animations. В результате вы должны получить такой вот файлик:

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

Добавим анимацию при наведении на кнопку мыши. Пускай… она будет ставать немного больше. Выделяем кнопку и открываем окошко анимации:

Выбираем Highlighted и добавляем переменную Scale:

Анимация будет такая: небольшое увеличение до 30 секунды, а после будет идти уменьшение до изначального размера.

Далее идёт Navigation. Он определяет, как можно будет перемещаться по элементам UI при помощи клавиатуры. None – запрещает управление, далее следуют Автоматический, Горизонтальный, Вертикальный, Явный (Explicit) – позволит самостоятельно определить направление. А Visualize ниже нужен, чтобы отобразить перемещение наглядно:

Последний блок этого компонента это On Click (). Но для его реализации нужен скрипт, так что отложим это на другой раз.

А с кнопкой на этом всё 🙂 А в официальных обучающих ресурсах есть ещё обучающий материал по кнопкам.

Источник

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

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

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

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

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

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

Добавим две кнопки у одной изменим спрайт на 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 меняет цвет объектов через события

1. Холст нельзя перемещать, он понимается как игровое окно.

2. Кнопка находится на уровне пользовательского интерфейса. Я не знаю, почему она не будет слишком маленькой или большой, когда она перемещается вперед и назад в поле зрения камеры. (Это немного похоже на глубоководного принца из истории, которую Юнь Тяньминь рассказал Чэн Синю в романе «Три тела» 3.)

Pos X = 0, Pos Y = 0 означает, что btton находится в середине Canvas

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

Если вы не используете его, вы можете добавить его самостоятельно

а) Добавить компонентный триггер события

б) Изучите настройки кнопок и сделайте некоторые настройки, которые вы ожидаете

в) Скрипт и другие связанные настройки такие же: кнопку нужно перетащить на событие, а скрипт повесить на кнопку.

Это работает так, как вы ожидаете.

3 EventSystem — это то, что соответствует событию кнопки и не может быть удалено, в противном случае функция кнопки и эффект запуска события исчезнут.

Добавьте изображение и измените его на 2DUI

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

Чтобы узнать о некоторых настройках изменения кнопок и других вещах, обратитесь к официальной документации Unity.

Источник

UI: Пользовательский интерфейс

Графический интерфейс пользователя (англ. Graphic User Interface, GUI) — это метод взаимодействия пользователя с игрой, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на экране, выполнены в виде графических изображений.

Интерфейс игры

Canvas

Все элементы интерфейса (кнопки, изображения) должны находиться внутри объекта Canvas. Canvas — это холст экрана, на котором размещаются элементы. Для создания холста в главном меню выбери GameObject → UI → Canvas. В окне Инспектор можно настроить параметры холста. Самая важная настройка — это Render Mode компонента Canvas. Он отвечает за режим отображения интерфейса.

Render Mode содержит следующие настройки на выбор:

• Screen Space — Overlay. Элементы интерфейса показываются поверх экрана. Стоит по умолчанию;
• Screen Space — Camera. Позволяет отображать интерфейс в определенной камере;
• World Space. В этом режиме элементы интерфейса располагаются в 3D пространстве.

Rect Transform

Все элементы интерфейса имеют настройки Rect Transfrom. Разберем их на примере кнопки (выбрав в главном меню GameObject → UI → Button).

Во время редактирования пользовательского интерфейса в Unity нужно включить режим 2D. Для этого на панели Scene нажми кнопку 2D:

Переключение режимов

Включи инструмент редактирования пользовательского интерфейса на панели инструментов или нажми кнопку T. С помощью этого инструмента можно перемещать, вращать и изменять размер элементов интерфейса.

Режимы редактирования

Выбери элемент интерфейса. Схватив за одну из точек по краям можно изменить размер элемента.

Anchor — это точка привязки элемента интерфейса на экране. Изменить расположение Anchor можно, если схватить за центр «цветка». Разберем пример, когда Anchor привязан к левому верхнему краю. Точка Anchor кнопки находится в левом верхнем углу. При изменении размера экрана – кнопка не изменяет свой размер и будет расположена на определенном расстоянии от левого верхнего угла. Следовательно, кнопка будет выглядеть большой на маленьком экране и маленькой на большом мониторе.

Пример 1 Пример 2

Для того, чтобы элемент интерфейса масштабировался — расположи «лепестки» Anchor так:

Пример 3 Пример 4

Button

Создать кнопку можно в главном меню GameObject → UI → Button. Кнопка состоит из двух объектов, которые можно посмотреть в окне Иерархия — формы и текста внутри нее:

Объекты кнопки

Сначала разберем настройки надписи на кнопке. Выбери Text на панели Hierarchy. В Inspector будут следующие настройки текста:

• Text — текст кнопки;
• Font Size — размер текста.

Теперь, рассмотрим настройки формы кнопки. Выбери объект Button (название этого объекта можно изменить). В окне Инспектор находятся следующие основные настройки:

• Normal Color. Цвет кнопки;
• Highlighted Color. Цвет кнопки при наведении на нее мыши;
• Pressed Color. Цвет нажатой кнопки.

Функции

Как ты уже знаешь, отдельным блокам кода можно задавать имена. Такой именованный блок кода называется функцией или методом (частный случай функций). Для примера создадим функцию с именем SayHello, которая выводит фразу Hello world! в консоль:

Обратите внимание, что функция не выполняется автоматически при создании. Чтобы функция выполнилась, ее требуется явно вызвать в желаемом месте. Для примера вызовем созданную функцию внутри функции Start():

Обработка события нажатия на кнопку

Для обработки события нажатия на кнопку необходимо выполнить два шага:

1. Создать функцию, которая должна выполняться при каждом нажатии.

2. Передать имя созданной функции в функцию AddListener() соответствующего события кнопки.

Обратите внимание, что имя функции может быть любым. Имя должно соответствовать действию, которое выполняет функция. А вот этот скрипт загрузит сцену с нужным именем по нажатию кнопки:

Создание кнопки со своим дизайном

Рассмотрим пример создания кнопки, состоящая из трех изображений: обычное состояние (Normal), состояние, когда на кнопку наведена мышь (Hovered) и состояние нажатия на кнопку (Pressed). Кнопки можно ⬇ скачать тут.

Нормальное состояние кнопки (Normal) и нажатая кнопка (Pressed)

Сначала нужно загрузить все изображения кнопки в проект, лучше использовать одно изображение, разделенное с помощью инструмента Sprite Editor. Выбери загруженное изображение и в окне Инспектор в параметре Texture Type выбери Sprite (2D and UI). После чего нажми кнопку Apply.

Изменение типа изображения

Теперь в параметре Sprite Mode выбери Multiple и нажми кнопку Sprite Editor, чтобы открылся редактор Sprite Editor. Выбери в меню Slice → Type → Automatic и нажми кнопку Slice. Unity сам найдет все кнопки и разметит их.

Автоматическая разметка кнопок

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

Фрагменты кнопки, которые не будут изменять размер

Выполни это действие для каждой кнопки. После этого можно закрыть окно и принять изменения.

Создай кнопку Выдели кнопку GameObject → UI → Button. Выбери ее и в окне Инспектор отредактируй следующие настройки:

• в параметре Source Image выбери спрайт кнопки в обычном состоянии (normal);
• в параметре Image Type выбери Sliced;
• в параметре Transition выбери Sprite Swap;
• в параметре Highlighted Sprite выбери спрайт подсвеченной кнопки (с нашими кнопками это normal состояние);
• в параметре Pressed Sprite выбери спрайт нажатой кнопки.

Настройки кнопки

Image

GameObject → UI → Image позволяет показывать на переднем плане экрана изображения такие как карта, значок жизни, магии и прочее.

Добавь в проект изображение, которое будет использоваться в графическом интерфейсе. В Окне Инспектор изображения для выбери следующие настройки:

• в параметре Texture Type выбери Sprite (2D or UI);
• в параметре Sprite Mode выбери Single.

Добавь на сцену GameObject → UI → Image. На панели Inspector выбери следующие настройки:

• в параметре Source Image выбери загруженное изображение;
• в параметре Color можно перекрасить изображение в определенный цвет;
• в параметре Image Type выбери Simple. Если включить настройку Preserve Aspect, то изображение не будет деформироваться при изменении размера экрана. Если в настройке Image Type выбрать Tiled — изображение будет повторяться на экране.

Text

GameObject → UI → Text позволяет отображать текст в графическом интерфейсе (отображение диалогов, подсказок, надписей). Содержит следующие настройки:

• Text — текст, который будет отображаться на экране;
• Font — шрифт текста;
• Font Style — тип шрифта. Принимает следующие значения:
• Normal – обычный шрифт;
• Bold – применение полужирного начертания к тексту;
• Italic – применение курсивного начертания к тексту;
• Bold and Italic – применение курсивного и полужирного начертания к текст.
• Font Size — размер шрифта;
• Alignment — выравнивание текста;
• Color — цвет текста.

Текст можно менять с помощью скрипта. Это позволит в режиме реального времени отображать количество набранных очков, жизни, времени и т.п.

Источник