Unity.UI Hold Button

Estas semanas he estado ocupado con un pequeño proyecto de Unity y durante el proceso me surgió un problema ¡La interfaz de Unity no tienen previsto el mantener presionado un botón! Tras investigar un poco encontré una solución al problema y voy a explicaros como hacerlo.

¡Creando el proyecto de Unity!

Yo he creado un proyecto nuevo para este tutorial, podéis seguir este paso a paso o directamente implementar la solución a vuestro proyecto.

El proyecto lo he nombrado como hold_button, esta solución funciona en proyectos 3D y 2D, ya que estamos haciendo uso de la clase UI de Unity que es común para los dos.

Añadiendo componentes

Vamos a añadir los siguientes elementos a la jerarquía (Hierarchy):

En primer lugar, crearemos un Canvas: hacemos click derecho sobre jerarquía, en el menú contextual desplegamos el submenú UI y elegimos Canvas. En nuestro Canvas vamos a añadir un botón; para ello hacemos click derecho sobre el Canvas, en el menú contextual volvemos a desplegar UI y seleccionamos Button. Por ultimo vamos a añadir un Sprite que utilizaremos para probar que nuestro botón funciona. En la Jerarquía nuevamente, hacemos click derecho y en esta ocasión desplegamos 2D Objects y seleccionamos Sprite

Bien el resultado debería ser el siguiente:

Como podéis ver en la captura de pantalla, me he tomado la molestia de renombrar el Sprite por status, no es necesario pero queda mejor.

Configurando los elementos

CANVAS:

En el inspector del Canvas vamos a cambiar la propiedad Render Mode a Screen Space - Camera y seleccionaremos nuestra cámara en Render Camera.

SPRITE:

Vamos a cambiar la posición del Sprite para que no se superponga al botón, lo vamos a situar en: X:0, Y:2, Z:0 y lo vamos a escalar en 10 unidades tanto en X como en Y.

Escribiendo nuestro código

Necesitamos crear un script para que nuestro boton funcione. Seleccionamos el Canvas en la jerarquía y en el inspector (Inspector) añadimos un nuevo componente (add component) > nuevo Script (New Script), yo lo he llamado checkButton y el lenguaje C#.

¿Y qué vamos a hacer para que esto funcione? Pues nos vamos a ayudar de la clase EventSystems de Unity para detectar los eventos producidos en el botón, concretamente los eventos Pointer Down y Pointer Up. Así que como primer paso debemos incluir en nuestro proyecto dicha clase:

using UnityEngine;
using UnityEngine.EventSystems;
using System.Collections;

Bueno, esto es solo el principio vamos a necesitar también una variable de tipo booleana (bool) y dos métodos.

Los métodos se encargarán de modificar el valor de la variable, al pulsar el botón está cambiara a true y al soltar cambiara a false.

public class checkButton : MonoBehaviour {
    bool button_control = false;
    public void pressed(BaseEventData eventData)
    {
        button_control = true;
    }
    public void notpressed(BaseEventData eventData)
    {
        button_control = false;
    }
}

Ya tenemos el código para controlar el estado del botón, vamos a añadir unas líneas para tener una representación gráfica del estado. Vamos a iniciar una variable de tipo GameObject como publica y sobrescribiremos el método Update para cambiar la propiedad color de este según el estado de la variable button_control.

public class checkButton : MonoBehaviour {
    bool button_control = false;
    public GameObject check;
    public void pressed(BaseEventData eventData)
    {
        button_control = true;
    }
    public void notpressed(BaseEventData eventData)
    {
        button_control = false;
    }
    void Update () {
        if (button_control)
            check.GetComponent<SpriteRenderer>().color = Color.green;
        else
            check.GetComponent<SpriteRenderer>().color = Color.red;
    }
}

Ya tenemos todo el código para hacer funcionar nuestro botón, ahora vamos a volver a Unity para terminar.

Referenciando el botón

Vamos a empezar por el botón, debemos añadirle una nueva componente de tipo Event Trigger. En el inspector pulsamos Add Component > Event > Event Trigger. Una vez añadida pulsamos el botón Add New Event Type y seleccionamos PointerDown y PointerUp. Aparecerán dos cuadros en la componente, cada uno con el titulo del evento que les corresponde. Pulsamos el botón + para añadir una función al evento, en el selector de objetos arrastramos o seleccionamos el Canvas porque es donde esta el script. y en el desplegable elegimos nuestra clase y el método correspondiente, quedando tal que así:

El Script tenía un GameObject público, este va a ser el Sprite que creamos al principio, debemos hacer referencia a este. Vamos al Canvas arrastramos el Sprite hasta el campo vacío del Script.

¡Y listo! ahora si ejecutamos el juego, al pulsar el botón este se pondrá de color verde y al soltar pasará nuevamente a rojo.

Espero que no hayaís tenido ningún problema, de ser así, aquí estoy para resolver cualquier duda que tengáis. Subo el proyecto que he usado como ejemplo en GitHub para que podais consultarlo si tenéis alguna duda.

GitHub: Hold_Button

Añadir nuevo comentario