La interfaz de usuario (UI) es una parte crucial de cualquier juego, ya que permite a los jugadores interactuar con el juego de manera intuitiva. Unity proporciona un sistema de UI robusto y flexible que permite crear interfaces de usuario complejas y personalizadas. En esta lección, aprenderemos los conceptos básicos de la UI en Unity, cómo crear y manipular elementos de UI, y cómo gestionar eventos de UI.

1. Canvas: El contenedor principal para todos los elementos de UI en Unity.
2. RectTransform: Un componente especial para elementos de UI que permite manipular su tamaño y posición.
3. Elementos de UI: Incluyen botones, textos, imágenes, paneles, etc.
4. Eventos de UI: Interacciones del usuario con los elementos de UI, como clics de botones.

El Canvas es el contenedor principal para todos los elementos de UI. Para crear un Canvas:

1. Ve al menú GameObject > UI > Canvas.
2. Unity creará automáticamente un objeto Canvas en la jerarquía.

• Render Mode: Define cómo se renderiza el Canvas. Puede ser Screen Space - Overlay, Screen Space - Camera, o World Space.
• Pixel Perfect: Asegura que los elementos de UI se rendericen de manera nítida y clara.

Para añadir un texto:

1. Selecciona el Canvas en la jerarquía.
2. Ve al menú GameObject > UI > Text.
3. Unity creará un objeto de texto como hijo del Canvas.

Para añadir un botón:

1. Selecciona el Canvas en la jerarquía.
2. Ve al menú GameObject > UI > Button.
3. Unity creará un objeto de botón como hijo del Canvas.

Para añadir una imagen:

1. Selecciona el Canvas en la jerarquía.
2. Ve al menú GameObject > UI > Image.
3. Unity creará un objeto de imagen como hijo del Canvas.

El componente RectTransform es esencial para manipular elementos de UI. Permite ajustar la posición, el tamaño y el anclaje de los elementos.

• Anchors: Definen cómo se ancla el elemento a su padre.
• Pivot: El punto alrededor del cual se realizan las transformaciones.
• Position: La posición del elemento en relación con su padre.
• Size Delta: El tamaño del elemento.

Vamos a crear un simple menú de inicio con un título y un botón de inicio.

1. Crear el Canvas:

   using UnityEngine;
   using UnityEngine.UI;
   
   public class UICreator : MonoBehaviour
   {
       void Start()
       {
           // Crear el Canvas
           GameObject canvasGO = new GameObject("Canvas");
           Canvas canvas = canvasGO.AddComponent<Canvas>();
           canvas.renderMode = RenderMode.ScreenSpaceOverlay;
           canvasGO.AddComponent<CanvasScaler>();
           canvasGO.AddComponent<GraphicRaycaster>();
   
           // Crear el Texto
           GameObject textGO = new GameObject("TitleText");
           textGO.transform.SetParent(canvasGO.transform);
           Text text = textGO.AddComponent<Text>();
           text.text = "Welcome to the Game!";
           text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
           text.alignment = TextAnchor.MiddleCenter;
           RectTransform textRect = text.GetComponent<RectTransform>();
           textRect.sizeDelta = new Vector2(400, 100);
           textRect.anchoredPosition = new Vector2(0, 100);
   
           // Crear el Botón
           GameObject buttonGO = new GameObject("StartButton");
           buttonGO.transform.SetParent(canvasGO.transform);
           Button button = buttonGO.AddComponent<Button>();
           button.GetComponent<RectTransform>().sizeDelta = new Vector2(200, 50);
           button.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, -50);
   
           // Añadir Texto al Botón
           GameObject buttonTextGO = new GameObject("ButtonText");
           buttonTextGO.transform.SetParent(buttonGO.transform);
           Text buttonText = buttonTextGO.AddComponent<Text>();
           buttonText.text = "Start Game";
           buttonText.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
           buttonText.alignment = TextAnchor.MiddleCenter;
           buttonText.GetComponent<RectTransform>().sizeDelta = new Vector2(200, 50);
           buttonText.GetComponent<RectTransform>().anchoredPosition = Vector2.zero;
       }
   }
   

Para manejar eventos de UI, como clics de botones, necesitamos agregar un EventSystem y suscribirnos a los eventos.

Unity crea automáticamente un EventSystem cuando se añade un Canvas. Si no está presente, puedes añadirlo manualmente:

1. Ve al menú GameObject > UI > Event System.

Para suscribirse a eventos de UI, como el clic de un botón:

1. Selecciona el botón en la jerarquía.
2. En el componente Button, en la sección On Click (), haz clic en el + para añadir una nueva suscripción.
3. Arrastra el objeto que contiene el script con el método que deseas llamar.
4. Selecciona el método del script desde el menú desplegable.

Vamos a añadir un script para manejar el clic del botón de inicio.

1. Añade el script ButtonHandler a un objeto en la escena.
2. Selecciona el botón en la jerarquía.
3. En el componente Button, en la sección On Click (), haz clic en el +.
4. Arrastra el objeto que contiene el script ButtonHandler.
5. Selecciona ButtonHandler > OnStartButtonClick.

En esta lección, hemos cubierto los conceptos básicos de la UI en Unity, incluyendo la creación y manipulación de elementos de UI, y la gestión de eventos de UI. Ahora deberías tener una comprensión fundamental de cómo trabajar con la UI en Unity, lo que te permitirá crear interfaces de usuario interactivas y atractivas para tus juegos.

En la próxima lección, profundizaremos en la creación y personalización de elementos de UI, donde aprenderás a diseñar interfaces de usuario más complejas y estilizadas.