Making our shop scene support alternative screen ratios

In this section, we are going to take our current shop scene and make it compatible with various screen ratios. Currently, our shop visuals are made out of polygons, which look fine, but, for example, our selection grid of buttons at the bottom of the screen has the risk of being clipped off at the edges. We can also change the way we select our buttons by using Unity's Button component, which works within the Canvas.

Figure 9.32 – There is a wide range of ratios in what a game is displayed in

Because of these UI changes, this will cut our code down and make it more efficient as we will be relying on click events. We will cover these later in this section.

Let's make a start by replacing the selection grid at the bottom of our shop scene.

Upgrading our shop selection

In this section, we are going to remove all of the shop buttons and replace them with a Horizontal Layout Group...