Как изменить интерфейс unity - Исправление ошибок и поиск оптимальных решений проблем

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

Версия: C# 6, Unity 2018.3, Unity

Вы помните старую систему пользовательского интерфейса Unity? Нужно было написать весь код графического интерфейса в OnGUI. Это было медленно, неэффективно и ориентировано на программистов, что противоречило визуальной природе Unity. Многие разработчики предпочли вместо этого использовать сторонние инструменты, такие как NGUI.

К счастью, Unity Technologies прислушалась к отзывам сообщества и разработала новую систему, выпущенную в Unity 4.6.

В этой серии из трех частей вы познакомитесь с новой системой пользовательского интерфейса Unity, добавив интерактивный интерфейс в игру под названием Rocket Mouse.

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

Анимировать кнопки.
Создавать диалоговое окно настроек, которое вставляется в сцену.
Использовать больше элементов управления графическим интерфейсом, таких как текст, слайдер, панель и маска.

Приступая к работе

Это руководство предназначено для тех, кто знаком с редактором Unity. Загляните в серию уроков «Введение в Unity», если это ваше первое родео. Хорошая новость заключается в том, что, поскольку руководство посвящено системе пользовательского интерфейса, оно на 95% не содержит скриптов!

Примечание. Имейте в виду, что в уроке не рассматривается создание самой игры. Цель здесь — предоставить введение в систему пользовательского интерфейса Unity и познакомить вас с ее компонентами.

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

Чтобы получить пакет и файлы начального проекта, нажмите кнопку «Скачать материалы урока» вверху страницы.

Это все, что вам нужно!

Создание MenuScene

Откройте в Unity начальный проект Introduction to Unity UI Part 1 Starter.

Игра RocketMouse уже настроена, и все ее ресурсы находятся в отдельной папке. Вы будете работать в папке RW, которая содержит папку Scenes. Теперь вы создадите новую сцену для работы. В строке меню выберите File > New Scene, чтобы создать новую пустую сцену.

Лучше всего сразу сохранить сцену. Откройте диалоговое окно Save Scenes, выбрав File > Save Scenes. Затем введите MenuScene в качестве имени сцены и сохраните в папке RW / Scenes рядом со сценой RocketMouse.

Импортирование изображений и шрифтов

Первым делом в вашем списке дел нужно добавить ресурсы в сцену, поэтому распакуйте пакет UI Assets в проводнике файлов. Там вы найдете две папки: Menu и Fonts.

Примечание. Папка Menu содержит фоновые изображения, кнопки, значки и другой игровой арт, который предоставлен сайтом Game Art Guppy, где вы можете найти множество другой графики для тренировочных игр. Вдобавок два шрифта от DaFont. находятся в папке Fonts. Вы можете поблагодарить Rodrigo Fuenzalida за шрифт Titan One и Draghia Cornel за шрифт DCC Dreamer.

Приятно поддерживать аккуратную структуру папок, поэтому в окне Project создайте новую папку внутри RW с именем UI.

Из проводника файлов перетащите папки Menu и Fonts в папку UI в окне Project:

Как только ассеты будут в проекте, проверьте их настройки импорта. Убедитесь, что все ресурсы в UI / Menu установлены на тип текстуры Sprite (2D и UI).

У-у-у! Вы закончили настройку и готовы создать свой первый элемент пользовательского интерфейса с помощью системы Unity UI.

Добавление вашего первого элемента пользовательского интерфейса

Первый элемент, который вы создадите — это фоновое изображение для сцены меню.

На верхней панели выберите GameObject > UI > Image. Это добавляет в сцену объект с именем Image. Вы должны увидеть его в Иерархии как дочерний элемент Canvas. Все элементы должны быть размещены на холсте. Если у вас его нет, Unity создаст его автоматически.

Выберите изображение и установите его положение на (X: 0, Y: 0). Вы только что открыли для себя Rect Transform:

Примечание. Rect Transform — это пользовательский интерфейс, эквивалентный Transform. Он позиционирует, вращает и масштабирует элементы пользовательского интерфейса на холсте. Вы будете часто использовать его в этом руководстве.

Вы сразу же установите правильное положение и размер. Прямо сейчас нужно помнить о трех вещах. В Иерархии вы увидите три новых объекта сцены:

Image
Canvas
EventSystem

Image — это неинтерактивный элемент управления, который отображает спрайт с множеством опций для настройки.

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

Canvas — это корневой объект для всех ваших элементов пользовательского интерфейса. Помните, Unity создает его за вас, когда вы добавляете свой первый элемент пользовательского интерфейса. Он имеет несколько свойств, которые позволяют вам управлять отрисовкой пользовательского интерфейса.

EventSystem обрабатывает и направляет входные события объектам в сцене. Он также отвечает за управление Raycasting. Как и в случае с Canvas, пользовательскому интерфейсу требуется система событий, поэтому Unity автоматически добавляет ее.

Настройка фонового изображения меню

Первое, что нужно сделать, это переименовать изображение. В Иерархии выберите Image и переименуйте его в Background.

Затем откройте RW > UI > Menu в окне проекта и найдите изображение menu_background. Перетащите его в поле Source Image компонента Image, игрового объекта Background, в окне Inspector:

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

Чтобы исправить ситуацию, найдите кнопку Set Native Size в Инспекторе и нажмите на нее для установки размера 1136 x 640.

Теперь это похоже на правильный фон.

Ой-ой. Есть еще одна проблема.

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

Примечание. Изначально игра была разработана для iPhone с дисплеями диагональю 3,5 и 4 дюйма. Вот почему вся игровая графика поддерживает разрешения 1136 x 640 и 960 x 640. Скоро вы увидите, как пользовательский интерфейс может адаптироваться к различным разрешениям игры.

Вы решите эту проблему, используя Canvas Scaler.

Использование масштабатора холста

Вы воспользуетесь инструментом Canvas Scaler, чтобы настроить фоновое изображение.

Во-первых, вам нужно знать, что отображение не является результатом ошибки. С точки зрения Unity, у вас есть игровое представление — или окно просмотра — настолько маленькое, что оно отображает только ту часть изображения, которая умещается в игровом представлении.

Если бы вы запускали игру на устройстве с достаточно большим разрешением или растягивали окно Game до размеров всего изображения, вы бы увидели все фоновое изображение.

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

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

Если вы когда-либо игнорировали указания своего дизайнера, вы знаете, что за это нужно платить. Удобство работы и различные разрешения важны, но постарайтесь сделать так, чтобы ваш дизайнер тоже был доволен.

Canvas Scaler спешит на помощь! По умолчанию каждый холст включает масштабатор холста.

Выберите Canvas в Hierarchy, и в Inspector вы должны увидеть компонент Canvas Scaler:

Canvas Scaler имеет три режима масштабирования:

Constant Pixel Size: заставляет элементы пользовательского интерфейса сохранять одинаковый размер пикселя независимо от размера экрана. Это значение Canvas по умолчанию.
Scale With Screen Size: размеры и расположение элементов пользовательского интерфейса в соответствии с указанным разрешением. Если текущее разрешение больше, чем указанное разрешение, холст сохранит исходное разрешение, увеличивая при этом размеры элементов для соответствия целевому разрешению.
Constant Physical Size: позиции элементов пользовательского интерфейса указываются в физических единицах, таких как миллиметры или точки. Это требует правильного сообщения о разрешении экрана.

Измените режим компонента на Scale With Screen Size и установите для Reference Resolution значение (X: 1136, Y: 640). Также сдвиньте Match Width or Height до упора вправо или просто введите 1 в поле ввода.

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

Измените разрешение просмотра игры, чтобы увидеть, как ваша игра может выглядеть в другом разрешении, например, на iPhone Wide 480 x 320. Вы заметите, что игра по-прежнему выглядит хорошо!

Примечание. Если вы не видите ни одного из вариантов iPhone, скорее всего, вы работаете для другой платформы. В строке меню выберите File > Build Settings. В диалоговом окне настроек сборки под настройками платформы обязательно выберите iOS.

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

Теперь переключитесь в режим просмотра Scene, и вы увидите, что размер холста не изменился при изменении размера представления Scene. Боковые края экрана аккуратно обрезаны, а центральная часть полностью видна. Это результат установки Match Width or Height на 1. Он отлично работает для ваших целевых разрешений.

Это старые версии дизайна! В «альбомном» режиме экраны современных телефонов намного шире. Переключитесь на такой режим iPhoneX, и возникнет совершенно новая проблема.

Если вы измените значение Match Width or Height обратно на ноль, оно будет работать для iPhone 5 и iPhoneX, но будет отображаться в виде почтового ящика на iPhone 4.

К счастью, для этого есть другие решения. Хотя у Canvas Scaler есть два других режима масштабирования, Expand и Shrink, есть еще один полезный компонент, который мы можем использовать специально для фоновых изображений.

Верните Canvas Scaler в положение Match Width or Height со значением 1 и установите для игрового представления значение iPhoneX. Ему снова должно понравиться изображение выше.

Теперь выберите Background и добавьте компонент Aspect Ratio Fitter. Он автоматически установит значение Aspect Ratio на текущее соотношение Rect Transform изображения. Переключите Aspect Mode на Envelope Parent. Размер изображения автоматически изменится, чтобы снова заполнить весь экран.

Уф, проделано много работы. И мы только добавили фоновое изображение! Но правильная настройка Canvas Scaler и фона упростит работу в будущем. Сделав это несколько раз, вы обнаружите, что настройка настолько проста, что у вас едва ли будет время моргнуть, прежде чем вы закончите.

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

К счастью, в Unity есть функция, которая поможет вам избежать этой ошибки новичков. Вы скоро об этом узнаете.

Добавление изображения заголовка

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

Откройте окно Scene и на верхней панели выберите GameObject > UI > Image. Это добавит еще одно изображение в качестве дочернего элемента Canvas:

Примечание. Если вы не видите изображение в режиме просмотра сцены, установите для его свойств Pos X и Pos Y значение 0, чтобы центрировать его.

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

Выберите Image в иерархии и переименуйте его в Header.
Откройте папку Menu в окне проекта и найдите изображение header_label.
Перетащите изображение в поле Source Image в Инспекторе.
Нажмите Set Native Size в Инспекторе.

Теперь вы будете работать с компонентом Rect Transform, чтобы расположить изображение.

Rect Transform, Anchors и Pivot

Если вы работали с Unity до этого или прошли другие уроки по Unity на этом веб-сайте, возможно, вы имели некоторое представление о компоненте Transform. Если нет, ничего страшного. Transform — это инструмент, который может позиционировать, вращать и масштабировать объекты в сцене. Вот как это выглядит:

Вы увидите компонент Transform, когда выберете любой тип GameObject, не относящийся к пользовательскому интерфейсу, в окне Hierarchy. Однако, если вы выберете любой элемент пользовательского интерфейса, например заголовок, вы увидите другой компонент с именем Rect Transform.

Как видите, Transform и Rect Transform выглядят по-разному. Кроме того, Rect Transform может изменять свой внешний вид в зависимости от настроек привязки. Например, это может выглядеть так:

Здесь вместо Pos X, Pos Y, Width и Height у вас есть Left, Top, Right и Bottom.

Вас интересует настройка привязки, которая так резко меняет внешний вид Rect Transform? Продолжайте читать!

Anchors

Установка якорей — это простой, элегантный и мощный способ управления положением и размером элементов пользовательского интерфейса относительно их родительских элементов. Это особенно удобно, когда нужно изменить размер родительских объектов.

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

Чтобы увидеть различные Anchors Presets, выберите Header в Иерархии и щелкните прямоугольник над полем Anchors в компоненте Rect Transform.

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

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

Как видите, настройки якорей управляют тем, как ваш элемент пользовательского интерфейса адаптируется к изменениям размера экрана.

Четыре треугольные направляющие в виде якорей, напоминают цветок. Вот как это выглядит с якорями, установленными на предустановку по центру вверху:

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

Пользовательские якоря

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

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

Здесь пригодится еще один инструмент Unity UI. Если вы знакомы с Unity, то знаете, что сочетания клавиш Q, W, E и R позволяют переключать инструменты Hand, Move, Rotate и Scale соответственно. В новой системе пользовательского интерфейса RectTool был добавлен для кнопки T. При выбранном RectTool Gizmo превращается в поле 2D масштабирования / перемещения, которое действует так, как вы ожидаете от любого программного обеспечения для редактирования графики.

Теперь вы можете брать якоря и перемещать их.

Видите, как изображение перемещается вправо при изменении размера холста? Он лишь немного перемещается по отношению к правому краю холста, потому что эти привязки установлены на 25% ширины холста.

Разделение анкеров

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

Примечание. На самом деле вы не изменяете размер холста при перетаскивании его краев. Фактически, вы не можете изменить размер холста таким образом.

Ищите слово Preview рядом с курсором, когда вы пытаетесь изменить его размер. Используйте эту технику, чтобы поэкспериментировать и посмотреть, как элементы пользовательского интерфейса адаптируются к разным размерам экрана.

Rect Transform зависит от текущей настройки якорей

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

Если вы установите привязку к одной точке без растяжения, вы увидите свойства Pos X, Pos Y, Width и Height.

Однако, если вы установите привязки таким образом, чтобы растягивать элемент пользовательского интерфейса, вы получите Left и Right вместо Pos X и Width, если вы настроите его на растяжение по горизонтали. Вы получите Top и Bottom вместо Pos Y и Height, если установите растяжение по вертикали.

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

Точка опоры

Последнее свойство, которое нужно обсудить в компоненте Rect Transform, — это Pivot.

Pivot — это точка, вокруг которой производятся все преобразования. Другими словами, если вы измените положение элемента пользовательского интерфейса, вы также измените положение точки поворота. Если вы повернете элемент пользовательского интерфейса, он будет вращаться вокруг этой точки.

Поворот использует нормализованные координаты. Это означает, что он изменяется от 0 до 1 как для высоты, так и для ширины, где (0, 0) — нижний левый угол, а (1, 1) — верхний правый угол.

Примечание. Вы также можете установить Pivot за пределами границ элемента пользовательского интерфейса. В этом случае Pivot будет вне диапазона (0, 0) — (1, 1). Это может быть полезно. Например, вы можете захотеть повернуть ваш объект вокруг некоторой точки сцены. Чтобы изменить поворот, вы должны убедиться, что кнопка Pivot / Center переключена на Pivot следующим образом:

Вы можете изменить поворот в компоненте Rect Transform в Инспекторе или использовать инструмент Rect Tool.

Следующие два изображения демонстрируют элемент пользовательского интерфейса с одинаковыми значениями Pos X и Pos Y, но каждое из них показывает разное расположение в сцене.

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

Примечание. Важно понимать, что положение элемента пользовательского интерфейса устанавливается относительно привязок. Позиция (0, 0) означает расстояние от якорей, которые установлены в верхнем левом углу холста.

Теперь взгляните на второе изображение. Как вы можете видеть, позиция все еще находится в (0, 0), но поскольку точка поворота установлена в нижний левый угол (0, 0), вы можете видеть, что нижний угол изображения, а не центр, теперь находится в верхний левый холст.

Сложнее показать, как точка опоры влияет на поворот и размер, используя неподвижное изображение, поэтому вот несколько анимаций:

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

Примечание. Удерживайте нажатой клавишу Option / ALT во время масштабирования для масштабирования вокруг точки поворота.

Как видите, поворот также влияет на изменение размера элемента пользовательского интерфейса.

Примечание. Когда вы меняете размер элемента пользовательского интерфейса, вы не меняете его масштаб. Вместо этого вы изменяете его размер, используя отступы «Ширина и высота» или «Верхнее, правое, левое и нижнее».

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

Размещение изображения заголовка

Уф! Так много информации о Rect Transform, Anchors и Pivot. Поверьте, вы будете благодарны, что потратили время на выполнение упражнения, поскольку эти концепции необходимы для создания потрясающего пользовательского интерфейса в ваших играх.

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

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

Прежде чем продолжить, повторно включите фон, если вы отключили его, чтобы увидеть границу холста.

Выберите Header в Иерархии и установите его свойства в Инспекторе следующим образом:

Нажмите на Set Native Size, чтобы сбросить размер, поскольку вы, вероятно, испортили его, играя с поворотом.
Установите якоря по центру вверху.
Установите Pos X на 0 и Pos Y на -100.

Вы должны увидеть что-то вроде этого в режиме просмотра Scene:

Вот так! Теперь оставьте изображение заголовка в таком положении.

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

Отключите Aspect Ratio Fitter
Установите Pivot на (X: 0,5, Y: 0)
Повторно активируйте Aspect Ratio Fitter

Теперь не только фон всегда соответствует размеру телефона, но и пол всегда остается на виду!

Добавление кнопки запуска

Теперь, когда у игры есть красивый фон с надписью, пора добавить несколько кнопок.

На верхней панели выберите GameObject > UI > Button. Это добавит в сцену объект Button, который вы должны увидеть в Иерархии. Если вы развернете кнопку, то увидите, что она содержит дочерний элемент Text — об этом вы узнаете позже.

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

Кроме того, есть компонент Button. Другими словами, кнопка — это просто изображение с дочерним элементом Text и прикрепленным скриптом кнопки.

Примечание. Элемент Text является необязательным, поэтому, если у вас есть изображение кнопки с текстом, нарисованным прямо на изображении, вы можете удалить его.

Размещение кнопки

Теперь все о расположении и изменении размера кнопки. Следуйте этим шагам:

Выберите кнопку в окне Иерархии и переименуйте ее в StartButton.
Установите его Anchors на растяжение снизу, так как вы хотите, чтобы он растягивался по горизонтали при изменении размера экрана. Совет: удерживайте Alt / Cmd и Shift при выборе привязки, чтобы также установить положение и точку опоры.
Для дальнейшей настройки якорей установите для X значение (Min:0.2, Max:0.8).
Установите для Left и Right значение 123.
Установите Pivot на (X: 0,5, Y: 0)
Установите Height на 80.
Установите Pos Y на 300.

Затем выберите вложенный Text element и установите его параметру Text значение Start Game. Измените Font Size на 32, чтобы увеличить текст кнопки.

Вот что вы должны увидеть в режиме просмотра сцены:

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

9-сегментное масштабирование

Таким же образом вы устанавливаете изображения для кнопок и изображений, так как они используют один и тот же компонент. Однако изображения редко масштабируются, особенно неравномерно. С другой стороны, кнопки часто бывают разных размеров.

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

Здесь нет никакой магии. Этот метод работает путем создания разных изображений для каждой из девяти областей, каждая из которых масштабируется по-разному.

Это гарантирует, что изображение будет хорошо смотреться в любом масштабе.

Подготовка изображений кнопок

Прежде чем вы сможете использовать нарезанное изображение, вам нужно установить его девять областей. Для этого откройте папку Menu в окне Project и выберите изображение btn_9slice_normal.

В Import Settings инспектора установите для параметра Texture Type значение Sprite (2D and UI) и примените изменения. Затем нажмите на кнопку Sprite Editor, чтобы открыть окно редактора спрайтов.

В редакторе спрайтов установите значения Border на L: 14, R: 14, B: 16, T: 16. Не забудьте нажать Apply!

Повторите эти же действия для изображений btn_9slice_highlighted и btn_9slice_pressed, которые вы будете использовать для других состояний кнопок.

Настройка изображений кнопок

После подготовки всех изображений перетащите их в соответствующие поля в Инспекторе. Выберите StartButton в Иерархии и выполните следующие действия:

Измените Image Type на Sliced в компоненте Image.
Измените свойство Transition в компоненте Button на SpriteSwap.
Перетащите btn_9slice_normal в Source Image в компоненте Image.
Перетащите btn_9slice_highlighted в Highlighted Sprite в компоненте Button.
Перетащите btn_9slice_pressed в Pressed Sprite в компоненте Button.

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

Прежде чем запускать сцену и наслаждаться прикольными кнопками, вы собираетесь изменить шрифт, используемый вложенной текстовой меткой. Это сделает кнопку мега-крутой.

Установка пользовательского шрифта для кнопки

Использовать собственный шрифт очень просто. Помните папку Fonts в пакете, который вы скачали и добавили в проект? Пришло время разбить его и использовать один из этих шрифтов.

Выберите элемент Text, вложенный в StartButton в Иерархии. Затем откройте папку Fonts в окне Project и перетащите шрифт TitanOne-Regular в поле Font. Также установите белый цвет.

Теперь запустите сцену и наслаждайтесь своей новой мега-крутой кнопкой!

Добавление кнопки настроек

Осталось сделать еще несколько вещей. Сначала добавьте кнопку Settings.

Вы, вероятно, сможете сделать это сами, так что для начала вам нужен только размер и положение кнопки. Остальное почти идентично тому, как вы создали кнопку Start Game.

Примечание. Самый простой способ — продублировать кнопку и настроить некоторые свойства, но на этот раз попробуйте создать кнопку с нуля.

Эти свойства кнопки Settings различаются:

Name: SettingsButton
Rect Transform: левый и правый — 400, высота — 70, а положение Y — 180.
Text: Settings
Fontsize: 24

Вот что вы должны увидеть в режиме просмотра сцены после добавления кнопки настроек:

Теперь сохраните сцену.

Запуск игры

Последняя задача в этой части — нажать кнопку Start Game и запустить вторую сцену в самой игре.

Добавление сцен в сборку

Прежде чем вы сможете запускать различные сцены, вам необходимо добавить их в список Scenes in Build в настройках проекта.

Для этого в меню выберите File > Build Settings. Откроется диалоговое окно Build Settings. Затем откройте папку Scenes в браузере проектов. Сначала перетащите сцену MenuScene, а затем сцену RocketMouse в списке Scenes in Build.

Наконец, закройте диалоговое окно Build Settings.

Создание UIManager

А вот и 5% часть урока с кодом!

