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

class in
UnityEngine

Inherits from:Transform

Implemented in:UnityEngine.CoreModule

Suggest a change

Success!

Thank you for helping us improve the quality of Unity Documentation. Although we cannot accept all submissions, we do read each suggested change from our users and will make updates where applicable.

Submission failed

For some reason your suggested change could not be submitted. Please <a>try again</a> in a few minutes. And thank you for taking the time to help us improve the quality of Unity Documentation.

Your name

Your email

Suggestion*

Cancel

Switch to Manual

Description

Position, size, anchor and pivot information for a rectangle.

RectTransforms are used for GUI but can also be used for other things.
It’s used to store and manipulate the position, size, and anchoring of a rectangle and supports various forms of scaling based on a parent RectTransform.

Note: The Inspector changes which properties are exposed based on which anchor preset is in use. For more information see Rect Transform and Basic Layout.

Properties

anchoredPosition	The position of the pivot of this RectTransform relative to the anchor reference point.
anchoredPosition3D	The 3D position of the pivot of this RectTransform relative to the anchor reference point.
anchorMax	The normalized position in the parent RectTransform that the upper right corner is anchored to.
anchorMin	The normalized position in the parent RectTransform that the lower left corner is anchored to.
drivenByObject	The object that is driving the values of this RectTransform. Value is null if not driven.
offsetMax	The offset of the upper right corner of the rectangle relative to the upper right anchor.
offsetMin	The offset of the lower left corner of the rectangle relative to the lower left anchor.
pivot	The normalized position in this RectTransform that it rotates around.
rect	The calculated rectangle in the local space of the Transform.
sizeDelta	The size of this RectTransform relative to the distances between the anchors.

Public Methods

Events

reapplyDrivenProperties

Event that is invoked for RectTransforms that need to have their driven properties reapplied.

Delegates

Inherited Members

Properties

gameObject	The game object this component is attached to. A component is always attached to a game object.
tag	The tag of this game object.
transform	The Transform attached to this GameObject.
hideFlags	Should the object be hidden, saved with the Scene or modifiable by the user?
name	The name of the object.
childCount	The number of children the parent Transform has.
eulerAngles	The rotation as Euler angles in degrees.
forward	Returns a normalized vector representing the blue axis of the transform in world space.
hasChanged	Has the transform changed since the last time the flag was set to ‘false’?
hierarchyCapacity	The transform capacity of the transform’s hierarchy data structure.
hierarchyCount	The number of transforms in the transform’s hierarchy data structure.
localEulerAngles	The rotation as Euler angles in degrees relative to the parent transform’s rotation.
localPosition	Position of the transform relative to the parent transform.
localRotation	The rotation of the transform relative to the transform rotation of the parent.
localScale	The scale of the transform relative to the GameObjects parent.
localToWorldMatrix	Matrix that transforms a point from local space into world space (Read Only).
lossyScale	The global scale of the object (Read Only).
parent	The parent of the transform.
position	The world space position of the Transform.
right	The red axis of the transform in world space.
root	Returns the topmost transform in the hierarchy.
rotation	A Quaternion that stores the rotation of the Transform in world space.
up	The green axis of the transform in world space.
worldToLocalMatrix	Matrix that transforms a point from world space into local space (Read Only).

Public Methods

