Cómo usar BOTONES del Canvas en Unity

Introducción

En este artículo vamos a ver cómo usar los botones del Canvas en Unity para lograr que se ejecute determinada acción al pulsarlos.

Las acciones que ejecutará el botón deberán estar definidas dentro de un Script utilizando una función o método de programación con visibilidad pública. Al pulsar un botón podemos hacer que se ejecute una acción simple como salir del juego o un conjunto de acciones tan extenso como se necesite.

En el siguiente video muestro un ejemplo de cómo crear un Botón en Unity, un script con una función y luego asignar esa acción al botón.

Vamos a ver de manera simplificada cómo hacer funcionar los botones del Canvas, pero si quieres entender con mayor profundidad te invito a ver este video sobre comunicación entre Scripts, en el resuelvo un ejemplo completo que involucra llamar funciones definidas en otros Scripts y también se llaman funciones utilizando botones, también puedes leer el artículo de comunicación entre scripts con más información y otro ejemplo.

Configuración de la interfaz gráfica

Antes de ver cómo usar botones del Canvas en Unity vamos a crear los elementos mínimos necesarios para poder resolver el problema.

Creación del Canvas

El Canvas es el objeto en el cuál podemos colocar elementos pertenecientes a la interfaz gráfica. Para crear un Canvas hacemos clic derecho en la jerarquía, vamos a UI y luego cliqueamos en Canvas, como se observa en la figura 1.

creacion de un canvas en unity para pulsar botones
Fig. 1: Creación de una GameObject Canvas en Unity.

Antes de avanzar, recomiendo configurar el componente escalador de Canvas de acuerdo a tus necesidades, este componente se encuentra asignado al Canvas y puedes verlo en el inspector.

En mi caso voy a configurar el parámetro “UI Scale Mode” como “Scale With Screen Size” e indicar una resolución de referencia de 1920×1080, como se observa en las figuras 2 y 3.

Componente Canvas Scaler de un objeto tipo Canvas en Unity
Fig. 2: Componente Canvas Scaler de un objeto tipo Canvas.

resolución de referencia para el escalador de canvas en unity
Fig. 3: Resolución de referencia para el escalador de Canvas.

Creación del botón

Ahora dentro del Canvas vamos a crear un Botón. En la jerarquía, hacemos clic derecho en el objeto Canvas, vamos a UI y elegimos la opción “Button”, esto añadirá un objeto tipo Botón al Canvas.

Fig. 4: Creación de un objeto botón en Unity.

Luego voy a crear un panel que tendrá como hijo un objeto tipo Text, ambos se pueden crear desde el mismo menú que se observa en la figura 4. En la figura 6 se ve cómo queda la interfaz gráfica para probar la acción del botón al pulsarlo.

jerarquia de un proyecto en unity para realizar accion al pulsar un boton
Fig. 5: El Canvas contiene un botón y un mensaje. Se crea un empty GameObject para asignar el Script con la acción.

interfaz grafica simple en unity para ver como usar botones del canvas en unity
Fig. 6: Elementos de la interfaz gráfica.

Crear una acción para el botón

A modo de ejemplo la acción va a consistir simplemente en hacer aparecer un cartel que digaa que el botón ha sido pulsado.

Para que el botón pueda realizar alguna acción al ser pulsado, tenemos que definirla en un Script, así que vamos a crear uno haciendo clic derecho en la carpeta del proyecto, luego vamos a Create y elegimos la opción C# Script, como se observa en la figura 5.

Fig. 7: Creación de un nuevo Script en Unity.

Le damos un nombre y a continuación creamos un empty GameObject y le asignamos el Script. En la figura 5 puedes ver que he creado un empty GameObject llamado “ButtonTest”.

programacion de accion para una componente boton en unity
Fig. 8: Creamos un Script llamado ButtonTest para programar la acción del botón al pulsar.

script asignado en inspector para realizar una accion al pulsar un boton en unity
Fig. 9: Asignamos el Script al GameObject ButtonTest.

Para describir todas las acciones que debe realizar un botón al pulsarlo creamos un método o función pública dentro del Script, en la figura 10 vemos la función llamada “MyButtonFunction”.

Es muy IMPORTANTE que esta función sea declarada como pública, sino no podremos asignarla al botón.

La función se encarga de incrementar un contador llamado “buttonPressedCounter” y luego escribir un mensaje en pantalla que indique cuántas veces fue pulsado el botón. El if tuve que agregarlo porque cuando el contador vale 1, la palabra “time” va en singular.

Puedes probar este mismo ejemplo para, recuerda añadir el namespace que está en la línea 4, “UnityEngine.UI”, sino no podrás acceder a la clase Text.

codigo en csharp para ver como usar botones del canvas en unity
Fig. 10: Código dentro del Script ButtonTest.

Vamos al inspector y colocamos el componente Text del Canvas en el campo del Script.

script asignado en inspector para realizar una accion al pulsar un boton en unity
Fig. 11: Asigno el texto que solicita el Script en el inspector.

Ahora seleccionamos el botón y vamos a la componente Button en el inspector, aquí debemos hacer clic en el botón + del panel OnClick(), esto agregará una nueva acción cuando se produzca un evento OnClick(), es decir cuando el botón sea pulsado.

componente boton de canvas en unity
Fig. 12: En el panel OnClick hacemos click en el botón + para agregar una nueva acción.

componente boton de canvas en unity, nueva accion onclick
Fig. 13: Aparece un campo en el que podemos asignar un GameObject.

Como vemos en la figura 13, nos aparece un campo en el que podemos asignar un GameObject, aquí arrastramos desde la jerarquía, el GameObject que tiene asignado el Script con la acción. Como vemos en la figura 14, hemos arrastrado el GameObject “ButtonTest”.

componente boton de canvas en unity, asignacion de un gameobject en el evento onclick
Fig. 14: Asignamos el GameObject que contiene el Script con la acción que queremos que realice el botón al pulsarlo.

Luego utilizando el menú desplegable, que inicialmente dice “No Function”, vamos a seleccionar primero el Script y luego la función pública que hemos creado para el botón, como se observa en la figura 15.

componente boton de canvas en unity, seleccion de la accion al pulsar
Fig. 15: Usando el menú desplegable, elegimos la función que queremos que se ejecute al pulsar el botón.

Cada vez que se pulsa el botón el cartel se modifica mostrando la cantidad de veces que ha sido pulsado.

unity mensaje que indica cuantas veces se ha pulsado un boton
Fig. 16: Cada vez que se pulsa el botón se incrementa el contador y se modifica el mensaje en pantalla.

Conclusión

Hemos visto cómo usar los botones del Canvas en unity. La acción debe estar programada dentro de un Script utilizando un método de programación y debe estar declarada como pública.

Luego debemos agregar un nuevo campo en el panel OnClick() del componente Button y asignar el GameObject que tiene el Script con la acción.

Finalmente, utilizando el menú desplegable en OnClick(), debemos seleccionar la función que hemos definido en el Script.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *