Creación de elementos GUI en Unity: botones, label's, area text, ...

Muy buenas! En este pequeño tutorial aprenderemos cómo crear botones funcionales, "label's" de texto, "text area", cajas con texto o imágenes, grupos de dichos objetos etc. etc., utilizando para ello la clase GUI que nos proporciona Unity.





Y la mejor forma de aprender es haciendo una demostración con algún ejemplo práctico, así que volveré a utilizar la aplicación que construimos en primer tutorial de Unity: "Instalación y exploración del entorno de Unity3D + pequeño ejemplo".

Lo que haremos básicamente es añadir un par de botones a nuestra escena cuya funcionalidad será la de desplazar horizontalmente a nuestro cubo.


Lo que tenemos que tener en cuenta a la hora de trabajar con "GUI" es que se añaden a la escena sólo y exclusivamente desde un script. Por lo que tendremos que programarlos.

Así que podemos crearnos un nuevo script que se llame "BotonesGUI".

Antes de nada, arrastraremos este nuevo script hacia nuestro objeto "Cube" en la ventana de jerarquía, dejándolo asignado a éste.


Bien, antes de comenzar a poner botones como locos, tenemos que tener claro dónde tenemos que escribir nuestro código y qué escribir.

El dónde es sencillo: resulta que para estos casos, podemos disponer de un método procedente de la clase "MonoBehaviour" (de la cuál extendemos) llamado "OnGUI()".

Éste método actúa de forma parecida a como lo hace el método "Update()"; se actualiza frame a frame en el caso de que detecte que estemos usando objetos GUI y de que dichos objetos cambien (por ejemplo: un 'click').

Solo tenemos que escribir el método como en la imagen siguiente y ya podremos empezar a trabajar con GUI.

Teniendo claro dónde tenemos que empezar a escribir, ahora tenemos que saber qué es lo que tenemos que hacer para instanciar los botones y demás elementos de GUI.

Para colocar un botón escribiremos esta sentencia:

GUI.Button (new Rect(x,y, ancho, largo),"Texto");

donde...

• GUI.Button puede tomar hasta 3 parámetros diferentes:
• el primero: Rect() es un objeto que indica la posición de la esquina superior izquierda del objeto (primeros 2 parámetros del constructor "x" e "y") y el ancho y el largo del objeto.
• el segundo: puede ser un String, o una textura (esto lo veremos más adelante).
• el tercero: en este ejemplo no lo utilizamos ya que esto se verá más adelante, pero este parámetro es el que le da un estilo a nuestro botón (o cualquier elemento GUI).

Teniendo esto en cuenta colocaremos dos botones: Izquierda y Derecha.

Si ejecutamos nuestra escena después de añadir este par de líneas, obtendremos un resultado como el de la siguiente imagen, donde ya tendremos 2 botones añadidos a nuestra escena; empezando cada esquina superior izquierda de cada uno de ellos en las posiciones (0,0) y (0,30).

Podemos hacer click sobre ellos, pero no ocurrirá nada.

Para hacer que hagan algo cada vez que se les pulse encima tenemos que volver a nuestro script e introducir las líneas que hemos utilizado para crear los botones, en sendas sentencias "if( ... )":

Todo lo que escribamos dentro de cada "if" tendrá efecto cada vez que pulsemos el botón correspondiente.

Por tanto si queremos que se desplace hacia la izquierda, escribiremos: this.transform.Translate(Vector3.left);

Y de forma análoga haremos lo mismo para que vaya hacia la derecha: this.transform.Translate(Vector3.rigth);

Bien eso es todo!

Como dije antes, a parte de botones también existen varios elementos como "label's" o áreas. Además, en vez de poner un texto (2º parámetro) podemos colocar una imagen utilizando "Texture2D".

Os dejo aquí un par de referencias a una página de ejemplos de código de Unity donde podemos ver y practicar con diferentes elementos GUI; y un video-tutorial en YouTube donde se muestra un ejemplo parecido al que hemos realizado además de que nos muestra cómo colocar una textura en un GUI.Button (una vez aprendido para GUI.Button, es igual para cualquier elemento GUI).

Unity - GUI Basics

YouTube: Unity3D GUI1: Buttons