BroadcastMessage	Calls the method named methodName on every MonoBehaviour in this game object or any of its children.
CompareTag	Checks the GameObject’s tag against the defined tag.
GetComponent	Returns the component of type if the GameObject has one attached.
GetComponentInChildren	Returns the Component of type in the GameObject or any of its children using depth first search.
GetComponentInParent	Returns the Component of type in the GameObject or any of its parents.
GetComponents	Returns all components of Type type in the GameObject.
GetComponentsInChildren	Returns all components of Type type in the GameObject or any of its children using depth first search. Works recursively.
GetComponentsInParent	Returns all components of Type type in the GameObject or any of its parents.
SendMessage	Calls the method named methodName on every MonoBehaviour in this game object.
SendMessageUpwards	Calls the method named methodName on every MonoBehaviour in this game object and on every ancestor of the behaviour.
TryGetComponent	Gets the component of the specified type, if it exists.
GetInstanceID	Gets the instance ID of the object.
ToString	Returns the name of the object.
DetachChildren	Unparents all children.
Find	Finds a child by name n and returns it.
GetChild	Returns a transform child by index.
GetLocalPositionAndRotation	Gets the position and rotation of the Transform component in local space (that is, relative to its parent transform).
GetPositionAndRotation	Gets the position and rotation of the Transform component in world space.
GetSiblingIndex	Gets the sibling index.
InverseTransformDirection	Transforms a direction from world space to local space. The opposite of Transform.TransformDirection.
InverseTransformPoint	Transforms position from world space to local space.
InverseTransformVector	Transforms a vector from world space to local space. The opposite of Transform.TransformVector.
IsChildOf	Is this transform a child of parent?
LookAt	Rotates the transform so the forward vector points at /target/’s current position.
Rotate	Use Transform.Rotate to rotate GameObjects in a variety of ways. The rotation is often provided as an Euler angle and not a Quaternion.
RotateAround	Rotates the transform about axis passing through point in world coordinates by angle degrees.
SetAsFirstSibling	Move the transform to the start of the local transform list.
SetAsLastSibling	Move the transform to the end of the local transform list.
SetLocalPositionAndRotation	Sets the position and rotation of the Transform component in local space (i.e. relative to its parent transform).
SetParent	Set the parent of the transform.
SetPositionAndRotation	Sets the world space position and rotation of the Transform component.
SetSiblingIndex	Sets the sibling index.
TransformDirection	Transforms direction from local space to world space.
TransformPoint	Transforms position from local space to world space.
TransformVector	Transforms vector from local space to world space.
Translate	Moves the transform in the direction and distance of translation.

Operators

bool	Does the object exist?
operator !=	Compares if two objects refer to a different object.
operator ==	Compares two object references to see if they refer to the same object.

Источник

Switch to Scripting

The Rect Transform component is the 2D layout counterpart of the Transform component. Where Transform represents a single point, Rect Transform represent a rectangle that a UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary element can be placed inside. If the parent of a Rect Transform is also a Rect Transform, the child Rect Transform can also specify how it should be positioned and sized relative to the parent rectangle.

Properties

*Property:*	*Function:*
Pos (X, Y, Z)	Position of the rectangle’s pivot point relative to the anchors. The pivot point is the location around which the rectangle rotates.
Width/Height	Width and height of the rectangle.
Left, Top, Right, Bottom	Positions of the rectangle’s edges relative to their anchors. This can be thought of as padding inside the rectangle defined by the anchors. Shown in place of Pos and Width/Height when the anchors are separated (see below). To access these options click the square Anchor Presets box at the top left of the RectTransform component.
AnchorsA UI layout tool that fixes a UI element to a parent element. Anchors are shown as four small triangular handles in the Scene View and anchor information is also shown in the Inspector. More info See in Glossary	The anchor points for the lower left corner and the upper right corner of the rectangle.
Min	The anchor point for the lower left corner of the rectangle defined as a fraction of the size of the parent rectangle. 0,0 corresponds to anchoring to the lower left corner of the parent, while 1,1 corresponds to anchoring to the upper right corner of the parent.
Max	The anchor point for the upper right corner of the rectangle defined as a fraction of the size of the parent rectangle. 0,0 corresponds to anchoring to the lower left corner of the parent, while 1,1 corresponds to anchoring to the upper right corner of the parent.
Pivot	Location of the pivot point around which the rectangle rotates, defined as a fraction of the size of the rectangle itself. 0,0 corresponds to the lower left corner while 1,1 corresponds to the upper right corner.
Rotation	Angle of rotation (in degrees) of the object around its pivot point along the X, Y and Z axis.
Scale	Scale factor applied to the object in the X, Y and Z dimensions.
Blueprint Mode	Edit RectTransforms as if they were not rotated and scaled. This enabled snapping too.
Raw Edit Mode	When enabled, editing pivot and anchor values will not counter adjust the position and size of the rectangle in order to make it stay in one place.

Details

Note that some RectTransform calculations are performed at the end of a frame, just before calculating UI vertices, in order to ensure that they are up to date with all the latest changes performed throughout the frame. This means that they haven’t yet been calculated for the first time in the Start callback and first Update callback.

You can work around this by creating a Start() callback and adding Canvas.ForceUpdateCanvases() method to it. This will force Canvas to be updated not at the end of the frame, but when that method is called.

See the Basic Layout page for a full introduction and overview of how to use the Rect Transform.

Источник

Как через скрипт поменять позицию компонента RectTransform

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

Пример:
Public RectTransform Obj;

хочу у Obj менять позицию, а именно двигать Obj по осям: Left, Right, Top , Bottom , раньше вместо этих Left, Bottom, были X и Y итд.

Shakhban: UNIт; Сообщения: 62; Зарегистрирован: 01 ноя 2017, 04:33

