Ru En
EN
RU


Создаем игровое меню с помощью UI (User interface) Unity
С тех пор как в Unity появилась новая система UI (User interface), создавать пользовательский интерфейс стало намного проще и удобней. Теперь все элементы этого интерфейса стали отдельными объектами, и с тех пор к каждому элементу можно найти особый подход в работе.
В этой статье с помощью системы UI мы создадим простое, разворачивающееся меню, примерно как на анимации ниже.
По принципу работы, оно чем то напоминает панель настроек в верхнем углу экрана у смартфонов.
Начнем с канваса – нашего холста. На сцене у нас уже есть камера, добавим теперь еще и объект Canvas, который можно найти в разделе GameObject -> UI. Так как канвас у нас будет привязан к одной камере, в настройках компонента Canvas укажем режим Screen Space – Camera в поле Render Mode, и добавим камеру в появившееся поле Render Camera.
Готово, теперь канвас у нас будет обрабатывать только события, поступающие с указанной камеры. Далее внутри канваса создадим простую панель – Panel, которая будет содержать меню игры. Также добавим еще одну панель, в которую поместим изображение “игры”.
Настройки.
Самое главное в работе маскирующегося меню, это правильная настройка его элементов. У каждого UI элемента есть Anchors Presets в компоненте RectTransform, которые помогают привязывать элементы относительно друг друга.
У элемента Panel по умолчанию установлена привязка как “полное” растягивание, то есть она заполняет всю область родительского элемента независимо от размера последнего. Так, продолжим с панелью, куда добавим несколько UI кнопок Button. У каждой кнопки в настройках Anchors Presets установим смещение сверху, так как панель меню у нас будет разворачиваться сверху – вниз.
Самой панели, добавим компонент Mask, чтобы сделать из нее маску. Этот компонент можно найти в разделе Component -> UI -> Mask, либо найти по названию через Add Component меню. Можно протестировать работу маски меню, перемещая ее нижний край и изменяя ее размер.
Теперь, там же, в канвасе, добавим новый элемент Image, который будет служить тумблером, для примера – выберем изображение стрелочки. С помощью этого элемента мы будем разворачивать панель. Расположим его у верхнего края панели меню.
1
Действия элементов.
Работа тумблера заключается в перемещении между нижним и верхним краем панели меню на канвасе. Эти края будут определяться высотой самой панели. И так, завершив настройку элементов канваса можно переходить к программной части.
Создадим новый скрипт CustomSlider унаследованный от класса UIBehaviour, этот класс можно найти подключив библиотеку EventSystem.


  1. using UnityEngine.EventSystem;
  2. public sealed class CustomSlider : UIBehaviour {}

Далее объявим новую переменную fillRect, которая будет ссылаться на RectTransform панели меню.

  1. using UnityEngine.EventSystem;
  2. public sealed class CustomSlider : UIBehaviour {
  3. public RectTransform fillRect;
  4. }

Теперь добавим скрипт CustomSlider тумблеру и в поле Fill Rect поместим панель меню.
Так как сам тумблер мы будем перемещать по канвасу перетаскивая его по экрану, нужно будет использовать дополнительные инструменты обработки событий касания. Для этого в системе UI есть целая дюжина интерфейсов, которые помогут обработать каждое действие пользователя, в том числе касания, перемещения, нажатия и тд. В этом примере нам понадобятся только три из них, это IBeginDragHandler – для обработки события начала перетаскивания, IDragHandler – для обработки самого перетаскивания и IEndDragHandler – для обработки окончания перетаскивания элемента.

Наследуем скрипт CustomSlider от каждого из трех выбранных интерфейсов после чего реализуем все их методы.
  1. using UnityEngine.EventSystem;
  3. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  5. public RectTransform fillRect;
  7. public void OnBeginDrag(PointerEventData eventData) {}
  8. public void OnDrag(PointerEventData eventData) {}
  9. public void OnEndDrag(PointerEventData eventData) {}
  10. }
Метод OnBeginDrag сработает перед началом перетаскивания тумблера, метод OnDrag будет обрабатывать сам процесс перетаскивания, а метод OnEndDrag сработает после того как мы закончим перетаскивать элемент.
Каждый метод принимает параметр PointerEventData, этот класс содержит много полезных данных от каждого события, но нам понадобится только два из них: это камера, от которой поступило событие касания и сама позиция касания.
Для проверки работоспособности скрипта попробуем перемещать тумблер в методе OnDrag. Для этого нужно будет всего лишь перевести позицию касания на экране в мировую точку на сцене, а потом в локальную точку относительно канваса, выглядит это так:

  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. public void OnBeginDrag(PointerEventData eventData) {}
  7. public void OnDrag(PointerEventData eventData) {
  8. Camera eventCam = eventData.pressEventCamera;
  9. Vector2 worldPoint = eventCam.ScreenToWorldPoint(eventData.position);
  10. Vector2 localPoint = this.canvas.transform.InverseTransformPoint(worldPoint);
  12. this.transform.localPosition = localPoint;
  13. }
  14. public void OnEndDrag(PointerEventData eventData) {}
  15. }
Получив локальную позицию localPoint при помощи метода InverseTransformPoint Transform’а канваса, применяем эти координаты Transform’у тумблера. Теперь можно запустить и попробовать “повозить” тумблер по экрану.
Отлично, все работает – события обрабатываются исправно можно продолжать работу со скриптом.
Для начала сотрем все что написали в методе OnDrag и добавим несколько новых переменных: canvasRect и rectTransform, которые будут указывать на Transform’ы канваса и тумблера.

  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  7. public void OnBeginDrag(PointerEventData eventData) {}
  8. public void OnDrag(PointerEventData eventData) {}
  9. public void OnEndDrag(PointerEventData eventData) {}
  11. }
Дальше нам понадобится хранить высоту панели меню в переменной fillHeight, высоту изображения тумблера imageHeight, нижний предел в переменной minPosY, верхний предел в maxPosY и текущую высоту тумблера в переменной targetPosY.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, imageHeight, minPosY, maxPosY, targetPosY;
  8. public void OnBeginDrag(PointerEventData eventData) {}
  9. public void OnDrag(PointerEventData eventData) {}
  10. public void OnEndDrag(PointerEventData eventData) {}
  12. }
Этих переменных нам будет достаточно для начала. Далее в методе Start займемся сбором данных.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. protected override void Start() {}
  10. /*…остальной код…*/
  12. }
Начнем с определения переменных Transform’а канваса и тумблера. Для того, чтобы найти канвас, будем использовать метод GetComponentInParent.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. protected override void Start() {
  9. Canvas canvas = GetComponentInParent<Canvas>();
  10. this.canvasRect = canvas.transform as RectTransform;
  12. this.rectTransform = this.transform as RectTransform;
  13. }
  15. /*…остальной код…*/
  17. }
Дальше, в методе Start определим размеры панели меню и тумблера, но делать мы это будем двумя разными способами.
Дело в том, что у тумблера в настройках компонента RectTransform указаны его длина и высота (Width и Height), а у панели меню указаны только отступы лево, верх, право и низ (Left, top, right и bottom), то есть панель всегда, независимо от размеров экрана, будет заполнять максимум родительского пространства (в данном случае весь канвас). Поэтому узнать размеры панели через длину и высоту, как у тумблера – не получится, для этого придется использовать другой подход, а именно – найти расположения краев панели на канвасе.
И так, начнем с высоты тумблера, здесь все просто – используем свойство sizeDelta у его Transform’а.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. protected override void Start() {
  9. Canvas canvas = GetComponentInParent<Canvas>();
  10. this.canvasRect = canvas.transform as RectTransform;
  12. this.rectTransform = this.transform as RectTransform;
  14. this.imageHeight = this.rectTransform.sizeDelta.y;
  15. }
  17. /*…остальной код…*/
  19. }
Чтобы найти края панели меню нам понадобится небольшой массив векторов Vector3 и метод GetLocalCorners, который вернет все четыре угла Transform’а панели.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. protected override void Start() {
  9. Canvas canvas = GetComponentInParent<Canvas>();
  10. this.canvasRect = canvas.transform as RectTransform;
  12. this.rectTransform = this.transform as RectTransform;
  14. this.imageHeight = this.rectTransform.sizeDelta.y;
  16. Vector3[] fillCorners = new Vector3[4];
  17. this.fillRect.GetLocalCorners(fillCorners);
  18. }
  20. /*…остальной код…*/
  22. }
Вообще все углы любого элемента UI располагаются по часовой стрелке начиная с нижнего левого края элемента.
Теперь, используя края панели, определим ее размеры, а также нижний и верхний пределы.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. protected override void Start() {
  9. Canvas canvas = GetComponentInParent<Canvas>();
  10. this.canvasRect = canvas.transform as RectTransform;
  12. this.rectTransform = this.transform as RectTransform;
  14. this.imageHeight = this.rectTransform.sizeDelta.y;
  16. Vector3[] fillCorners = new Vector3[4];
  17. this.fillRect.GetLocalCorners(fillCorners);
  18. this.fillHeight = Mathf.Abs(fillCorners[0].y * 2f);
  19. this.maxPosY = fillCorners[0].y + this.imageHeight / 2f;
  20. this.minPosY = fillCorners[1].y – this.imageHeight / 2f;
  21. }
  23. /*…остальной код…*/
  25. }
Для высоты fillHeight используем нижний левый угол панели под индексом 0 массива fillCorners умноженный на 2. Нижний предел minPosY будет располагаться в левом нижнем углу панели, верхний предел maxPosY – в левом верхнем углу соответственно.
Готово, после выполнения метода Start мы получим все необходимые данные об элементах панели и тумблера.
Само же перемещение тумблера теперь будем обрабатывать в методе Update, так как в отличие от метода OnDrag, метод Update работает всегда, а не только когда мы совершаем действие “перетаскивания”. Поэтому добавим новый метод Update, и два дополнительных метода для обработки перемещения тумблера UpdatePosition и заполнения панели UpdateFill.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. /*…остальной код…*/
  10. private void Update() {
  11. UpdateFill();
  12. UpdatePosition();
  13. }
  15. private void UpdateFill() {}
  16. private void UpdatePosition() {}
  18. /*…остальной код…*/
  20. }
Для перемещения тумблера будем использовать переменную targetPosY которую будем заполнять в методе OnDrag.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. /*…остальной код…*/
  9. private void Update() {
  10. UpdateFill();
  11. UpdatePosition();
  12. }
  13. private void UpdateFill() {}
  14. private void UpdatePosition() {}
  16. public void OnDrag(PointerEventData eventData) {
  17. Camera eventCam = eventData.pressEventCamera;
  18. Vector2 worldPoint = eventCam.ScreenToWorldPoint(eventData.position);
  19. Vector2 localPoint = this.canvasRect.InverseTransformPoint(worldPoint);
  20. this.targetPosY = localPoint.y;
  21. }
  22. /*…остальной код…*/
  23. }
Как и раньше, в методе OnDrag мы сначала находим мировые координаты касания worldPoint, после чего конвертируем их в локальные localPoint относительно канваса, и задаем переменной targetPosY новую позицию тумблера по высоте. Дальше переходим в метод UpdatePosition, где будем перемещать сам тумблер.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  2. public RectTransform fillRect;
  3. private RectTransform canvasRect, rectTransform;
  4. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  5. /*…остальной код…*/
  6. private void Update() {
  7. UpdateFill();
  8. UpdatePosition();
  9. }
  10. private void UpdateFill() {}
  11. private void UpdatePosition() {
  12. Vector2 currentPos = this.rectTransform.localPosition;
  13. float yPos = Mathf.Clamp(this.targetPosY, this.maxPosY, this.minPosY);
  14. this.rectTransform.localPosition = new Vector2(currentPos.x, yPos);
  15. }
  16. /*…остальной код…*/
  17. }
