megakoop/UI

Main Menu UI - Unity UI Toolkit Guide

📋 Přehled

Tento projekt obsahuje moderní hlavní menu vytvořené pomocí Unity UI Toolkit (dříve UIElements) s využitím UXML pro strukturu a USS (Unity Style Sheets) pro styling.

📁 Struktura souborů

Assets/UI/
├── MainMenu.uxml              # Struktura UI (HTML-like)
├── MainMenuStyles.uss         # Styly (CSS-like)
├── Scripts/
│   └── MainMenuController.cs  # Logika a funkčnost
└── README.md                  # Tento soubor

🚀 Jak začít

1. Nastavení scény

1. Vytvořte novou scénu (nebo použijte existující)
2. Přidejte GameObject → UI Toolkit → UI Document
3. V inspektoru UI Document:
   • Přiřaďte MainMenu.uxml do pole Source Asset
   • Panel Settings můžete vytvořit: Assets → Create → UI Toolkit → Panel Settings Asset

2. Připojení controlleru

1. Na stejný GameObject přidejte komponentu MainMenuController
2. Přiřaďte UIDocument komponentu do pole UI Document
3. Nastavte název herní scény v Game Scene Name

3. (Volitelné) Přidání zvuků

1. Přidejte Audio Source komponentu
2. Přiřaďte zvukové efekty pro tlačítka:
   • Button Click Sound
   • Button Hover Sound

🎨 Jak upravit styly (USS)

Základní vlastnosti CSS/USS

USS používá syntax velmi podobnou CSS. Zde jsou nejčastější vlastnosti:

Layout & Spacing

.my-element {
    width: 300px;                    /* Šířka */
    height: 50px;                    /* Výška */
    margin: 10px;                    /* Vnější odsazení */
    padding: 20px;                   /* Vnitřní odsazení */
    
    flex-direction: row;             /* row | column */
    justify-content: center;         /* center | flex-start | flex-end | space-between */
    align-items: center;             /* center | flex-start | flex-end | stretch */
}

Barvy & Pozadí

.my-element {
    background-color: rgb(76, 175, 80);           /* RGB barva */
    background-color: rgba(76, 175, 80, 0.5);     /* RGB s průhledností */
    background-image: url('project://database/Assets/Images/bg.png');
    
    color: white;                                  /* Barva textu */
    opacity: 0.8;                                  /* Průhlednost (0-1) */
}

Borders & Shadows

.my-element {
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    border-radius: 8px;              /* Zaoblené rohy */
    
    /* Stíny v Unity - používají se přes shadow properties */
}

Typography

.my-element {
    font-size: 24px;
    -unity-font-style: bold;         /* normal | bold | italic | bold-and-italic */
    -unity-text-align: middle-center; /* upper-left | upper-center | upper-right ... */
    letter-spacing: 2px;
    color: white;
}

Transitions & Animations

.my-button {
    transition-duration: 0.3s;
    transition-property: background-color, scale;
}

.my-button:hover {
    background-color: rgb(100, 200, 100);
    scale: 1.1 1.1;                  /* X Y scale */
    translate: 0 -5px;               /* X Y translation */
    rotate: 5deg;                    /* Rotation */
}

.my-button:active {
    scale: 0.95 0.95;
}

CSS Variables (Custom Properties)

V :root můžete definovat proměnné:

:root {
    --color-primary: rgb(76, 175, 80);
    --spacing-md: 16px;
}

.button {
    background-color: var(--color-primary);
    padding: var(--spacing-md);
}

Pseudo-třídy

Unity podporuje následující pseudo-třídy:

• :hover - Po najetí myší
• :active - Při kliknutí
• :focus - Při zaměření
• :checked - Pro toggle/checkbox (zaškrtnuté)
• :disabled - Pro zakázané elementy

Užitečné Unity-specifické vlastnosti

.element {
    /* Display */
    display: flex;                   /* flex | none */
    visibility: hidden;              /* visible | hidden */
    
    /* Position */
    position: absolute;              /* relative | absolute */
    
    /* Unity Text */
    -unity-text-outline-width: 1px;
    -unity-text-outline-color: black;
    
    /* Background */
    -unity-background-scale-mode: scale-to-fit; /* stretch-to-fill | scale-and-crop | scale-to-fit */
    -unity-slice-left: 10;           /* Pro 9-slice sprites */
}

💡 Tipy pro kvalitní UI

1. Konzistentní Design System

• Používejte CSS proměnné pro barvy, spacing, atd.
• Definujte paletu barev (primary, secondary, danger, success)
• Používejte konzistentní spacing (4px, 8px, 16px, 24px, ...)

2. Hierarchie a Layout

Container (flex-direction: column)
  ├─ Header (title, subtitle)
  ├─ Content (flex-grow: 1)
  │   └─ Items (padding, margin)
  └─ Footer (version, copyright)

3. Vizuální Feedback

• Hover efekty: Změna barvy, scale, shadow
• Active stavy: Scale down při kliknutí
• Transitions: Plynulé přechody (0.2-0.3s)
• Disabled stavy: Opacity 0.5, šedá barva

4. Responzivní Design

.container {
    width: 80%;              /* Procenta z rodiče */
    max-width: 800px;        /* Maximální šířka */
    min-width: 400px;        /* Minimální šířka */
}

5. Accessibility

• Dostatečný kontrast textu (světlý text na tmavém pozadí)
• Viditelné focus stavy
• Dostatečně velké klikací oblasti (min. 44x44px)

🎯 Best Practices

DO ✅

1. Používejte třídy místo inline stylů
2. Organizujte styly do sekcí s komentáři
3. Používejte Flexbox pro layout
4. Testujte na různých rozlišeních
5. Používejte USS proměnné pro opakující se hodnoty

DON'T ❌

1. ❌ Nekopírujte stejné styly - použijte třídy
2. ❌ Nepřeužívejte position: absolute
3. ❌ Nepoužívejte pevné velikosti tam, kde není nutné
4. ❌ Nezapomeňte na hover a focus stavy
5. ❌ Nepoužívejte příliš mnoho animací najednou

🔧 Debugging UI

1. UI Debugger

V Unity editoru:

• Window → UI Toolkit → Debugger
• Vyberte váš UI Document
• Prohlížejte strukturu a živé styly

2. Inspector

• Klikněte na element v Debuggeru
• V pravém panelu vidíte všechny aplikované styly
• Můžete je dočasně měnit pro testování

3. Console Log

V C# můžete debugovat:

var button = root.Q<Button>("MyButton");
Debug.Log($"Button found: {button != null}");
Debug.Log($"Button classes: {string.Join(", ", button.GetClasses())}");

📚 Další zdroje

Oficiální dokumentace Unity

• UI Toolkit Manual
• USS Properties Reference
• UXML Element Reference

CSS Základy

Protože USS je založeno na CSS, můžete využít:

• MDN CSS Documentation
• CSS Flexbox Guide

Unity Learn

• UI Toolkit Tutorial

🎨 Doporučené Color Palettes

Gamin Palette (Dark)

--bg-dark: rgb(18, 18, 18);
--bg-medium: rgb(33, 33, 33);
--bg-light: rgb(48, 48, 48);
--accent: rgb(76, 175, 80);      /* Green */
--accent-alt: rgb(33, 150, 243); /* Blue */
--danger: rgb(244, 67, 54);      /* Red */

Minimalist (Light)

--bg-light: rgb(250, 250, 250);
--bg-medium: rgb(240, 240, 240);
--bg-dark: rgb(224, 224, 224);
--accent: rgb(96, 125, 139);     /* Blue Grey */
--text-dark: rgb(33, 33, 33);

🚀 Rozšíření

Přidání nového tlačítka

1. V UXML:

<ui:Button text="NEW BUTTON" name="NewButton" class="menu-button" />

2. V C#:

private Button newButton;

private void InitializeMenuButtons()
{
    newButton = root.Q<Button>("NewButton");
}

private void RegisterButtonEvents()
{
    if (newButton != null)
    {
        newButton.clicked += OnNewButtonClicked;
        AddHoverEffects(newButton);
    }
}

private void OnNewButtonClicked()
{
    Debug.Log("New button clicked!");
}

Vlastní komponenta

Můžete vytvořit vlastní reusable komponenty v UXML:

<!-- CustomCard.uxml -->
<ui:UXML>
    <ui:VisualElement class="card">
        <ui:Label name="CardTitle" class="card-title" />
        <ui:Label name="CardDescription" class="card-description" />
    </ui:VisualElement>
</ui:UXML>

A použít je:

<ui:Template src="CustomCard.uxml" name="CardTemplate" />
<ui:Instance template="CardTemplate" />

---

📝 Poznámky

• USS nepodporuje všechny CSS vlastnosti (např. box-shadow)
• Animace jsou omezené - komplexní animace dělejte v C#
• Performance: USS je velmi rychlé, ale zbytečně neměňte styly každý frame

🤝 Podpora

Pokud narazíte na problém:

1. Zkontrolujte Unity Console pro chyby
2. Použijte UI Toolkit Debugger
3. Ověřte, že jsou správně přiřazené všechny reference
4. Zkontrolujte, zda jsou názvy elementů správně

---

Vytvořeno pro Unity 2022.3+ s UI Toolkit