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

Disseny Avançat d'UI

Següent ►
►

En aquest tema, explorarem les tècniques avançades per dissenyar interfícies d'usuari (UI) en Unreal Engine. Aprendrem a crear interfícies dinàmiques i interactives que millorin l'experiència de l'usuari en els nostres jocs.

Objectius del Tema

  • Entendre els conceptes avançats de disseny d'UI.
  • Aprendre a utilitzar widgets complexos.
  • Implementar animacions i transicions d'UI.
  • Gestionar l'entrada de l'usuari de manera eficient.

  1. Conceptes Avançats de Disseny d'UI

1.1. Jerarquia de Widgets

La jerarquia de widgets és fonamental per organitzar i gestionar els elements de la interfície. Cada widget pot contenir altres widgets, creant una estructura en arbre.

Exemple de Jerarquia de Widgets:

- Canvas Panel
  - Vertical Box
    - Text Block (Títol)
    - Horizontal Box
      - Button (Botó 1)
      - Button (Botó 2)

1.2. Estils i Temes

Els estils i temes permeten aplicar una aparença consistent a tota la interfície. Unreal Engine permet definir estils per a cada tipus de widget.

Exemple de Definició d'Estil:

UButtonStyle* MyButtonStyle = NewObject<UButtonStyle>();
MyButtonStyle->SetNormal(FSlateBrush(...));
MyButtonStyle->SetHovered(FSlateBrush(...));
MyButtonStyle->SetPressed(FSlateBrush(...));

  1. Utilització de Widgets Complexos

2.1. Utilitzant el Widget Switcher

El Widget Switcher permet canviar entre diferents widgets dins d'un mateix espai, ideal per crear pestanyes o pantalles múltiples.

Exemple d'Ús del Widget Switcher:

UWidgetSwitcher* MyWidgetSwitcher = WidgetTree->ConstructWidget<UWidgetSwitcher>(UWidgetSwitcher::StaticClass());
MyWidgetSwitcher->AddChild(Widget1);
MyWidgetSwitcher->AddChild(Widget2);
MyWidgetSwitcher->SetActiveWidgetIndex(0); // Mostra el primer widget

2.2. Creant Menús Contextuals

Els menús contextuals apareixen en resposta a una acció de l'usuari, com fer clic dret.

Exemple de Creació d'un Menú Contextual:

UUserWidget* ContextMenu = CreateWidget<UUserWidget>(GetWorld(), ContextMenuClass);
ContextMenu->AddToViewport();

  1. Animacions i Transicions d'UI

3.1. Creant Animacions d'UI

Les animacions d'UI poden millorar significativament l'experiència de l'usuari. Unreal Engine permet crear animacions utilitzant el sistema de Timeline.

Exemple d'Animació d'UI:

UWidgetAnimation* MyAnimation = NewObject<UWidgetAnimation>();
MyAnimation->MovieScene->AddSection(...);
MyAnimation->MovieScene->AddTrack(...);

3.2. Implementant Transicions

Les transicions permeten canviar entre diferents estats de la interfície de manera suau.

Exemple de Transició:

void UMyWidget::PlayTransition()
{
    PlayAnimation(MyTransitionAnimation);
}

  1. Gestió de l'Entrada de l'Usuari

4.1. Captura d'Esdeveniments d'Entrada

Capturar esdeveniments d'entrada és essencial per crear una interfície interactiva.

Exemple de Captura d'Esdeveniments:

FReply UMyWidget::NativeOnMouseButtonDown(const FGeometry& InGeometry, const FPointerEvent& InMouseEvent)
{
    // Processar l'esdeveniment del botó del ratolí
    return FReply::Handled();
}

4.2. Gestió de Focus

Gestionar el focus dels widgets és important per assegurar que l'usuari pugui interactuar amb els elements correctes.

Exemple de Gestió de Focus:

void UMyWidget::SetWidgetFocus()
{
    MyButton->SetKeyboardFocus();
}

Exercicis Pràctics

Exercici 1: Crear un Menú Principal

  1. Crea un nou widget anomenat MainMenu.
  2. Afegeix un Canvas Panel com a arrel.
  3. Afegeix un Vertical Box dins del Canvas Panel.
  4. Afegeix tres botons dins del Vertical Box amb els textos "Jugar", "Opcions" i "Sortir".
  5. Implementa la funcionalitat per canviar a una pantalla de joc quan es faci clic a "Jugar".

Solució:

// MainMenu.h
UCLASS()
class MYGAME_API UMainMenu : public UUserWidget
{
    GENERATED_BODY()

public:
    virtual void NativeConstruct() override;

private:
    UFUNCTION()
    void OnPlayClicked();

    UPROPERTY(meta = (BindWidget))
    UButton* PlayButton;
};

// MainMenu.cpp
void UMainMenu::NativeConstruct()
{
    Super::NativeConstruct();

    if (PlayButton)
    {
        PlayButton->OnClicked.AddDynamic(this, &UMainMenu::OnPlayClicked);
    }
}

void UMainMenu::OnPlayClicked()
{
    // Canviar a la pantalla de joc
}

Exercici 2: Afegir una Animació de Transició

  1. Crea una animació que faci que el MainMenu aparegui des de la part superior de la pantalla.
  2. Implementa la transició quan es carregui el widget.

Solució:

// MainMenu.h
UCLASS()
class MYGAME_API UMainMenu : public UUserWidget
{
    GENERATED_BODY()

public:
    virtual void NativeConstruct() override;

private:
    UPROPERTY(meta = (BindWidgetAnim))
    UWidgetAnimation* SlideInAnimation;
};

// MainMenu.cpp
void UMainMenu::NativeConstruct()
{
    Super::NativeConstruct();

    PlayAnimation(SlideInAnimation);
}

Conclusió

En aquest tema, hem explorat tècniques avançades per dissenyar interfícies d'usuari en Unreal Engine. Hem après a utilitzar widgets complexos, crear animacions i transicions, i gestionar l'entrada de l'usuari. Amb aquests coneixements, estàs preparat per crear interfícies d'usuari dinàmiques i interactives que millorin l'experiència de joc.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats