In this chapter, we will cover the following recipes:
- Setting up a 2D texture to be a bordered sprite
- Resizing the UI according to screen size and resolution
- Adding and placing an image in the UI
- Adding a circular mask to an image
- Making an image scrollable
- Making text scrollable with a vertical slider
- Selecting buttons through the keyboard
- Using UI layout components
This chapter explains how to use the essential tools for creating more complex interfaces. These tools include placing and scaling UI elements, using masks to shape figures, and making images and text scrollable along with sliders.
We start by creating a sprite with a border. It can be scaled up or down without distorting. Then, we will proceed with explaining how to make our UI resizable according to the resolution of our screen.
Later, we will introduce the most used UI component — the Image (Script). Then, you will learn how to implement more complex transformations, such as masking it or making it scrollable.
We will also see how to select buttons using the input from the keyboard by introducing how we can develop scripts that are able to interact with our UI.
Finally, we will look at the UI layout components that allow us to easily create and structure a very wide UI.
To get started with this chapter, we will need to have Unity 5 running, and we must create a new project. The project can be set in 3D or 2D, depending on which one better suits the game that we wish to make. However, if it is set in 2D, Unity will automatically import our images as sprites. Lastly, ensure that you have some nice images of your choice for use in the examples, such an ancient map.