Introduction

In this arti­cle we see how to make a char­ac­ter selec­tion menu in Uni­ty, ana­lyz­ing a pro­to­type that imple­ments this sys­tem which con­sists in two scenes, the first one is like a main menu where you can switch char­ac­ters, the sec­ond scene is like a game scene where you can play with the char­ac­ter you select­ed in the pre­vi­ous scene. In addi­tion you can down­load the Uni­ty Pack­age to import it in your own project.

Character Selection Menu — Unity Package for download

Below you can down­load the Uni­ty pack­age to import it into a project and get the func­tion­al prototype.

In fig­ure 1 you can see the Assets con­tained in the pack­age, there are two scenes, one for the char­ac­ter selec­tion menu and anoth­er for the game scene where the char­ac­ter cho­sen in the menu appears.

There are three Scripts, Char­ac­terS­e­lec­tion­Menu takes care of the log­ic of the selec­tion menu, Game­Con­trol takes care of the log­ic of the game scene, i.e. plac­ing the cho­sen char­ac­ter in the scene and the Play­er­Con­troller Script allows to con­trol the char­ac­ter in the game scene.

In the Assets fold­er are the Sprite sheets of the char­ac­ters and the ani­ma­tions and in the Pre­fab fold­er the GameOb­ject of the char­ac­ters that appear in the menu and in the game scene.

Important — Prototype testing

When import­ing the Assets it is nec­es­sary to add the scenes from the selec­tion menu and the game to the build, oth­er­wise the but­ton that changes to the game scene will not work. To do this we open the scene from the menu, go to File > Build Set­tings and click on the "Add Open Scene" but­ton, then we do the same for the oth­er scene. If both scenes are added you should see some­thing like what you see in fig­ure 2 in the Build Set­tings window.

Scene from the character selection menu

The selec­tion menu scene is illus­trat­ed in fig­ure 3, it con­sists of a char­ac­ter locat­ed in the cen­ter of the screen, two but­tons to move to the next char­ac­ter or return to the pre­vi­ous char­ac­ter and a but­ton to start playing.

In the hier­ar­chy we have an object that has a script assigned that has the con­trol log­ic of the char­ac­ter selec­tion menu, it is the object high­light­ed in fig­ure 4.

In the inspec­tor we can see the script with its pub­lic para­me­ters, we have an array called "Play­er Objects" that is used to store the dif­fer­ent char­ac­ters that the play­er can choose. You can indi­cate the size by mod­i­fy­ing the "Size" val­ue and then drag the objects of the char­ac­ters to the fields that appear.

This pro­to­type works in the fol­low­ing way, in the scene we place all the avail­able char­ac­ters, then we give the size to the array so it can store those objects and then we drag the objects of the char­ac­ters from the hier­ar­chy to the slots of the array.

In fig­ure 6 we see the objects of the play­ers that are assigned in the spaces of the array in fig­ure 5.

Game Scene

When the green but­ton shown in fig­ure 3 is pressed, the game scene will load and the cho­sen char­ac­ter in the menu will appear, as shown in fig­ure 7.

You can con­trol the char­ac­ter with the WASD keys and to return to the main menu you can press Escape or the blue but­ton in the corner.

In the hier­ar­chy of the game scene we have an object called Game­Con­trol that has assigned the "Game­Con­trol" script with the log­ic to make the cho­sen char­ac­ter appear in the scene.

In the inspec­tor we can see the para­me­ters of this script, again we have an array of GameOb­jects for the characters.

In this case we are going to place the pre­fabs of the char­ac­ters, that is to say GameOb­jects that we need to place in the Assets fold­er, the Script will be in charge of instan­ti­at­ing the cho­sen char­ac­ter. It is impor­tant that this array has the same size as the menu array and that the char­ac­ters are added in the same order.

The cho­sen char­ac­ter will be placed in the posi­tion of the GameOb­ject that we assign in the "Play­er Start Posi­tion" field in fig­ure 9, in this case I have cre­at­ed an emp­ty object called "Start­Po­si­tion", we can see it in fig­ure 10.

Character Selection Menu Control Script

Let's ana­lyze the script that han­dles the log­ic of char­ac­ter selection.

Fields

We start ana­lyz­ing the fields defined in the script, in line 9 of fig­ure 11 is defined an array of GameOb­jects called "player­Ob­jects", as it is defined as pub­lic will appear in the inspec­tor. Then we have an inte­ger vari­able that works as an index for the cho­sen char­ac­ter, with that vari­able we access the char­ac­ter in the array.

El string "gameScene" indi­ca el nom­bre de la esce­na que hay que car­gar cuan­do se pul­sa el botón verde, es impor­tante que el nom­bre coin­ci­da exac­ta­mente y se respe­ten mayús­cu­las, además la esce­na a car­gar tiene que estar aña­di­da en la ven­tana Build Settings.