Re: Как через скрипт поменять позицию компонента RectTransform

lawson 03 дек 2018, 06:48

Используется csharp

obj.transform.localPosition = new Vector2(100, 100);

lawson: UNIверсал; Сообщения: 481; Зарегистрирован: 14 сен 2012, 21:20

Re: Как через скрипт поменять позицию компонента RectTransform

DimaJoke 03 дек 2018, 18:23

Попробуй где transform.position написать RectTransform.position, если честно-хз, как это именно надо в коде писать, но типо того.

Что бы повзрослеть, человек должен преодолеть ошибки юности.

Поэтому я снова здесь..

DimaJoke

UNITрон

Сообщения: 293

Зарегистрирован: 12 авг 2018, 18:59

Откуда: Ульяновск

Сайт

Re: Как через скрипт поменять позицию компонента RectTransform

Shakhban 04 дек 2018, 00:39

не выходит, даже пробовал obj.rect.Set (100,19,18,0); все равно ничего не работает, а obj.transform.localposition работает неправильно, на оф сайте про этот компонент ничего, только написано про якоря и прочью дичь которая уже устарела

Shakhban: UNIт; Сообщения: 62; Зарегистрирован: 01 ноя 2017, 04:33

Re: Как через скрипт поменять позицию компонента RectTransform

Anonymyx 04 дек 2018, 01:11

С каких пор якоря устарели?
То что вы видите в инспекторе — значения смещения элемента относительно якоря, который вы установили. Установите якорь в центр, тогда вернутся Х и Y.
А раз там смещения, то очевидно за эти значения отвечают поля rectTransform.offsetMin и offsetMax.

Anonymyx: Адепт; Сообщения: 1973; Зарегистрирован: 05 апр 2015, 15:55

Re: Как через скрипт поменять позицию компонента RectTransform

Shakhban 04 дек 2018, 02:02

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

Shakhban: UNIт; Сообщения: 62; Зарегистрирован: 01 ноя 2017, 04:33

Re: Как через скрипт поменять позицию компонента RectTransform

Shakhban 04 дек 2018, 21:23

Вопрос закрыт, я разобрался с этим, как всегда методом тыка

Shakhban: UNIт; Сообщения: 62; Зарегистрирован: 01 ноя 2017, 04:33

Re: Как через скрипт поменять позицию компонента RectTransform

Friend123 04 дек 2018, 23:44

Shakhban писал(а):Вопрос закрыт, я разобрался с этим, как всегда методом тыка

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

Friend123

Старожил

Сообщения: 701

Зарегистрирован: 26 фев 2012, 22:12

Откуда: Тверь

Re: Как через скрипт поменять позицию компонента RectTransform

Alex777 30 апр 2021, 17:18

Вот кому-то и пригодилось!)) Спасибо!

Alex777: UNец; Сообщения: 6; Зарегистрирован: 15 дек 2020, 12:30

Вернуться в Почемучка

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 22

Источник

к Руководству

класс в UnityEngine / Наследует от: Transform / Реализовано в: UnityEngine.CoreModule

Описание

Информация о положении, размере, привязке и повороте прямоугольника.

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

Примечание. Инспектор меняет отображаемые свойства в зависимости от используемой предустановки привязки. Дополнительную информацию см. в разделах Прямое преобразование и Базовый макет.

Свойства

anchoredPosition	Положение опорной точки этого RectTransform относительно контрольной точки привязки.
anchoredPosition3D	Трехмерное положение точки поворота этого RectTransform относительно контрольной точки привязки.
anchorMax	Нормализованная позиция в родительском RectTransform, к которой привязан правый верхний угол.
anchorMin	Нормализованная позиция в родительском RectTransform, к которой привязан нижний левый угол.
offsetMax	Смещение правого верхнего угла прямоугольника относительно правого верхнего привязки.
offsetMin	Смещение нижнего левого угла прямоугольника относительно нижней левой привязки.
pivot	Нормализованная позиция в этом RectTransform, вокруг которой он вращается.
rect	Вычисленный прямоугольник в локальном пространстве Transform.
sizeDelta	Размер этого RectTransform относительно расстояний между якорями.

Публичные Методы

События

reapplyDrivenProperties

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

Делегаты

Унаследованные члены

Свойства

gameObject	Игровой объект, к которому прикреплен этот компонент. Компонент всегда привязан к игровому объекту.
tag	Тег этого игрового объекта.
transform	Преобразование, прикрепленное к этому игровому объекту.
hideFlags	Должен ли объект быть скрыт, сохранен вместе со сценой или изменен пользователем?
name	Имя объекта.
childCount	Количество дочерних элементов родительского преобразования.
eulerAngles	Вращение в виде углов Эйлера в градусах.
forward	Возвращает нормализованный вектор, представляющий синюю ось преобразования в мировом пространстве.
hasChanged	Изменилось ли преобразование с тех пор, как в последний раз флаг был установлен на «false»?
hierarchyCapacity	Емкость преобразования иерархической структуры данных преобразования.
hierarchyCount	Количество преобразований в иерархической структуре данных преобразования.
localEulerAngles	Вращение как угол Эйлера в градусах относительно вращения родительского преобразования.
localPosition	Положение преобразования относительно родительского преобразования.
localRotation	Поворот преобразования относительно поворота преобразования родителя.
localScale	Масштаб преобразования относительно родителя GameObjects.
localToWorldMatrix	Матрица, преобразующая точку из локального пространства в мировое пространство (только для чтения).
lossyScale	Глобальный масштаб объекта (только для чтения).
parent	Родитель преобразования.
position	Положение Transform в мировом пространстве.
right	Красная ось преобразования в мировом пространстве.
root	Возвращает самое верхнее преобразование в иерархии.
rotation	Кватернион, хранящий вращение Преобразования в мировом пространстве.
up	Зеленая ось трансформации в мировом пространстве.
worldToLocalMatrix	Матрица, преобразующая точку из мирового пространства в локальное пространство (только для чтения).

Публичные Методы

BroadcastMessage	Вызывает метод с именем methodName для каждого MonoBehaviour в этом игровом объекте или любом из его дочерних элементов.
CompareTag	Помечен ли этот игровой объект тегом ?
GetComponent	Возвращает компонент типа Type, если он прикреплен к GameObject, и null, если нет. Также вернет отключенные компоненты.
GetComponentInChildren	Возвращает компонент типа Type в GameObject или любом из его дочерних элементов, используя поиск в глубину.
GetComponentInParent	Возвращает компонент типа Type в GameObject или любом из его родителей.
GetComponents	Возвращает все компоненты типа Type в GameObject.
GetComponentsInChildren	Возвращает все компоненты типа Type в GameObject или любом из его дочерних элементов. Работает рекурсивно.
GetComponentsInParent	Возвращает все компоненты типа Type в GameObject или любом из его родителей.
SendMessage	Вызывает метод с именем methodName для каждого MonoBehaviour в этом игровом объекте.
SendMessageUpwards	Вызывает метод с именем methodName для каждого MonoBehaviour в этом игровом объекте и для каждого предка поведения.
TryGetComponent	Получает компонент указанного типа, если он существует.
GetInstanceID	Возвращает идентификатор экземпляра объекта.
ToString	Возвращает имя объекта.
DetachChildren	Отменяет родитель всех дочерних элементов.
Find	Находит дочерний элемент по n и возвращает его.
GetChild	Возвращает дочерний элемент преобразования по индексу.
GetSiblingIndex	Получает одноуровневый индекс.
InverseTransformDirection	Преобразует направление из мирового пространства в локальное. Противоположность Transform.TransformDirection.
InverseTransformPoint	Преобразует позицию из мирового пространства в локальное пространство.
InverseTransformVector	Преобразует вектор из мирового пространства в локальное. Противоположность Transform.TransformVector.
IsChildOf	Является ли это преобразование потомком родителя?
LookAt	Поворачивает преобразование таким образом, чтобы прямой вектор указывал на /target/ текущую позицию.
Rotate	Используйте Transform.Rotate для поворота игровых объектов различными способами. Поворот часто предоставляется как угол Эйлера, а не как кватернион.
RotateAround	Поворачивает трансформацию вокруг оси, проходящей через точку в мировых координатах, на угловые градусы.
SetAsFirstSibling	Переместите преобразование в начало локального списка преобразований.
SetAsLastSibling	Переместите преобразование в конец списка локальных преобразований.
SetParent	Установите родителя преобразования.
SetPositionAndRotation	Задает положение в мировом пространстве и поворот компонента Transform.
SetSiblingIndex	Устанавливает индекс родственного элемента.
TransformDirection	Изменяет направление из локального пространства в мировое.
TransformPoint	Преобразует положение из локального пространства в мировое.
TransformVector	Преобразует вектор из локального пространства в мировое.
Translate	Перемещает преобразование в направлении и на расстояние перевода.

Статические Методы

