Dossier complet

This commit is contained in:
2025-01-17 13:04:56 +01:00
commit 649efce666
15116 changed files with 970754 additions and 0 deletions

View File

@@ -0,0 +1,4 @@
# Changelog
## [1.0.0] - 2019-01-08
This is the first release of Unity UI as a built in package.

View File

@@ -0,0 +1,7 @@
fileFormatVersion: 2
guid: c851bee4305bddf438cc6ffc515991ce
TextScriptImporter:
externalObjects: {}
userData:
assetBundleName:
assetBundleVariant:

View File

@@ -0,0 +1,37 @@
# Event System
The Event System is a way of sending events to objects in the application based on input, be it keyboard, mouse, touch, or custom input. The Event System consists of a few components that work together to send events.
When you add an Event System component to a GameObject you will notice that it does not have much functionality exposed, this is because the Event System itself is designed as a manager and facilitator of communication between Event System modules.
The primary roles of the Event System are as follows:
- Manage which GameObject is considered selected
- Manage which Input Module is in use
- Manage Raycasting (if required)
- Updating all Input Modules as required
## Input Modules
An Input Module is where the main logic of how you want the Event System to behave lives, they are used for:
- Handling Input
- Managing event state
- Sending events to scene objects.
Only one Input Module can be active in the Event System at a time, and they must be components on the same GameObject as the Event System component.
If you want to write a custom Input Module, send events supported by existing UI components in Unity. To extend and write your own events, see the [Messaging System](MessagingSystem.md) documentation.
## Raycasters
Raycasters are used for figuring out what the pointer is over. It is common for Input Modules to use the Raycasters configured in the Scene to calculate what the pointing device is over.
There are 3 provided Raycasters that exist by default:
- [Graphic Raycaster](script-GraphicRaycaster.md) - Used for UI elements
- [Physics 2D Raycaster](script-Physics2DRaycaster.md) - Used for 2D physics elements
- [Physics Raycaster](script-PhysicsRaycaster.md) - Used for 3D physics elements
If you have a 2d / 3d Raycaster configured in your Scene, it is easy to make non-UI elements receive messages from the Input Module. Simply attach a script that implements one of the event interfaces. For examples of this, see the [IPointerEnterHandler](xref:UnityEngine.EventSystems.IPointerEnterHandler) and [IPointerClickHandler](xref:UnityEngine.EventSystems.IPointerClickHandler) Scripting Reference pages.

View File

@@ -0,0 +1,11 @@
# Event System Reference
This section provides details about the following parts of the event system:
- [Event System Manager](script-EventSystem.md)
- [Graphic Raycaster](script-GraphicRaycaster.md)
- [Physics Raycaster](script-PhysicsRaycaster.md)
- [Physics2D Raycaster](script-Physics2DRaycaster.md)
- [Standalone Input Module](script-StandaloneInputModule.md)
- [Touch Input Module](script-TouchInputModule.md)
- [Event Trigger](script-EventTrigger.md)

View File

@@ -0,0 +1,35 @@
# Creating UI elements from scripting
If you are creating a dynamic UI where UI elements appear, disappear, or change based on user actions or other actions in the game, you may need to make a script that instantiates new UI elements based on custom logic.
## Creating a prefab of the UI element
In order to be able to easily instantiate UI elements dynamically, the first step is to create a prefab for the type of UI element that you want to be able to instantiate. Set up the UI element the way you want it to look in the Scene, and then drag the element into the Project View to make it into a prefab.
For example, a prefab for a button could be a Game Object with a Image component and a Button component, and a child Game Object with a Text component. Your setup might be different depending on your needs.
You might wonder why we don't have a API methods to create the various types of controls, including visuals and everything. The reason is that there are an infinite number of way e.g. a button could be setup. Does it use an image, text, or both? Maybe even multiple images? What is the text font, color, font size, and alignment? What sprite or sprites should the image use? By letting you make a prefab and instantiate that, you can set it up exactly the way you want. And if you later want to change the look and feel of your UI you can just change the prefab and then it will be reflected in your UI, including the dynamically created UI.
## Instantiating the UI element
Prefabs of UI elements are instantiated as normal using the Instantiate method. When setting the parent of the instantiated UI element, it's recommended to do it using the Transform.SetParent method with the worldPositionStays parameter set to false.
## Positioning the UI element
A UI Element is normally positioned using its Rect Transform. If the UI Element is a child of a Layout Group it will be automatically positioned and the positioning step can be skipped.
When positioning a Rect Transform it's useful to first determine it has or should have any stretching behavior or not. Stretching behavior happens when the anchorMin and anchorMax properties are not identical.
For a non-stretching Rect Transform, the position is set most easily by setting the anchoredPosition and the sizeDelta properties. The anchoredPosition specifies the position of the pivot relative to the anchors. The sizeDelta is just the same as the size when there's no stretching.
For a stretching Rect Transform, it can be simpler to set the position using the offsetMin and offsetMax properties. The offsetMin property specifies the corner of the lower left corner of the rect relative to the lower left anchor. The offsetMax property specifies the corner of the upper right corner of the rect relative to the upper right anchor.
## Customizing the UI Element
If you are instantiating multiple UI elements dynamically, it's unlikely that you'll want them all to look the same and do the same. Whether it's buttons in a menu, items in an inventory, or something else, you'll likely want the individual items to have different text or images and to do different things when interacted with.
This is done by getting the various components and changing their properties. See the scripting reference for the Image and Text components, and for how to work with UnityEvents from scripting.

View File

@@ -0,0 +1,63 @@
# Making UI elements fit the size of their content
Normally when positioning a UI element with its Rect Transform, its position and size is specified manually (optionally including behavior to stretch with the parent Rect Transform).
However, sometimes you may want the rectangle to be automatically sized to fit the content of the UI element. This can be done by adding a component called Content Size Fitter.
## Fit to size of Text
In order to make a Rect Transform with a Text component on it fit the text content, add a Content Size Fitter component to the same Game Object which has the Text component. Then set both the Horizontal Fit and Vertical Fit dropdowns to the Preferred setting.
### How does it work?
What happens here is that the Text component functions as a Layout Element that can provide information about how big its minimum and preferred size is. In a manual layout this information is not used. A Content Size Fitter is a type of Layout Controller, which listens to layout information provided by Layout Elements and control the size of the Rect Transform according to this.
### Remember the pivot
When UI elements are automatically resized to fit their content, you should pay extra attention to the pivot of the Rect Transform. The pivot will stay in place when the element is resized, so by setting the pivot position you can control in which direction the element will expand or shrink. For example, if the pivot is in the center, then the element will expand equally in all directions, and if the pivot is in the upper left corner, then the element will expand to the right and down.
## Fit to size of UI element with child Text
If you have a UI element, such as a Button, that has a background image and a child Game Object with a Text component on it, you probably want the whole UI element to fit the size of the text - maybe with some padding.
In order to do this, first add a Horizontal Layout Group to the UI element, then add a Content Size Fitter too. Set the Horizontal Fit, the Vertical Fit, or both to the Preferred setting. You can add and tweak padding using the padding property in the Horizontal Layout Group.
Why use a Horizontal Layout Group? Well, it could have been a Vertical Layout Group as well - as long as there is only a single child, they produce the same result.
### How does it work?
The Horizontal (or Vertical) Layout Group functions both as a Layout Controller and as a Layout Element. First it listens to the layout information provided by the children in the group - in this case the child Text. Then it determines how large the group must be (at minimum, and preferably) in order to be able to contain all the children, and it functions as a Layout Element that provides this information about its minimum and preferred size.
The Content Size Fitter listens to layout information provided by any Layout Element on the same Game Object - in this case provided by the Horizontal (or Vertical) Layout Group. Depending on its settings, it then controls the size of the Rect Transform based on this information.
Once the size of the Rect Transform has been set, the Horizontal (or Vertical) Layout Group makes sure to position and size its children according to the available space. See the page about the Horizontal Layout Group for more information about how it controls the positions and sizes of its children.
## Make children of a Layout Group fit their respective sizes
If you have a Layout Group (horizontal or vertical) and want each of the UI elements in the group to fit their respective content, what do you do?
You can't put a Content Size Fitter on each child. The reason is that the Content Size Fitter wants control over its own Rect Transform, but the parent Layout Group also wants control over the child Rect Transform. This creates a conflict and the result is undefined behavior.
However, it isn't necessary either. The parent Layout Group can already make each child fit the size of the content. What you need to do is to disable the Child Force Expand toggles on the Layout Group. If the children are themselves Layout Groups too, you may need to disable the Child Force Expand toggles on those too.
Once the children no longer expand with flexible width, their alignment can be specified in the Layout Group using the Child Alignment setting.
What if you want some of the children to expand to fill additional available space, but not the other children? You can easily control this by adding a Layout Element component to the children you want to expand and enabling the Flexible Width or Flexible Height properties on those Layout Elements. The parent Layout Group should still have the Child Force Expand toggles disabled, otherwise all the children will expand flexibly.
### How does it work?
A Game Object can have multiple components that each provide layout information about minimum, preferred and flexible sizes. A priority system determines which values take effect over others. The Layout Element component has a higher priority than the Text, Image, and Layout Group components, so it can be used to override any layout information values they provide.
When the Layout Group listens to the layout information provided by the children, it will take the overridden flexible sizes into account. Then, when controlling the sizes of the children, it will not make them any bigger than their preferred sizes. However, if the Layout Group has the Child Force Expand option enabled, it will always make the flexible sizes of all the children be at least 1.
## More information
This page has explained solutions to a few common use cases. For a more in depth explanation of the auto layout system, see the [UI Auto Layout](UIAutoLayout.md) page.

