Building an NPC That Allows Us to Travel

Non-Player Characters (NPCs) are characters that we usually find in video games. They have scripted behavior and serve mainly to offer the real player some kind of service. I am sure you have interacted with one of them in a video game.

In our metaverse, we will learn how to program our own NPC. For us, this character will serve as a gateway to other scenes. Her script will be to show us a list of available worlds. This will be achieved by launching a query to the Firestore Worlds collection.

Figure 7.1 – Final result of the NPC created in this chapter

We will cover the following topics:

• Choosing an aspect
• Bringing the NPC to life
• Triggering when we are close
• Showing the available worlds in a window
• Traveling to the selected world

Technical requirements

This chapter does not have any special technical requirements, but we will be programming with scripts in C#. It would be advisable to have basic knowledge of this programming language. We need an internet connection to browse and download an asset from the Unity Asset Store. We will continue with the project we created in Chapter 1, Getting Started with Unity and Firebase.

Remember that we have a GitHub repository, https://github.com/PacktPublishing/Build-Your-Own-Metaverse-with-Unity/tree/main/UnityProject, which contains 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/Chapter07

Choosing an aspect

To get a 3D character, we will go back to the Mixamo website, just like we did in Chapter 2, Preparing Our Player, for our main character. The steps we will take in this section are the same as required for any characters we will find on the Mixamo website. What I mean by this is you are totally free to choose whichever character you like the most.

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 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 Peasant Girl. I think she has a magical touch, which is very appropriate for traveling between worlds.

Figure 7.2 – Selecting an FBX model for our NPC in Mixamo

4. We will take the opportunity to implement a default...

Bringing the NPC to life

Our NPC will be present in all the scenes; otherwise, we will not be able to leave the world. To facilitate this task, 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 Peasant Girl@Dwarf 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 is because we need to add an Animator component and link the animation.

Figure 7.8 – Placing the FBX model in the scene

2. While in the Peasant Girl@Dwarf Idle GameObject, click on the Add Component button in the Inspector panel and add the Animator component.

Figure 7.9 – Animator component

3. The Animator component needs an Animator Controller. To create an Animator Controller, in the Assets | _App | Characters...

Triggering when we are close

Can you think of a game with an NPC where 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 the player enters this radius, we will show the message; when they leave it, we will hide the message.

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

1. To create our area of influence, we will first add a Collider. To do this, right-click on the GameObject of our NPC called Peasant Girl@Dwarf Idle and select 3D Object | Cube. Rename it Influence.

Figure 7.16 – Placing a cube on the scene

2. Use the Scale and Move tools to zoom and...

Showing the available worlds in a window

Throughout this section, we will learn about new Unity UI components that will allow us to build interfaces with new functionalities. In previous chapters, we learned how to implement buttons and text inputs. Now it’s time to learn about the Scroll Rect component.

Figure 7.26 – Example of the Scroll View component

This component allows us to insert large content into a fixed-size container and make the excess content scrollable. It can be configured to scroll vertically, horizontally, or both.

We will use the Scroll Rect component to host the list of available worlds we want to display to the user.

Tip: Detailed information about Scroll Rect

If after getting to know this component you are curious about what it has to offer, I recommend that you visit https://docs.unity3d.com/es/2018.4/Manual/script–ScrollRect.html.

Now, we will start the creation of our popup with scrollable content...

Traveling to the selected world

As previously mentioned, if we travel to World 1, the player does not appear. This is normal. We must bear in mind that every time we create a new navigable world, we must have the same world configuration in the destination world as the one we traveled to in order to be able to land properly.

In this case, in World 1, we don’t have the SpawnPoint Prefab we created in the preceding chapter in the scene, so the player doesn’t find a place to appear. We also don’t have our NPC there to travel to, so if we manage to travel there, we have no way to go back or continue navigating to other worlds.

In the following section, we will correct this problem. We will create the interface with a Canvas to allow the user to interact with the NPC again.

Canvas

To fix this, we will follow these steps and you will need to repeat them for every new scene you build in the future, as long as you want to allow travel there:

1. Open the...

Summary

Throughout this chapter, we learned how to create our first NPC, a nice, animated character that will help us in our Metaverse to travel to other worlds. Our NPC has an area of influence, which we programmed to detect when the player enters or leaves. We also learned about a new Unity UI feature, Scroll View, which we linked with a query to the Firestore database to dump the Worlds collection into a scrolling view. Finally, the user can select any of these worlds to travel to another scene.

In the next chapter, we will learn how to program scripts that allow a user to get a house in ownership, link the house to the player’s owner, and finally, persist the data in the Firestore database.