{ ¿Cómo usar BOTONES del Canvas en Unity }

Introducción

En este artículo vamos a ver cómo crear botones en Unity, configurar el diseño y asignarle una función dentro de un Script que se ejecutará al pulsarlo.

Para que un botón pueda ejecutar una función es necesario que esta función sea definida con visibilidad pública.

Al pulsar un botón podemos hacer que se ejecute todo tipo de acciones, desde las mas simples como cerrar la aplicación o un conjunto de acciones tan extenso como se necesite.

Tengo un par de vídeos que te van a servir para utilizar botones en Unity

#1 Cómo definir una función en un Script y llamarla al pulsar un botón

SUSCRÍBETE AL CANAL

#2 En el caso de que no funcionen los botones consulta este vídeo

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.

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.

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

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.

*Fig. 5: El Canvas contiene un botón y un mensaje. Se crea un empty GameObject para asignar el Script con la acción.*

*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».

*Fig. 8: Creamos un Script llamado ButtonTest para programar la acción del botón al pulsar.*

*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 declarar la función 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.

*Fig. 10: Código dentro del Script ButtonTest.*

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

*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.

*Fig. 12: En el panel OnClick hacemos click en el botón + para agregar una nueva acción.*

*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».

*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.

*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.

*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.