Amazon Lumberyard. Создание меню часть 1

Amazon Lumberyard. Создание меню часть 1

Создание меню в Lumberyard.

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

Итак, начнем, откроем проект и перейдем в панель  редактора UI

редактор UI

Создадим пустой элемент New — Empty element

пустой объект

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

Далее к нашему элементу добавим параметр Image для того, чтобы он отображался у нас в игре.

вспомогательные изображения

Снова в окне Properties вы можете заметить, что добавились новые опции для параметра Image, по умолчанию цвет заливки у нас будет белым, нажмите на значение Color и измените его (по желанию).

Слева, в Hierarchy нажмите на наш элемент два раза и переименуйте его.

переименовать элемент

Изменим размер нашего фонового изображения. На панели инструментов окна UI editor есть три инструмента для работы с элементами:

  1. Selection — выбор элемента,
  2. Move — перемещение элемента,
  3. Rotation — вращение элемента,
  4. Resize — изменение размера элемента.

Выбор элемента

Попробуйте выбрать каждый инструмент и поэкспериментировать с изменениями элемента. Отменить все изменения можно нажатием клавиш CTRL+Z.  Так же, если вы заметили, изменить размеры и другие параметры элементы можно через опцию Transform2D. Установите параметр Anchors и Offsets такие параметры как указаны ниже.

Якорь

Размер элемента должен закрывать все пространство, и в то же время, не выходит за рамки.

элемент фонового изображения

Следующий шаг, добавление фонового изображения.  В значении Sprite patch нажмите на значок папки и выберете фоновое изображение.

добавление изображения

Добавим еще несколько изображений, в меню нажмем New – Element from prefab – image. Этот элемент должен отобразится в иерархии как дочерний нашего фонового изображения. Продублируем его CTRL+C и вложим изображения. (Создать изображения можно в любом графическом редакторе, как видите, я использовал свои изображения.)

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

Для верхнего изображения необходимо установить параметр Pivot 0,0 , параметр Offsets 0,0 и все параметры Anchors указать 0 ,

Размер изображений

Для нижнего поставим параметры как на скриншоте.

Размер изображений

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

разрешение экрана

Не забудьте сохранить все изменения для дальнейшего использования нашего меню File — Save as…

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

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

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

Предыдущая статья         На главную      Следующая статья

Обсудить на форуме


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