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

In this section we’ll look at how you can position UI elements relative to the Canvas and each other. If you want to test yourself while reading, you can create an Image using the menu GameObject -> UI -> Image.

The Rect Tool

Every UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary element is represented as a rectangle for layout purposes. This rectangle can be manipulated in the SceneA Scene contains the environments and menus of your game. Think of each unique Scene file as a unique level. In each Scene, you place your environments, obstacles, and decorations, essentially designing and building your game in pieces. More info
See in Glossary View using the Rect Tool in the toolbarA row of buttons and basic controls at the top of the Unity Editor that allows you to interact with the Editor in various ways (e.g. scaling, translation). More info
See in Glossary. The Rect Tool is used both for Unity’s 2D features and for UI, and in fact can be used even for 3D objectsA 3D GameObject such as a cube, terrain or ragdoll. More info
See in Glossary as well.

Toolbar buttons with Rect Tool selected

The Rect Tool can be used to move, resize and rotate UI elements. Once you have selected a UI element, you can move it by clicking anywhere inside the rectangle and dragging. You can resize it by clicking on the edges or corners and dragging. The element can be rotated by hovering the cursor slightly away from the corners until the mouse cursor looks like a rotation symbol. You can then click and drag in either direction to rotate.

Just like the other tools, the Rect Tool uses the current pivot mode and space, set in the toolbar. When working with UI it’s usually a good idea to keep those set to Pivot and Local.

Toolbar buttons set to Pivot and Local

Rect Transform

The Rect Transform is a new transform componentA Transform component determines the Position, Rotation, and Scale of each object in the scene. Every GameObject has a Transform. More info
See in Glossary that’s used for all UI elements instead of the regular Transform component.

Rect Transforms have position, rotation, and scale just like regular Transforms, but it also has a width and height, used to specify the dimensions of the rectangle.

Resizing Versus Scaling

When the Rect Tool is used to change the size of an object, normally for SpritesA 2D graphic objects. If you are used to working in 3D, Sprites are essentially just standard textures but there are special techniques for combining and managing sprite textures for efficiency and convenience during development. More info
See in Glossary in the 2D system and for 3D objects it will change the local scale of the object. However, when it’s used on an object with a Rect Transform on it, it will instead change the width and the height, keeping the local scale unchanged. This resizing won’t affect font sizes or the border on sliced images.

Pivot

Rotations, size, and scale modifications occur around the pivot so the position of the pivot affects the outcome of a rotation, resizing, or scaling. When the toolbar Pivot button is set to Pivot mode, the pivot of a Rect Transform can be moved in the Scene ViewAn interactive view into the world you are creating. You use the Scene View to select and position scenery, characters, cameras, lights, and all other types of Game Object. More info
See in Glossary.

Anchors

Rect Transforms include a layout concept called anchors. Anchors are shown as four small triangular handles in the Scene View and anchor information is also shown in the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary.

If the parent of a Rect Transform is also a Rect Transform, the child Rect Transform can be anchored to the parent Rect Transform in various ways. For example, the child can be anchored to the center of the parent, or to one of the corners.

UI element anchored to the center of the parent. The element maintains a fixed offset to the center.

UI element anchored to the lower right corner of the parent. The element maintains a fixed offset to the lower right corner.

The anchoring also allows the child to stretch together with the width or height of the parent. Each corner of the rectangle has a fixed offset to its corresponding anchor, i.e. the top left corner of the rectangle has a fixed offset to the top left anchor, etc. This way the different corners of the rectangle can be anchored to different points in the parent rectangle.

UI element with left corners anchored to lower left corner of the parent and right corners anchored to lower right. The corners of the element maintains fixed offsets to their respective anchors.

The positions of the anchors are defined in fractions (or percentages) of the parent rectangle width and height. 0.0 (0%) corresponds to the left or bottom side, 0.5 (50%) to the middle, and 1.0 (100%) to the right or top side. But anchors aren’t limited to the sides and middle; they can be anchored to any point within the parent rectangle.

UI element with left corners anchored to a point a certain percentage from the left side of the parent and right corners anchored to a point a certain percentage from the right side of the parent rectangle.

You can drag each of the anchors individually, or if they’re together, you can drag them together by clicking in the middle in between them and dragging. If you hold down Shift key while dragging an anchor, the corresponding corner of the rectangle will move together with the anchor.

A useful feature of the anchor handles is that they automatically snap to the anchors of sibling rectangles to allow for precise positioning.

Anchor presets