View File

@@ -0,0 +1,57 @@
# Designing UI for Multiple Resolutions
Modern games and applications often need to support a wide variety of different screen resolutions and particularly UI layouts need to be able to adapt to that. The UI System in Unity includes a variety of tools for this purpose that can be combined in various ways.
In this how-to we're going to use a simple case study and look at and compare the different tools in the context of that. In our case study we have three buttons in the corners of the screen as shown below, and the goal is to adapt this layout to various resolutions.
![](images/UI_MultiResBase.png)
For this how-to we're going to consider four screen resolutions: Phone HD in portrait (640 x 960) and landscape (960 x 640) and Phone SD in portrait (320 x 480) and landscape (480 x 320). The layout is initially setup in the Phone HD Portrait resolution.
## Using anchors to adapt to different aspect ratios
UI elements are by default anchored to the center of the parent rectangle. This means that they keep a constant offset from the center.
If the resolution is changed to a landscape aspect ratio with this setup, the buttons may not even be inside the rectangle of the screen anymore.
![](images/UI_MultiResCenter.png)
One way to keep the buttons inside the screen is to change the layout such that the locations of the buttons are tied to their respective corners of the screen. The anchors of the top left button can be set to the upper left corner using the Anchors Preset drop down in the Inspector, or by dragging the triangular anchor handles in the Scene View. It's best to do this while the current screen resolution set in the Game View is the one the layout is initially designed for, where the button placement looks correct. (See the [UI Basic Layout](UIBasicLayout.md) page for more information on anchors.) Similarly, the anchors for the lower left and lower right buttons can be set to the lower left corner and lower right corner, respectively.
Once the buttons have been anchored to their respective corners, they stick to them when changing the resolution to a different aspect ratio.
![](images/UI_MultiResCorners.png)
When the screen size is changed to a larger or smaller resolution, the buttons will also remain anchored to their respective corners. However, since they keep their original size as specified in pixels, they may take up a larger or smaller proportion of the screen. This may or may not be desirable, depending on how you would like your layout to behave on screens of different resolutions.
![](images/UI_MultiResSizeChange.png)
In this how-to, we know that the smaller resolutions of Phone SD Portrait and Landscape don't correspond to screens that are physically smaller, but rather just screens with a lower pixel density. On these lower-density screens the buttons shouldn't appear larger than on the high-density screens - they should instead appear with the same size.
This means that the buttons should become smaller by the same percentage as the screen is smaller. In other words, the scale of the buttons should follow the screen size. This is where the **Canvas Scaler** component can help.
## Scaling with Screen Size
The **Canvas Scaler** component can be added to a root **Canvas** - a Game Object with a Canvas component on it, which all the UI elements are children of. It is also added by default when creating a new Canvas through the **GameObject** menu.
In the Canvas Scaler component, you can set its **UI Scale Mode** to **Scale With Screen Size**. With this scale mode you can specify a resolution to use as reference. If the current screen resolution is smaller or larger than this reference resolution, the scale factor of the Canvas is set accordingly, so all the UI elements are scaled up or down together with the screen resolution.
In our case, we set the **Canvas Scaler** to be the Phone HD portrait resolution of 640 x 960. Now, when setting the screen resolution to the Phone SD portrait resolution of 320 x 480, the entire layout is scaled down so it appears proportionally the same as in full resolution. Everything is scaled down: The button sizes, their distances to the edges of the screen, the button graphics, and the text elements. This means that the layout will appear the same in the Phone SD portrait resolution as in Phone HD portrait; only with a lower pixel density.
![](images/UI_MultiResReferenceResolution.png)
One thing to be aware of: After adding a Canvas Scaler component, it's important to also check how the layout looks at other aspect ratios. By setting the resolution back to Phone HD landscape, we can see that the buttons now appear bigger than they should (and used to).
![](images/UI_MultiResLandscapeWrongScaling.png)
The reason for the larger buttons in landscape aspect ratio comes down to how the Canvas Scaler setting works. By default it compares the width or the current resolution with the width of the Canvas Scaler and the result is used as the scale factor to scale everything with. Since the current landscape resolution of 960 x 640 has a 1.5 times larger width than the portrait Canvas Scaler of 640 x 960, the layout is scaled up by 1.5.
The component has a property called **Match** which can be 0 (Width), 1 (Height) or a value in between. By default it's set to 0, which compares the current screen width with the Canvas Scaler width as described.
If the **Match** property is set to 0.5 instead, it will compare both the current width to the reference width and the current height to the reference height, and choose a scale factor that's in between the two. Since in this case the landscape resolution is 1.5 times wider but also 1.5 times shorter, those two factor even out and produce a final scale factor of 1, which means the buttons keep their original size.
At this point the layout supports all the four screen resolutions using a combination of appropriate anchoring and the Canvas Scaler component on the Canvas.
![](images/UI_MultiResAllResolutions.png)
See the [Canvas Scaler](script-CanvasScaler.md) reference page for more information on different ways to scale UI elements in relation to different screen sizes.

View File

