30.- Controles UI de Unity con eventos

La interfaz de usuario "UI" nos permite agregar controles activos como botones cuadros de texto e imágenes, todo queda acomodado en el Canvas una especie de lienzo que trabaja con la pantalla, el primer paso es ajustarlo.

Usando la misma escena de los Sprites creamos un botón desde el menú: GameObject –> UI -> Button.

Unity crea un lienzo "Canvas".

Seleccione Canvas en Hierarchy y en el Inspector la opción: Scale With Screen Size.

El Canvas no solo nos ayuda a acomodar los objetos, también ajusta la pantalla de juego, observe como los límites del Canvas tienen la misma proporción de la pantalla de juego (Línea verde punteada).

Acomode su botón en el área delimitada por el Canvas.

Para preparar el área de diseño es bueno asignar una proporción de 16:9 en la pantalla Game. Puede escalar, girar y mover el botón con las herramientas.

Con las flechas y escalador puede mover su botón...

El botón necesita una acción, eso lo hacemos con un script...

Con nuestro botón a la vista lo renombramos como EnterButton

Creamos una carpeta para el código: My Scripts (si no la tiene)

En la carpeta creamos un Script lo nombramos:
EventsUI.Cs

Puede borrar las funciones Void Start() y Void Update()

Escriba una nueva función: IntroButtonClick()

El objetivo es llamar la función con el botón.

Para almacenar el código del botón creamos un nuevo GameBrain del proyecto: GameObject-CreateEmpty.

¿Recuerda el GameBrain? lo vimos en el tema:
19.- Creando un cerebro de juego

Asigne el Script EventsUI al GameBrain

Seleccione su botón y en el evento OnClick busque el GameBrain de la escena, al asignarlo deben aparecer sus funciones, elegimos la nuestra: IntroButtonClick...

Al asignar el GameBrain al evento OnClick del botón Unity extrae todas las funciones escritas en ele Script, en nuestro caso IntroButtonClick.

Al ejecutar la escena y presionar el botón, su consola debe imprimir “GotoGame.”

Muy bien, acabamos de ejecutar un evento con UI por usuario, ahora aprendamos algo diferente:

!Un útil segundero de juego!

En el menú principal agregamos un UIText :
GameObject -> UI -> Text
Asigne nombre: TimerText

Segundero con UI text.
Los UI Text nos sirven para imprimir valores en pantalla como los puntos de juego, nombres del jugador o cualquier otro mensaje. Lo agregamos desde el menú para hacer una prueba de impresión con un Script.

Al aparecer el UI Text puede moverlo con los controles, recuerde que el área de Canvas solo es visible con el botón 2D activado...

Para crear el conteo de segundos creamos el Script: GameTimer.Cs con el siguiente código...

El Script utiliza el DeltaTime para equilibrar el tiempo en 1 segundo, todo se suma a gTimer y se recondea con floorToInt.

¿Recuerda el Deltatime? 26.- Entendiendo el Deltatime de Unity

Agregamos el Script al GameBrain, vea como nos pregunta por el TimerText, arrástrelo como se muestra:

Puede cambiar el color del UI Text dando click en la barra..

Al ejecutar se debe mostrar un conteo de segundos impreso en el TimerText.

¿Sencillo verdad?

Otro ejemplo básico,
¿cómo detectar cuando el usuario teclea la barra espaciadora o una tecla?

Captura de teclado en runtime:

¿Cómo detectar cuando se presiona una tecla?

Creamos un Script KeyEvents.cs con el siguiente código:

Vamos a imprimir en otro UI Text cuando se presione el Space y Up.

Para probar debe agregar un UI Text y nombrarlo keyText...

Incorpore el Script al GameBrain y asigne la referencia al KeyText:

Al ejecutar deben imprimirse los mensajes dependiendo la tecla presionada:
“Space key pressed”
“Up key pressed”

Siguiente: 31.- Estructura básica de escenas
Tutoriales Tecno Trainer Unity-C#-3dsmax