Здесь тоже все просто, сначала помещаем текущую позицию тумблера в переменную currentPos, после чего в переменную yPos записываем новую позицию, с учетом пределов maxPosY и minPosY, и в конце применяем полученные координаты локальной позиции Transform’а тумблера. И так, теперь тумблер перемещается по канвасу учитывая минимальную и максимальную высоту панели, осталось только определить – на сколько нам разворачивать панель меню в зависимости от расположения тумблера на канвасе.
Для этой задачи воспользуемся простой арифметикой: подсчитаем кол-во пройденного пути тумблером от верхнего предела к нижнему, переведем полученные значение в проценты и умножим на высоту панели, которая заранее нам известна.
Запишем в скрипте CustomSlider новый метод GetFillValue, с помощью которого получим кол-во пройденного пути в виде значения от 0 до 1, где ноль будет показывать, что тумблер находится в самом начале пути, а 1 – что в самом конце.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. /*…остальной код…*/
  10. private void Update() {
  11. UpdateFill();
  12. UpdatePosition();
  13. }
  15. private void UpdateFill() {}
  17. private float GetFillValue() {
  18. float currentYPos = this.rectTransform.localPosition.y;
  19. float diff = currentYPos – this.minPosY;
  20. float result = -(diff / (this.fillHeight – this.imageHeight));
  21. return result;
  22. }
  24. /*…остальной код…*/
  26. }
Для нахождения соотношения между пройденным путем и полным расстоянием необходимо знать текущую позицию тумблера currentYPos и разницу diff между нижним и верхним пределом с учетом высоты тумблера.
Переходим в метод UpdateFill, где будем заполнять нашу панель меню с учетом пройденного пути.

  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. /*…остальной код…*/
  10. private void Update() {
  11. UpdateFill();
  12. UpdatePosition();
  13. }
  15. private void UpdateFill() {
  16. float value = GetFillValue();
  17. float newSizeY = this.fillHeight * value;
  18. }
  20. /*…остальной код…*/
  22. }
Для начала в переменную value запишем кол-во пройденного пути тумблером, далее в переменной newSizeY установим высоту на которую необходимо развернуть панель меню. Осталось только задать новую высоту панели меню, для чего воспользуемся специальным методом SetInsetAndSizeFromParentEdge, который позволяет изменять размеры UI элемента от определенного края RectTransform.Edge.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. public RectTransform fillRect;
  5. private RectTransform canvasRect, rectTransform;
  6. private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
  8. /*…остальной код…*/
  10. private void Update() {
  11. UpdateFill();
  12. UpdatePosition();
  13. }
  15. private void UpdateFill() {
  16. float value = GetFillValue();
  17. float newSizeY = this.fillHeight * value;
  19. RectTransform.Edge edge = RectTransform.Edge.Top;
  20. this.fillRect.SetInsetAndSizeFromParentEdge(edge, 0f, newSizeY);
  21. }
  23. /*…остальной код…*/
  25. }
В нашем случае, так как панель будет разворачиваться сверху-вниз, необходимо использовать верхний край RectTransform.Edge.Top. Теперь попробуем протестировать то, что у нас получилось. Если вы проделали все также как и в примере, то результат у вас должен быть примерно такой.
Тумблер отлично перемещается между границами, а панель, в зависимости от расположения тумблера на экране, изменяет свой размер.
2
Открытие и закрытие панели.
Чтобы совершать автоматические действия открытия и закрытия панели, без перетаскивания тумблера вручную, необходимо добавить два новых метода Open и Close, и пару boolean переменных isDragging и isOpen.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. /*…остальной код…*/
  5. private bool isDragging, isOpen;
  7. public void Open() {}
  8. public void Close() {}
  10. /*…остальной код…*/
  12. }
