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

HOME

En aquest tema, aprendrem a crear i personalitzar menús i HUDs (Heads-Up Displays) en Unity. Els menús i HUDs són elements essencials en qualsevol joc, ja que proporcionen informació i opcions als jugadors. Aquest tema es divideix en les següents seccions:

Introducció als Menús i HUDs
Creant un Menú Principal
Creant un HUD Bàsic
Personalització i Estilització
Gestió d'Esdeveniments de UI
Exercicis Pràctics

Introducció als Menús i HUDs

Els menús i HUDs són elements d'interfície d'usuari (UI) que permeten als jugadors interactuar amb el joc. Els menús poden incloure opcions com començar el joc, ajustar configuracions, o sortir del joc. Els HUDs mostren informació en temps real, com la salut del jugador, puntuació, o munició.

Conceptes Clau:

Canvas: El component principal de la UI en Unity. Tots els elements de UI es col·loquen dins d'un Canvas.
Event System: Gestiona els esdeveniments d'entrada per a la UI.
RectTransform: Utilitzat per posicionar i dimensionar elements de UI.

Creant un Menú Principal

Passos per Crear un Menú Principal:

Crear un Canvas:
- A la jerarquia, fes clic dret i selecciona UI > Canvas.
- Això crearà un nou Canvas i un Event System automàticament.
Afegir un Fons:
- Dins del Canvas, fes clic dret i selecciona UI > Image.
- Ajusta el RectTransform per cobrir tota la pantalla.
- Assigna una imatge de fons o un color.
Afegir Botons:
- Dins del Canvas, fes clic dret i selecciona UI > Button.
- Ajusta el RectTransform per posicionar el botó.
- Canvia el text del botó seleccionant el fill Text i editant el component Text.
Afegir Funcionalitat als Botons:
- Selecciona el botó i desplaça't fins al component Button.
- A la secció On Click(), fes clic a + per afegir una nova acció.
- Arrossega l'objecte que conté el script amb la funció que vols cridar.
- Selecciona la funció des del menú desplegable.

Exemple de Codi per Gestionar el Menú Principal:

using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour
{
    public void StartGame()
    {
        SceneManager.LoadScene("GameScene");
    }

    public void QuitGame()
    {
        Application.Quit();
    }
}

Creant un HUD Bàsic

Passos per Crear un HUD Bàsic:

Crear un Canvas:
- Igual que en el menú principal, crea un Canvas.
Afegir Elements de HUD:
- Text: Fes clic dret dins del Canvas i selecciona UI > Text per mostrar informació com la puntuació o la salut.
- Imatges: Fes clic dret dins del Canvas i selecciona UI > Image per mostrar icones o barres de salut.
Actualitzar el HUD en Temps Real:
- Crea un script per actualitzar els elements del HUD.

Exemple de Codi per Actualitzar el HUD:

using UnityEngine;
using UnityEngine.UI;

public class HUD : MonoBehaviour
{
    public Text scoreText;
    public Text healthText;
    private int score;
    private int health;

    void Start()
    {
        score = 0;
        health = 100;
        UpdateHUD();
    }

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

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

    void UpdateHUD()
    {
        scoreText.text = "Score: " + score;
        healthText.text = "Health: " + health;
    }
}

Personalització i Estilització

Estilitzar Elements de UI:

Fonts: Pots canviar la font dels textos seleccionant el component Text i assignant una nova font.
Colors: Pots canviar els colors dels textos i imatges des del component Text o Image.
Sprites: Pots utilitzar sprites personalitzats per a botons i imatges.

Utilitzar Layouts:

Horizontal Layout Group: Organitza elements en una fila.
Vertical Layout Group: Organitza elements en una columna.
Grid Layout Group: Organitza elements en una graella.

Gestió d'Esdeveniments de UI

Afegir Esdeveniments als Botons:

On Click(): Ja hem vist com afegir funcionalitat als botons amb aquest esdeveniment.
On Hover: Pots utilitzar el component EventTrigger per gestionar esdeveniments com PointerEnter i PointerExit.

Exemple d'Esdeveniment de Hover:

using UnityEngine;
using UnityEngine.EventSystems;

public class ButtonHover : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    public void OnPointerEnter(PointerEventData eventData)
    {
        // Canviar color o fer alguna acció quan el ratolí entra
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        // Revertir canvis quan el ratolí surt
    }
}

Exercicis Pràctics

Exercici 1: Crear un Menú Principal

Crea un menú principal amb botons per començar el joc i sortir.
Assigna funcionalitat als botons per carregar una nova escena i sortir del joc.

Exercici 2: Crear un HUD Bàsic

Crea un HUD que mostri la puntuació i la salut del jugador.
Crea funcions per actualitzar la puntuació i la salut en temps real.

Exercici 3: Personalitzar el HUD

Canvia la font i el color dels textos del HUD.
Afegeix icones per a la salut i la puntuació.

Solucions:

Solució Exercici 1:

using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour
{
    public void StartGame()
    {
        SceneManager.LoadScene("GameScene");
    }

    public void QuitGame()
    {
        Application.Quit();
    }
}

Solució Exercici 2:

using UnityEngine;
using UnityEngine.UI;

public class HUD : MonoBehaviour
{
    public Text scoreText;
    public Text healthText;
    private int score;
    private int health;

    void Start()
    {
        score = 0;
        health = 100;
        UpdateHUD();
    }

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

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

    void UpdateHUD()
    {
        scoreText.text = "Score: " + score;
        healthText.text = "Health: " + health;
    }
}

Conclusió

En aquesta secció, hem après a crear i personalitzar menús i HUDs en Unity. Hem vist com crear un menú principal amb botons funcionals, com crear un HUD bàsic per mostrar informació en temps real, i com personalitzar aquests elements per adaptar-los a l'estil del nostre joc. A més, hem après a gestionar esdeveniments de UI per fer la nostra interfície més interactiva. Amb aquests coneixements, estem preparats per crear interfícies d'usuari atractives i funcionals per als nostres jocs.

Creant Menús i HUDs

Introducció als Menús i HUDs

Conceptes Clau:

Creant un Menú Principal

Passos per Crear un Menú Principal:

Exemple de Codi per Gestionar el Menú Principal:

Creant un HUD Bàsic

Passos per Crear un HUD Bàsic:

Exemple de Codi per Actualitzar el HUD:

Personalització i Estilització

Estilitzar Elements de UI:

Utilitzar Layouts:

Gestió d'Esdeveniments de UI

Afegir Esdeveniments als Botons:

Exemple d'Esdeveniment de Hover:

Exercicis Pràctics

Exercici 1: Crear un Menú Principal

Exercici 2: Crear un HUD Bàsic

Exercici 3: Personalitzar el HUD

Solucions:

Solució Exercici 1:

Solució Exercici 2:

Conclusió

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à