Когда вы добавляете обработчик событий к кнопке, вам необходимо указать, какой метод вызывать при нажатии кнопки. Поскольку вы не можете использовать статические методы, вам нужно будет выбрать общедоступный метод из скрипта, прикрепленного к GameObject.

На верхней панели выберите GameObject > Create Empty. Затем выберите GameObject в окне Hierarchy и переименуйте его в UIManager.

Создайте папку Scripts внутри RW, а затем создайте в ней новый скрипт C# с именем UIManager. Как только Unity скомпилирует скрипт, прикрепите его в качестве компонента к игровому объекту UIManager.

Вот что вы должны увидеть в окне Hierarchy и Inspector:

Дважды нажмите на UIManagerScript в Инспекторе, чтобы открыть скрипт в редакторе кода. После загрузки скрипта удалите как Start (), так и Update ().

Затем добавьте следующий оператор под предыдущими операторами using.

using UnityEngine.SceneManagement;

Это позволяет загружать другие сцены. Теперь добавьте следующее:

public void StartGame() 
{
    SceneManager.LoadScene("RocketMouse");
}

Сохраните скрипт и переходите к следующему шагу:

Вызов StartGame при нажатии кнопки

Вернитесь в Unity и выполните следующие действия:

Выберите StartButton в Иерархии и прокрутите вниз в Инспекторе до списка On Click().
Нажмите кнопку +, чтобы добавить новый элемент.
Перетащите UIManager из Иерархии на новый добавленный элемент в списке.
Нажмите на раскрывающийся список, чтобы выбрать функцию. Сейчас установлено значение No Function.
В открывшемся меню выберите UIManagerScript и в открывшемся меню выберите StartGame ().

Сохраните сцену и затем нажмите кнопку Play, чтобы запустить игру. Нажмите на кнопку Start Game в меню. Это должно открыть игровую сцену.

Куда двигаться дальше?

Возникают сложности по каким-либо вопросам? Не стесняйтесь скачивать завершенный проект для этой части, используя кнопку «Скачать материалы урока» вверху данного урока.

Может показаться, что вы мало что сделали в этом последнем разделе, но взгляните еще раз: вы настроили пользовательский интерфейс, добавили изображения и кнопки и даже написали код, запускающий игру при нажатии на кнопку!

Во многих играх это все, что составляет пользовательский интерфейс.

Вы также узнали много нового о Rect Transform, Anchors и Pivot. Теперь, когда вы их поймете, вы сможете действовать намного быстрее, если примените эти навыки в своих собственных проектах.

Во второй части этой серии вы узнаете, как анимировать элементы пользовательского интерфейса, создавать диалоги и использовать такие элементы управления, как Slider и Toggle. К концу серии у вас будет рабочая сцена меню.

Если у вас есть вопросы или комментарии, оставьте их ниже! Увидимся во второй части урока!

Автор перевода: Jean Winters

Источник: Introduction to Unity UI – Part 1

Источник

Данный урок является частью серии, которая состоит из 3 уроков, посвященных Unity UI:

Часть 1. (вы здесь!)

Часть 2.

Часть 3.

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

В старой версии Unity UI было необходимо вручную вписывать код GUI в OnGUI.

Это медленно, неэффективно и ориентировано на человека со знаниями программиста, что само по себе противоречит назначению Unity.

Многие разработчики при этом использовали сторонние инструменты, такие как NGUI.

Однако, Unity Technologies приняли во внимание отзывы пользователей и разработали новую систему, которая была выпущена в версии Unity 4.6.

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

Кроме того, вы также научитесь:

Создавать анимированные кнопки;
Использовать диалог настроек, для редактирования сцены;
Использовать элементы управления GUI, такие как текст, слайдер, панель и маска.

Введение

Это руководство предназначено для тех, кто уже немного знаком с редактором Unity. Если вы ничего не знаете об этом редакторе, советуем вам посмотреть нашу серию «Введение в Unity».

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

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

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

Создание MenuScene

Откройте в программе директорию «начальный проект Введение в Unity UI часть 1».

Игра RocketMouse уже настроена для редактирования, и все необходимые материалы для работы с ней находятся в соответствующей папке.

Сейчас вам будет нужно создать новую сцену.

Для этого в меню выберите «Файл» ⇒ «Новая сцена».

Лучше всего сразу сохранить результат. Откройте «Файл» ⇒ «Сохранить сцены». Затем введите «MenuScene» в качестве названия файла и сохраните его в папке RW / Scenes, рядом с файлом «RocketMouse».

Импорт изображений и шрифтов

Прежде всего, вам нужно добавить материалы с которыми вы будете работать в созданную вами сцену.

Для этого распакуйте пакет с ресурсами пользовательского интерфейса в проводнике.

Там вы найдете две папки: Меню и Шрифты.

Важно: Папка «Меню» уже содержит фоновые изображения, кнопки, значки и другие игровые элементы, которые понадобятся вам в ходе этого урока. В интернете вы можете, при желании, скачать дополнительные материалы.

Далее в папке Project создайте новую папку с именем UI и переместите папки «Меню» и «Шрифты» в папку пользовательского интерфейса в окне «Проект»:

После этого обязательно убедитесь, все ли элементы корректно отображаются в пользовательском интерфейсе и к ним применена настройка текстуры Sprite (2D и UI).

Создание первого элемента пользовательского интерфейса

Первым элементом, который вам предстоит станет фоновое изображение для сцены меню. В верхней панели выберите GameObject ⇒ UI ⇒ Image. При помощи этого действия вы добавите объект с именем «Image» в пустую сцену. Это также должно отобразиться в иерархии. Теперь вам нужно выбрать изображение и установить для него значения его положения в пространстве сцены (X: 0, Y: 0).

Обратите внимание: Rect Transform является пользовательским интерфейсом, который эквивалентен Transform. Вы будете часто использовать его в этом уроке.

Сейчас в иерархии вы увидите три новых функции:

Изображение;
Холст;
Создание событий (EventSystem).

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

Холст (Canvas) — это корневой объект для элементов пользовательского интерфейса. Он имеет несколько свойств, которые позволяют вам контролировать настройки вашего пользовательского интерфейса.

Создание событий (EventSystem) применяется для обработки различных событий к объектам, которые находятся в пределах сцены.

Настройка фонового изображения меню

В первую очередь вам нужно переименовать изображение дав ему название «Фон», выбрав в иерархии соответствующую функцию. Теперь откройте RW ⇒ UI в окне проекта и найдите изображение, которое называется «menu_background». Переместите при помощи мыши это изображение в специальное поле «Изображение» в фоновом режиме в инспекторе:

Теперь вместо белого фона должно появиться фоновое изображение. Также вы можете настроить желаемый размер картинки. Для этого в инспекторе найдите директорию «Установить собственный размер» и установите значения для фона 1136 x 640.

Теперь ваша сцена выглядит более привлекательно и правильно:

Но сейчас все еще остается одна недоработка.

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

Справка: оригинальный дизайн игры был создан для iPhone с 3,5- и 4-дюймовым дисплеем. Поэтому элементы дизайна, в том числе и задний фон поддерживают разрешения 1136 x 640 и 960 x 640. Однако, скоро вы увидите, как пользовательский интерфейс может адаптироваться к различным разрешениям игры.

Эту проблему поможет решить Canvas Scaler.

Использование функции Canvas Scaler

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

Автоматические настройки Unity подходят для работы с большинством сценариев, однако бывают такие ситуации, когда у пользователя небольшой монитор не соответствующий графическому разрешению используемого устройства. Кроме того, многие игры поддерживают только одно разрешение. Часто дизайнеры используют стандартные настройки разрешения экрана для указания размеров изображения. В этом случае на помощь приходит функция Canvas Scaler.

Для завершения этого шага вам нужно выбрать в иерархии «Canvas» и в инспекторе появится новый компонент «Canvas Scaler»:

Canvas Scaler имеет три режима для изменения масштаба:

Сохранение постоянного размера пикселя (Constant Pixel Size): заставляет элементы пользовательского интерфейса сохранять одинаковый размер пикселя, независимо от размера экрана. Это значение применяется по умолчанию для Canvas.
Изменение масштаба в зависимости от размера экрана (Scale With Screen Size): размеры и расположение элементов пользовательского интерфейса устанавливаются в соответствии с указанным разрешением монитора. Если размеры изображения больше, чем указанное разрешение, Canvas будет «подгонять» изображение в соответствии с параметрами монитора.
Сохранение физического размера (Constant Physical Size): в этом случае значения позиций рабочих элементов пользовательского интерфейса указываются в физических единицах, таких как миллиметры или пиксели.

Вам нужно изменить режим компонента для масштабирования «Scale With Screen Size» и установить его координаты X: 1136, Y: 640. Также увеличьте значения ширины и высоты, сдвинув ползунок максимально вправо.

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

Попробуйте изменить разрешение, чтобы посмотреть, как ваша игра будет выглядеть на разных устройствах. К примеру, для того чтобы посмотреть результат для iPhone необходимо выбрать размер экрана 480 × 320.

Важно: Если вы не видите подходящего размера ни одного из моделей iPhone, то скорее всего, вы используете настройки для другой платформы. В строке меню выберите «Файл» Settings «Настройки параметров». В диалоговом окне вам нужно указать iOS в качестве настроек платформы.

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

Однако современные модели телефонов имеют более широкий экран, поэтому при выборе настроек для iPhoneX могут возникнуть проблемы.

Если в данный момент вы измените значения Высота или Ширина на ноль, то фон будет отображаться в правильных пропорциях для iPhone 5 и iPhoneX, однако на iPhone 4 картинка будет выглядеть обрезанной и маленькой.

Хотя Canvas Scaler имеет два режима изменения масштаба: Expand и Shrink, существует есть еще одна полезная функция, которую вы можете использовать специально для фоновых изображений.

Попробуйте вернуть изначальные параметры ширины и высоты Canvas Scaler = 1. Теперь вам нужно выбрать вкладку «Фон» и добавить новый компонент «Соотношение сторон» (Aspect Ratio Fitter).

Он автоматически установит значение Aspect Ratio в текущее положение Rect Transform изображения. Теперь переключитесь на «Envelope Parent» чтобы снова изменить изображение. Теперь оно должно заполнять весь экран.

При правильной настройке Canvas Scaler вы значительно упростите себе задачу в дальнейшем. Кроме того, после нескольких раз использования этой функции, вы сможете вносить нужные изменения всего за несколько кликов мышью.

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

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

Откройте диалоговое окно «Сцена» и на верхней панели выберите GameObject ⇒ UI ⇒ «Изображение». Это добавит другое изображение в качестве дополнительного элемента Canvas:

Важно: Если изображение не отображается в рабочей области сцены, нужно вручную установить для его свойств координаты X и Y равные 0, чтобы отцентрировать его.

Для того чтобы этот белый прямоугольник превратился в реальное изображение, нужно:

Выбрать текущее изображение в иерархии и изменить его название на «Заголовок»;
Открыть папку «Меню» в окне «Проект» и найти изображение header_label;
Переместить картинку в поле «исходное изображение», которое находится в инспекторе;
Выбрать пункт в инспекторе – «установить собственный размер».

