El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció a la UI de Unity

Següent ►
►

La interfície d'usuari (UI) és una part fonamental de qualsevol joc, ja que permet als jugadors interactuar amb el joc de manera intuïtiva i eficient. En aquest tema, aprendrem els conceptes bàsics de la UI en Unity, com crear elements de UI i com personalitzar-los per adaptar-los a les necessitats del nostre joc.

Objectius del Tema

  • Entendre els conceptes bàsics de la UI en Unity.
  • Aprendre a crear elements de UI bàsics.
  • Personalitzar els elements de UI.
  • Introduir-se en la gestió d'esdeveniments de UI.

Conceptes Bàsics de la UI en Unity

Sistema de UI de Unity

Unity utilitza un sistema de UI basat en components que permet crear interfícies d'usuari de manera visual i programàtica. Els elements de UI es col·loquen dins d'un Canvas, que actua com a contenidor principal per a tots els elements de UI.

Components Principals

  • Canvas: El contenidor principal per a tots els elements de UI. Tots els elements de UI han de ser fills d'un Canvas.
  • RectTransform: Un component que defineix la posició, mida i ancoratge dels elements de UI dins del Canvas.
  • EventSystem: Gestiona els esdeveniments d'entrada (com clics de ratolí i tocs de pantalla) per als elements de UI.

Creant Elements de UI Bàsics

Pas 1: Crear un Canvas

  1. A la jerarquia, fes clic dret i selecciona UI > Canvas.
  2. Això crearà un nou Canvas i un EventSystem automàticament.

Pas 2: Afegir un Text

  1. Amb el Canvas seleccionat, fes clic dret i selecciona UI > Text.
  2. Això afegirà un nou element de text com a fill del Canvas.

Pas 3: Personalitzar el Text

  1. Selecciona l'element de text a la jerarquia.
  2. A l'inspector, pots canviar les propietats del text com la font, mida, color, etc.
// Exemple de codi per canviar el text programàticament
using UnityEngine;
using UnityEngine.UI;

public class ChangeText : MonoBehaviour
{
    public Text myText;

    void Start()
    {
        myText.text = "Hola, món!";
    }
}

Pas 4: Afegir un Botó

  1. Amb el Canvas seleccionat, fes clic dret i selecciona UI > Button.
  2. Això afegirà un nou botó com a fill del Canvas.

Pas 5: Personalitzar el Botó

  1. Selecciona l'element de botó a la jerarquia.
  2. A l'inspector, pots canviar les propietats del botó com el text, colors, etc.
// Exemple de codi per afegir una funció al botó
using UnityEngine;
using UnityEngine.UI;

public class ButtonClick : MonoBehaviour
{
    public Button myButton;

    void Start()
    {
        myButton.onClick.AddListener(TaskOnClick);
    }

    void TaskOnClick()
    {
        Debug.Log("Botó clicat!");
    }
}

Personalitzant Elements de UI

Utilitzant Ancoratges i Pivot Points

Els ancoratges i pivot points són eines poderoses per posicionar i redimensionar elements de UI de manera dinàmica.

  • Ancoratges: Defineixen com un element de UI es posiciona i redimensiona en relació amb el seu pare.
  • Pivot Points: Defineixen el punt de referència per a la rotació i escalat d'un element de UI.

Exemple Pràctic: Crear un HUD (Head-Up Display)

  1. Crea un nou Canvas.
  2. Afegeix elements de UI com textos, imatges i botons per mostrar informació com la salut del jugador, puntuació, etc.
  3. Utilitza ancoratges per assegurar-te que els elements es redimensionen correctament en diferents resolucions de pantalla.
// Exemple de codi per actualitzar un HUD
using UnityEngine;
using UnityEngine.UI;

public class HUD : MonoBehaviour
{
    public Text healthText;
    public Text scoreText;

    private int health = 100;
    private int score = 0;

    void Update()
    {
        healthText.text = "Salut: " + health;
        scoreText.text = "Puntuació: " + score;
    }

    public void TakeDamage(int damage)
    {
        health -= damage;
    }

    public void AddScore(int points)
    {
        score += points;
    }
}

Exercici Pràctic

Objectiu

Crear una interfície d'usuari bàsica que mostri un missatge de benvinguda i un botó que, quan es clica, canviï el missatge.

Passos

  1. Crea un nou Canvas.
  2. Afegeix un element de text amb el missatge "Benvingut al Joc!".
  3. Afegeix un botó amb el text "Canvia Missatge".
  4. Escriu un script que canviï el text del missatge quan es clica el botó.

Solució

using UnityEngine;
using UnityEngine.UI;

public class WelcomeUI : MonoBehaviour
{
    public Text welcomeText;
    public Button changeMessageButton;

    void Start()
    {
        changeMessageButton.onClick.AddListener(ChangeMessage);
    }

    void ChangeMessage()
    {
        welcomeText.text = "Missatge Canviat!";
    }
}

Resum

En aquest tema, hem après els conceptes bàsics de la UI en Unity, com crear elements de UI bàsics com textos i botons, i com personalitzar-los. També hem vist com utilitzar ancoratges i pivot points per posicionar i redimensionar elements de UI de manera dinàmica. Finalment, hem realitzat un exercici pràctic per reforçar els conceptes apresos.

En el següent tema, aprofundirem en la creació i personalització d'elements de UI més avançats.

◄ Anterior
◄
Següent ►
►

Curs de Unity

Mòdul 1: Introducció a Unity

Mòdul 2: Programació Bàsica en Unity

Mòdul 3: Treballant amb Actius

Mòdul 4: Física i Col·lisions

Mòdul 5: Interfície d'Usuari (UI)

Mòdul 6: Àudio en Unity

Mòdul 7: Programació Avançada

Mòdul 8: Física Avançada i IA

Mòdul 9: Optimització i Rendiment

Mòdul 10: Publicació i Més Enllà

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats