Main menu
This commit is contained in:
Dominik G.
354
UI/README.md
Normal file
354
UI/README.md
Normal file
@@ -0,0 +1,354 @@
|
||||
# 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
|
||||
```css
|
||||
.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í
|
||||
```css
|
||||
.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
|
||||
```css
|
||||
.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
|
||||
```css
|
||||
.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
|
||||
```css
|
||||
.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é:
|
||||
|
||||
```css
|
||||
: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
|
||||
|
||||
```css
|
||||
.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
|
||||
|
||||
```css
|
||||
.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:
|
||||
```csharp
|
||||
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](https://docs.unity3d.com/Manual/UIElements.html)
|
||||
- [USS Properties Reference](https://docs.unity3d.com/Manual/UIE-USS-Properties-Reference.html)
|
||||
- [UXML Element Reference](https://docs.unity3d.com/Manual/UIE-ElementRef.html)
|
||||
|
||||
### CSS Základy
|
||||
|
||||
Protože USS je založeno na CSS, můžete využít:
|
||||
- [MDN CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
||||
- [CSS Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
|
||||
### Unity Learn
|
||||
|
||||
- [UI Toolkit Tutorial](https://learn.unity.com/tutorial/ui-toolkit)
|
||||
|
||||
## 🎨 Doporučené Color Palettes
|
||||
|
||||
### Gamin Palette (Dark)
|
||||
```css
|
||||
--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)
|
||||
```css
|
||||
--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**:
|
||||
```xml
|
||||
<ui:Button text="NEW BUTTON" name="NewButton" class="menu-button" />
|
||||
```
|
||||
|
||||
2. **V C#**:
|
||||
```csharp
|
||||
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:
|
||||
|
||||
```xml
|
||||
<!-- 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:
|
||||
```xml
|
||||
<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**
|
||||
Reference in New Issue
Block a user