@@ -0,0 +1,179 @@
# Creating Screen Transitions
The need to transition between multiple UI screens is fairly common. In this page we will explore a simple way to create and manage those transitions using animation and State Machines to drive and control each screen.
## Overview
The high-level idea is that each of our screens will have an [Animator Controller](https://docs.unity3d.com/Manual/class-AnimatorController.html) with two [states](https://docs.unity3d.com/Manual/class-State.html) (Open and Closed) and a boolean [Parameter](https://docs.unity3d.com/Manual/AnimationParameters.html) (Open). To transition between screens you will only need to close the currently open Screen and open the desired one. To make this process easier we will create a small Class ScreenManager that will keep track and take care of closing any already open Screen for us. The button that triggers the transition will only have to ask the ScreenManager to open the desired screen.
### Thinking about Navigation
If you plan to support controller/keyboard navigation of UI elements, then it's important to have a few things in mind. It's important to avoid having Selectable elements outside the screen since that would enable players to select offscreen elements, we can do that by deactivating any off-screen hierarchy. We also need to make sure when a new screen is shown we set a element from it as selected, otherwise the player would not be able to navigate to the new screen. We will take care of all that in the ScreenManager class below.
## Setting up the Animator Controller
Let's take a look at the most common and minimal setup for the Animation Controller to do a Screen transition. The controller will need a boolean parameter (Open) and two states (Open and Closed), each state should have an animation with only one keyframe, this way we let the State Machine do the transition blending for us.
![The Open state and animation](images/UI_ScreenTransitionAnimatorOpen.png)
![The Closed state and animation](images/UI_ScreenTransitionAnimatorClosed.png)
Now we need to create the [transition](https://docs.unity3d.com/Manual/class-Transition.html) between both states, let's start with the transition from Open to Closed and let's set the condition properly, we want to go from Open to Closed when the parameter Open is set to false. Now we create the transition from Closed to Open and set the condition to go from Closed to Open when the parameter Open is true.
![The Transition from Closed to Open](images/UI_ScreenTransitionAnimatorTransitionToOpen.png)
![The Transition from Open to Closed](images/UI_ScreenTransitionAnimatorTransitionToClosed.png)
## Managing the screens
With all the above set up, the only thing missing is for us to set the parameter Open to true on the screens Animator we want to transition to and Open to false on the currently open screens Animator. To do that, we will create a small script:
````
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;
using System.Collections.Generic;
public class ScreenManager : MonoBehaviour {
//Screen to open automatically at the start of the Scene
public Animator initiallyOpen;
//Currently Open Screen
private Animator m_Open;
//Hash of the parameter we use to control the transitions.
private int m_OpenParameterId;
//The GameObject Selected before we opened the current Screen.
//Used when closing a Screen, so we can go back to the button that opened it.
private GameObject m_PreviouslySelected;
//Animator State and Transition names we need to check against.
const string k_OpenTransitionName = "Open";
const string k_ClosedStateName = "Closed";
public void OnEnable()
{
//We cache the Hash to the "Open" Parameter, so we can feed to Animator.SetBool.
m_OpenParameterId = Animator.StringToHash (k_OpenTransitionName);
//If set, open the initial Screen now.
if (initiallyOpen == null)
return;
OpenPanel(initiallyOpen);
}
//Closes the currently open panel and opens the provided one.
//It also takes care of handling the navigation, setting the new Selected element.
public void OpenPanel (Animator anim)
{
if (m_Open == anim)
return;
//Activate the new Screen hierarchy so we can animate it.
anim.gameObject.SetActive(true);
//Save the currently selected button that was used to open this Screen. (CloseCurrent will modify it)
var newPreviouslySelected = EventSystem.current.currentSelectedGameObject;
//Move the Screen to front.
anim.transform.SetAsLastSibling();
CloseCurrent();
m_PreviouslySelected = newPreviouslySelected;
//Set the new Screen as then open one.
m_Open = anim;
//Start the open animation
m_Open.SetBool(m_OpenParameterId, true);
//Set an element in the new screen as the new Selected one.
GameObject go = FindFirstEnabledSelectable(anim.gameObject);
SetSelected(go);
}
//Finds the first Selectable element in the providade hierarchy.
static GameObject FindFirstEnabledSelectable (GameObject gameObject)
{
GameObject go = null;
var selectables = gameObject.GetComponentsInChildren<Selectable> (true);
foreach (var selectable in selectables) {
if (selectable.IsActive () && selectable.IsInteractable ()) {
go = selectable.gameObject;
break;
}
}
return go;
}
//Closes the currently open Screen
//It also takes care of navigation.
//Reverting selection to the Selectable used before opening the current screen.
public void CloseCurrent()
{
if (m_Open == null)
return;
//Start the close animation.
m_Open.SetBool(m_OpenParameterId, false);
//Reverting selection to the Selectable used before opening the current screen.
SetSelected(m_PreviouslySelected);
//Start Coroutine to disable the hierarchy when closing animation finishes.
StartCoroutine(DisablePanelDeleyed(m_Open));
//No screen open.
m_Open = null;
}
//Coroutine that will detect when the Closing animation is finished and it will deactivate the
//hierarchy.
IEnumerator DisablePanelDeleyed(Animator anim)
{
bool closedStateReached = false;
bool wantToClose = true;
while (!closedStateReached && wantToClose)
{
if (!anim.IsInTransition(0))
closedStateReached = anim.GetCurrentAnimatorStateInfo(0).IsName(k_ClosedStateName);
wantToClose = !anim.GetBool(m_OpenParameterId);
yield return new WaitForEndOfFrame();
}
if (wantToClose)
anim.gameObject.SetActive(false);
}
//Make the provided GameObject selected
//When using the mouse/touch we actually want to set it as the previously selected and
//set nothing as selected for now.
private void SetSelected(GameObject go)
{
//Select the GameObject.
EventSystem.current.SetSelectedGameObject(go);
//If we are using the keyboard right now, that's all we need to do.
var standaloneInputModule = EventSystem.current.currentInputModule as StandaloneInputModule;
if (standaloneInputModule != null)
return;
//Since we are using a pointer device, we don't want anything selected.
//But if the user switches to the keyboard, we want to start the navigation from the provided game object.
//So here we set the current Selected to null, so the provided gameObject becomes the Last Selected in the EventSystem.
EventSystem.current.SetSelectedGameObject(null);
}
}
````
Let's hook up this script, we do this by creating a new GameObject, we can rename it "ScreenManager" for instance, and add the component above to it. You can assign an initial screen to it, this screen will be open at the start of your scene.
Now for the final part, let's make the [UI buttons](script-Button.md) work. Select the button that should trigger the screen transition and add a new action under the **On Click ()** list in the Inspector. Drag the ScreenManager GameObject we just created to the ObjectField, on the dropdown select **ScreenManager-&gt;OpenPanel (Animator)** and drag and drop the panel you want to open when the user clicks the button to the las ObjectField.
![Button Inspector](images/UI_ScreenTransitionButtonInspector.png)
## Notes
This technique only requires each screen to have an AnimatorController with an Open parameter and a Closed state to work - it doesn't matter how your screen or State Machine are constructed. This technique also works well with nested screens, meaning you only need one ScreenManager for each nested level.
The State Machine we set up above has the default state of Closed, so all of the screens that use this controller start as closed. The ScreenManager provides an initiallyOpen property so you can specify which screen is shown first.

View File

@@ -0,0 +1,35 @@
# Creating a World Space UI
The UI system makes it easy to create UI that is positioned in the world among other 2D or 3D objects in the Scene.
Start by creating a UI element (such as an Image) if you don't already have one in your scene by using GameObject > UI > Image. This will also create a Canvas for you.
## Set the Canvas to World Space
Select your Canvas and change the Render Mode to World Space.
Now your Canvas is already positioned in the World and can be seen by all cameras if they are pointed at it, but it is probably huge compared to other objects in your Scene. We'll get back to that.
## Decide on a resolution
First you need to decide what the resolution of the Canvas should be. If it was an image, what should the pixel resolution of the image be? Something like 800x600 might be a good starting point. You enter the resolution in the Width and Height values of the Rect Transform of the Canvas. It's probably a good idea to set the position to 0,0 at the same time.
## Specify the size of the Canvas in the world
Now you should consider how big the Canvas should be in the world. You can use the Scale tool to simply scale it down until it has a size that looks good, or you can decide how big it should be in meters.
If you want it to have a specific width in meters, you can can calculate the needed scale by using meter_size / canvas_width. For example, if you want it to be 2 meters wide and the Canvas width is 800, you would have 2 / 800 = 0.0025. You then set the Scale property of the Rect Transform on the Canvas to 0.0025 for both X, Y, and Z in order to ensure that it's uniformly scaled.
Another way to think of it is that you are controlling the size of one pixel in the Canvas. If the Canvas is scaled by 0.0025, then that is also the size in the world of each pixel in the Canvas.
## Position the Canvas
Unlike a Canvas set to Screen Space, a World Space Canvas can be freely positioned and rotated in the Scene. You can put a Canvas on any wall, floor, ceiling, or slanted surface (or hanging freely in the air of course). Just use the normal Translate and Rotate tools in the toolbar.
## Create the UI
Now you can begin setting up your UI elements and layouts the same way you would with a Screen Space Canvas.

View File

@@ -0,0 +1,9 @@
# Input Modules
An Input Module is where the main logic of an event system can be configured and customized. Out of the box there are two provided Input Modules, one designed for Standalone, and one designed for Touch input. Each module receives and dispatches events as you would expect on the given configuration.
Input modules are where the 'business logic' of the Event System take place. When the Event System is enabled it looks at what Input Modules are attached and passes update handling to the specific module.
Input modules are designed to be extended or modified based on the input systems that you wish to support. Their purpose is to map hardware specific input (such as touch, joystick, mouse, motion controller) into events that are sent via the messaging system.
The built in Input Modules are designed to support common game configurations such as touch input, controller input, keyboard input, and mouse input. They send a variety of events to controls in the application, if you implement the specific interfaces on your MonoBehaviours. All of the UI components implement the interfaces that make sense for the given component.

View File

@@ -0,0 +1,46 @@
# Messaging System
The new UI system uses a messaging system designed to replace SendMessage. The system is pure C# and aims to address some of the issues present with SendMessage. The system works using custom interfaces that can be implemented on a MonoBehaviour to indicate that the component is capable of receiving a callback from the messaging system. When the call is made a target GameObject is specified; the call will be issued on all components of the GameObject that implement the specified interface that the call is to be issued against. The messaging system allows for custom user data to be passed, as well as how far through the GameObject hierarchy the event should propagate; that is should it just execute for the specified GameObject, or should it also execute on children and parents. In addition to this the messaging framework provides helper functions to search for and find GameObjects that implement a given messaging interface.
The messaging system is generic and designed for use not just by the UI system but also by general game code. It is relatively trivial to add custom messaging events and they will work using the same framework that the UI system uses for all event handling.
## Defining A Custom Message
If you wish to define a custom message it is relatively simple. In the UnityEngine.EventSystems namespace there is a base interface called 'IEventSystemHandler'. Anything that extends from this can be considered as a target for receiving events via the messaging system.
````
public interface ICustomMessageTarget : IEventSystemHandler
{
// functions that can be called via the messaging system
void Message1();
void Message2();
}
````
Once this interface is defined then it can be implemented by a MonoBehaviour. When implemented it defines the functions that will be executed if the given message is issued against this MonoBehaviours GameObject.
````
public class CustomMessageTarget : MonoBehaviour, ICustomMessageTarget
{
public void Message1()
{
Debug.Log ("Message 1 received");
}
public void Message2()
{
Debug.Log ("Message 2 received");
}
}
````
Now that a script exists that can receive the message we need to issue the message. Normally this would be in response to some loosely coupled event that occurs. For example, in the UI system we issue events for such things as PointerEnter and PointerExit, as well as a variety of other things that can happen in response to user input into the application.
To send a message a static helper class exists to do this. As arguments it requires a target object for the message, some user specific data, and a functor that maps to the specific function in the message interface you wish to target.
````
ExecuteEvents.Execute<ICustomMessageTarget>(target, null, (x,y)=>x.Message1());
````
This code will execute the function Message1 on any components on the GameObject target that implement the ICustomMessageTarget interface. The scripting documentation for the ExecuteEvents class covers other forms of the Execute functions, such as Executing in children or in parents.

View File

@@ -0,0 +1,11 @@
# Raycasters
The Event System needs a method for detecting where current input events need to be sent to, and this is provided by the Raycasters. Given a screen space position they will collect all potential targets, figure out if they are under the given position, and then return the object that is closest to the screen. There are a few types of Raycasters that are provided:
- [Graphic Raycaster](script-GraphicRaycaster.md) - Used for UI elements, lives on a Canvas and searches within the canvas
- [Physics 2D Raycaster](script-Physics2DRaycaster.md) - Used for 2D physics elements
- [Physics Raycaster](script-PhysicsRaycaster.md) - Used for 3D physics elements
When a Raycaster is present and enabled in the scene it will be used by the Event System whenever a query is issued from an Input Module.
If multiple Raycasters are used then they will all have casting happen against them and the results will be sorted based on distance to the elements.

View File

@@ -0,0 +1,119 @@
# Rich Text
The text for UI elements and text meshes can incorporate multiple font styles and sizes. Rich text is supported both for the UI System and the legacy GUI system. The Text, GUIStyle, GUIText and TextMesh classes have a __Rich Text__ setting which instructs Unity to look for markup tags within the text. The [Debug.Log](ScriptRef:Debug.Log.html) function can also use these markup tags to enhance error reports from code. The tags are not displayed but indicate style changes to be applied to the text.
## Markup format
The markup system is inspired by HTML but isn't intended to be strictly compatible with standard HTML. The basic idea is that a section of text can be enclosed inside a pair of matching tags:-
`We are <b>not</b> amused.`
As the example shows, the tags are just pieces of text inside the "angle bracket" characters, `<` and `>`.
You place the _opening_ tag at the beginning of the section. The text inside the tag denotes its name (which in this case is just **b**).
You place another tag at the end of the section. This is the _closing_ tag. It has the same name as the opening tag, but the name is prefixed with a slash `/` character. Every opening tag must have a corresponding closing tag. If you don't _close_ an opening tag, it is rendered as regular text.
The tags are not displayed to the user directly but are interpreted as instructions for styling the text they enclose. The `b` tag used in the example above applies boldface to the word "not", so the text appears ons creen as:-
We are **not** amused
![](images/StyleTextBold.png)
A marked up section of text (including the tags that enclose it) is referred to as an **element**.
### Nested elements
It is possible to apply more than one style to a section of text by "nesting" one element inside another
`We are <b><i>definitely not</i></b> amused`
The `<i>` tag applies italic style, so this would be presented onscreen as
We are **_definitely not_** amused
![](images/StyleTextBoldItalic1.png)
Note the ordering of the closing tags, which is in reverse to that of the opening tags. The reason for this is perhaps clearer when you consider that the inner tags need not span the whole text of the outermost element
`We are <b>absolutely <i>definitely</i> not</b> amused`
which gives
We are **absolutely _definitely_ not** amused
![](images/StyleTextBoldItalic2.png)
### Tag parameters
Some tags have a simple all-or-nothing effect on the text but others might allow for variations. For example, the **color** tag needs to know which color to apply. Information like this is added to tags by the use of **parameters**:-
`We are <color=green>green</color> with envy`
Which produces this result:
![](images/StyleTextColorGreen.png)
Note that the ending tag doesn't include the parameter value. Optionally, the value can be surrounded by quotation marks but this isn't required.
Tag parameters cannot include blank spaces. For example:
`We are <color = green>green</color> with envy`
does not work because of the spaces to either side of the `=` character.
## Supported tags
The following list describes all the styling tags supported by Unity.
|**_Tag_** |**_Description_** |**_Example_** |**_Notes_** |
|:---|:---|:---|:---|
| **b**| Renders the text in boldface.| `We are <b>not</b> amused.`| |
| **i**| Renders the text in italics.| `We are <i>usually</i> not amused.`| |
| **size**| Sets the size of the text according to the parameter value, given in pixels.| `We are <size=50>largely</size> unaffected.`| Although this tag is available for Debug.Log, you will find that the line spacing in the window bar and Console looks strange if the size is set too large.|
| <a name="ColorTag"></a>**color**| Sets the color of the text according to the parameter value. The color can be specified in the traditional HTML format. `#rrggbbaa` ...where the letters correspond to pairs of hexadecimal digits denoting the red, green, blue and alpha (transparency) values for the color. For example, cyan at full opacity would be specified by `color=#00ffffff`...<br/><br/>You can specify hexadecimal values in uppercase or lowercase; `#FF0000` is equivalent to `#ff0000`.| `We are <color=#ff0000ff>colorfully</color> amused`|Another option is to use the name of the color. This is easier to understand but naturally, the range of colors is limited and full opacity is always assumed. `<color=cyan>some text</color>` The available color names are given in the [table below](#ColorNames).|
| **material** | This is only useful for text meshes and renders a section of text with a material specified by the parameter. The value is an index into the text mesh's array of materials as shown by the inspector.| `We are <material=2>texturally</material> amused` | |
| **quad** | This is only useful for text meshes and renders an image inline with the text. It takes parameters that specify the material to use for the image, the image height in pixels, and a further four that denote a rectangular area of the image to display. Unlike the other tags, quad does not surround a piece of text and so there is no ending tag - the slash character is placed at the end of the initial tag to indicate that it is "self-closing". | `<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5>` | This selects the material at position in the renderer's material array and sets the height of the image to 20 pixels. The rectangular area of image starts at given by the x, y, width and height values, which are all given as a fraction of the unscaled width and height of the texture.|
<a name="ColorNames"></a>
### Supported colors
The following table lists colors for which you can use a name instead of a hexadecimal tag in the [`<color>`](#ColorTag) rich text tag.
|**_Color name_** |**_Hex value_** |**_Swatch_** |
|:---|:---|:--|
|aqua (same as cyan)|`#00ffffff`|![](images/CyanSwatch.png)|
|black|`#000000ff`|![](images/BlackSwatch.png)|
|blue|`#0000ffff`|![](images/BlueSwatch.png)|
|brown|`#a52a2aff`|![](images/BrownSwatch.png)|
|cyan (same as aqua)|`#00ffffff`|![](images/CyanSwatch.png)|
|darkblue|`#0000a0ff`|![](images/DarkblueSwatch.png)|
|fuchsia (same as magenta)|`#ff00ffff`|![](images/MagentaSwatch.png)|
|green|`#008000ff`|![](images/GreenSwatch.png)|
|grey|`#808080ff`|![](images/GreySwatch.png)|
|lightblue|`#add8e6ff`|![](images/LightblueSwatch.png)|
|lime|`#00ff00ff`|![](images/LimeSwatch.png)|
|magenta (same as fuchsia)|`#ff00ffff`|![](images/MagentaSwatch.png)|
|maroon|`#800000ff`|![](images/MaroonSwatch.png)|
|navy|`#000080ff`|![](images/NavySwatch.png)|
|olive|`#808000ff`|![](images/OliveSwatch.png)|
|orange|`#ffa500ff`|![](images/OrangeSwatch.png)|
|purple|`#800080ff`|![](images/PurpleSwatch.png)|
|red|`#ff0000ff`|![](images/RedSwatch.png)|
|silver|`#c0c0c0ff`|![](images/SilverSwatch.png)|
|teal|`#008080ff`|![](images/TealSwatch.png)|
|white|`#ffffffff`|![](images/WhiteSwatch.png)|
|yellow|`#ffff00ff`|![](images/YellowSwatch.png)|
## Editor GUI
Rich text is disabled by default in the editor GUI system but it can be enabled explicitly using a custom [GUIStyle](ScriptRef:GUIStyle.html). The `richText` property should be set to true and the style passed to the GUI function in question:
````
GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);
````

View File

@@ -0,0 +1,23 @@
# Supported Events
The Event System supports a number of events, and they can be customized further in user custom user written Input Modules.
The events that are supported by the Standalone Input Module and Touch Input Module are provided by interface and can be implemented on a MonoBehaviour by implementing the interface. If you have a valid Event System configured the events will be called at the correct time.
- [IPointerEnterHandler](xref:UnityEngine.EventSystems.IPointerEnterHandler) - OnPointerEnter - Called when a pointer enters the object
- [IPointerExitHandler](xref:UnityEngine.EventSystems.IPointerExitHandler) - OnPointerExit - Called when a pointer exits the object
- [IPointerDownHandler](xref:UnityEngine.EventSystems.IPointerDownHandler) - OnPointerDown - Called when a pointer is pressed on the object
- [IPointerUpHandler](xref:UnityEngine.EventSystems.IPointerUpHandler)- OnPointerUp - Called when a pointer is released (called on the GameObject that the pointer is clicking)
- [IPointerClickHandler](xref:UnityEngine.EventSystems.IPointerClickHandler) - OnPointerClick - Called when a pointer is pressed and released on the same object
- [IInitializePotentialDragHandler](xref:UnityEngine.EventSystems.IInitializePotentialDragHandler) - OnInitializePotentialDrag - Called when a drag target is found, can be used to initialize values
- [IBeginDragHandler](xref:UnityEngine.EventSystems.IBeginDragHandler) - OnBeginDrag - Called on the drag object when dragging is about to begin
- [IDragHandler](xref:UnityEngine.EventSystems.IDragHandler) - OnDrag - Called on the drag object when a drag is happening
- [IEndDragHandler](xref:UnityEngine.EventSystems.IEndDragHandler) - OnEndDrag - Called on the drag object when a drag finishes
- [IDropHandler](xref:UnityEngine.EventSystems.IDropHandler) - OnDrop - Called on the object where a drag finishes
- [IScrollHandler](xref:UnityEngine.EventSystems.IScrollHandler) - OnScroll - Called when a mouse wheel scrolls
- [IUpdateSelectedHandler](xref:UnityEngine.EventSystems.IUpdateSelectedHandler) - OnUpdateSelected - Called on the selected object each tick
- [ISelectHandler](xref:UnityEngine.EventSystems.ISelectHandler) - OnSelect - Called when the object becomes the selected object
- [IDeselectHandler](xref:UnityEngine.EventSystems.IDeselectHandler) - OnDeselect - Called on the selected object becomes deselected
- [IMoveHandler](xref:UnityEngine.EventSystems.IMoveHandler) - OnMove - Called when a move event occurs (left, right, up, down)
- [ISubmitHandler](xref:UnityEngine.EventSystems.ISubmitHandler) - OnSubmit - Called when the submit button is pressed
- [ICancelHandler](xref:UnityEngine.EventSystems.ICancelHandler) - OnCancel - Called when the cancel button is pressed

View File

@@ -0,0 +1,63 @@
* [Unity UI: Unity User Interface](index.md)
* [Canvas](UICanvas.md)
* [Basic Layout](UIBasicLayout.md)
* [Visual Components](UIVisualComponents.md)
* [Interaction Components](UIInteractionComponents.md)
* [Animation Integration](UIAnimationIntegration.md)
* [Auto Layout](UIAutoLayout.md)
* [Rich Text](StyledText.md)
* [Events](EventSystem.md)
* [MessagingSystem](MessagingSystem.md)
* [InputModules](InputModules.md)
* [SupportedEvents](SupportedEvents.md)
* [Raycasters](Raycasters.md)
* [Reference](UIReference.md)
* [Rect Transform](class-RectTransform.md)
* [Canvas Components](comp-CanvasComponents.md)
* [Canvas](class-Canvas.md)
* [Canvas Scaler](script-CanvasScaler.md)
* [Canvas Group](class-CanvasGroup.md)
* [Canvas Renderer](class-CanvasRenderer.md)
* [Visual UIInteractionComponents](comp-UIVisual.md)
* [Text](script-Text.md)
* [Image](script-Image.md)
* [Raw Image](script-RawImage.md)
* [Mask](script-Mask.md)
* [RectMask2D](script-RectMask2D.md)
* [UI Effect Components](comp-UIEffects.md)
* [Shadow](script-Shadow.md)
* [Outline](script-Outline.md)
* [Position as UV1](script-PositionAsUV1.md)
* [Interaction Components](comp-UIInteraction.md)
* [Selectable Base Class](script-Selectable.md)
* [Transition Options](script-SelectableTransition.md)
* [Navigation Options](script-SelectableNavigation.md)
* [Button](script-Button.md)
* [Toggle](script-Toggle.md)
* [Toggle Group](script-ToggleGroup.md)
* [Slider](script-Slider.md)
* [Scrollbar](script-Scrollbar.md)
* [Dropdown](script-Dropdown.md)
* [Input Field](script-InputField.md)
* [Scroll Rect](script-ScrollRect.md)
* [Auto Layout](comp-UIAutoLayout.md)
* [Layout Element](script-LayoutElement.md)
* [Content Size Fitter](script-ContentSizeFitter.md)
* [Aspect Ratio Fitter](script-AspectRatioFitter.md)
* [Horizontal Layout Group](script-HorizontalLayoutGroup.md)
* [Vertical Layout Group](script-VerticalLayoutGroup.md)
* [Grid Layout Group](script-GridLayoutGroup.md)
* [Events](EventSystemReference.md)
* [script-EventSystem](script-EventSystem.md)
* [script-GraphicRaycaster](script-GraphicRaycaster.md)
* [script-PhysicsRaycaster](script-PhysicsRaycaster.md)
* [script-Physics2DRaycaster](script-Physics2DRaycaster.md)
* [script-StandaloneInputModule](script-StandaloneInputModule.md)
* [script-TouchInputModule](script-TouchInputModule.md)
* [script-EventTrigger](script-EventTrigger.md)
* [UI How Tos](UIHowTos.md)
* [Designing UI for Multiple Resolutions](HOWTO-UIMultiResolution.md)
* [Making UI elements fit the size of their content](HOWTO-UIFitContentSize.md)
* [Creating a World Space UI](HOWTO-UIWorldSpace.md)
* [Creating UI elements from scripting](HOWTO-UICreateFromScripting.md)
* [Creating Screen Transitions](HOWTO-UIScreenTransition.md)

View File

@@ -0,0 +1,33 @@
# Animation Integration
Animation allows for each transition between control states to be fully animated using Unity's animation system. This is the most powerful of the transition modes due to the number of properties that can be animated simultaneously.
![](images/GUI_ButtonInspectorAnimation.png)
To use the Animation transition mode, an Animator Component needs to be attached to the controller element. This can be done automatically by clicking "Auto Generate Animation". This also generates an Animator Controller with states already set up, which will need to be saved.
The new Animator controller is ready to use straight away. Unlike most Animator Controllers, this controller also stores the animations for the controller's transitions and these can be customised, if desired.
![](images/GUI_ButtonAnimator.png)
For example, if a Button element with an Animator controller attached is selected, the animations for each of the button's states can be edited by opening the Animation window (**Window&gt;Animation**).
There is an Animation Clip pop-up menu to select the desired clip. Choose from "Normal", "Highlighted", "Pressed" and "Disabled".
![](images/GUI_ButtonAnimationWindow.png)
The Normal State is set by the values on button element itself and can be left empty. On all other states, the most common configuration is a single keyframe at the start of the timeline. The transition animation between states will be handled by the Animator.
As an example, the width of the button in the Highlighted State could be changed by selecting the Highlighted state from the Animation Clip pop up menu and with the playhead at the start of the time line:
* Select the record Button
* Change the width of the Button in the inspector
* Exit the record mode.
Change to play mode to see how the button grows when highlighted.
Any number of properties can have their parameters set in this one keyframe.
Several buttons can share the same behaviour by sharing Animator Controllers.
**The UI Animation transition mode is not compatible with Unity's legacy animation system.** You should only use the *Animator* Component.

View File

@@ -0,0 +1,134 @@
# Auto Layout
The Rect Transform layout system is flexible enough to handle a lot of different types of layouts and it also allows placing elements in a complete freeform fashion. However, sometimes something a bit more structured can be needed.
The auto layout system provides ways to place elements in nested layout groups such as horizontal groups, vertical groups, or grids. It also allows elements to automatically be sized according to the contained content. For example a button can be dynamically resized to exactly fit its text content plus some padding.
The auto layout system is a system built on top of the basic Rect Transform layout system. It can optionally be used on some or all elements.
## Understanding Layout Elements
The auto layout system is based on a concept of **layout elements** and **layout controllers**. A layout element is an Game Object with a Rect Transform and optionally other components as well. The layout element has certain knowledge about which size it should have. Layout elements don't directly set their own size, but other components that function as layout controllers can use the information they provide in order to calculate a size to use for them.
A layout element has properties that defines its own:
* Minimum width
* Minimum height
* Preferred width
* Preferred height
* Flexible width
* Flexible height
Examples of layout controller components that use the information provided by layout elements are **Content Size Fitter** and the various **Layout Group** components. The basic principles for how layout elements in a layout group are sized is as follows:
* First minimum sizes are allocated.
* If there is sufficient available space, preferred sizes are allocated.
* If there is additional available space, flexible size is allocated.
Any Game Object with a Rect Transform on it can function as a layout element. They will by default have minimum, preferred, and flexible sizes of 0. Certain components will change these layout properties when added to the Game Object.
The Image and Text components are two examples of components that provide layout element properties. They change the preferred width and height to match the sprite or text content.
### Layout Element Component
If you want to override the minimum, preferred, or flexible size, you can do that by adding a Layout Element component to the Game Object.
![](images/UI_LayoutElementInspector.png)
The Layout Element component lets you override the values for one or more of the layout properties. Enable the checkbox for a property you want to override and then specify the value you want to override with.
See the reference page for [Layout Element](script-LayoutElement.md) for more information.
## Understanding Layout Controllers
Layout controllers are components that control the sizes and possibly positions of one or more layout elements, meaning Game Objects with Rect Transforms on. A layout controller may control its **own layout element** (the same Game Object it is on itself) or it may control **child layout elements**.
A component that functions as a layout controller may also itself function as a layout element at the same time.
### Content Size Fitter
The Content Size Fitter functions as a layout controller that controls the size of its own layout element. The simplest way to see the auto layout system in action is to add a Content Size Fitter component to a Game Object with a Text component.
![](images/UI_ContentSizeFitterInspector.png)
If you set either the Horizontal Fit or Vertical Fit to Preferred, the Rect Transform will adjust its width and/or height to fit the Text content.
See the reference page for [Content Size Fitter](script-ContentSizeFitter.md) for more information.
### Aspect Ratio Fitter
The Aspect Ratio Fitter functions as a layout controller that controls the size of its own layout element.
![](images/UI_AspectRatioFitterInspector.png)
It can adjust the height to fit the width or vice versa, or it can make the element fit inside its parent or envelope its parent. The Aspect Ratio Fitter does not take layout information into account such as minimum size and preferred size.
See the reference page for [Aspect Ratio Fitter](script-AspectRatioFitter.md) for more information.
### Layout Groups
A layout group functions as a layout controller that controls the sizes and positions of its child layout elements. For example, a Horizontal Layout Group places its children next to each other, and a Grid Layout Group places its children in a grid.
A layout group doesn't control its own size. Instead it functions as a layout element itself which may be controlled by other layout controllers or be set manually.
Whatever size a layout group is allocated, it will in most cases try to allocate an appropriate amount of space for each of its child layout elements based on the minimum, preferred, and flexible sizes they reported. Layout groups can also be nested arbitrarily this way.
See the reference pages for [Horizontal Layout Group](script-HorizontalLayoutGroup.md), [Vertical Layout Group](script-VerticalLayoutGroup.md) and [Grid Layout Group](script-GridLayoutGroup.md) for more information.
### Driven Rect Transform properties
Since a layout controller in the auto layout system can automatically control the sizes and placement of certain UI elements, those sizes and positions should not be manually edited at the same time through the Inspector or Scene View. Such changed values would just get reset by the layout controller on the next layout calculation anyway.
The Rect Transform has a concept of **driven properties** to address this. For example, a Content Size Fitter which has the Horizontal Fit property set to Minimum or Preferred will drive the width of the Rect Transform on the same Game Object. The width will appear as read-only and a small info box at the top of the Rect Transform will inform that one or more properties are driven by Conten Size Fitter.
The driven Rect Transforms properties have other reasons beside preventing manual editing. A layout can be changed just by changing the resolution or size of the Game View. This in turn can change the size or placement of layout elements, which changes the values of driven properties. But it wouldn't be desirable that the Scene is marked as having unsaved changes just because the Game View was resized. To prevent this, the values of driven properties are not saved as part of the Scene and changes to them do not mark the scene as changed.
## Technical Details
The auto layout system comes with certain components built-in, but it is also possible to create new components that controls layouts in custom ways. This is done by having a component implement specific interfaces which are recognized by the auto layout system.
### Layout Interfaces
A component is treated as a layout element by the auto layout system if it implements the interface **ILayoutElement**.
A component is expected to drive the Rect Transforms of its children if it implements the interface **ILayoutGroup**.
A component is expected to drive its own RectTransform if it implements the interface **ILayoutSelfController**.
### Layout Calculations
The auto layout system evaluates and executes layouts in the following order:
1. The minimum, preferred, and flexible widths of layout elements are calculated by calling CalculateLayoutInputHorizontal on ILayoutElement components. This is performed in bottom-up order, where children are calculated before their parents, such that the parents may take the information in their children into account in their own calculations.
2. The effective widths of layout elements are calculated and set by calling SetLayoutHorizontal on ILayoutController components. This is performed in top-down order, where children are calculated after their parents, since allocation of child widths needs to be based on the full width available in the parent. After this step the Rect Transforms of the layout elements have their new widths.
3. The minimum, preferred, and flexible heights of layout elements are calculated by calling CalculateLayoutInputVertical on ILayoutElement components. This is performed in bottom-up order, where children are calculated before their parents, such that the parents may take the information in their children into account in their own calculations.
4. The effective heights of layout elements are calculated and set by calling SetLayoutVertical on ILayoutController components. This is performed in top-down order, where children are calculated after their parents, since allocation of child heights needs to be based on the full height available in the parent. After this step the Rect Transforms of the layout elements have their new heights.
As can be seen from the above, the auto layout system evaluates widths first and then evaluates heights afterwards. Thus, calculated heights may depend on widths, but calculated widths can never depend on heights.
### Triggering Layout Rebuild
When a property on a component changes which can cause the current layout to no longer be valid, a layout recalculation is needed. This can be triggered using the call:
LayoutRebuilder.MarkLayoutForRebuild (transform as RectTransform);
The rebuild will not happen immediately, but at the end of the current frame, just before rendering happens. The reason it is not immediate is that this would cause layouts to be potentially rebuild many times during the same frame, which would be bad for performance.
Guidelines for when a rebuild should be triggered:
* In setters for properties that can change the layout.
* In these callbacks:
* OnEnable
* OnDisable
* OnRectTransformDimensionsChange
* OnValidate (only needed in the editor, not at runtime)
* OnDidApplyAnimationProperties

View File

@@ -0,0 +1,71 @@
# Basic Layout
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 element is represented as a rectangle for layout purposes. This rectangle can be manipulated in the Scene View using the **Rect Tool** in the toolbar. The Rect Tool is used both for Unity's 2D features and for UI, and in fact can be used even for 3D objects as well.
![Toolbar buttons with Rect Tool selected](images/GUI_Rect_Tool_Button.png)
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](images/GUI_Pivot_Local_Buttons.png)
## Rect Transform
The **Rect Transform** is a new transform component that is used for all UI elements instead of the regular **Transform** component.
![](images/UI_RectTransform.png)
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 Sprites 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 will not affect font sizes, border on sliced images, and so on.
### 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 View.
![](images/UI_PivotRotate.png)
### 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 Inspector.
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.](images/UI_Anchored1.gif)
![UI element anchored to the lower right corner of the parent. The element maintains a fixed offset to the lower right corner.](images/UI_Anchored2.gif)
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.](images/UI_Anchored3.gif)
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 are not 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.](images/UI_Anchored4.gif)
You can drag each of the anchors individually, or if they are 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 quickly 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.
![](images/UI_AnchorPreset.png)
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).
![](images/UI_RectTransform.png)
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 are 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 is not 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.

