Responsive UI
Introduction
In this guide, you will learn how to create a responsive user interface (UI) for your game. A responsive UI adapts to different screen sizes and orientations, ensuring that your game looks great on all devices.
Assuming you have a basic understanding of UI design and development, this guide will focus on creating a responsive UI in Highrise Studio.
Designing a Responsive Container
To create a responsive UI, you need to design a container that adapts to different screen sizes.
<hr:UILuaView class="example">
<VisualElement class="container">
<!-- Add UI elements here -->
</VisualElement>
</hr:UILuaView>
Now in your USS file, you can define the container's style properties.
.example {
display: flex; /* Use flexbox layout */
align-self: center; /* Center horizontally */
justify-content: center; /* Center vertically */
align-items: center; /* Center items horizontally */
width: 100%; /* Full width */
height: 100%; /* Full height */
}
.container {
display: flex; /* Use flexbox layout */
flex-wrap: wrap; /* Wrap items */
min-height: 450px; /* Minimum height */
min-width: 350px; /* Minimum width */
max-height: 660px; /* Maximum height */
max-width: 800px; /* Maximum width */
}
The example
class has a display
property set to flex
, which enables the use of flexbox layout. The width
and height
properties are set to 100%
, ensuring that the container takes up the full width and height of the screen.
The min-height
, min-width
properties define the minimum dimensions of the container and usually correspond to the smallest screen size you want to support. The max-height
, max-width
properties define the maximum dimensions of the container and usually correspond to the largest screen size you want to support.
flex-wrap
allows the container to wrap its items when they exceed the available space, ensuring that they remain visible on smaller screens.
Creating Responsive Text
<hr:UILuaView class="example">
<VisualElement class="container">
<VisualElement class="description">
<hr:UILabel class="text" name="_descText" />
</VisualElement>
</VisualElement>
</hr:UILuaView>
We will only focus on styling the text element in this example. The "example" class and the container styles are the same as the previous example.
.description {
width: 100%; /* Full width */
height: 100%; /* Full height */
padding: 20px; /* Add padding */
font-size: 16px; /* Set font size */
-unity-text-align: middle-center; /* Center text */
flex-wrap: wrap; /* Wrap text */
flex-grow: 1; /* Grow to fill available space */
}
/** This is the important part **/
.text {
white-space: normal; /* Allow text to wrap */
}
The description
class has a font-size
property set to 16px
, which defines the size of the text. The white-space
property is set to normal
, allowing the text to wrap when it reaches the edge of the container.
The flex-grow
property is set to 1
, which allows the text to grow to fill the available space within the container.
The text
class has the white-space
property set to normal
, ensuring that the text wraps correctly within the container.
Additional Resources
To get a better understanding of UI design and development, we suggest you check out USS Properties that can help you style your UI elements effectively.
Conclusion
By following these steps, you can create a responsive UI for your game that adapts to different screen sizes and orientations. This will help ensure that your game looks great on all devices, providing a better user experience for your players.
Updated 25 days ago