Menú de selección de personaje – Asset para descargar

Introducción

En este artículo muestro cómo se puede hacer un menú de selección de personajes, explicando el funcionamiento de un prototipo que implementa este sistema y que se pueden descargar e importar.

Menú de Selección de Personajes – Paquete para descargar

A continuación puedes descargar el paque de Unity para importarlo en un proyecto y recuperar el prototipo funcionando.

Character Selection Menu for Unity

En la figura 1 se ven los Assets que contiene el paquete, hay dos escenas, una para el menú de selección de personaje y otra para la escena del juego en la que aparece el personaje elegido en el menú.

Hay tres Scripts, CharacterSelectionMenu se encarga de la lógica del menú de selección, GameControl se encarga de la lógica de la escena del juego, es decir colocar el personaje elegido en la escena y el Script PlayerController permite controlar al personaje en la escena del juego.

En la carpeta Assets están los Sprite sheets de los personajes y las animaciones y en la carpeta Prefab los GameObject de los personajes que aparecen en el menú y en la escena del juego.

assets de un prototipo de un menu de seleccion de personajes para unity, escenas, sprites, scripts
Fig. 1: Assets que vienen en el paquete del menú de selección de personajes para Unity.

Importante – Prueba de funcionamiento del prototipo

Al importar los Assets es necesario añadir las escenas del menú de selección y el juego a la compilación, de otra forma no va a funcionar el botón que pasa a la escena del juego. Para eso abrimos la escena del menú, vamos a File > Build Settings y hacemos clic en el botón “Add Open Scene”, luego hacemos lo mismo para la otra escena. Si ambas escenas están añadidas deberían ver algo como lo que se observa en la figura 2 en la ventana Build Settings.

ventana build settings de un prototipo para elegir personaje en unity
Fig. 2: Asegurarse de añadir las escenas de la figura 1 en File – Build Settings.

Escena del menú de selección de personajes

La escena del menú de selección se ilustra en la figura 3, consiste en un personaje situado al centro de la pantalla, dos botones para pasar al siguiente personaje o volver al personaje anterior y un botón para empezar a jugar.

menu de seleccion de personaje en unity, dos botones azules para cambiar el personaje, un boton verde para empezar a jugar
Fig. 3: Escena del menú de selección de personajes con botones para cambiar de personaje y empezar el juego.

En la jerarquía tenemos un objeto que tiene asignado el script con la lógica de control del menú de selección de personajes, es el objeto resaltado en la figura 4.

jerarquia de un menu para elegir personaje
Fig. 4: Jerarquía de la escena del menú, el GameObject seleccionado tiene el script de control.

En el inspector podemos ver el Script con sus campos, tenemos un array llamado “Player Objects” que se utiliza para almacenar los distintos personajes que el jugador puede elegir. Se le puede indicar el tamaño modificando el valor “Size” y luego arrastrar los objetos de los personajes a los campos que aparecen.

inspector de un script de control para elegir personajes en unity
Fig. 5: Inspector del script de control del menú de selección de personajes.

Este prototipo funciona de la siguiente manera, en la escena colocamos todos los personajes disponibles, luego le damos el tamaño al array para que pueda almacenar esos objetos y luego arrastramos los objetos de los personajes desde la jerarquía hasta los espacios del array.

En la figura 6 vemos los objetos de los jugadores que están asignados en los espacios del array en la figura 5.

jerarquia de un menu para elegir personaje, personajes disponibles
Fig. 6: Los objetos de los personajes disponibles se encuentran en la escena en posición.

Escena del juego

Cuando se pulsa el botón verde que se ve en la figura 3 se va a cargar la escena del juego en la que aparecerá el personaje elegido en el menú, como se ve en la figura 7.

Se puede controlar al personaje con las teclas WASD y para volver al menú principal se puede pulsar Escape o el botón azul del Canvas.

escena del juego en la que aparece el personaje que se elige en el menu de seleccion de personajes en unity
Fig. 7: Escena del juego en la que se utiliza el personaje elegido en la escena anterior.

En la jerarquía de la escena del juego tenemos un objeto llamado GameControl que tiene asignado el Script “GameControl” con la lógica para hacer aparecer en la escena el personaje que se ha elegido.

jerarquia de la escena del juego, prototipo de eleccion de jugador en unity
Fig. 8: Jerarquía de la escena del juego, el GameObject GameControl tiene asignado el script de control.

En el inspector podemos ver los parámetros de este Script, nuevamente tenemos un array de objetos para los personajes.

En este caso vamos a colocar los prefabricados de los objetos de los personajes, es decir GameObjects que debemos colocar en la carpeta Assets, el Script se encargará de instanciar el personaje elegido en el menú. Es importante que este array tenga el mismo tamaño que el array del menú y que los personajes estén añadidos en el mismo orden.

inspector de un script de control de juego en unity
Fig. 9: Inspector del script GameControl que se encarga de colocar el personaje correcto en la escena.

El personaje elegido será colocado en la posición del GameObject que asignemos en el campo “Player Start Position” de la figura 9, en este caso he creado un objeto vacío llamado “StartPosition”, lo vemos en la figura 10.

objeto que indica la posicion en la que aparecerá el jugador en unity
Fig. 10: El GameObject resaltado indica la posición donde aparecerá el personaje elegido.

Script de control del menú de selección de personajes

Vamos a analizar el script que se encarga de la lógica de la selección de personajes.

Campos

Comenzamos analizando los campos definidos en el Script, en la línea 9 de la figura 11 se define un array de GameObjects llamado “playerObjects”, al estar definido como público aparece en el inspector. Luego tenemos una variable entera que funciona como índice para el personaje elegido, con esa variable accedemos al GameObject del array.