Теперь вы будете работать с компонентом Rect Transform, чтобы правильно расположить изображение.

Функции Rect Transform, анкоры и Pivot

Если вы когда-либо ранее работали с Unity, то вы должны знать, что такое Transform. Transform – это специальный инструмент, который может позиционировать, вращать и масштабировать объекты на сцене. Вот как это выглядит:

Окно Transform появляется при изменении параметров игровых объектов, которые не используют пользовательский интерфейс в виде иерархии. Для изменения параметров того же заголовка потребуется специальный компонент Rect Transform.

Вы наверняка заметили, что Transform и Rect Transform выглядят по-разному и имеют разные поля для ввода. Rect Transform может изменить внешний вид объекта в зависимости от настроек привязки. Например, это может выглядеть следующим образом:

В этом окне вместо координат X и Y, высота и ширина, вы можете увидеть поля для ввода Слева, Сверху, Справа и Снизу.

Что такое анкоры?

Установка анкоров — это простой и действенный способ изменения положения и размера элементов UI. Когда вы устанавливаете привязки, то должны указать сразу несколько позиций в исходном элементе. Когда вы это сделаете, то элемент пользовательского интерфейса будет сохранять равное расстояние до указанных точек в рабочем пространстве.

Для того, чтобы увидеть различные варианты установки анкоров, необходимо выбрать в иерархии пункт «Заголовок» и выбрать небольшой прямоугольник над полем «анкоры» используя вкладку «Rect Transform component».

После того, как вы нажмете на кнопку, то сможете посмотреть готовые и наиболее распространенные в работе настройки анкоров. Также вы можете в любой момент ввести нужные значения вручную. Это позволяет наиболее точно подгонять изображение в зависимости от целей. Как вы можете видеть, настройки анкора позволяют адаптировать размер любого элемента к изменениям экрана.

Треугольники для обозначения области перемещения должны чем-то напоминать цветок. Посмотрите, как выглядит настроенное изображение при помощи анкоров:

Ручная настройка анкоров

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

Посмотрите, как меняется расположение изображения в зависимости от перемещения анкоров.

Разделение анкоров

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

Справка: Фактически вы не можете изменить размер холста подобным образом. Этот инструмент служит для адаптации элементов к размеру экрана.

Изменение параметров в зависимости от текущей настройки анкоров

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

Свойство Pivot

Последнее свойство, которое нужно обсудить в компоненте Rect Transform, — это Pivot. По сути это точка, вокруг которой происходят все изменения. Другими словами, если вы измените положение элемента пользовательского интерфейса, вы также измените положение точки Pivot. Если вы вращаете свой элемент пользовательского интерфейса, он также будет вращаться вокруг этой точки. Pivot использует нормализованные координаты. Это означает, что он имеет значение от 0 до 1 для высоты и ширины, где (0, 0) — нижний левый угол, а (1, 1) — верхний правый угол.

Примечание: Вы также можете установить Pivot вне границ элемента пользовательского интерфейса. В этом случае Pivot будет вне диапазона (0, 0) — (1, 1). Это можно использовать, например, для вращения объекта вокруг какой-то точки сцены.

Вы также можете изменить свойства компонента Rect Transform в инспекторе или использовать Rect Tool.

Следующие два изображения демонстрируют элемент пользовательского интерфейса с одинаковыми значениями X и Y, при этом каждое из них показывает различное размещение объекта в рабочей области.

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

Внимание: Важно понимать, что положение элемента пользовательского интерфейса устанавливается в зависимости от анкоров. Положение (0, 0) означает расстояние от анкоров, которые установлены в верхнем левом углу сцены.

Теперь внимательно посмотрите на второе изображение. Как вы можете видеть, позиция по-прежнему находится в точке (0, 0), но, поскольку ось вращения установлена в нижнем левом углу, то вы можете видеть, что теперь центрирован нижний угол изображения.

В этой анимации наглядно показано как Pivot влияет на размер и вращение объекта:

Обратите внимание, как изображение вращается вокруг поворотной точки, которая обозначена синим кружком. Это и есть элемент, который вы можете свободно перемещать.

Примечание: существует небольшая хитрость — удерживайте нажатой клавишу клавиатуры «ALT» во время изменения размера объекта для более удобного масштабирования вокруг поворотной точки.

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

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

Размещение изображения заголовка

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

Прежде чем продолжить, включите фон, чтобы увидеть границы рабочей области. В иерархии вам нужно выбрать пункт «Заголовок» и настроить его свойства в инспекторе следующим образом:

Нажмите «Set Native Size», чтобы вернуть размер по умолчанию;
Установите анкор в верхний угол;
Установите координаты X=0 и Y=-100.

У вас должно получится что-то вроде этого:

Обратите внимание, что после внесенных изменений часть изображения пола оказалась обрезанной. Чтобы это исправить необходимо использовать функции Aspect Ratio Fitter.

Отключите инструменты редактора изображения;
Установите координаты Pivot X=0,5 и Y=0;
Снова включите возможность настройки соотношения сторон изображения.

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

Добавление кнопки «Старт»

Теперь, когда ваша игра имеет красивый фон с надписью, пришло время добавить несколько кнопок. Для этого в верхней панели выберите GameObject ⇒ UI ⇒ Button, чтобы добавить на сцену новую кнопку. В иерархии этот объект также должен иметь дополнительный элемент Text.

Обратите внимание, что в инспекторе кнопка также имеет компонент Image, который вы ранее использовали для добавления фона и оформления заголовка.

Примечание: Элемент «Текст» является необязательным, поэтому, если у вас есть изображение кнопки с текстом, нарисованным прямо на изображении, вы можете использовать его.

Настройка расположения кнопки

Теперь вам нужно в иерархии выбрать «Button» и изменить название на «StartButton». Далее установите анкоры в нижнее растяжение, потому что нам необходимо сделать так, чтобы кнопка растягивалась по горизонтали при изменении размера экрана. Теперь установите координаты X на (Мин: 0,2, Макс: 0,8), а левый и правый отступ на значение 123. Высота должна быть равной 80, координата Y=300, а Pivot (X: 0,5, Y: 0).

Далее вам необходимо выбрать вложенный текстовый документ и набрать текст «Начать игру». Чтобы увеличить размер кнопки, установите шрифт на 32.

Вот таким образом должна сейчас выглядеть сцена:

9-фрагментное масштабирование

Часто изображения объектов, которые используются для создания игровой сцены имеют разный размер. Тоже самое относится к кнопкам и дополнительной анимации. Для облегчения процесса создания фонового изображения каждого объекта используется так называемое 9-фрагментное масштабирование. Этот метод позволяет создавать разные изображения для каждой из девяти зон, изменяя при этом их размер по своему усмотрению.

Подготовка изображений для кнопок

Прежде чем вы сможете использовать изображение, вам нужно установить параметры для девяти зон. Для этого вам нужно открыть папку «Меню» в окне «Проект» и выбрать изображение «btn_9slice_normal». В настройках импорта инспектора установите для параметра «Тип текстуры» значение «Спрайт» (2D и пользовательский интерфейс) и нажмите «применить изменения». Затем нажмите кнопку «Редактор Sprite», чтобы открылось новое меню.

В редакторе установите значения границ для L=14, R=14, B=16, T=16. Обязательно сохраните изменения, нажав кнопку «применить».

Вам нужно выполнить эти же действия для изображений «btn_9slice_highlighted» и «btn_9slice_pressed», которые вы в дальнейшем вы будете использовать для разных состояний кнопок.

Настройка изображений для кнопок

После того, как вы подготовили все изображения, переместите их в соответствующие поля в инспекторе. Далее вам необходимо выбрать в иерархии «StartButton» и выполнить следующие действия:

В свойствах изображения измените его значение на «Sliced»;
Также измените свойства Transition в компоненте Button на SpriteSwap;
Переместите изображение «btn_9slice_normal» в исходное изображение в свойствах Image;
Переместите изображение «btn_9slice_highlighted» в область выделенного спрайта в свойствах Button;
Переместите изображение «btn_9slice_pressed» Pressed Sprite в свойствах

Обратите внимание: Если выскакивает сообщение об ошибке, то скорее всего вы не установили значение границ в редакторе спрайтов и в настройках импорта изображений.

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

Установка и использование для кнопки пользовательского шрифта

Использовать собственный шрифт легко. Помните папку Fonts в наборе, который вы скачали и добавили в проект в начале урока? Теперь пришло время использовать один из этих шрифтов. Для этого вам нужно выбрать элемент Text, вложенный в StartButton в иерархии и открыв папку «Шрифты» в окне «Проект» перетащить шрифт «TitanOne-Regular» в соответствующее поле, установив его цвет как белый.

Теперь вы можете наконец запустить воспроизведение сцены, чтобы увидеть, что получилось.

Добавление кнопки «Настройки»

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

Название кнопки – Настройки;
Параметры Rect: левый и правый отступ – 400, высота – 70, координаты У=180;
Размер шрифта: 24;

Примечание: Самый простой способ создать новую кнопку — просто дублировать старую изменив лишь некоторые значения.

Вот что должно у вас получиться на данном этапе:

Начало игры

Теперь вам необходимо попробовать нажать кнопку «Старт» и запустить воспроизведение сцены непосредственно в самой игре.

Добавление новых сцен для построения

Прежде чем вы сможете запускать воспроизведение различных игровых сцен, вам нужно добавить их в список «Сцены» в настройках вашего проекта.

Для этого в меню выберите «Файл» ⇒ «Настройки», после чего откроется диалоговое окно «Настройки сборки». Затем откройте папку «Сцены» в вашем проекте. Сначала перетащите «MenuScene», а затем сцену «RocketMouse» в появившийся список «Сцены в сборке».

Создание UIManager

Вам нужно выбрать в верхней панели редактора GameObject ⇒ Create Empty и затем в иерархии переименовать «GameObject» в «UIManager». Теперь создайте папку Scripts внутри RW, а затем создайте в ней новый скрипт C# с именем «UIManager». Вы должны увидеть новые компоненты в иерархии и в инспекторе вашего редактора.

Для того, чтобы открылся скрипт в MonoDevelop, необходимо дважды кликнуть мышью по UIManagerScript в Инспекторе. В скрипте нужно убрать Start () и Update (). Теперь вам необходимо прописать значение:

using UnityEngine.SceneManagement;

Это позволяет вам в дальнейшем загружать другие сцены. Теперь добавьте следующее значение:

public void StartGame()
{
SceneManager.LoadScene("RocketMouse");
}

Сохраните скрипт и приступайте к следующему шагу.

Запуск игры при нажатии кнопки «Старт»

Чтобы завершить данный этап обучения, в иерархии выберите «StartButton» и в списке найдите On Click. Теперь нажмите кнопку «+» для того, чтобы добавить новый элемент. Перетащите «UIManager» из иерархии во вновь добавленный элемент в списке. Теперь вам нужно выбрать новую функцию для этого элемента. В появившемся меню вам необходимо выбрать UIManagerScript ⇒ StartGame.