Destroy	Удаляет игровой объект, компонент или ресурс.
DestroyImmediate	Немедленно уничтожает объект obj. Вместо этого вам настоятельно рекомендуется использовать Destroy.
DontDestroyOnLoad	Не уничтожайте целевой объект при загрузке новой сцены.
FindObjectOfType	Возвращает первый активный загруженный объект типа Type.
FindObjectsOfType	Получает список всех загруженных объектов типа Type.
Instantiate	Клонирует исходный объект и возвращает клон.

Операторы

bool	Объект существует?
operator !=	Сравнивает, ссылаются ли два объекта на другой объект.
operator ==	Сравнивает две ссылки на объекты, чтобы определить, ссылаются ли они на один и тот же объект.

Источник

Let’s talk about the behavior of a RectTransform.

The RectTransform is an extension of the Unity Transform. It adds some extra variables and functionality on top of the Transform class for 2D GUIs.

Screenshot of the API documentation for RectTransform, highlighting that the class inherits from the Transform class.

The Heirarchy

The RectTransform, like it’s Transform base class, is a transformation hierarchy. That’s where a node in a tree data structure has a position, location, and scale, but those attributes are also affected (compounded) by their parent nodes.

Instead of just 3D transform variables (position, location, and scale), it also includes support for positioning itself on a 2D rectangle. And while the RectTransform keeps the 3D Transform variables and can have nodes with depth and rotation – they typically don’t except for animated effects. It’s a hierarchy because a GameObject with a RectTransform will have (or at least should have) children GameObjects that also have RectTransforms.

A GameObject with a RectTransform is usually expected to have children with a RectTransform – all the way up to a Canvas root. The GameObject owning that Canvas is often a root GameObject. “root” means it doesn’t have a parent and is owned directly by the scene).

An example of a screen space UI in scene hierarchy, and a diagrammed version of it. Things to notice: the Canvas belongs of a root GameObject; the canvas has a RectTransform; all children of RectTransforms use RectTransform instead of the traditional Transform behavior.

The Coordinate System

Let’s go over the basic coordinate system of the Canvas component, which is the root of a UI with UGUI.

The coordinate system for the UI uses Unity’s world coordinates, where:

the positive X axis goes right
the positive Y axis goes up
and the positive Z axis is forward (into the screen).

The Canvas exists in the scene like any other GameObject and Behaviour, but is defaulted to the “UI” layer. Usually the entire hierarchy under the Canvas is also assigned into the UI layer.

The Canvas (and all other UI elements – with RectTransforms) at defaulted to the layer UI.

The Render Mode parameter for the Canvas Behavior. Notice the two Screen Space enums.

The default Render Mode, Screen Space, will control the dimensions and placement of the Canvas. The bottom left corner will be the origin, and the center pivot will be <0.5, 0.5>, which is smack dab in the middle of the rectangle.

Left) Showing the world coordinates of Unity. Middle) The screen space Canvas is placed in the world, with the bottom left corner of the Canvas flush with the world origin. The width and the height are the same dimensions as the viewport. Right) The Canvas‘ coordinate system uses the middle as its origin.

The dimensions of the Canvas will match the viewport – with each unit being a pixel.

The viewport is the graphical output where the UI will be shown.
- In the editor it’s the preview area in the Game tab
- When deployed it’s the area your app is drawn in.

While the units of 3D objects are expected to be in meters, since UI elements use pixels for units, and displays can be hundreds to thousands of pixels in dimensions, meaning your UI will overshadow other 3D things in the scene view – and it might feel awkward, but this is normal.

The UI (and other layers) can have their visibility toggled in the scene using the Layers pulldown on the top right of the editor.

Quicktip! If you find a huge UI in the world off-putting, or if it’s so large you find yourself constantly selecting stuff in the UI by accident, you can disable its visibility, or disable the editor’s ability to select UI stuff in the Layers pull-down.

Placement in the Hierarchy

It’s already been mentioned, but the Canvas dimensions and variables are not directly in your control. Control of the position of the Canvas (in Screen Space modes) is meaningless anyways since it’s always going to be matched to the viewport. The pivot and origin is always in the center.

When a Canvas is in a Screen Space Render Mode, the attributes of its RectTransform cannot be edited. The width and the height are forced to match the viewport, the position is set to half its dimensions and and the pivot is forced to <0.5, 0.5>.

What about everything else? What about for every other RectTransform in the Canvas‘ hierarchy? The placement of their content is based on 7 RectTransform variables (anchoredPosition, anchorMax, anchorMin, offsetMax, offsetMin, pivot, sizeDelta), and these same values but for the RectTransform‘s parent.

