Improving Upon Selection Highlighting in Our Game — Part 1

This article is about the development process of our first game. During the process, we are learning how to use Unity & Blender from scratch to create everything you see in the article, enjoy!

Introduction

Hi and welcome to the next step in the journey of our first game, this time we will be taking a small break from implementing the vehicle system and focusing on another area that can be improved; highlighting item selection.

To give an example of what I mean, imagine that in our game you have a bunch of items in front of you and you press E to pick one up. Since you are within range of all of them, the game is going to pick the one you came within range of first and pick that up. As the player, how would you know which one would be picked up when you pressed E?

That is where item selection highlighters come into play, these are graphics that help the player understand which item will be interacted with when using a certain key.

Plenty of plants in the sky for me!

As you can see from the video above, we have implemented a blue arrow that appears above the item that is currently selected, and that way you know which item will be interacted with when you press E.

Detailing the Limitations

Adding Selection Arrows to Static Items

Currently, only items that can be picked up and carried, can use the selection highlight system but after playing the game, I noticed that I came to expect the arrows to appear for all items that you can interact with, such as the store, the water pump, vehicles and so on.

Being Able To Switch the Selected Item

Currently, if you have a bunch of items within range that can be picked up, the game will always choose the closest item and let you interact with that until it is no longer within range.

So how do you pick up another item that is not selected? You would have to move all the other items aside until the game selects the correct one for you, which is hardly an ideal situation.

A lot of work just to grab the spade!

So a better solution would be to press Tab and cycle through all items within range until you have the correct one and then interact with it right away without having to move all of the other items out of the way.

The Current State of the Selection System

Before we begin, let’s take a more in-depth look at how the selection system currently works.

I have attached a script to the player game object called ItemDetector() that is responsible for keeping track of when items are within range and able to be interacted with and when they are not.

Within this script, two functions either spawn or remove the selection arrows above the selected item; AddSelectionArrow() and RemoveSelectionArrow().

AddSelectionArrow() links to the class ItemSelector(), whose job it is to spawn the arrows, and the script is attached to each item that can be picked up.

Adding Selection Arrows to Static Items

Before we start implementing changes to the code, let me start by giving you a definition; by “static items”, I am referring to un-equipable items that can be interacted with, such as the store, water pump, vehicles, etc.

We begin by adding the script ItemSelector() to a static item for testing, and in this scenario, I selected the water pump. I added the script to the game object and then I assigned the variable referring to the arrows used to highlight selected items.

Easy as pie!

So let’s look at how the AddSelectionArrow() and RemoveSelectionArrow() functions get called in the script;

Since we also want the arrows to show up for static items and vehicles, let’s change the code to also include layers 7 & 10.

Here are the current game layers that we have configured in Unity

As you can see from the code above, AddSelectionArrow() uses the function ReturnClosestItemByTagOrLayer() to determine which item is the closest and therefore marked as selected.

That means that we also need to modify ReturnClosestItemByTagOrLayer() to be able to compare items from different layers. This is what its code currently looks like:

The code inside the else case is the code that handles the functionality for returning the closest item by layer and my idea is that I can use much of the same code to handle multiple layers.

The layer is currently being passed to ReturnClosestItemByTagOrLayer() as a string and it parses a number from that. What if we also could pass a “string array” to the function, e.g. "6,7,10" and have the function return which object is the closest from those layers?

I will add a new function that does the same thing as ReturnClosestItemByTagOrLayer(), but I will remove all the other bits just to experiment with this solution;

I will call the function and pass the following array inside Start():

ReturnClosestItemByLayer("6,7,10");

I knew it!

It does post the first number in the array that was passed to it; a simple but great start!

Next, let’s try to loop through the array that we are passing to the function;

Two small successes in a row!

Now, let’s add some code from the original function ReturnClosestItemByTagOrLayer() and merge it with the loop that we have created thus far to prepare it for merging with the real function;

The following line will check if the string passed to it contains a comma(as in "6,7,10" for example) and then split the string into an array if that is the case. I will add this line to our temporary function above.

Next, let’s declare a variable called iteration that will store the number of layers that need to be included when comparing item distance.

I’m going to add a for loop that will run the function to compare item distances for the number of times that iteration is set to and finally merge that with the original function that we started with;

Now that we have updated the functionality that returns the closest item, let’s also update the function call with the additional layers 7 and 10.

Before we begin making any changes, take a look at the current functionality that calls ReturnClosestItemByTagOrLayer().

Let’s add layers 7 and 10 to the function call and see if we can make the code work;

I have also placed two items of layers 6(the watering can) and 7(the water pump) to see if this works!

Don’t mind the grass, it’s under construction 😉

Next, let’s try and go close enough to both items to see if the game can determine which one is closer.

It’s a little hard to see, but the arrow for the water pump spawns inside the object and not on top of it 🪲

It does seem to work, but there are 3 things I would like to change with the functionality;

1. The arrow that highlights that the water pump is selected is placed too low
2. The arrow does not disappear when walking away from the water pump
3. The arrow should only appear for the water pump when carrying the watering can

Conclusion

Thank you for reading all the way here, this concludes the first part of improving the selection highlight system.

In the next part, I will implement the changes above and add the functionality to all static items that can be interacted with in the game.

See you in part 2!