Cómo usar BOTONES del Canvas en Unity

Introducción

En este artícu­lo vamos a ver cómo crear botones en Uni­ty, con­fig­u­rar el dis­eño y asig­narle una fun­ción den­tro de un Script que se eje­cu­tará al pulsarlo.

Para que un botón pue­da eje­cu­tar una fun­ción es nece­sario que esta fun­ción sea defini­da con vis­i­bil­i­dad públi­ca. Al pul­sar un botón podemos hac­er que se eje­cute todo tipo de acciones, des­de las mas sim­ples como cer­rar la apli­cación o un con­jun­to de acciones tan exten­so como se necesite.

Esti­ma­dos internautas

🍷🧐

En este vídeo creamos un botón y hace­mos que eje­cute una fun­ción defini­da en un Script

Vamos a ver de man­era sim­pli­fi­ca­da cómo hac­er fun­cionar los botones del Can­vas, pero si quieres enten­der con may­or pro­fun­di­dad te invi­to a ver este video sobre comu­ni­cación entre Scripts, en el resuel­vo un ejem­p­lo com­ple­to que involu­cra lla­mar fun­ciones definidas en otros Scripts y tam­bién se lla­man fun­ciones uti­lizan­do botones, tam­bién puedes leer el artícu­lo de comu­ni­cación entre scripts con más infor­ma­ción y otro ejem­p­lo.

Configuración de la interfaz gráfica

Antes de ver cómo usar botones del Can­vas en Uni­ty vamos a crear los ele­men­tos mín­i­mos nece­sar­ios para poder resolver el problema.

Creación del Canvas

El Can­vas es el obje­to en el cuál podemos colo­car ele­men­tos pertenecientes a la inter­faz grá­fi­ca. Para crear un Can­vas hace­mos clic dere­cho en la jer­ar­quía, vamos a UI y luego cliqueamos en Can­vas, como se obser­va en la figu­ra 1.

creacion de un canvas en unity para pulsar botones
Fig. 1: Creación de una GameOb­ject Can­vas en Unity.

Antes de avan­zar, recomien­do con­fig­u­rar el com­po­nente escal­ador de Can­vas de acuer­do a tus necesi­dades, este com­po­nente se encuen­tra asig­na­do al Can­vas y puedes ver­lo en el inspector. 

En mi caso voy a con­fig­u­rar el parámetro "UI Scale Mode" como "Scale With Screen Size" e indicar una res­olu­ción de ref­er­en­cia de 1920x1080, como se obser­va en las fig­uras 2 y 3.

Componente Canvas Scaler de un objeto tipo Canvas en Unity
Fig. 2: Com­po­nente Can­vas Scaler de un obje­to tipo Canvas.

resolución de referencia para el escalador de canvas en unity
Fig. 3: Res­olu­ción de ref­er­en­cia para el escal­ador de Canvas.

VÍDEOS DEL CANAL CON MÁS BÚSQUEDAS

DE UNITY

DE BLENDER

Creación del botón

Aho­ra den­tro del Can­vas vamos a crear un Botón. En la jer­ar­quía, hace­mos clic dere­cho en el obje­to Can­vas, vamos a UI y elegi­mos la opción "But­ton", esto añadirá un obje­to tipo Botón al Canvas.

Fig. 4: Creación de un obje­to botón en Unity.

Luego voy a crear un pan­el que ten­drá como hijo un obje­to tipo Text, ambos se pueden crear des­de el mis­mo menú que se obser­va en la figu­ra 4. En la figu­ra 6 se ve cómo que­da la inter­faz grá­fi­ca para pro­bar la acción del botón al pulsarlo.

jerarquia de un proyecto en unity para realizar accion al pulsar un boton
Fig. 5: El Can­vas con­tiene un botón y un men­saje. Se crea un emp­ty GameOb­ject para asig­nar el Script con la acción.

interfaz grafica simple en unity para ver como usar botones del canvas en unity
Fig. 6: Ele­men­tos de la inter­faz gráfica.

Crear una acción para el botón

A modo de ejem­p­lo la acción va a con­si­s­tir sim­ple­mente en hac­er apare­cer un car­tel que digaa que el botón ha sido pulsado.

Para que el botón pue­da realizar algu­na acción al ser pul­sa­do, ten­emos que definir­la en un Script, así que vamos a crear uno hacien­do clic dere­cho en la car­pe­ta del proyec­to, luego vamos a Cre­ate y elegi­mos la opción C# Script, como se obser­va en la figu­ra 5.

Fig. 7: Creación de un nue­vo Script en Unity.