View File

@@ -0,0 +1,34 @@
# Canvas
The **Canvas** is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.
Creating a new UI element, such as an Image using the menu **GameObject > UI > Image**, automatically creates a Canvas, if there isn't already a Canvas in the scene. The UI element is created as a child to this Canvas.
The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times.
**Canvas** uses the EventSystem object to help the Messaging System.
## Draw order of elements
UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. The first child is drawn first, the second child next, and so on. If two UI elements overlap, the later one will appear on top of the earlier one.
To change which element appear on top of other elements, simply reorder the elements in the Hierarchy by dragging them. The order can also be controlled from scripting by using these methods on the Transform component: SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.
## Render Modes
The Canvas has a **Render Mode** setting which can be used to make it render in screen space or world space.
### Screen Space - Overlay
This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this.
![UI in screen space overlay canvas](images/GUI_Canvas_Screenspace_Overlay.png)
### Screen Space - Camera
This is similar to **Screen Space - Overlay**, but in this render mode the Canvas is placed a given distance in front of a specified **Camera**. The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI. If the Camera is set to **Perspective**, the UI elements will be rendered with perspective, and the amount of perspective distortion can be controlled by the Camera **Field of View**. If the screen is resized, changes resolution, or the camera frustum changes, the Canvas will automatically change size to match as well.
![UI in screen space camera canvas](images/GUI_Canvas_Screenspace_Camera.png)
### World Space
In this render mode, the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement. This is useful for UIs that are meant to be a part of the world. This is also known as a "diegetic interface".
![UI in world space canvas](images/GUI_Canvas_Worldspace.png)

