Showing the available avatars in a window

Unlike in Chapter 7, Building an NPC That Allows Us to Travel (where we created a window with a Scroll Rect component that displayed a list with text and a button, allowing us to navigate to other worlds), here we will now see how we can display a list with images. These images will be the visual representations of the available avatars; sounds interesting, doesn’t it? For now, we will use the Scroll Rect component to host the list of available worlds we want to show to the user.

Now, we will start the creation of our popup with scrollable content. To do so, follow these steps:

1. We currently have a Canvas element in the scene as a child. In Chapter 7, Building an NPC That Allows Us to Travel, we created a GameObject with a panel to group everything related to the window that showed the available worlds.

Figure 11.21 – GameObject Canvas in the Hierarchy panel

We will follow the same pattern...