Le damos un nom­bre y a con­tin­uación creamos un emp­ty GameOb­ject y le asig­namos el Script. En la figu­ra 5 puedes ver que he crea­do un emp­ty GameOb­ject lla­ma­do "But­ton­Test".

programacion de accion para una componente boton en unity
Fig. 8: Creamos un Script lla­ma­do But­ton­Test para pro­gra­mar la acción del botón al pulsar.

script asignado en inspector para realizar una accion al pulsar un boton en unity
Fig. 9: Asig­namos el Script al GameOb­ject ButtonTest.

Para describir todas las acciones que debe realizar un botón al pul­sar­lo creamos un méto­do o fun­ción públi­ca den­tro del Script, en la figu­ra 10 vemos la fun­ción lla­ma­da "MyBut­ton­Func­tion".

Es muy IMPORTANTE declarar la fun­ción como PÚBLICA, sino no podremos asig­narla al botón

La fun­ción se encar­ga de incre­men­tar un con­ta­dor lla­ma­do "but­ton­Pressed­Counter" y luego escribir un men­saje en pan­talla que indique cuán­tas veces fue pul­sa­do el botón. El if tuve que agre­gar­lo porque cuan­do el con­ta­dor vale 1, la pal­abra "time" va en singular.

Puedes pro­bar este mis­mo ejem­p­lo para, recuer­da añadir el name­space que está en la línea 4, "UnityEngine.UI", sino no podrás acced­er a la clase Text.

codigo en csharp para ver como usar botones del canvas en unity
Fig. 10: Códi­go den­tro del Script ButtonTest.

Vamos al inspec­tor y colo­camos el com­po­nente Text del Can­vas en el cam­po del Script.

script asignado en inspector para realizar una accion al pulsar un boton en unity
Fig. 11: Asig­no el tex­to que solici­ta el Script en el inspector.

Aho­ra selec­cionamos el botón y vamos a la com­po­nente But­ton en el inspec­tor, aquí debe­mos hac­er clic en el botón + del pan­el OnClick(), esto agre­gará una nue­va acción cuan­do se pro­duz­ca un even­to OnClick(), es decir cuan­do el botón sea pulsado.

componente boton de canvas en unity
Fig. 12: En el pan­el OnClick hace­mos click en el botón + para agre­gar una nue­va acción.

componente boton de canvas en unity, nueva accion onclick
Fig. 13: Aparece un cam­po en el que podemos asig­nar un GameObject.

Como vemos en la figu­ra 13, nos aparece un cam­po en el que podemos asig­nar un GameOb­ject, aquí arras­tramos des­de la jer­ar­quía, el GameOb­ject que tiene asig­na­do el Script con la acción. Como vemos en la figu­ra 14, hemos arrastra­do el GameOb­ject "But­ton­Test".

componente boton de canvas en unity, asignacion de un gameobject en el evento onclick
Fig. 14: Asig­namos el GameOb­ject que con­tiene el Script con la acción que quer­e­mos que real­ice el botón al pulsarlo.

Luego uti­lizan­do el menú desple­gable, que ini­cial­mente dice "No Func­tion", vamos a selec­cionar primero el Script y luego la fun­ción públi­ca que hemos crea­do para el botón, como se obser­va en la figu­ra 15.

componente boton de canvas en unity, seleccion de la accion al pulsar
Fig. 15: Usan­do el menú desple­gable, elegi­mos la fun­ción que quer­e­mos que se eje­cute al pul­sar el botón.

Cada vez que se pul­sa el botón el car­tel se mod­i­fi­ca mostran­do la can­ti­dad de veces que ha sido pulsado.

unity mensaje que indica cuantas veces se ha pulsado un boton
Fig. 16: Cada vez que se pul­sa el botón se incre­men­ta el con­ta­dor y se mod­i­fi­ca el men­saje en pantalla.

Conclusión

Hemos vis­to cómo usar los botones del Can­vas en uni­ty. La acción debe estar pro­gra­ma­da den­tro de un Script uti­lizan­do un méto­do de pro­gra­mación y debe estar declar­a­da como pública.

Luego debe­mos agre­gar un nue­vo cam­po en el pan­el OnClick() del com­po­nente But­ton y asig­nar el GameOb­ject que tiene el Script con la acción.

Final­mente, uti­lizan­do el menú desple­gable en OnClick(), debe­mos selec­cionar la fun­ción que hemos definido en el Script.

1 comentario en “Cómo usar BOTONES del Canvas en Unity”

  1. Pingback: Cómo hacer un indicador lumínico en Unity - Traum Engine

Los comentarios están cerrados.

Scroll al inicio
Secured By miniOrange