Creating an NPC That Allows Us to Change Our Appearance

A fun feature for our metaverse is to allow our users to choose an alternative appearance. This will be very easy as we will follow most of the steps in Chapter 7, Building an NPC That Allows Us to Travel. The mechanism we will build in this chapter will allow you to add multiple avatars that your users will be able to select from a custom window.

We will also modify some existing scripts to allow avatar changes to be saved to PlayerPrefs, a new concept we will learn about in this chapter, so that when a user logs in again, the previously selected avatar will be loaded.

In the following figure, you can see the final result of the NPC that we are going to build throughout this chapter. It is spectacular, isn’t it?

Figure 11.1 – Final result

We will cover the following topics in this chapter:

• Choosing an aspect
• Bringing the NPC to life
• Triggering the NPC when we are...

Technical requirements

This chapter does not require any special technical requirements, but as we will start programming scripts in C#, it would be advisable to have basic knowledge of this programming language. You will need an internet connection to browse and download an asset from the Unity Asset Store.

We will continue on the project we created during Chapter 1, Getting Started with Unity and Firebase. Remember that we have the GitHub repository (https://github.com/PacktPublishing/Build-Your-Own-Metaverse-with-Unity/tree/main/UnityProject), which will contain the complete project that we will work on here.

You can also find the complete code for this chapter on GitHub at: https://github.com/PacktPublishing/Build-Your-Own-Metaverse-with-Unity/tree/main/Chapter11

Choosing an aspect

To get a 3D character, we will go back to the Mixamo website, just like we did in Chapter 2 for our main character. The steps we will take during this section are the same for all the characters we will find on the Mixamo website; what I mean by this is you are totally free to choose the character with the look you like the most from the list.

Without further ado, let’s get down to business.

The first thing we will do is choose a character in Mixamo. To do so, follow these steps:

1. Go to the following website: https://www.mixamo.com.
2. Sign in with your username or create a new account; it’s free.
3. Click on the Characters tab and choose the one you like the most. In my case, I have chosen Kaya, who has a look that really brings out his clothes, which invites us to think that he can help us with our appearance, don’t you think?

Figure 11.2 – Selecting a character in Mixamo

4. We will...

Bringing the NPC to life

This NPC will be present in our main world, and when the players want to change their appearance, they will have to come back to our nice village; endearing, isn’t it? We will create a Prefab that houses the character and its functionalities.

To achieve this, we will follow these steps:

1. Anywhere in MainScene, drag and drop the Kaya@Happy Idle asset. If we click Play, we will see that the character is static: it has no life, and it doesn’t move with the animation we selected in Mixamo. This happens because we need to add an Animator component and link the animation.

Figure 11.8 – Placing the character in the scene

2. With the Kaya@Happy Idle GameObject, click on the Add Component button in the Inspector panel and add the Animator component.

Figure 11.9 – Animator component

3. The Animator component needs an Animator Controller. To create an Animator...

Triggering the NPC when we are close

Do you remember a game with an NPC in which, when you approach them, the typical text Press the ‘E’ key to interact appears on the screen? That’s exactly what we’re going to program. We will create a radius of influence for the NPC; when we enter this radius, we will show the message, and if we leave, we will hide it.

The radius of influence will be a Collider. In Unity, Colliders emit a trigger when an object containing a Rigidbody component comes into contact; the same happens when the object leaves the Collider. We will use these events to create our dialog flow.

To create our area of influence, we will first add a Collider:

1. To do this, right-click on the GameObject of our NPC called Kaya@Happy Idle and select 3D Object | Cube, then rename it Influence.
2. Change the size of the cube to your own liking.

Figure 11.13 – Adding a cube to the scene

3. Finally, with...

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...

Persisting the new appearance

PlayerPrefs is a class in Unity3D that is used to store player configuration data. It allows developers to save and load persistent values on the user’s device, meaning that the values will be retained after closing and reopening the game.

It is useful for saving information such as audio settings, player high score, game progress, and other player data. It can also be used to create a personalized experience for the player, for example, allowing them to choose their own username or the color of their character; in our case, it will be the selected avatar.

To use PlayerPrefs in your Unity3D project, simply call its static methods to save and load data. For example, to save the player’s high score, you can use the following code:

int highScore = 1000;
PlayerPrefs.SetInt("HighScore", highScore);

And to load the previously saved high score, you can use the following code:

int savedHighScore = PlayerPrefs.GetInt("...

Summary

Throughout this exciting chapter, we learned how to create a new NPC for our virtual world. This time, our NPC offers new functionality to your metaverse, allowing users to choose an alternative avatar. We have learned about a new UI component called Grid Layout Grid, which allows for the row and column layout of a multitude of child components and offers scrolling for easy navigation.

We also learned how to replace one Prefab with another, being now able to customize a character at runtime through code. To save the user’s choice, we learned about the PlayerPrefs class, a fast and efficient way to save simple information in the user’s session.

In the next chapter, we will deal with a very interesting functionality: we will create screens that allow you to play streaming videos in your scene, and you will be able to play videos hosted on a server or hosting. This is very interesting if you want to make, for example, a cinema-type scene, advertising videos...