Сохраните сцену и затем нажмите кнопку «Play», чтобы запустить игру. Чтобы запустить игровую сцену, нажмите кнопку «Старт».

Что делать дальше?

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

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

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

Источник

Сейчас уже даже школьнику известно, что Unity — потрясающий игровой движок, способный удовлетворить любые прихоти как разработчика, так и геймера. Единственной Ахиллесовой пятой Unity был старый GUI (графический пользовательский интерфейс).

Старая система GUI была очень мудреной системой, которая требовала чтобы весь код GUI был написан с помощью специальной функции OnGUI. Это был программеро-ориентированный, подход в отличие от визуального ориентированной природы самой Unity. Сам код работал медленно и неэффективно, а на то, чтобы сваять интерфейс, приходилось тратить много времени и сил. Конечно, были инструменты сторонних разработчиков, такие как NGUI, которые пытались решить эту проблему, но за то, чтобы начать пользоваться ими нужно было расстаться с n-й суммой денег.

К счастью, разработчики в Unity Technologies прислушались к народным мольбам и, после двух лет разработки, они предоставили в Unity 4.6 совершенно новый GUI, который мы и рассмотрим в этом уроке. На протяжении трех занятий мы будем создавать новый графический интерфейс к игре, созданной в наших предыдущих сериях уроков Ваяем игру в стиле Jetpack Joyride в Unity 2D.

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

По мере прохождения этого гайда мы добавим в игру классическую сцену главного меню.

Однако, просто добавление нескольких кнопок будет не достаточным чтобы освоить новую систему с графическим интерфейсом. Чтобы добавить изюминку к игре и привлечь ваших пользователей вы будете

Анимировать кнопки
Создать выезжающее окно настроек.
Использовать более новые элементы управления GUI, такие как Text, Slider, Panel, Mask и т.д.

Если вам не терпится, скачайте и вы сразу увидите что мы изучим на этом уроке)

Начинаем работать с GUI

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

Как уже упоминалось, вам придется добавить новую сцену к проекту Rocket Mouse созданному в предыдущих уроках, так что начнем, загрузив окончательный вариант этого проекта: RocketMouse_Final.

Создание сцены с меню в Unity

Скачайте по указанной выше ссылке проект Rocket Mouse и разархивируйте его. Откройте проект в Unity с помощью меню FileOpen Project…. Кроме того, откройте папку AssetsScenes в папке проекта и дважды щелкните на сцену RocketMouse.unity чтобы открыть ее в Unity.

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

Создадим новую пустую сцену. Для этого выберите в меню FileNew Scene. Лучше сохранить сцену прямо сразу, поэтому откройте диалоговое окно Save Scene (Сохранить сцену), выбрав в меню FileSave Scene. Затем введите MenuScene в качестве имени сцены и сохранить его в папке Scenes рядом со сценой RocketMouse.

Посмотрите на Браузер проекта (Project browser) чтобы убедиться, что в одной папке лежат две сцены.

Примечание: Если у вас возникнут вопросы при открытии проекта, создании, сохранении сцены, или добавления ассетов, то перейдите к уроку Rocket Mouse. Там вы найдете подробные инструкции, часто в виде анимированных GIF изображений, которые не включены в эту статью.

Импорт изображений и шрифтов

Распакуйте архив с ассетами. В нем вы найдете две папки: Menu и Fonts. Выберите обе папки, а затем перетащите их в папку Assets в Браузере проекта. Подождите пока Unity обрабатывает файлы, после чего вы должны увидеть наши папки в Браузере проекта как показано на рисунке ниже:

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

Добавление первого элемента пользовательского интерфейса

Первый элемент, которым мы займемся — это фоновое изображение для сцены с меню. Выберите в верхнем меню Unity GameObejct/UI/Image чтобы добавить на сцену объект с именем Image. Вы должны увидеть его во вкладке Hierarchy (Иерархия), как дитя Canvas. Все элементы должны быть размещены на холсте. Если у вас его еще нет, Unity об этом позаботится. Чтобы гарантированно увидеть изображение на вкладке Scene (Сцена), выберите Image в Иерархии и задайте его Pos X и Pos Y равными нулю.

Примечание: Я уже слышу вопросы типа: “Что такое Pos X?”, “Что такое Rect Transform и где старый добрый компонент Transform?” В этом мануале вы найдете всю интересующую вас информацию. Чтобы вам легче было во всем разобраться, мы будем рассматривать каждый аспект в контексте других объектов, участвующих в сцене. Таким образом, вы сможете увидеть, как они ведут себя при разных настройках. Такие свойства как Width, Height или Pos X не требует каких-либо объяснений.

Вы установили правильные положение и размер нашего фона. Теперь посмотрите внимательно на вкладку Иерархия и вы увидите три новых объекта в сцене. Вот они:

Image
Canvas
EventSystem

Image — неинтерактивный элемент управления, который отображает текстуру спрайта и позволяет настроить множество опций. Например, вы можете закрасить изображение или поместить на него материалы. Вы даже можете контролировать полноту его отображения. Например, применить к нему анимацию появления по часовой стрелке. Canvas — корневой объект для всех элементов вашего пользовательского интерфейса. Как уже было сказано раньше, он создается автоматически, когда вы добавляете первый элемент интерфейса. Холст обладает множеством свойств, определяющих отображение интерфейса, и вы будете исследовать некоторые из них во время этого урока. EventSystem отвечает за обработку ввода, рейкастинг и события в сцене Unity. Это нужно для работы интерфейса, поэтому этот элемент добавляется автоматически.

Настройки фонового изображения

Вернемся к Image. Первое, что мы сделаем — переименуем Image в img_background. Теперь откроем Menu в поисковой строке проекта и найдем изображение menu_background. Перетащим его в поле Source Image компонента Image в инспекторе img_background.

Теперь у вас есть фоновое изображение вместо белого изображения по умолчанию. Тем не менее, оно выглядит, мягко выражаясь, не айс, потому что изображение слишком мало, да и соотношение сторон является неправильным. Чтобы исправить, найти кнопку Set Native Size (Установить исходный размер) в Инспекторе и нажмите на нее, чтобы установить размер 1024 х 577.

Теперь изображение выглядит как настоящий фон.

Тем не менее, есть еще несколько проблем:

Фактический размер изображения 1136 x 640, этого достаточно чтобы закрыть весь экран 4-дюймового iPhone, но не более.
Уменьшив окно в режиме Scene, вы увидите, что холст (белый прямоугольник) закрывает только часть изображения. Если вы переключитесь в режим Game, вы увидите только часть фонового изображения, как будто камера находится слишком близко к объекту, чтобы отобразить его полностью.

Примечание: оригинальная игра была разработана для айфонов с 3,5-х и 4-дюймовыми дисплеями. Вот почему графика игры поддерживает 1136 x 640 и 960 х 640 разрешения. Но вскоре вы увидите, как UI может адаптироваться к различным разрешениям экрана.

Первая проблема состоит в результатах импортирования настроек по умолчанию, и вы будете их править в следующем разделе. Вторую проблему мы решим с помощью Canvas Scaler.

Настройка импорта изображений

Для вашего проекта вам понадобятся изображения немного большего размера, при этом нужно будет сделать так, чтобы Unity их не уменьшала. Откройте папку Menu папка в Браузере проетка и выберите изображение menu_background. В Инспекторе, выберите Default tab, установите Max Size (Максимальный размер) равным 2048 и нажмите кнопку Apply (Применить).

Теперь выберите img_background в Иерархии, а затем нажмите кнопку Set Native Size снова. Ширина и высота должны измениться на правильные значения 1136 и 640, соответственно.

Видите? Это было действительно легко исправить. Идем дальше!

Использование Canvas Scaler

Настало время настроить способ отображения. Прежде всего следует сказать, что то, как отображается игра на данном этапе — вовсе не баг. С точки зрения Unity, вид в режиме Game настроен на параметры 550×310, поэтому вы видите только часть изображения, которая помещается в окно игры.

Если вы запустите игру на устройстве или просто растянете ваш вкладку Game до размеров фонового изображения, ты вы увидите его полностью.

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

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

К счастью, специальный компонент приходит на помощь. Этот компонент называется Canvas Scaler. В предыдущих версиях Unity он назывался, Reference Resolution и его нужно было добавлять к холсту вручную. С появлением Unity 4.6 этот компонент теперь прикреплен к каждому Canvas. Выберите Canvas в Иерархии и тогда в Инспекторе вы должны увидеть компонент Canvas Scalar.

Canvas Scalar имеет три режима работы:

Constant Pixel Size: все элементы пользовательского интерфейса сохраняют размер пикселя независимо от размера экрана. Это дефолтный режим.

Scale With Screen Size: Размеры и положение элементов пользовательского интерфейса определяются заданным разрешением. Если текущее разрешение выше, холст сохранит заданное разрешение, увеличив элементы в соответствии с новыми настройками.

Constant Physical Size: Позиции элементов пользовательских интерфейсов указаны в физических единицах, таких как миллиметры или точки. Для этого нужно знать точное число точек на дюйм экрана.

После добавления компонента, установите его Resolution (Разрешение) равным 1136 х 640. Кроме того, сдвиньте все Match Width или Match Height до упора вправо, или просто введите 1 в поле ввода.

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

Измените разрешение вкладки Game чтобы увидеть, как ваша игра будет выглядеть в другом разрешении, например, на 3-5 дюймовом iPhone. Чудесно. Как видите, по-прежнему выглядит хорошо!

Теперь переключитесь во вкладку Scene (Сцена) и вы увидите, что размер холста не меняется при изменении размера вкладки Сцена: боковые края экрана аккуратно обрезаются а центральная часть полностью видна. Это результат установки Настройте ширину и высоту в 1 (Настройте высоту)… Это отлично соответствует разрешению ваших целевых гаджетов.

Постойте, но что насчет кнопок? Что происходит, когда они находятся очень близко к левому или правому краю экрана? Они не должны обрезаться или быть скрытыми. К счастью, Unity имеет функцию, которая поможет вам обойти эту ошибку новичка. Совсем скоро вы о ней узнаете.

Добавление изображения с заголовком

Прежде чем перейти к кнопок и других UI управления, вы будете добавлять еще один образ — образ заголовка. Для выполнения этого упражнения, вы будете использовать не полноэкранное изображение, чтобы продемонстрировать некоторые другие важные понятия новой системы GUI.

Откройте окно Scene и выберите GameObjectUIImage в меню. Это позволит добавить еще одно белое изображение на сцену. Вот как это вышло у меня:

Примечание: Если изображение окажется слишком далеко, просто установите значение 0 для свойств Pos X и Pos Y.

Теперь попробуйте превратить этот белый прямоугольник в реальное изображение выполнив следующие действия:

Выберите Image в Иерархии и переменуйте его в img_header.
Откройте папку Menu в Браузере проекта и найдите картинку header_label.
Перетащите изображения в поле Source Image инспектора.
Нажмите на Set Native Size в Инспекторе.

