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…

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

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

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

Предыдущий урок

Следующий урок

📽️ Видео

Учебное пособие по Amazon Lumberyard: создание главного менюСкачать

Учебное пособие по Amazon Lumberyard: создание главного меню

4.1 Lumberyard - Создание ландшафтаСкачать

4.1 Lumberyard - Создание ландшафта

6.5 Lumberyard - Реализация перемещения и анимации в Lua ч.1Скачать

6.5 Lumberyard - Реализация перемещения и анимации в Lua ч.1

Learning Amazon Lumberyard Part 1Скачать

Learning Amazon Lumberyard Part 1

Lumberyard, create new level, questions // Ламберъярд, вопросы по созданию уровняСкачать

Lumberyard, create new level, questions // Ламберъярд, вопросы по созданию уровня

Создание главного меню в Amazon Lumberyard | Учебное пособие по лесопилке 2020.07Скачать

Создание главного меню в Amazon Lumberyard | Учебное пособие по лесопилке 2020.07

Amazon Lumberyard - Cloud Canvas Part 1: SetupСкачать

Amazon Lumberyard - Cloud Canvas Part 1: Setup

7 Lumberyard - Рассматриваем UI EditorСкачать

7 Lumberyard - Рассматриваем UI Editor

How to install and configure Lumberyard? -STEP BY STEP TUTORIAL /INSTALLATION GUIDEСкачать

How to install and configure Lumberyard? -STEP BY STEP TUTORIAL /INSTALLATION GUIDE

First Scripting Attempt: Working With Amazon's LumberYardСкачать

First Scripting Attempt: Working With Amazon's LumberYard

Amazon Lumberyard - Dev preview of legacy.Скачать

Amazon Lumberyard -  Dev preview of legacy.

terrain basics on amazon lumberyardСкачать

terrain basics on amazon lumberyard

Amazon Lumberyard getting started completed levelСкачать

Amazon Lumberyard getting started completed level

level generation and basic movement in amazon lumberyardСкачать

level generation and basic movement in amazon lumberyard
Поделиться или сохранить к себе:
Технологичная помощь
Добавить комментарий

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