View File

@@ -0,0 +1,3 @@
# UI How Tos
In this section you can learn about solutions to common UI tasks.

View File

@@ -0,0 +1,84 @@
# Interaction Components
This section covers components in the UI system that handles interaction, such as mouse or touch events and interaction using a keyboard or controller.
The interaction components are not visible on their own, and must be combined with one or more [visual components](UIVisualComponents.md) in order to work correctly.
## Common Functionality
Most of the interaction components have some things in common. They are selectables, which means they have shared built-in functionality for visualising transitions between states (normal, highlighted, pressed, disabled), and for navigation to other selectables using keyboard or controller. This shared functionality is described on the [Selectable](script-Selectable.md) page.
The interaction components have at least one UnityEvent that is invoked when user interacts with the component in specific way. The UI system catches and logs any exceptions that propagate out of code attached to UnityEvent.
## Button
A Button has an **OnClick** UnityEvent to define what it will do when clicked.
![](images/UI_ButtonExample.png)
See the [Button](script-Button.md) page for details on using the Button component.
## Toggle
A Toggle has an **Is On** checkbox that determines whether the Toggle is currently on or off. This value is flipped when the user clicks the Toggle, and a visual checkmark can be turned on or off accordingly. It also has an **OnValueChanged** UnityEvent to define what it will do when the value is changed.
![](images/UI_ToggleExample.png)
See the [Toggle](script-Toggle.md) page for details on using the Toggle component.
## Toggle Group
A Toggle Group can be used to group a set of [Toggles](script-Toggle.md) that are mutually exclusive. Toggles that belong to the same group are constrained so that only one of them can be selected at a time - selecting one of them automatically deselects all the others.
![](images/UI_ToggleGroupExample.png)
See the [Toggle Group](script-ToggleGroup.md) page for details on using the Toggle Group component.
## Slider
A Slider has a decimal number **Value** that the user can drag between a minimum and maximum value. It can be either horizontal or vertical. It also has a **OnValueChanged** UnityEvent to define what it will do when the value is changed.
![](images/UI_SliderExample.png)
See the [Slider](script-Slider.md) page for details on using the Slider component.
## Scrollbar
A Scrollbar has a decimal number **Value** between 0 and 1. When the user drags the scrollbar, the value changes accordingly.
Scrollbars are often used together with a [Scroll Rect](script-ScrollRect.md) and a [Mask](script-Mask.md) to create a scroll view. The Scrollbar has a **Size** value between 0 and 1 that determines how big the handle is as a fraction of the entire scrollbar length. This is often controlled from another component to indicate how big a proportion of the content in a scroll view is visible. The Scroll Rect component can automatically do this.
The Scrollbar can be either horizontal or vertical. It also has a **OnValueChanged** UnityEvent to define what it will do when the value is changed.
![](images/UI_ScrollbarExample.png)
See the [Scrollbar](script-Scrollbar.md) page for details on using the Scrollbar component.
## Dropdown
A Dropdown has a list of options to choose from. A text string and optionally an image can be specified for each option, and can be set either in the Inspector or dynamically from code. It has a **OnValueChanged** UnityEvent to define what it will do when the currently chosen option is changed.
![](images/UI_DropdownExample.png)
See the [Dropdown](script-Dropdown.md) page for details on using the Dropdown component.
## Input Field
An Input Field is used to make the text of a [Text Element](script-Text.md) editable by the user. It has a UnityEvent to define what it will do when the text content is changed, and an another to define what it will do when the user has finished editing it.
![](images/UI_InputFieldExample.png)
See the [Input Field](script-InputField.md) page for details on using the Input Field component.
## Scroll Rect (Scroll View)
A Scroll Rect can be used when content that takes up a lot of space needs to be displayed in a small area. The Scroll Rect provides functionality to scroll over this content.
Usually a Scroll Rect is combined with a [Mask](script-Mask.md) in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible. It can also additionally be combined with one or two [Scrollbars](script-Scrollbar.md) that can be dragged to scroll horizontally or vertically.
![](images/UI_ScrollRectExample.png)
See the [Scroll Rect](script-ScrollRect.md) page for details on using the Scroll Rect component.

View File

@@ -0,0 +1,3 @@
# UI Reference
This section goes into more depth about Unitys UI features.

View File

@@ -0,0 +1,43 @@
# Visual Components
With the introduction of the UI system, new Components have been added that will help you create GUI specific functionality. This section will cover the basics of the new Components that can be created.
## Text
![](images/UI_TextInspector.png)
The **Text** component, which is also known as a Label, has a Text area for entering the text that will be displayed. It is possible to set the font, font style, font size and whether or not the text has rich text capability.
There are options to set the alignment of the text, settings for horizontal and vertical overflow which control what happens if the text is larger than the width or height of the rectangle, and a Best Fit option that makes the text resize to fit the available space.
## Image
![](images/UI_ImageInspector.png)
An Image has a Rect Transform component and an **Image** component. A sprite can be applied to the Image component under the Target Graphic field, and its colour can be set in the Color field. A material can also be applied to the Image component. The Image Type field defines how the applied sprite will appear, the options are:
* **Simple** - Scales the whole sprite equally.
* **Sliced** - Utilises the 3x3 sprite division so that resizing does not distort corners and only the center part is stretched.
* **Tiled** - Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For sprites with no borders at all, the entire sprite is tiled.
* **Filled** - Shows the sprite in the same way as Simple does except that it fills in the sprite from an origin in a defined direction, method and amount.
The option to Set Native Size, which is shown when Simple or Filled is selected, resets the image to the original sprite size.
Images can be imported as **UI sprites** by selecting Sprite( 2D / UI) from the 'Texture Type' settings. Sprites have extra import settings compared to the old GUI sprites, the biggest difference is the addition of the sprite editor. The sprite editor provides the option of **9-slicing** the image, this splits the image into 9 areas so that if the sprite is resized the corners are not stretched or distorted.
![](images/UI_SpriteEditor.png)
## Raw Image
The Image component takes a sprite but **Raw Image** takes a texture (no borders etc). Raw Image should only be used if necessary otherwise Image will be suitable in the majority of cases.
## Mask
A Mask is not a visible UI control but rather a way to modify the appearance of a controls child elements. The mask restricts (ie, “masks”) the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.
## Effects
Visual components can also have various simple effects applied, such as a simple drop shadow or outline. See the [UI Effects](comp-UIEffects.md) reference page for more information.