Как видите, это было достаточно просто. Теперь нужно работать с позиционированием с помощью компонента Rect Transform.

Rect Transform, Anchors, Pivot и Вы)

Если вы работали с Unity раньше, то вы, наверняка, знакомы с компонентом Transform. Если нет, то ничего страшного. Это просто инструмент, с помощью которого можно расположить, вращать и масштабировать объекты на сцене. Вот как это выглядит:

Вы увидите Transform-компонент, когда выберите любой тип GameObject в Иерархии.

Тем не менее, если вы выберите какой-либо элемент пользовательского интерфейса, например, img_header, вы увидите другой компонент с именем Rect Transform.

Как видите, Transform и Rect Transform немного отличаются, но Rect Transform может изменить внешний вид вашей игры в зависимости от настроек якоря. Например, это может выглядеть следующим образом:

Примечание: Вместо Pos X, Pos Y, Width и Height вы работаете с Left, Top, Right и Bottom.

Вы задаетесь вопросом о настройке якорей, которые меняет внешний вид Rect Transform так кардинально? Вы найдете ответы, которые вы ищете в следующем разделе.

Якоря

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

Настраивая якоря, вы определяете несколько положений в родителе, как правило, по одному в каждом углу элемента интерфейса под названием Rect. При изменении размера родителя наш элемент будет стараться сохранить uniform distance to the anchor points, заставляя его перемещаться или изменять размер вслед за родителем.

Чтобы посмотреть на разные Anchor Presets, просто выберите img_headerв иерархии и кликните на прямоугольник прямо над полем Anchors в компоненте Rect Transform.

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

Если вы посмотрите на следующее изображение, в котором отключен фон, вы увидите, что размер холста изменяется немного лучше.

Как вы видите, настройки якорей влияют на то, как элементы вашего интерфейса адаптируются к разному разрешению экрана.

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

Манипулятор якорей

На данном этапе наши якоря используют 4 треугольника. Вот как это выглядит при настройке top-center:

Настраиваемые якоря

Вы можете вручную передвинуть якоря в произвольное положение, т.к. Anchor Presets можно менять любым удобным вам образом.

Примечание: Бывает так, что другой элемент интерфейса перекрывает иконку якоря, и вы не можете его выбрать. В таком случае просто вызовите иконку якоря, щелкнув на Anchor Preset (например, левая часть экрана). Иконка якоря появится в указанной части экрана, после чего вы сможете перемещать ее как угодно.

Примечание: Как видите, изменение размера холста заставляет изображение передвигаться вправо. Но это перемещение незначительно по отношению к правому краю холста. Это объясняется тем, что якоря установлены на 25% ширины холста.

Разделение якорей

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

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

Rect Transform зависит от текущих настроек якоря

В зависимости от настроек якоря, Rect Transform контролирует размер и положение элементов интерфейса разными способами.

Ели вы поставите якорь на какую-то точку, без растягивания, вы увидите такие свойства, как Pos X, Pos Y, Width иHeight.

Но если вы настроите якорь так, что это приведет к растягиванию элемента, вместо Pos X и Width у вас будут свойства Left иRight (при горизонтальном растяжении), а вместо Pos Y and Height — Top и Bottom (при горизонтальном растяжении).

На этом скриншоте якорь img_header стоит на middle-stretch. Это значит, что изображение остается в центре холста вертикально и растягивается горизонтально.

Поскольку позиция по оси X и ширина зависят от размера родителя, установите отступы от левого и правого краев родителей.

Точка опоры

Осталось последнее не рассмотренное свойство компонента Rect Transform — Pivot (Точка опоры). Точка опоры является точкой, вокруг которой производятся все преобразования. Другими словами, определяя положение элемента, вы определяете его точку опоры. Если вы станете вращать элемент пользовательского интерфейса, то он будет вращаться вокруг этой точки.

Точка опоры обозначается нормализованными координатами. То есть, ее значение изменяется с 0 на 1 как для ширины, так и для высоты, где (0,0) — нижний левый угол, а (1,1) — правый верхний угол.

Примечание: Вы также можете установить точку опоры за пределами элемента интерфейса. В этом случае она будет за пределами значений (0,0) – (1,1). Это может вам пригодиться. Например, вам нужно, чтобы объект вращался вокруг определенной точки в сцене. Чтобы изменить точку опоры, вы должны убедиться, что кнопка Pivot/Center стоит на Pivot таким образом:

Вы можете изменить Точку опоры в компоненте Rect Transform в Инспекторе или вы можете использовать Rect Tool.

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

На первом изображении Точка опоры установлена в дефолтное значение (0.5, 0.5), которое является центром элемента пользовательского интерфейса. Установите позицию элемента в положение (0, 0), а якоря — top-left.

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

Теперь взглянем на второе изображение. Как видите, его положение не изменилось и составляет (0,0), но так как Точка опоры установлена в левом нижнем углу (0,0) видно, что нижний угол изображения, а не центр, теперь находится в левом верхнем углу холста.

Сложно объяснить, как точка опоры влияет на вращение и размер с помощью статичного изображения, поэтому вот несколько анимаций:

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

Примечание: Удерживайте кнопку ALT при масштабировании вокруг точки опоры.

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

Примечание: Еще одна важная вещь, которую вам следует уяснить — это то, что изменение размера элемента интерфейса, не влияет на его масштабирование. Но вы можете изменить его параметры — Width и Height или Top, Right, Left, Bottom.Эти свойства немного отличаются. Например, размер не может быть отрицательным, но масштаб может; с помощью отрицательных значений вы можете перевернуть элемент. В большинстве случаев вам достаточно только изменить размер ваших элементов пользовательского интерфейса.

Размещение изображения с заголовом

Уф! Теперь вы знаете все, что нужно, о Rect Transform, Anchors и Pivot. Поверьте, когда-нибудь вы скажете мне спасибо за то, что корпели над этим упражнением, ведь от того, насколько хорошо вы усвоили эти понятия, зависит интерфейс вашей игры. Теперь мы можем сконцентрироваться на создании сцены меню. Остальные разделы пролетят в мгновение ока. Все эти манипуляции окончательно измотали бедный маленький img_header. Пора поместить его на законное место и оставить в покое.

Прежде чем продолжить, повторно включите img_background (если оно было отключено) чтобы увидеть границы холста. Затем выберите img_header в Иерархии и установить его свойства в Инспекторе следующим образом:

Нажмите на Set Native Size чтобы сбросить размер, так как вы, наверняка, изменили его играя с Точкой опоры.
Установите Якоря в top-center.
Установите Pos X в 0 и Pos Y в -100.

Вы должны увидеть на Вашей вкладке Сцена что-то вроде этого:

Отлично. Теперь оставьте заголовок в покое).

Добавление кнопки Старт

Теперь, когда ваше приложение имеет приятный фон с заголовком, пришло время добавить несколько кнопок. Выберите GameObjectUIButton в меню. Это позволит добавить объект Button в сцену, при этом вы должны увидеть его в Иерархии. Если развернуть его в Иерархии, вы увидите, что кнопка содержит текстовую метку — об этом вы узнаете чуть позже.

Взгляните на кнопку в инспекторе, и вы увидите знакомый компонент Image (Script). Помните, мы использовали его для добавления фона и метки хедера? Кроме того, существует компонент кнопки (Script). Другими словами, кнопка только изображение с прикрепленным скриптом, который содержит текст кнопки.

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

Позиционирование кнопки

Теперь займемся позиционированием и изменением размера кнопки. Выполните следующие действия:

Выберите Button в Иерархии и переменуйте ее в btn_start.
Установите Якоря Anchors в bottom-stretch, так как нам нужно чтобы кнопка растягивалась по горизонтали в случае изменения размера экрана.
Установите значения Left и Right равными 400.
Установите Height равным 80.
Установите Pos Y равным 300.

Теперь выберите вложеннsq текстовый элемент и введите текст Start Game (Начать игру). Измените Font Size (размер шрифта) на 32 чтобы сделать текст кнопки больше.

Это то, что вы должны увидеть в окне Scene (Сцена):

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

9-фрагментное масштабирование

Изображение для Button устанавливается так же, как изображение для Image. В конце концов, это практически один и тот же компонент. Но в отличие от изображений, которые редко масштабируются, кнопки часто бывают самых разных размеров. Конечно, можно создать фоновое изображение для каждого размера кнопки, но зачем же тратить драгоценное место? Вместо этого мы воспользуемся техникой, называемой 9-фрагментным масштабированием, которая позволяет обойтись одним маленьким изображением, которое масштабируется в соответствии с необходимым размером. Нет, это не магия. Вам не придется бросать свои изображения в волшебный фонтан прежде, чем вы сможете их использовать :] Этот метод делает это возможным, потому, что изображение не масштабируется равномерно. Есть девять зон, каждая из которых масштабируется по-разному.

Это гарантирует, что изображение будет выглядеть хорошо в любом масштабе.

Подготовка изображения для кнопок

Прежде чем вы сможете использовать нарезанное изображение, необходимо установить эти 9 зон. Чтобы сделать это, откройте папку Menu Браузере проекта и выберите btn_9slice_normal image. В Инспектора Import Settings (Настройки импорта), устанавливается Format в Truecolor, а затем нажмите на кнопку Sprite Editor (Редактор спрайта), чтобы открыть вкладку Sprite Editor.

Примечание: Установка формата на Truecolor не обязательна и не относится к масштабированию изображений. Но в моей практике были случаи нежелательного сжатия изображений, поэтому я пришел к выводу, что лучше этим не пренебрегать. Если вы используете собственные изображения и они выглядят нормально в сжатом формате, вам можно с этим не возиться.

В Sprite Editor установите значение Border равнмы L:14, R:14, B:16, T:16, а затем нажмите на Apply!

Повторите действие для изображений btn_9slice_highlighted и btn_9slice_pressed, которые вы будете использовать для разных состояний кнопок.

Настройка изображений кнопок

Подготовив все изображения, вы должны будете всего лишь перетащить их в соответствующие поля Инспектора. Выберите btn_start в иерархии и выполните следующие действия:

Замените Image Type на Sliced в компоненте Image.
Замените свойство Transition в компоненте Button на SpriteSwap.
Перетащите btn_9slice_normal в Source Image в компоненте Image.
Перетащите btn_9slice_highlighted в Highlighted Sprite в компоненте Button.
Перетащите btn_9slice_pressed в Pressed Sprite в компоненте Button.

Примечание: Если вы наткнетесь на ошибку: Отсутствуют границы изображения, это значит, что вы забыли настроить Границы в редакторе спрайта в настройках импорта, как описано выше.

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

Задание пользовательских шрифтов для кнопки

Использовать пользовательские шрифты легко. Помните папку Fonts, которыу вы добавили к проекту? Теперь пришло время воспользоваться ей и использовать один из этих шрифтов. Выберите метку Text, встроенную в in the btn_start,в иерархии. Затем откройте папку Fonts в Браузере проектов и перетащите шрифт TitanOne-Regular в поле Font. Также установите Color в white (белый).