We’ll see later on it’s actually only 5 variables, but play along for now!

Using the RectTransform variables, a 2D rectangle will be defined where the UI content should exist, and children RectTransforms will reference that to generate their own rectangle regions.

Note that there are other factors that can change how a RectTransfom is placed, such as 3D properties and the rotation and scale variables inherited from the Transform class. We’re mostly going to ignore them for this article – and always assume everything in the UI hierarchy has a localScale of Vector2.one, and a localRotation of Quaternion.identity.

An example of a RectTransform hierarchy. Children RectTransforms can define where the corners of their UI are using the corners of their parent’s RectTransform as reference points. The references are labeled with arrows. This goes all the way up to the root (the Canvas), which does the same by matching its corners to fill the viewport (in this example, the application is running fullscreen). Note that as long as the resolution doesn’t dramatically change, if the aspect-ratio/resolution of the screen changes, the UI properly adapts to the new corner landmarks of the viewport on its own.

Fullscreen

An example of a UI Graphic refusing to draw because it has an inside-out rectangle.

Before we continue, I just want to mention you should avoid RectTransforms that are inside-out (that have a negative width or height). Unity will refuse to draw them and will warn you about them by drawing a red X across their rectangle in the scene tab.

The Anchor Min/Max Variables

The anchor variables are of type Vector2, and the x and y components are expected to go between 0.0 and 1.0. These values reference the parent’s region.

For the x components
- a value of 0.0 means the very left of a parents region
- and 1.0 means the right of the parent’s region.
For the y component
- a value of 0.0 means the bottom of the parent’s region
- and 1.0 means the top of the parent’s region.

Diagram of how anchorMin and anchorMax are used to represent a rectangle as proportions of a parent’s rectangle.

anchorMin defines where the bottom-left corner of the RectTransform‘s rectangle will be, based off the parent’s rect.
anchorMax defines where the top-right corner of the RectTransform‘s rectangle will be based off the parent’s rect.

The values for anchorMin and anchorMax can be coded to go lower than 0.0 or higher than 1.0, although usually it doesn’t make sense to. Also note that a min and max anchor can have the same value. This does not mean the rect is fully collapsed, because this is only the first step to figuring setting the RectTransform’s placement.

A few examples:

Example diagrams of various anchorMin and anchorMax values, when offsetMin, offsetMax, pivot and sizeDelta are ignored.