The "gameScene" string indi­cates the name of the scene to be loaded when the green but­ton is pressed, it is impor­tant that the name match­es exact­ly and is case sen­si­tive, also the scene to be loaded must be added in the Build Set­tings win­dow, explained above.

Methods

Now let's look at the meth­ods that are defined in the Selec­tion Menu Con­trol Script.

We have a method called "Hide­AllChar­ac­ters" that will be respon­si­ble for hid­ing all the char­ac­ters in the scene, inside this func­tion we loop through each ele­ment of the array exe­cut­ing the "SetAc­tive" func­tion with false as para­me­ter on them. We analyse this func­tion in the arti­cle about how to acti­vate or deac­ti­vate GameOb­jects in Uni­ty, you can also see the video here.

Then we have two pub­lic func­tions, one called "NextChar­ac­ter" and the oth­er "Pre­vi­ousChar­ac­ter", these func­tions allow you to select the char­ac­ter, the first thing we do int hese func­tions is dis­able the cur­rent­ly select­ed GameOb­ject, then we increase or decrease the index of the select­ed char­ac­ter, reset­ting it if it exceeds the total amount of ele­ments or mak­ing it equal to the amount of ele­ments minus one if the index is neg­a­tive. Final­ly we acti­vate the char­ac­ter cor­re­spond­ing to the giv­en index.

These func­tions have to be pub­lic because they will be called from the but­tons of the user inter­face, here you have an arti­cle on how to con­fig­ure but­tons in Uni­ty and a video in which I show how to exit the game in Uni­ty by press­ing a but­ton of the Can­vas, in the video a but­ton is con­fig­ured to run a func­tion defined in a script.

Then we have a pub­lic func­tion called "StartGame" that will be called by the "Play" but­ton of the menu, this func­tion saves in mem­o­ry the val­ue of the index using Play­er­Prefs, this is a way to pass data between scenes in Uni­ty, hav­ing the index of the cho­sen char­ac­ter in mem­o­ry, in the next scene that val­ue is read and that allows to place the cor­rect char­ac­ter. Then the Load­Scene func­tion of Scene­M­an­ag­er is exe­cut­ed to load the next scene, to do this you need to imple­ment the name­space UnityEngine.SceneManagement (line 4 of fig­ure 11).

The Start func­tion is exe­cut­ed when you start the game, in it the first thing we do is to hide all the char­ac­ters using the "Hide­AllChar­ac­ters" func­tion, line 19 in fig­ure 15. Then we recov­er the val­ue of the index stored in mem­o­ry, that allows us to show the last select­ed char­ac­ter, in case there is no val­ue in mem­o­ry it will be ini­tial­ized with the val­ue 0.

Final­ly the GameOb­ject of the select­ed char­ac­ter is made vis­i­ble exe­cut­ing on it the SetAc­tive func­tion with para­me­ter "true", line 23 of fig­ure 15.

Game scene scripts to instantiate the chosen character

Now let's ana­lyze the Con­trol Script that is in the game scene, this Script iden­ti­fies the char­ac­ter that was cho­sen in the scene from the selec­tion menu and places it in a cer­tain position.

Fields

We start ana­lyz­ing the defined fields, in the fig­ure 16 we see a frag­ment of the Game­Con­trol Script, in the line 9 we have a pub­lic array of GameOb­jects, this field appears in the inspec­tor and there we place the pre­fabs of the char­ac­ters, it's impor­tant to respect the same amount and the order of the char­ac­ters as they were defined in the selec­tion menu.

On line 10 we have a pub­lic Trans­form com­po­nent, here we will place the object that will indi­cate the posi­tion where the char­ac­ter appears. Then we have two strings, one with the name of the selec­tion menu scene and anoth­er with the name of the data in mem­o­ry where the character's index is stored. In line 13 we define an inte­ger vari­able to store the index val­ue and final­ly, in line 14 we define a ref­er­ence for a GameOb­ject where we will store the character's ref­er­ence that we will place in the scene, in case we need it later.

Methods

In fig­ure 16 we see the Start func­tion that is where the stored val­ue in mem­o­ry is read using the Play­er­Prefs class and in the next instruc­tion the char­ac­ter is instan­ti­at­ed, that is, we cre­ate it and place it in the scene.

Then we have a pub­lic func­tion called "Return­ToMain­Menu" that when exe­cut­ed loads the scene from the char­ac­ter selec­tion menu, we can see it in fig­ure 17. This func­tion will be called by the blue but­ton in the game scene, you can see it in fig­ure 7. Also this func­tion is exe­cut­ed when you press the "Escape" key, as we can see in line 27 of fig­ure 17.