Episode
Useful tipps and tricks for working with the Unity UI system across platforms
In order to develop for multiple target devices or device families - especially having the Windows 10 Universal Windows Platform in mind - we need to apply some techniques in terms of User Interface design that make our lives a bit easier in the long run.
So I have compiled a few useful tipps and tricks - and I am happy to create more of these, if you have suggestions (simply add them to the comments).
As it really is a visual thing I strongly recommend you to watch the video - but here is a little text reference:
The text field is too small for the content!
Generally speaking you shouldn't have to manually resize any UI element once the content changes - that becomes tedious. So simply use the component called Content Size Fitter and set both Horizontal Fit and Vertical Fit to Preferred Size.
The layout keeps moving around and changing!
When you work with varying screen sizes and aspect ratios, it is important to work with anchors. For each element you can set a reference point, so called anchor, from which the position will be relative to. So the closest point should be your anchor in order to avoid UI Elements jumping out of the screen.
The UI isn't scaling properly or is distorted!
The Canvas game object has (or can have) a really cool component called Canvas Scaler handling everything UI scale wise.
By default it is set to Constant Pixel Size, but you can also set it to Scale with Screen Size so that the UI Elements scale up and down with the screen size. You can match the scaling by height, width or something in the middle. For a balanced scaling, set the Match value to 0.5.
Scaling is super important when dealing with vast differences in screen sizes - think of unreadably small text blocks on big screens or impossibly big buttons on smart phone screens. This one is especially important when working with Windows 10 apps.
Group UI Elements
You can use the Panel game object to group Elements - especially with the added component Horizontal/Vertical Layout Group which is similar to the XAML/C# StackPanel to layout elements.
"Padding" is very similar to the Margin values in XAML - it defines the distance between the edge of an element and the content. Spacing defines the distance between child elements.
Child Alignment is fairly self explanatory - it defines the alignment of the child elements. :)
Child Force Expand will force child elements to the expanded to the space available. However, please remove the Content Size Fitter from all child elements and, if desired, apply it to the Panel Game Object.
The button content is invisible / the button is only a blob!
If your Button is a child element of a panel with above components applied, it is quite likely it will just appear as a tiny blob. You can fix that by giving the button it's own Horizontal or Vertical Layout Group. Fix the padding and if desired remove the Force Expand - now the content is visible again.
Have an image instead of Text for the button
If you would rather have iconographic buttons with your own designs, add them to your project assets as Sprite and then add UI -> Image as child element to the button. Assign the previously added Sprite to the Image Object. You can then remove the text.
My Player Object reacts to button clicks, too and I don't want that!
This is a relatively common issue for which I have seen some solutions that require Raycast and all. However, Richard pointed me to an element that allowed for a much easier solution! Use the Unity EventSystem and the contained property currentSelectedGameObject.This way you can check what has been clicked - and thus react accordingly. The JumpScript from the video looks as follows - but I can highly recommend you to watch it in order to see how the elements are connected.
In order to develop for multiple target devices or device families - especially having the Windows 10 Universal Windows Platform in mind - we need to apply some techniques in terms of User Interface design that make our lives a bit easier in the long run.
So I have compiled a few useful tipps and tricks - and I am happy to create more of these, if you have suggestions (simply add them to the comments).
As it really is a visual thing I strongly recommend you to watch the video - but here is a little text reference:
The text field is too small for the content!
Generally speaking you shouldn't have to manually resize any UI element once the content changes - that becomes tedious. So simply use the component called Content Size Fitter and set both Horizontal Fit and Vertical Fit to Preferred Size.
The layout keeps moving around and changing!
When you work with varying screen sizes and aspect ratios, it is important to work with anchors. For each element you can set a reference point, so called anchor, from which the position will be relative to. So the closest point should be your anchor in order to avoid UI Elements jumping out of the screen.
The UI isn't scaling properly or is distorted!
The Canvas game object has (or can have) a really cool component called Canvas Scaler handling everything UI scale wise.
By default it is set to Constant Pixel Size, but you can also set it to Scale with Screen Size so that the UI Elements scale up and down with the screen size. You can match the scaling by height, width or something in the middle. For a balanced scaling, set the Match value to 0.5.
Scaling is super important when dealing with vast differences in screen sizes - think of unreadably small text blocks on big screens or impossibly big buttons on smart phone screens. This one is especially important when working with Windows 10 apps.
Group UI Elements
You can use the Panel game object to group Elements - especially with the added component Horizontal/Vertical Layout Group which is similar to the XAML/C# StackPanel to layout elements.
"Padding" is very similar to the Margin values in XAML - it defines the distance between the edge of an element and the content. Spacing defines the distance between child elements.
Child Alignment is fairly self explanatory - it defines the alignment of the child elements. :)
Child Force Expand will force child elements to the expanded to the space available. However, please remove the Content Size Fitter from all child elements and, if desired, apply it to the Panel Game Object.
The button content is invisible / the button is only a blob!
If your Button is a child element of a panel with above components applied, it is quite likely it will just appear as a tiny blob. You can fix that by giving the button it's own Horizontal or Vertical Layout Group. Fix the padding and if desired remove the Force Expand - now the content is visible again.
Have an image instead of Text for the button
If you would rather have iconographic buttons with your own designs, add them to your project assets as Sprite and then add UI -> Image as child element to the button. Assign the previously added Sprite to the Image Object. You can then remove the text.
My Player Object reacts to button clicks, too and I don't want that!
This is a relatively common issue for which I have seen some solutions that require Raycast and all. However, Richard pointed me to an element that allowed for a much easier solution! Use the Unity EventSystem and the contained property currentSelectedGameObject.This way you can check what has been clicked - and thus react accordingly. The JumpScript from the video looks as follows - but I can highly recommend you to watch it in order to see how the elements are connected.
Feedback? Melden Sie hier ein Problem.