Теперь запустите сцену и наслаждайтесь новой мега-кнопкой.

Удаление прозрачности кнопки

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

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

Нам потребуется всего несколько секунд чтобы отменить прозрачность. Выберите btn_start в Иерархии и дважды щелкните на свойство Color внутри компонента Image. В открывшемся диалоговом наборе выбора цвета установите A (альфа) равной 255 и закройте палитру цветов.

Теперь он выглядит намного лучше!

Добавление кнопки Settings (Настройка)

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

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

Итак, вот свойства кнопки Settings:

Name: btn_settings
Rect Transform: Left и Right равны 450, Height — 70, а Pos Y — 180
Text: Settings

Если у вас совсем ничего не получается, выполните следующие действия:

Выберите в меню GameObjectUIButton. Это создаст объект Button на сцене.
Выберите Button в Иерархии и переименуйте в btn_settings
Установите Anchors кнопки в bottom-stretch.
Установите значение Left и Right в Rect Transform на 450.
Установите Height to 70 and Pos Y to 180.
Установите Transition (прозрачность) в компоненте Button равной SpriteSwap.
Убедитесь в том, чтобы установить Image Type в компоненте Image равным Sliced.
Откройте папку Menu в Браузере проекта и перетащите btn_9slice_normal на Source Image.
Перетащите btn_9slice_highlighted на Highlighted Sprite.
И наконец, перетащите btn_9slice_pressed на Pressed Sprite.
Дважды щелкните на Color внутри компонента Image и установите A равным 255 чтобы удалить прозрачность.
Select nested Text label.
Измените Text на Settings.
Установите размер шрифта Font Size равным 24
Измените цвет Color на White (белый).
Откройте папку Fonts в Браузере проектов и перетащите шрифт TitanOne-Regular в поле Font в Инспекторе.

Это то, что вы должны увидеть во вкладке Scene (Сцена) после добавления кнопки Settings (Настройки):

Теперь нам осталось только нажать кнопку Start Game и запустить вторую сцену (это сама игра).

Добавляем сцены в режим Build

Прежде, чем вы сможете запустить свои сцены, вам нужно будет добавить их в список Scenes in Build в настройках проекта, чтобы они были включены в конечную версию. Для этого выберите FileBuild Settings… чтобы открыть диалоговое окно Build Settings. Затем откройте папку Scenes в Браузере проекта и перетащите сперва MenuScene, а затем сцену RocketMouse в список Scenes in Build.

Примечание: Важен порядок. Соблюдайте его!

Потом закройте окно Build Settings.

Создание UIManager

Когда вы добавляете обработчик событий для кнопки, необходимо указать метод, который будет вызываться при нажатии на кнопку. Это означает, что вы должны прикрепить объект к скрипту так как вы не можете использовать статические методы. Создайте пустой игровой объект и прикрепите скрипт к нему. Этот скрипт будет содержать все методы вызываемыми UI элементами в MenuScene. Выберите GameObjectCreate Empty в меню. Затем выберите GameObject в Иерархии и переименуйте в UIManager. После этого нажмите на Add Component в Инспекторе и выберите New Script. Назовите его UIManagerScript. Убедитесь, что установлен язык CSharp и нажмите на Create and Add (Создаать и добавить). Это то, что вы должны увидеть в Иерархии и Инспекторе:

Сделайте двойной клик на UIManagerScript в инспекторе, чтобы открыть скрипт в MonoDevelop. После того, как сценарий загрузится, удалите методы Start и Update и добавьте метод StartGame следующим образом:

public void StartGame() {
   Application.LoadLevel("RocketMouse");
}

Сохраните файл и убедитесь, что он не содержит ошибок, создав его в MonoDevelop. Для этого выберите BuildBuild All в меню MonoDevelop.

Вызов метода `StartGame`, когда игрок нажимает на кнопку

Вернитесь к Unity и выполните следующие действия:

Выберите btn_start в Иерархии и и прокрутите мышью по вкладке Инспекторе до списка On Click (Button).
Нажмите кнопку + чтобы добавить новый элемент.
Затем перетащите UIManager из Иерархии на добавленный элемент в списке.
Нажмите на выпадающий список выберите функцию. Прямо сейчас в нем установлено No Function.
В открывшемся меню выберите UIManagerScriptStartGame ().

Запустите сцену и нажмите на кнопку Start Game чтобы запустить сцену с игрой.

Что дальше?

Итак, Вы создали пользовательский интерфейс, добавили изображения кнопок и даже написал код, который запускает игру, когда вы нажимаете на кнопку! Так устроен интерфейс многих игр . Вы также узнали, что такое a lot Rect Transform, Anchors, Pivot и другие полезные штуки. Теперь, когда вы знаете, как они работают, вы сможете значительно ускорить работу над своим проектов, используя эти элементы. Вы можете загрузить готовый проект здесь. В следующей части нашего урока вы узнаете как оживить элементы пользовательского интерфейса, создавать диалоги, использовать элементы управления такие как слайдер и переключатели, а в конце урока вы будете иметь сцену с рабочим меню! Отдохните и принимайтесь за Учебник по новому GUI в Unity. Часть 2!

Источник

С тех пор как в Unity появилась новая система UI (User interface), создавать пользовательский интерфейс стало намного проще и удобней. Теперь все элементы этого интерфейса стали отдельными объектами, и с тех пор к каждому элементу можно найти особый подход в работе.

В этой статье с помощью системы UI мы создадим простое, разворачивающееся меню, примерно как на анимации ниже.

По принципу работы, оно чем то напоминает панель настроек в верхнем углу экрана у смартфонов.

Для этого не нужно будет разбирать как разработчики операционных систем Android и iOS, добились подобного эффекта. Здесь мы будем использовать только возможности Unity и системы 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, который будет служить тумблером, для примера – выберем изображение стрелочки. С помощью этого элемента мы будем разворачивать панель. Расположим его у верхнего края панели меню.

Действия элементов

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

Создадим новый скрипт CustomSlider унаследованный от класса UIBehaviour, этот класс можно найти подключив библиотеку EventSystem.

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

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

using UnityEngine.EventSystem;
public sealed class CustomSlider : UIBehaviour {
public RectTransform fillRect;
}

Теперь добавим скрипт CustomSlider тумблеру и в поле Fill Rect поместим панель меню.

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

Наследуем скрипт CustomSlider от каждого из трех выбранных интерфейсов после чего реализуем все их методы.

using UnityEngine.EventSystem;
public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
public void OnBeginDrag(PointerEventData eventData) {}
public void OnDrag(PointerEventData eventData) {}
public void OnEndDrag(PointerEventData eventData) {}
}

Метод OnBeginDrag сработает перед началом перетаскивания тумблера, метод OnDrag будет обрабатывать сам процесс перетаскивания, а метод OnEndDrag сработает после того как мы закончим перетаскивать элемент.

Каждый метод принимает параметр PointerEventData, этот класс содержит много полезных данных от каждого события, но нам понадобится только два из них: это камера, от которой поступило событие касания и сама позиция касания.

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

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
public void OnBeginDrag(PointerEventData eventData) {}
public void OnDrag(PointerEventData eventData) {
Camera eventCam = eventData.pressEventCamera;
Vector2 worldPoint = eventCam.ScreenToWorldPoint(eventData.position);
Vector2 localPoint = this.canvas.transform.InverseTransformPoint(worldPoint);
this.transform.localPosition = localPoint;
}
public void OnEndDrag(PointerEventData eventData) {}
}

Получив локальную позицию localPoint при помощи метода InverseTransformPoint Transform’а канваса, применяем эти координаты Transform’у тумблера. Теперь можно запустить и попробовать “повозить” тумблер по экрану.

Отлично, все работает – события обрабатываются исправно можно продолжать работу со скриптом.

Для начала сотрем все что написали в методе OnDrag и добавим несколько новых переменных: canvasRect и rectTransform, которые будут указывать на Transform’ы канваса и тумблера.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
public void OnBeginDrag(PointerEventData eventData) {}
public void OnDrag(PointerEventData eventData) {}
public void OnEndDrag(PointerEventData eventData) {}
}

Дальше нам понадобится хранить высоту панели меню в переменной fillHeight, высоту изображения тумблера imageHeight, нижний предел в переменной minPosY, верхний предел в maxPosY и текущую высоту тумблера в переменной targetPosY.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, imageHeight, minPosY, maxPosY, targetPosY;
public void OnBeginDrag(PointerEventData eventData) {}
public void OnDrag(PointerEventData eventData) {}
public void OnEndDrag(PointerEventData eventData) {}
}

Этих переменных нам будет достаточно для начала. Далее в методе Start займемся сбором данных.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
protected override void Start() {}
/*…остальной код…*/
}

Начнем с определения переменных Transform’а канваса и тумблера. Для того, чтобы найти канвас, будем использовать метод GetComponentInParent.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
protected override void Start() {
Canvas canvas = GetComponentInParent<Canvas>();
this.canvasRect = canvas.transform as RectTransform;
this.rectTransform = this.transform as RectTransform;
}
/*…остальной код…*/
}

Дальше, в методе Start определим размеры панели меню и тумблера, но делать мы это будем двумя разными способами.

Дело в том, что у тумблера в настройках компонента RectTransform указаны его длина и высота (Width и Height), а у панели меню указаны только отступы лево, верх, право и низ (Left, top, right и bottom), то есть панель всегда, независимо от размеров экрана, будет заполнять максимум родительского пространства (в данном случае весь канвас). Поэтому узнать размеры панели через длину и высоту, как у тумблера – не получится, для этого придется использовать другой подход, а именно – найти расположения краев панели на канвасе.

И так, начнем с высоты тумблера, здесь все просто – используем свойство sizeDelta у его Transform’а.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
protected override void Start() {
Canvas canvas = GetComponentInParent<Canvas>();
this.canvasRect = canvas.transform as RectTransform;
this.rectTransform = this.transform as RectTransform;
this.imageHeight = this.rectTransform.sizeDelta.y;
}
/*…остальной код…*/
}

Чтобы найти края панели меню нам понадобится небольшой массив векторов Vector3 и метод GetLocalCorners, который вернет все четыре(4) угла Transform’а панели.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
protected override void Start() {
Canvas canvas = GetComponentInParent<Canvas>();
this.canvasRect = canvas.transform as RectTransform;
this.rectTransform = this.transform as RectTransform;
this.imageHeight = this.rectTransform.sizeDelta.y;
Vector3[] fillCorners = new Vector3[4];
this.fillRect.GetLocalCorners(fillCorners);
}
/*…остальной код…*/
}

Вообще все углы любого элемента UI располагаются по часовой стрелке начиная с нижнего левого края элемента.

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

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
protected override void Start() {
Canvas canvas = GetComponentInParent<Canvas>();
this.canvasRect = canvas.transform as RectTransform;
this.rectTransform = this.transform as RectTransform;
this.imageHeight = this.rectTransform.sizeDelta.y;
Vector3[] fillCorners = new Vector3[4];
this.fillRect.GetLocalCorners(fillCorners);
this.fillHeight = Mathf.Abs(fillCorners[0].y * 2f);
this.maxPosY = fillCorners[0].y + this.imageHeight / 2f;
this.minPosY = fillCorners[1].y – this.imageHeight / 2f;
}
/*…остальной код…*/
}

