Custom UI

Dokumentace k vytváření vlastního UI v Hytale.

Obsah

| Soubor | Popis |
|--------|-------|
| UI_COMPONENTS.md | PageManager, CustomUIPage, UICommandBuilder, UI komponenty |
| UI_EVENTS.md | InteractiveCustomUIPage, UIEventBuilder, event handling |

---

Přehled

Hytale podporuje server-side definované UI které se renderuje na klientovi. UI systém je založen na komponentách definovaných v JSON a ovládaných ze serveru.

---

UI Komponenty

Z dekompilovaného kódu - ComponentUpdateType enum obsahuje:

| Typ | Popis |
|-----|-------|
| UIComponents | UI komponenty |
| Nameplate | Jmenovky nad entitami |
| CombatText | Bojový text (damage numbers) |

---

Základní Použití

Odeslání UI Hráči

// Koncept - závisí na konkrétní implementaci
public void showCustomUI(Player player, String uiId) {
    // UI se definuje v Assets/Common/UI/
    // Server říká klientovi které UI zobrazit
}

UI v Assets

Assets/Common/UI/
├── HUD/
│   ├── HealthBar.json
│   ├── Hotbar.json
│   └── Minimap.json
├── Menus/
│   ├── MainMenu.json
│   └── PauseMenu.json
└── Custom/
    └── MyCustomUI.json

---

Nameplate (Jmenovky)

Přidání Jmenovky k Entitě

// Z TeleportPlugin - warp marker s jmenovkou
holder.addComponent(
    Nameplate.getComponentType(),
    new Nameplate(warp.getId())
);

Vlastní Jmenovka

public void setCustomNameplate(Player player, String text) {
    World world = player.getWorld();
    world.execute(() -> {
        Ref ref = player.getRef();
        Store store = ref.getStore();
        // Nastav nebo aktualizuj jmenovku
        Nameplate nameplate = new Nameplate(text);
        store.setComponent(ref, Nameplate.getComponentType(), nameplate);
    });
}

---

Combat Text

Pro zobrazení damage numbers nebo jiného bojového textu:

// Koncept - CombatText je jedním z ComponentUpdateType
// Používá se pro zobrazení poškození, healingu atd.

---

UI Definice (JSON)

UI se definuje v JSON souborech:

{
    "Type": "Panel",
    "Name": "MyCustomPanel",
    "Position": { "X": 0.5, "Y": 0.5 },
    "Size": { "Width": 200, "Height": 150 },
    "Anchor": "Center",
    "Children": [
        {
            "Type": "Text",
            "Name": "TitleText",
            "Text": "Hello World",
            "FontSize": 24,
            "Color": "#FFFFFF"
        },
        {
            "Type": "Button",
            "Name": "CloseButton",
            "Text": "Close",
            "OnClick": "ClosePanel"
        }
    ]
}

---

Server-Client Komunikace

UI interakce probíhá přes server-client komunikaci:

// Koncept - hráč klikne na tlačítko
// Klient pošle event serveru
// Server zpracuje a může:
// - Změnit UI
// - Provést akci
// - Poslat odpověď

---

Best Practices

1. Definuj UI v Assets

Assets/Common/UI/MyPlugin/
├── MainPanel.json
├── SettingsPanel.json
└── Components/
    ├── CustomButton.json
    └── CustomSlider.json

2. Oddělení Logiky

public class MyUIHandler {
    public void openMainPanel(Player player) {
        // Otevři UI
    }
    public void handleButtonClick(Player player, String buttonId) {
        switch (buttonId) {
            case "settings":
                openSettingsPanel(player);
                break;
            case "close":
                closeCurrentPanel(player);
                break;
        }
    }
}

3. Validace na Serveru

// Vždy validuj akce na serveru
public void handleUIAction(Player player, String action, Map data) {
    // Kontrola oprávnění
    if (!player.hasPermission(requiredPermission)) {
        return;
    }
    // Validace dat
    if (!isValidData(data)) {
        return;
    }
    // Provedení akce
    executeAction(player, action, data);
}

---

Poznámky

• UI systém je stále ve vývoji


• Dokumentace bude rozšířena s dalšími verzemi Hytale


• Pro aktuální informace sleduj oficiální dokumentaci

---

Zdroje

• Custom UI Documentation


• Assets složka: Assets/Common/UI/