El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a crear i personalitzar elements d'interfície d'usuari (UI) en Unity. La UI és una part essencial de qualsevol joc, ja que permet als jugadors interactuar amb el joc de manera intuïtiva. Explorarem com afegir elements bàsics de UI com botons, textos, imatges, i com personalitzar-los per adaptar-los a l'estil del nostre joc.

Introducció als Elements de UI

Elements Bàsics de UI

Canvas: El contenidor principal per a tots els elements de UI.
Text: Per mostrar text al jugador.
Button: Per crear botons interactius.
Image: Per mostrar imatges.
Panel: Per agrupar altres elements de UI.

Creant un Canvas

Afegir un Canvas:
- Aneu a GameObject > UI > Canvas.
- Això crearà un nou Canvas a la vostra escena.
Afegir un Event System:
- Unity afegirà automàticament un Event System quan creeu un Canvas. Aquest sistema gestiona les interaccions de la UI.

Afegint i Personalitzant Text

Afegir un Element de Text

Afegir Text:
- Seleccioneu el Canvas.
- Aneu a GameObject > UI > Text.
- Això afegirà un element de Text com a fill del Canvas.
Personalitzar Text:
- Seleccioneu l'element de Text.
- A l'Inspector, podeu canviar les propietats com el Text, Font, Font Size, Color, Alignment, etc.

Exemple de Codi

using UnityEngine;
using UnityEngine.UI;

public class UpdateText : MonoBehaviour
{
    public Text myText;

    void Start()
    {
        myText.text = "Hola, Unity!";
    }
}

Explicació: Aquest script actualitza el text d'un element de Text a "Hola, Unity!" quan el joc comença.

Afegint i Personalitzant Botons

Afegir un Botó

Afegir Botó:
- Seleccioneu el Canvas.
- Aneu a GameObject > UI > Button.
- Això afegirà un botó com a fill del Canvas.
Personalitzar Botó:
- Seleccioneu l'element de Botó.
- A l'Inspector, podeu canviar les propietats com el Text del botó, Colors, Image, etc.

Exemple de Codi

using UnityEngine;
using UnityEngine.UI;

public class ButtonClick : MonoBehaviour
{
    public Button myButton;

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

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

Explicació: Aquest script afegeix un listener al botó que imprimeix "Botó clicat!" a la consola quan el botó és clicat.

Afegint i Personalitzant Imatges

Afegir una Imatge

Afegir Imatge:
- Seleccioneu el Canvas.
- Aneu a GameObject > UI > Image.
- Això afegirà una imatge com a fill del Canvas.
Personalitzar Imatge:
- Seleccioneu l'element de Imatge.
- A l'Inspector, podeu canviar les propietats com el Source Image, Color, Material, etc.

Exemple de Codi

using UnityEngine;
using UnityEngine.UI;

public class ChangeImage : MonoBehaviour
{
    public Image myImage;
    public Sprite newSprite;

    void Start()
    {
        myImage.sprite = newSprite;
    }
}

Explicació: Aquest script canvia la imatge d'un element de Imatge a newSprite quan el joc comença.

Agrupant Elements amb Panells

Afegir un Panell

Afegir Panell:
- Seleccioneu el Canvas.
- Aneu a GameObject > UI > Panel.
- Això afegirà un panell com a fill del Canvas.
Personalitzar Panell:
- Seleccioneu l'element de Panell.
- A l'Inspector, podeu canviar les propietats com el Color, Image, Alpha, etc.

Exemple de Codi

using UnityEngine;
using UnityEngine.UI;

public class TogglePanel : MonoBehaviour
{
    public GameObject panel;

    void Start()
    {
        panel.SetActive(false);
    }

    public void ShowPanel()
    {
        panel.SetActive(true);
    }

    public void HidePanel()
    {
        panel.SetActive(false);
    }
}

Explicació: Aquest script permet mostrar i amagar un panell mitjançant les funcions ShowPanel i HidePanel.

Exercicis Pràctics

Exercici 1: Crear un Menú Bàsic

Objectiu: Crear un menú bàsic amb un títol, un botó de "Jugar" i un botó de "Sortir".
Passos:
- Afegiu un Canvas a l'escena.
- Afegiu un element de Text per al títol.
- Afegiu dos botons i personalitzeu el text a "Jugar" i "Sortir".
- Afegiu un script per gestionar els clics dels botons.

Exercici 2: Crear un HUD

Objectiu: Crear un HUD que mostri la vida del jugador i el nombre de monedes recollides.
Passos:
- Afegiu un Canvas a l'escena.
- Afegiu dos elements de Text per mostrar la vida i les monedes.
- Afegiu un script per actualitzar aquests valors durant el joc.

Resum

En aquesta secció, hem après a crear i personalitzar elements de UI en Unity. Hem vist com afegir i personalitzar textos, botons, imatges i panells. També hem explorat exemples pràctics de codi per entendre millor com interactuar amb aquests elements mitjançant scripts. Els exercicis pràctics proporcionats us ajudaran a consolidar aquests coneixements i a aplicar-los en projectes reals. En la propera secció, explorarem la gestió d'esdeveniments de UI per fer les nostres interfícies més interactives.

Creant i Personalitzant Elements de UI

Introducció als Elements de UI

Elements Bàsics de UI

Creant un Canvas

Afegint i Personalitzant Text

Afegir un Element de Text

Exemple de Codi

Afegint i Personalitzant Botons

Afegir un Botó

Exemple de Codi

Afegint i Personalitzant Imatges

Afegir una Imatge

Exemple de Codi

Agrupant Elements amb Panells

Afegir un Panell

Exemple de Codi

Exercicis Pràctics

Exercici 1: Crear un Menú Bàsic

Exercici 2: Crear un HUD

Resum

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à