Amazon Lumberyard. Меню часть 2 (Кнопки).

Добавление кнопок к нашему меню.

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

Запустим наш проект и откроем редактор UI. Откроем в редакторе наше сохраненное меню с предыдущего урока File - Open... Добавим еще элемент, кнопку New - Element from prefab - button.

Добавление кнопок

После добавление кнопки вы увидите в окне Properties несколько параметров, которые мы разберем по ходу этого урока.

Image. В этом параметре необходимо в Sprite path выбрать изображение своей кнопки и перетащить ползунок Alpha до значения 0, эта текстура будет отображаться лишь тогда, когда курсор мыши будет наведен на кнопку.

Hover. В этом параметре в поле спрайт укажите туже текстуре, что и параметре Image.

Pressed.  Этот параметр отвечает за отображение текстуры при нажатии на нее кнопкой мыши. Загружаем другую текстуру в поле Sprite.

новая кнопка

В окне Hierarchy выберете дочерний компонент нашей кнопки Text и измените текст надписи на кнопки в поле Text. Так же, измените цвет на белый и передвиньте ползунок Alpha до значения 1. Измените стандартный шрифт в поле Front path нажав на троеточие. Каталог с шрифтами можно найти в object/tutorial/biped, выберите, к примеру, шрифт notosans-regular.xml.

текст кнопки

Проделывать такие манипуляции для каждой кнопки не очень удобно и занимает много времени поэтому, создадим одну кнопку и сохраним ее в префаб. Далее мы будем загружать префаб для других кнопок и менять только некоторые параметры. Для того, чтобы сохранить кнопку, в окне Hierarchy выберете нашу кнопку и переименуйте ее в любое другое название, к примеру, Mybutton. Нажмите правой кнопкой мыши на кнопку и выберете Save as prefab..., сохраните в любое место, указав предварительно имя файла.

сохранение кнопки

Для добавления нажмите на фоновое изображение правой кнопкой мыши и добавьте наш сохраненный префаб  New - Element from prefab - Mybutton.

кнопки из префаба

Расположите кнопки в удобном для вас порядке и измените в каждой кнопке параметр Text , я расположил вот так...

кнопки

Выделите кнопку со значение Play или ту, которая будет отвечать за запуск игры и в параметре Actions в поле Click укажите тип PlayGame.

назначение кнопки

Выравнивание кнопок.

Следующий наш шаг - это выравнивание кнопок. Добавьте новый пустой элемент и назовите его ButtonLayoutBox, New - Empty element. Сделайте наши кнопки дочерними этого элемента, перетащите каждую кнопку в новый элемент. Разместите в удобном для вас месте этот компонент и отредактируйте размер, для корректного отображения кнопок.

добавление layot

Выберите наш ButtonLayoutBox и в окне Properties добавьте новый компонент LayoutColumn.

Теперь наши кнопки автоматически выровнялись с помощью этого компонента.

редактирование размещения кнопок

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

Удачных проектов!

Предыдущий урок Следующий урок
Похожие статьи
Amazon lumberyard. Импорт моделей FBX
1 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 5

167 просмотров всего, 1 просмотров сегодня

0
#уроки Lumberyard
Подробнее
Amazon Lumberyard. Меню часть 3 (Анимация).
1 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 5

185 просмотров всего, сегодня нет просмотров

0
#уроки Lumberyard
Подробнее
Amazon Lumberyard. Создание меню часть 1
1 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 5

156 просмотров всего, 5 просмотров сегодня

0
#уроки Lumberyard
Подробнее
Amazon Lumberyard. Создание персонажа
1 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 51 оценка, среднее: 5,00 из 5

139 просмотров всего, сегодня нет просмотров

0
#уроки Lumberyard
Подробнее
Добавить комментарий
Оцените статью
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Ваш e-mail не будет опубликован.