Вызвав любой из этих методов, переменная isOpen будет меняться, и в зависимости от того какое значение она принимает, true или false, панель будет открываться или закрываться.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. /*…остальной код…*/
  5. private bool isDragging, isOpen;
  7. public void Open() {
  8. if (this.isOpen == false && this.isDragging == false) this.isOpen = true;
  9. }
  11. public void Close() {
  12. if (this.isOpen && this.isDragging == false) this.isOpen = false;
  13. }
  15. /*…остальной код…*/
  17. }
Переменная isDragging будет указывать, перетаскиваем мы сейчас тумблер вручную или нет, а изменять мы ее будем в методах OnBeginDrag и OnEndDrag перед началом и после завершения перетаскивания тумблера.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. /*…остальной код…*/
  5. private bool isDragging, isOpen;
  7. public void Open() {
  8. if (this.isOpen == false && this.isDragging == false) this.isOpen = true;
  9. }
  11. public void Close() {
  12. if (this.isOpen && this.isDragging == false) this.isOpen = false;
  13. }
  15. public void OnBeginDrag(PointerEventData eventData) {
  16. this.isDragging = true;
  17. }
  19. public void OnEndDrag(PointerEventData eventData) {
  20. this.isDragging = false;
  21. }
  23. /*…остальной код…*/
  25. }
Действия по автоматическому открытию или закрытию панели будем выполнять в методе UpdatePosition.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. /*…остальной код…*/
  5. private void UpdatePosition() {
  6. Vector2 currentPos = this.rectTransform.localPosition;
  8. if (this.isDragging == false) {
  10. }
  12. float yPos = Mathf.Clamp(this.targetPosY, this.maxPosY, this.minPosY);
  13. this.rectTransform.localPosition = new Vector2(currentPos.x, yPos);
  14. }
  16. /*…остальной код…*/
  18. }
После определения текущей позиции тумблера в переменную currentPos, добавляем новое условие, что когда мы НЕ перетаскиваем тумблер вручную, то есть переменная isDragging равна false, необходимо закрывать или открывать панель автоматически.
  1. public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  3. /*…остальной код…*/
  5. private void UpdatePosition() {
  6. Vector2 currentPos = this.rectTransform.localPosition;
  8. if (this.isDragging == false) {
  9. float newYPos = (this.isOpen) ? this.maxPosY : this.minPosY;
  10. float speed = Time.deltaTime * 10f;
  11. this.targetPosY = Mathf.Lerp(currentPos.y, newYPos, speed);
  12. }
  14. float yPos = Mathf.Clamp(this.targetPosY, this.maxPosY, this.minPosY);
  15. this.rectTransform.localPosition = new Vector2(currentPos.x, yPos);
  16. }
  18. /*…остальной код…*/
  20. }
Для этого в переменную newYPos запишем новую позицию тумблера в зависимости от того совершаем мы действие открытия или закрытия. Если открываем, значит нам нужно переместить тумблер в самый нижний предел maxPosY, если же закрываем то нужно переместить в верхний предел minPosY. После чего, с помощью простого Lerp и дельты, плавно перемещаем тумблер к установленной границе.
Теперь панель можно открывать и закрывать просто вызвав метод Open или Close соответственно, без необходимости перетаскивать тумблер вручную.
В примере именно кнопка “назад” вызывает метод Close скрипта CustomSlider, после чего панель самостоятельно сворачивается.
Вот так с помощью простого скрипта и несложных настроек элементов интерфейса можно получить симпатичное и интуитивно понятное меню.
3
Небольшая подборка по созданию меню в unity.
Продукты
© Курсовой проект Виноградова Александра
Группа ВС-1
Рыбинский авиационный колледж
Контакты
ОФ сайт
Форум
Загрузить
Документация
Статьи
Социальные сети
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website
How to remove this block?About platformSubmit a complaint