Для высоты fillHeight используем нижний левый угол панели под индексом 0 массива fillCorners умноженный на 2. Нижний предел minPosY будет располагаться в левом нижнем углу панели, верхний предел maxPosY – в левом верхнем углу соответственно.

Готово, после выполнения метода Start мы получим все необходимые данные об элементах панели и тумблера.

Само же перемещение тумблера теперь будем обрабатывать в методе Update, так как в отличие от метода OnDrag, метод Update работает всегда, а не только когда мы совершаем действие “перетаскивания”. Поэтому добавим новый метод Update, и два дополнительных метода для обработки перемещения тумблера UpdatePosition и заполнения панели UpdateFill.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
/*…остальной код…*/
private void Update() {
UpdateFill();
UpdatePosition();
}
private void UpdateFill() {}
private void UpdatePosition() {}
/*…остальной код…*/
}

Для перемещения тумблера будем использовать переменную targetPosY которую будем заполнять в методе OnDrag.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
/*…остальной код…*/
private void Update() {
UpdateFill();
UpdatePosition();
}
private void UpdateFill() {}
private void UpdatePosition() {}
public void OnDrag(PointerEventData eventData) {
Camera eventCam = eventData.pressEventCamera;
Vector2 worldPoint = eventCam.ScreenToWorldPoint(eventData.position);
Vector2 localPoint = this.canvasRect.InverseTransformPoint(worldPoint);
this.targetPosY = localPoint.y;
}
/*…остальной код…*/
}

Как и раньше, в методе OnDrag мы сначала находим мировые координаты касания worldPoint, после чего конвертируем их в локальные localPoint относительно канваса, и задаем переменной targetPosY новую позицию тумблера по высоте. Дальше переходим в метод UpdatePosition, где будем перемещать сам тумблер.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
/*…остальной код…*/
private void Update() {
UpdateFill();
UpdatePosition();
}
private void UpdateFill() {}
private void UpdatePosition() {
Vector2 currentPos = this.rectTransform.localPosition;
float yPos = Mathf.Clamp(this.targetPosY, this.maxPosY, this.minPosY);
this.rectTransform.localPosition = new Vector2(currentPos.x, yPos);
}
/*…остальной код…*/
}

Здесь тоже все просто, сначала помещаем текущую позицию тумблера в переменную currentPos, после чего в переменную yPos записываем новую позицию, с учетом пределов maxPosY и minPosY, и в конце применяем полученные координаты локальной позиции Transform’а тумблера. И так, теперь тумблер перемещается по канвасу учитывая минимальную и максимальную высоту панели, осталось только определить – на сколько нам разворачивать панель меню в зависимости от расположения тумблера на канвасе.

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

Запишем в скрипте CustomSlider новый метод GetFillValue, с помощью которого получим кол-во пройденного пути в виде значения от 0 до 1, где ноль будет показывать, что тумблер находится в самом начале пути, а 1 – что в самом конце.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
/*…остальной код…*/
private void Update() {
UpdateFill();
UpdatePosition();
}
private void UpdateFill() {}
private float GetFillValue() {
float currentYPos = this.rectTransform.localPosition.y;
float diff = currentYPos – this.minPosY;
float result = -(diff / (this.fillHeight – this.imageHeight));
return result;
}
/*…остальной код…*/
}

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

Переходим в метод UpdateFill, где будем заполнять нашу панель меню с учетом пройденного пути.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
/*…остальной код…*/
private void Update() {
UpdateFill();
UpdatePosition();
}
private void UpdateFill() {
float value = GetFillValue();
float newSizeY = this.fillHeight * value;
}
/*…остальной код…*/
}

Для начала в переменную value запишем кол-во пройденного пути тумблером, далее в переменной newSizeY установим высоту на которую необходимо развернуть панель меню. Осталось только задать новую высоту панели меню, для чего воспользуемся специальным методом SetInsetAndSizeFromParentEdge, который позволяет изменять размеры UI элемента от определенного края RectTransform.Edge.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public RectTransform fillRect;
private RectTransform canvasRect, rectTransform;
private float fillHeight, minPosY, maxPosY, imageHeight, targetPosY;
/*…остальной код…*/
private void Update() {
UpdateFill();
UpdatePosition();
}
private void UpdateFill() {
float value = GetFillValue();
float newSizeY = this.fillHeight * value;
RectTransform.Edge edge = RectTransform.Edge.Top;
this.fillRect.SetInsetAndSizeFromParentEdge(edge, 0f, newSizeY);
}
/*…остальной код…*/
}

В нашем случае, так как панель будет разворачиваться сверху-вниз, необходимо использовать верхний край RectTransform.Edge.Top. Теперь попробуем протестировать то, что у нас получилось. Если вы проделали все также как и в примере, то результат у вас должен быть примерно такой.

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

Открытие и закрытие панели

Чтобы совершать автоматические действия открытия и закрытия панели, без перетаскивания тумблера вручную, необходимо добавить два новых метода Open и Close, и пару boolean переменных isDragging и isOpen.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
/*…остальной код…*/
private bool isDragging, isOpen;
public void Open() {}
public void Close() {}
/*…остальной код…*/
}

Вызвав любой из этих методов, переменная isOpen будет меняться, и в зависимости от того какое значение она принимает, true или false, панель будет открываться или закрываться.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
/*…остальной код…*/
private bool isDragging, isOpen;
public void Open() {
if (this.isOpen == false && this.isDragging == false) this.isOpen = true;
}
public void Close() {
if (this.isOpen && this.isDragging == false) this.isOpen = false;
}
/*…остальной код…*/
}

Переменная isDragging будет указывать, перетаскиваем мы сейчас тумблер вручную или нет, а изменять мы ее будем в методах OnBeginDrag и OnEndDrag перед началом и после завершения перетаскивания тумблера.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
/*…остальной код…*/
private bool isDragging, isOpen;
public void Open() {
if (this.isOpen == false && this.isDragging == false) this.isOpen = true;
}
public void Close() {
if (this.isOpen && this.isDragging == false) this.isOpen = false;
}
public void OnBeginDrag(PointerEventData eventData) {
this.isDragging = true;
}
public void OnEndDrag(PointerEventData eventData) {
this.isDragging = false;
}
/*…остальной код…*/
}

Действия по автоматическому открытию или закрытию панели будем выполнять в методе UpdatePosition.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
/*…остальной код…*/
private void UpdatePosition() {
Vector2 currentPos = this.rectTransform.localPosition;
if (this.isDragging == false) {
}
float yPos = Mathf.Clamp(this.targetPosY, this.maxPosY, this.minPosY);
this.rectTransform.localPosition = new Vector2(currentPos.x, yPos);
}
/*…остальной код…*/
}

После определения текущей позиции тумблера в переменную currentPos, добавляем новое условие, что когда мы НЕ перетаскиваем тумблер вручную, то есть переменная isDragging равна false, необходимо закрывать или открывать панель автоматически.

public sealed class CustomSlider : UIBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
/*…остальной код…*/
private void UpdatePosition() {
Vector2 currentPos = this.rectTransform.localPosition;
if (this.isDragging == false) {
float newYPos = (this.isOpen) ? this.maxPosY : this.minPosY;
float speed = Time.deltaTime * 10f;
this.targetPosY = Mathf.Lerp(currentPos.y, newYPos, speed);
}
float yPos = Mathf.Clamp(this.targetPosY, this.maxPosY, this.minPosY);
this.rectTransform.localPosition = new Vector2(currentPos.x, yPos);
}
/*…остальной код…*/
}

Для этого в переменную newYPos запишем новую позицию тумблера в зависимости от того совершаем мы действие открытия или закрытия. Если открываем, значит нам нужно переместить тумблер в самый нижний предел maxPosY, если же закрываем то нужно переместить в верхний предел minPosY. После чего, с помощью простого Lerp и дельты, плавно перемещаем тумблер к установленной границе.

Теперь панель можно открывать и закрывать просто вызвав метод Open или Close соответственно, без необходимости перетаскивать тумблер вручную.

В примере именно кнопка “назад” вызывает метод Close скрипта CustomSlider, после чего панель самостоятельно сворачивается.

Вот так с помощью простого скрипта и несложных настроек элементов интерфейса можно получить симпатичное и интуитивно понятное меню.

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

Источник

Приступая к работе

Создание MenuScene

Импортирование изображений и шрифтов

Добавление вашего первого элемента пользовательского интерфейса

Настройка фонового изображения меню

Использование масштабатора холста

Добавление изображения заголовка

Rect Transform, Anchors и Pivot

Anchors

Пользовательские якоря

Разделение анкеров

Rect Transform зависит от текущей настройки якорей

Точка опоры

Размещение изображения заголовка

Добавление кнопки запуска

Размещение кнопки

9-сегментное масштабирование

Подготовка изображений кнопок

Настройка изображений кнопок

Установка пользовательского шрифта для кнопки

Добавление кнопки настроек

Запуск игры

Добавление сцен в сборку

Создание UIManager

Вызов StartGame при нажатии кнопки

Куда двигаться дальше?

Введение

Создание MenuScene

Импорт изображений и шрифтов

Создание первого элемента пользовательского интерфейса

Настройка фонового изображения меню

Использование функции Canvas Scaler

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

Функции Rect Transform, анкоры и Pivot

Что такое анкоры?

Ручная настройка анкоров

Разделение анкоров

Изменение параметров в зависимости от текущей настройки анкоров

Свойство Pivot

Размещение изображения заголовка

Добавление кнопки «Старт»

Настройка расположения кнопки

9-фрагментное масштабирование

Подготовка изображений для кнопок

Настройка изображений для кнопок

Установка и использование для кнопки пользовательского шрифта

Добавление кнопки «Настройки»

Начало игры

Добавление новых сцен для построения

Создание UIManager

Запуск игры при нажатии кнопки «Старт»

Что делать дальше?

Начинаем работать с GUI

Создание сцены с меню в Unity

Импорт изображений и шрифтов

Добавление первого элемента пользовательского интерфейса

Настройки фонового изображения

Настройка импорта изображений

Использование Canvas Scaler

Добавление изображения с заголовком

Rect Transform, Anchors, Pivot и Вы)

Якоря

Манипулятор якорей

Настраиваемые якоря

Разделение якорей

Rect Transform зависит от текущих настроек якоря

Точка опоры

Размещение изображения с заголовом

Добавление кнопки Старт

Позиционирование кнопки

9-фрагментное масштабирование

Подготовка изображения для кнопок

Настройка изображений кнопок

Задание пользовательских шрифтов для кнопки

Удаление прозрачности кнопки

Добавление кнопки Settings (Настройка)

Добавляем сцены в режим Build

Создание UIManager

Вызов метода StartGame, когда игрок нажимает на кнопку

Что дальше?

Вызов метода `StartGame`, когда игрок нажимает на кнопку