View File

@@ -0,0 +1,52 @@
# Canvas
The **Canvas** component represents the abstract space in which the UI is laid out and rendered. All UI elements must be children of a GameObject that has a Canvas component attached. When you create a UI element object from the menu (**GameObject > Create UI**), a Canvas object will be created automatically if there isn't one in the scene already.
![Screen Space - Overlay Set](images/UI_CanvasInspector.png)
![Screen Space - Camera Set](images/UI_CanvasScreenSpaceCameraInspector.png)
![World Space Set](images/UI_CanvasWorldSpaceInspector.png)
## Properties
|**Property:** |**Function:** |
|:---|:---|
|**Render Mode** | The way the UI is rendered to the screen or as an object in 3D space (see below). The options are _Screen Space - Overlay_, _Screen Space - Camera_ and _World Space_. |
|**Pixel Perfect (_Screen Space_ modes only)** |Should the UI be rendered without antialiasing for precision? |
|**Render Camera (_Screen Space - Camera_ mode only)** |The camera to which the UI should be rendered (see below). |
|**Plane Distance (_Screen Space - Camera_ mode only)** |The distance at which the UI plane should be placed in front of the camera. |
|**Event Camera (_World Space_ mode only)** |The camera that will be used to process UI events. |
|**Receives Events** |Are UI events processed by this Canvas? |
## Details
A single Canvas for all UI elements is sufficient but multiple Canvases in the scene is possible. It is also possible use nested Canvases, where one Canvas is placed as a child of another for optimization purposes. A nested Canvas uses the same Render Mode as its parent.
Traditionally, UIs are rendered as if they were simple graphic designs drawn directly on the screen. That is to say, they have no concept of a 3D space being viewed by a camera. Unity supports this kind of screen space rendering but also allows UIs to rendered as objects in the scene, depending on the value of the _Render Mode_ property. The modes available are **Screen Space - Overlay**, **Screen Space - Camera** and **World Space**.
### Screen Space - Overlay
In this mode, the Canvas is scaled to fit the screen and then rendered directly without reference to the scene or a camera (the UI will be rendered even if there is no camera in the scene at all). If the screen's size or resolution are changed then the UI will automatically rescale to fit. The UI will be drawn over any other graphics such as the camera view.
![Overlay UI rendered over scene objects](images/CanvasOverlay.png)
Note: The Screen Space - Overlay canvas needs to be stored at the top level of the hierarchy. If this is not used then the UI may disappear from the view. This is a built-in limitation. Keep the Screen Space - Overlay canvas at the top level of the hierarchy to get expected results.
### Screen Space - Camera
In this mode, the Canvas is rendered as if it were drawn on a plane object some distance in front of a given camera. The onscreen size of the UI does not vary with the distance since it is always rescaled to fit exactly within the [camera frustum](https://docs.unity3d.com/Manual/FrustumSizeAtDistance.html). If the screen's size or resolution or the camera frustum are changed then the UI will automatically rescale to fit. Any 3D objects in the scene that are closer to the camera than the UI plane will be rendered in front of the UI, while objects behind the plane will be obscured.
![Camera mode UI with scene objects in front](images/CanvasCamera.png)
### World Space
This mode renders the UI as if it were a plane object in the scene. Unlike _Screen Space - Camera_ mode, however, the plane need not face the camera and can be oriented however you like. The size of the Canvas can be set using its Rect Transform but its onscreen size will depend on the viewing angle and distance of the camera. Other scene objects can pass behind, through or in front of the Canvas.
![World space UI intersecting scene objects](images/CanvasWorldSpace.png)
## Hints
* Read more about setting up a World Space Canvas on the [Creating a World Space UI](HOWTO-UIWorldSpace.md) page.
* For information about making your Canvas and UI scale to different resolutions or aspect ratios, see the [Designing UI for Multiple Resolutions](HOWTO-UIMultiResolution.md) page as well as the [Canvas Scaler](script-CanvasScaler.md) page.

View File

@@ -0,0 +1,22 @@
# Canvas Group
The Canvas Group can be used to control certain aspects of a whole group of UI elements from one place without needing to handle them each individually. The properties of the Canvas Group affect the GameObject it is on as well as all children.
![](images/UI_CanvasGroupInspector.png)
## Properties
|**Property:** |**Function:** |
|:---|:---|
|**Alpha** | The opacity of the UI elements in this group. The value is between 0 and 1 where 0 is fully transparent and 1 is fully opaque. Note that elements retain their own transparency as well, so the Canvas Group alpha and the alpha values of the individual UI elements are multiplied with each other. |
|**Interactable** | Determines if this component will accept input. When it is set to false interaction is disabled. |
|**Block Raycasts** | Will this component act as a collider for Raycasts? You will need to call the RayCast function on the graphic raycaster attached to the Canvas. This does _not_ apply to **Physics.Raycast**. |
|**Ignore Parent Groups** | Will this group also be affected by the settings in Canvas Group components further up in the Game Object hierarchy, or will it ignore those and hence override them? |
## Details
Typical uses of Canvas Group are:
* Fading in or out a whole window by adding a Canvas Group on the GameObject of the Window and control its Alpha property.
* Making a whole set of controls non-interactable ("grayed out") by adding a Canvas Group to a parent GameObject and setting its Interactable property to false.
* Making one or more UI elements not block mouse events by placing a Canvas Group component on the element or one of its parents and setting its Block Raycasts property to false.

View File

@@ -0,0 +1,14 @@
# Canvas Renderer
The **Canvas Renderer** component renders a graphical UI object contained within a [Canvas](class-Canvas.md).
![](images/UI_CanvasRendererInspector.png)
## Properties
The Canvas Renderer has no properties exposed in the inspector.
## Details
The standard UI objects available from the menu (**GameObject &gt; Create UI**) all have Canvas Renderers attached wherever they are required but you may need to add this component manually for custom UI objects. Although there are no properties exposed in the inspector, a few properties and function can be accessed from scripts - see the [CanvasRenderer](https://docs.unity3d.com/ScriptReference/CanvasRenderer.html.md) page in the Script Reference for full details.

View File

@@ -0,0 +1,31 @@
# Rect Transform
The **Rect Transform** component is the 2D layout counterpart of the [Transform](https://docs.unity3d.com/Manual/class-Transform.html) component. Where Transform represents a single point, Rect Transform represent a rectangle that a UI 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.
![](images/UI_RectTransform.png)
## 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. |
|**Anchors** | The anchor points for the lower left corner and the upper right corner of the rectangle. |
|&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;**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. |
|&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;**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](UIBasicLayout.md) page for a full introduction and overview of how to use the Rect Transform.

View File

@@ -0,0 +1,8 @@
# Canvas Components
All UI Components are placed within a [Canvas](UICanvas.md).
* [Canvas](class-Canvas.md)
* [Canvas Scaler](script-CanvasScaler.md)
* [Canvas Group](class-CanvasGroup.md)
* [Canvas Renderer](class-CanvasRenderer.md)

View File

@@ -0,0 +1,9 @@
# Auto Layout
The [auto layout](UIAutoLayout.md) system provides ways to place elements in nested layout groups such as horizontal groups, vertical groups, or grids. It also allows elements to automatically be sized according to the contained content.
* [Content Size Fitter](script-ContentSizeFitter.md)
* [Layout Element](script-LayoutElement.md)
* [Horizontal Layout Group](script-HorizontalLayoutGroup.md)
* [Vertical Layout Group](script-VerticalLayoutGroup.md)
* [Grid Layout Group](script-GridLayoutGroup.md)

View File

@@ -0,0 +1,7 @@
# UI Effect Components
The effects components allow adding simple effects to Text and Image graphics, such as shadow and outline.
* [Shadow](script-Shadow.md)
* [Outline](script-Outline.md)
* [Position as UV1](script-PositionAsUV1.md)

View File

@@ -0,0 +1,12 @@
# Interaction Components
The [interaction components](UIInteractionComponents.md) in the UI system handle interaction, such as mouse or touch events and interaction using a keyboard or controller.
* [Selectable Base Class](script-Selectable.md)
* [Button](script-Button.md)
* [Toggle](script-Toggle.md)
* [Toggle Group](script-ToggleGroup.md)
* [Slider](script-Slider.md)
* [Scrollbar](script-Scrollbar.md)
* [Scroll Rect](script-ScrollRect.md)
* [InputField](script-InputField.md)

View File

@@ -0,0 +1,8 @@
# Visual Components
The [visual components](UIVisualComponents.md) allow for ease of creation and GUI specific functionality.
* [Text](script-Text.md)
* [Image](script-Image.md)
* [Raw Image](script-RawImage.md)
* [Mask](script-Mask.md)

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Some files were not shown because too many files have changed in this diff Show More