In the Inspector, the Anchor Preset button can be found in the upper left corner of the Rect Transform component. Clicking the button brings up the Anchor Presets dropdown. From here you can select from some of the most common anchoring options. You can anchor the UI element to the sides or middle of the parent, or stretch together with the parent size. The horizontal and vertical anchoring is independent.

The Anchor Presets buttons displays the currently selected preset option if there is one. If the anchors on either the horizontal or vertical axis are set to different positions than any of the presets, the custom options is shown.

Anchor and position fields in the Inspector

You can click the Anchors expansion arrow to reveal the anchor number fields if they are not already visible. Anchor Min corresponds to the lower left anchor handle in the Scene View, and Anchor Max corresponds to the upper right handle.

The position fields of rectangle are shown differently depending on whether the anchors are together (which produces a fixed width and height) or separated (which causes the rectangle to stretch together with the parent rectangle).

When all the anchor handles are together the fields displayed are Pos X, Pos Y, Width, and Height. The Pos X and Pos Y values indicate the position of the pivot relative to the anchors.

When the anchors are separated the fields can change partially or completely to Left, Right, Top, and Bottom. These fields define the padding inside the rectangle defined by the anchors. The Left and Right fields are used if the anchors are separated horizontally and the Top and Bottom fields are used if they’re separated vertically.

Note that changing the values in the anchor or pivot fields will normally counter-adjust the positioning values in order to make the rectangle stay in place. In cases where this isn’t desired, enable Raw edit mode by clicking the R button in the Inspector. This causes the anchor and pivot value to be able to be changed without any other values changing as a result. This will likely cause the rectangle to be visually moved or resized, since its position and size is dependent on the anchor and pivot values.

Источник

В этой первой части серии уроков, состоящей из трех частей, вы познакомитесь с 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

Источник

Pivot Editor for Unity

Available on Asset Store: https://assetstore.unity.com/packages/tools/utilities/adjust-pivot-112883

Forum Thread: https://forum.unity.com/threads/adjust-pivot-without-using-an-empty-parent-object-open-source.520178/

Discord: https://discord.gg/UJJt549AaV

Support the Developer ☕

This script allows you to change the pivot point of an object without having to create an empty GameObject as the pivot point. There are two types of pivot adjustments:

a. If the object does not have a mesh (MeshFilter, to be precise), then the script simply changes the positions and rotations of child objects accordingly

b. If the object does have a mesh, then the script first creates an instance of the mesh, adjusts the mesh’s pivot point by altering its vertices, normals and tangents, and finally changes the positions and rotations of child objects accordingly

Not tested with SkinnedMeshRenderer.

INSTALLATION

There are 5 ways to install this plugin:

import AdjustPivot.unitypackage via Assets-Import Package
clone/download this repository and move the Plugins folder to your Unity project’s Assets folder
import it from Asset Store
(via Package Manager) add the following line to Packages/manifest.json:
- "com.yasirkula.adjustpivot": "https://github.com/yasirkula/UnityAdjustPivot.git",
(via OpenUPM) after installing openupm-cli, run the following command:
- openupm add com.yasirkula.adjustpivot

HOW TO

Open the Adjust Pivot window via the Window-Adjust Pivot menu.

To change an object’s pivot point, you can create an empty child GameObject and move it to the desired pivot position. Then, you can press the Move X’s pivot here button to move the parent object’s pivot there. It is safe to delete the empty child object afterwards.

Note that if the object has a mesh (option b), to apply the changes to the prefab, you have to save the instantiated mesh to your project. Otherwise, the asset will be serialized in the scene and won’t be available to the prefab. You have two options there:

save the mesh as asset (.asset)
save the mesh as OBJ (.obj)

Afterwards, you can safely apply your changes to the prefab.

There are a few options that may be helpful in certain circumstances:

Create Child Collider Object On Pivot Change: imagine your object has a BoxCollider and you rotate the pivot by 45 degrees. A BoxCollider itself can not be rotated and therefore, your BoxCollider will no longer be aligned with your object. If you enable this option, however, a child object with a BoxCollider will be created and it will be aligned with your object properly. But be aware that the original BoxCollider will not be removed automatically to prevent any Inspector references to it from getting lost. You should remove the original BoxCollider manually
Create Child NavMesh Obstacle Object On Pivot Change: if enabled, a child object with NavMesh Obstacle component will be created automatically when pivot changes. This child object will be aligned with your object properly

Источник

Данный урок является частью серии, которая состоит из 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.

Источник