top left – The child RectTransform expands to the full size of the parent because the minimum is set to be the parent’s minimum, and the maximums the same.
top right – Specifying both min and max to the top right corner of the parent (this makes more sense later when we also use offsetMin and offsetMax.
middle left – Setting the child to be the center third of the parent.
middle right – Setting the child to be 10% from the left, all the way up to the horizontal middle. Vertically it starts 25% down from the top, and matches the parent’s bottom.
bottom left – Matches the parent’s vertical space, but only extends out 1/5 the width from the parent’s left.
bottom right – Matches the parent’s vertical space, but only the left edge.

There’s a series of steps to find the rectangular region of a child RectTransform inside a parent. The anchors are the first step – they define a proportional rectangle inside the parent – the next step to define offsets from the corners of that proportional rectangle.

The Offset Min/Max Variables

The offsetsMin and offsetMax specify pixel offsets from the corners that anchorMin and anchorMax define. That’s all it is.

Take the resulting point you get from anchorMin and add offsetMin to it to get the rectangle’s new bottom left.
Take the resulting point you get from anchorMax and add offsetMax to it to get the rectangle’s new bottom right.

This extra piece of the formula makes it clear why we would ever want to have anchorMin and anchorMax match, because we can add a constant offset of them afterwards.

Also note that nothing has changed with the coordinate convention. Positive x values still go right, positive y values still go up. This applies for both the offsetMin and offsetMax.

Adding pixel offsets to the anchors to figure out a child’s final rectangular region within a parent.

MoAr examples:

Examples for offsetMin and offsetMax. While they are unlabeled, they can be identified which which references the bottom-left or top-right anchor, or results in the final min or max position.

top left – Anchors were set to take up the full parent, but offsets were added to inset a constant amount.
top right – offsets were added to create a frame around where anchors were evaluated.
middle left – Anchors were both set to the center, and offsets were applied – creating a rectangle of a constant size at the center of the parent.
middle right – Anchors were both set to the top left, and negative offsets were applied – creating a rectangle of a consistent pixel size offset from the parent’s top left.
bottom left – Similar to the top left example, but the anchorMax only extended halfway across the parent horizontally.
bottom right – Anchors were set to the left edge. offsetMax.x was increased. This results in a left-aligned rectangle that takes up the entire parent height, but has a constant pixel width.

In the diagrams the offsetMin and offsetMax are not labeled, but you can tell which is which. The arrow that ends up in the max (top-left) is the offsetMax, and the other is the offsetMin. Also, the offsetMax will be seen radiating from the anchorMax, and same for the offsetMin and anchorMin.

The sizeDelta Variable

Kids, I think you’re finally old enough to learn the truth. Santa isn’t real! You already knew that? What about the Easter Bunny? You knew that too? Hmm… what about… offsetMin and offsetMax. No!? Sweet!! offsetMin and offsetMax aren’t real member variables! They’re just C# properties based on a combination of other variables!
Muahaha!

“What does that even mean!? They’re OBVIOUSLY there, and ALL the RectTransform variables are properties!!”
Whoa, reader! Calm down! Well, let’s take a look at the RectTransform definitions in Visual Studio and compare them to the inspector in Debug Mode.

Side note for those who are new to C#, properties are accessor and setter functions that look like variables, that are implemented with C#’s {get;set} syntax.

A side-by-side of RectTransform’s API, and a RectTransform in the Unity debug Inspector. There’s a lot in common, but offsetMin and offsetMax are missing in the inspector.

You’ll notice that the offsetMin and offsetMax aren’t there – while some other properties exist, with their real variables names slightly modified. So what really is offsetMin and offsetMax? – what is sizeDelta – and how are they all related?

sizeDelta is the size, in pixels applied on top of the anchors. Wait,… isn’t that part of what offsetMin and offsetMax are? Yes! The extra pixel regions added from offsetMin and offsetMax are equal to sizeDelta – or if sizeDelta is negative, the space removed instead of added (such as from an inset).

// Not usable code, just using a code-like syntax to make a statement
RectTransform rt;

rt.sizeDelta == rt.offsetMax - rt.offsetMin;

So if offsetMin and offsetMax aren’t real (just properties), and when combined they equal sizeDelta, and sizeDelta is the extra (or deficit) space that exists on top of the space claimed from anchorMin and anchorMax referencing the parent space – what decides how to split the space in sizeDelta to distribute into offsetMin and offsetMax?

The Pivot Variable

The pivot value decides what percentage of sizeDelta goes into offsetMin, and what percentage goes into offsetMax.

// Not usable code, just using similar syntax to make a statement
RectTransform rt;

rt.offsetMin.x = -rt.pivot.x * rt.sizeDelta.x + anchoredPosition.x;
rt.offsetMin.y = -rt.pivot.y * rt.sizeDelta.y + anchoredPosition.y;

rt.offsetMax.x = (1.0f - rt.pivot.x) * rt.sizeDelta.x + anchoredPosition.x;
rt.offsetMax.y = (1.0f - rt.pivot.y) * rt.sizeDelta.y + anchoredPosition.y;

We haven’t covered anchoredPosition yet, but all you need to know is that it’s just some position offset variable.

So the pivot is like a percentage value, it cuts a portion of sizeDelta and assigns it to offsetMin, and the rest to offsetMax.

Is that all there is to it? No. We have to remember the RectTransform is based on the Transform class. The Transform has a localPosition, localRotation and localScale. The localPosition is the origin of the GameObject‘s coordinate space that stuff rotates and scales around (or a pivot point, if you will – see where this is going?). If the user rotates or scales a RectTransform, how do we let developers author where in the rectangle that happens? The pivot is how.

After and anchors are calculated, a rectangle is created (or a line or point, if the rectangle is collapsed because the width and/or height is 0). If we treat the pivot as horizontal and vertical proportions to travel into that rectangle, that resulting point is where the localPosition of the transform will be placed.

When the translate gizmo is shown for RectTransform that’s set to stretch horizontally and vertically, changing the pivot won’t change the rectangle (or children content). But, you can notice the transform gizmo changing position. That is because the underlying Transform.localPosition value is changing.

So the pivot defines where the actual Transform‘s position is, and the rest of the content (geometry) is offset so that it’s correctly placed based off that defined origin. And if/when the RectTransform is rotated or scaled, it does so from the origin (the exact same way it would for a 3D model) which is defined by the authored pivot value.

anchoredPosition

On top of everything, anchoredPosition is a final offset added to the position. Changing this value will even move the base Transform‘s localPosition so that the pivot will stay the same.

Earlier we covered how offsetMin and offsetMax aren’t real, but are just portions of sizeDelta. But there’s one last piece of the puzzle,… translations.

For example,
an anchorMin of Vector2(-3, -5) and an anchorMax of Vector2(37, 45)
will have the same sizeDelta as
an anchorMin of Vector2(-33, -45) and an anchorMax of Vector2(7, 5).

They result in the same sizeDelta (<40, 50>) even though they’re different offset values – this translation for the offset values is defined by anchoredPosition.

Two Modes of Coding RectTransforms

We’ve done it! We’ve done a deep dive of all the variables (I feel like I phoned it in for anchoredPosition, but this is turning into a long article) Along the way, we talked about how offsetMin and offsetMax aren’t variables in the RectTransform, but instead are properties dependent on anchoredPosition, pivot, and sizeDelta.

When coding the placement of a RectTransform in C#, there are two ways to go about it:

Specify offsetMin and offsetMax and let the anchoredPosition and sizeDelta be modified as a side-effect.
Modify the anchoredPosition and sizeDelta, and forget about offsetMin and offsetMax.

Both of these methods require modifying the anchorMin, anchorMax and pivot if you want to make sure the RectTransform is fully set.

In this example, because the anchorMin and anchorMax at both at the top left, anchoredPosition and sizeDelta are used to directly specify the location and dimensions.

I find myself using both (offsetMin/offsetMax vs anchoredPosition/sizeDelta) depending on the situation.

If I collapse the anchorMin and offsetMin by setting them to the same value, I’ll usually use anchoredPosition and sizeDelta and think of them as the sprite’s position and size. In the image above, the anchorMin and anchorMax are set to the top left. Because of this, anchoredPosition and sizeDelta can be used to directly specify the pixel position and dimensions. While this is possible with offsetMin and offsetMax – for these situations I find offsetsMin/Max less intuitive to comprehend, and less intuitive to read in code.

If I have different values for anchorMin and anchorMax, I’ll use offsetMin and offsetMax because it’s more intuitive for thinking about applying constant pixel offsets to a rectangular region that can dynamically resize when its parent RectTransform resizes.

The Relationships & Utilities

So with everything defined, let’s get to what we came here for,… identities!

// Not usable code, just using similar syntax to make a statement
RectTransform rt;

// rt.anchorMin is not based off anything, it's an independent variable.
// rt.anchorMax is not based off anything, it's an independent variable.
// rt.pivot is not based off anything, it's an independent variable.

// I'm going to use a <==> symbol to signify a two way mapping. This is not legal syntax.

rt.sizeDelta <==> rt.offsetMax - rt.offsetMin;

rt.offsetMin <==> -Vector2.Scale(rt.pivot, rt.sizeDelta) + rt.anchoredPosition;
rt.offsetMax <==> Vector2.Scale(Vector.one - rt.pivot, rt.sizeDelta) + rt.anchoredPosition

rt.anchoredPosition.x <==> Mathf.lerp(rt.offsetMin.x, rt.offsetMax.x, rt.pivot.x);
rt.anchoredPosition.y <==> Mathf.lerp(rt.offsetMin.y, rt.offsetMax.y, rt.pivot.y);

What about calculating the Transform‘s localPosition and world Position? It’s tricky because the localPosition and the RectTransform‘s rectangle is based off the pivot, anchors, and anchoredPosition. Not only that, but it also depends on the parent RectTransform and those issues also apply to the parent’s content and position – and the parent’s parent, and the parent’s parent’s parent, and… While there may be a simple formula, I can’t think of a generic one, and some non-trivial linear algebra and hierarchy traversal will probably be involved.

But, the RectTransform comes with helpful utility functions to get the local and world corners for you!
[RectTransform.GetLocalCorners][RectTransform.GetWorldCorners]

If you have pixel position in world coordinates, also don’t forget you can use the RectTransform’s parent-class’ Transform.InverseTransformPoint function to convert that world position to a local position, which will then should then be compatible with RectTransform.GetLocalCorners().

If you want the results of GetLocalCorners() but don’t care about ordered 3D points, but care about the final local size and position, RectTransform.rect is useful. I don’t find the position that useful, but I find myself getting the rect’s size very often for my procedurally generated GUIs.[example]

If you just need to do collision tests with pixels, the RectTransformUtility class has some helpful functions.

– Stay strong, code on. William Leu

Explore more articles here.
More articles about Unity here.

Источник

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

Источник