El string “gameScene” indica el nombre de la escena que hay que cargar cuando se pulsa el botón verde, es importante que el nombre coincida exactamente y se respeten mayúsculas, además la escena a cargar tiene que estar añadida en la ventana Build Settings.

El string “selectedCharacterDataName” es el nombre que se le dá a un dato que se guardará en memoria para saber cuál es el personaje elegido y poder colocarlo correctamente en las siguiente escena.

variables de un script que permite seleccionar personajes en unity
Fig. 11: Campos del Script de control del menú de selección de personajes.

Funciones

Ahora vamos a ver los métodos que están definidos en el Script de control del menú de selección.

Tenemos un método llamado “HideAllCharacters” que se va a encargar de ocultar todos los personajes de la escena, en el interior de esta función se recorren todos los elementos del array y se ejecuta la función SetActive con parámetro false para cada uno de sus elementos. En el artículo sobre cómo activar o desactivar GameObjects en Unity se explica el funcionamiento de este método, también puedes ver el vídeo aquí.

funcion para ocultar todos los personajes disponibles
Fig. 12: Función para ocultar todos los objetos de los personajes. Esta función se llama al iniciar el juego.

Luego tenemos dos funciones públicas, una llamada “NextCharacter” y la otra “PreviousCharacter”, estas funciones permiten seleccionar el personaje, lo primero que se hace es desactivar el GameObject actualmente seleccionado y luego se incrementa o decrementa el índice del personaje, reseteándolo si excede la cantidad total de elementos o haciéndolo igual a la cantidad de elementos menos uno si al decrementarlo resulta negativo. Finalmente se activa el personaje de acuerdo al valor del índice.

Estas funciones tienen que ser públicas porque se van a llamar desde los botones de la interfaz gráfica, aquí tienes un artículo sobre cómo configurar botones en Unity y un vídeo en el que muestro cómo salir del juego en Unity al pulsar un botón del Canvas, en el vídeo se configura un botón para que ejecute una función dentro de un script.

funciones para elegir el siguiente personaje y el personaje anterior en unity c#
Fig. 13: Funciones para pasar al siguiente o al anterior personaje respectivamente. Estas funciones las ejecutan los botones del menú.

Luego tenemos una función pública llamada “StartGame” que será llamada por el botón “Play” del menú, esta función guarda en memoria el valor del índice utilizando PlayerPrefs, esta es una forma de pasar datos entre escenas en Unity, al tener el índice del personaje elegido en memoria, en la siguiente escena se lee ese valor y eso permite colocar el personaje correcto. Luego se ejecuta la función LoadScene de SceneManager para cargar la siguiente escena, para hacer esto se necesita implementar el namespace UnityEngine.SceneManagement (línea 4 de la figura 11).

funcion para empezar el juego en unity que es ejecutada por un boton de la interfaz grafica
Fig. 14: Función para empezar a jugar, esta función la ejecuta el botón verde de la figura 3.

La función Start se ejecuta al iniciar el juego, en ella lo primero que hacemos es ocultar todos los personajes usando la función “HideAllCharacters”, línea 19 de la figura 15. Luego recuperamos el valor del índice almacenado en memoria, nos permite mostrar el último personaje elegido, en caso de no haber ningún valor en memoria se inicializará con el valor 0.

Finalmente se hace visible el GameObject del personaje elegido con el índice, ejecutando sobre éste la función SetActive con parámetro “true”, línea 23 de la figura 15.

funcion start de un prototipo de seleccion de personajes en unity
Fig. 15: Función Start en la que se establece el estado inicial del menú de selección de personajes.

Scripts de la escena del juego para instanciar el personaje elegido

Ahora vamos a analizar el Script de Control que se encuentra en la escena del juego, este Script identifica el personaje que fue elegido en la escena del menú de selección y lo coloca en una determinada posición.

Campos

Comenzamos analizando los campos definidos, en la figura 16 vemos un fragmento del Script GameControl, en la línea 9 tenemos un array público de GameObjects, este campo aparece en el inspector y ahí colocamos los prefabs de los personajes, es importante respetar la misma cantidad y el orden de los personajes como fueron definidos en el menú de selección.

En la línea 10 tenemos un componente Transform público, aquí colocaremos el objeto que indicará la posición donde aparece el personaje. Luego tenemos dos Strings, uno con el nombre de la escena del menú de selección y otro con el nombre del dato en memoria en el que está almacenado el índice del personaje. En la línea 13 se define una variable entera para almacenar el valor del índice y por último, en la línea 14 definimos una referencia para un GameObject donde almacenaremos la referencia del personaje que colocaremos en la escena, en caso de necesitarla más adelante.

variables de un script de control de juego en unity que coloca el personaje elegido en la escena
Fig. 16: Campos y función Start del Script GameControl de la escena del juego.

Funciones

En la figura 16 vemos la función Start que es donde se hace la lectura del valor almacenado en memoria usando la clase PlayerPrefs y luego se realiza la instanciación del personaje, es decir lo creamos y lo colocamos en la escena.

Luego tenemos una función pública llamada “ReturnToMainMenu” que cuando se ejecuta carga la escena del menú de selección de personajes, podemos verla en la figura 17. Esta función la llamará el botón azul que se encuentra en la escena del juego, se puede ver en la figura 7. Además esta función se ejecuta al pulsar la tecla “Escape”, como vemos en la línea 27 de la figura 17.

funciones para volver al menu principal con la tecla escape o con boton en unity c#
Fig. 17: Función de actualización y función para regresar al menú principal, esta última función se ejecuta con escape o al pulsar el botón de la interfaz gráfica.