← Back to Roadmap

Custom UI

35 min

Build HUDs and interactive pages with the UI system.

UI System

Hytale uses .ui files for defining interfaces.

HUD (Always visible)

java
public class ScoreHud extends CustomUIHud {

@Override protected void build(@Nonnull UICommandBuilder ui) { ui.append("Hud/Score.ui"); }

public void updateScore(int score) { UICommandBuilder ui = new UICommandBuilder(); ui.set("#ScoreText.Text", String.valueOf(score)); update(false, ui); // false = incremental update } }

UI File (Score.ui)

json
{
  "Identifier": "ScoreHud",
  "Root": {
    "Type": "Panel",
    "Anchor": { "Top": 10, "Right": 10, "Width": 100, "Height": 30 },
    "Children": [
      {
        "Identifier": "ScoreText",
        "Type": "Label",
        "Text": "0",
        "Font": "Default",
        "FontSize": 24,
        "Color": "#FFFFFF"
      }
    ]
  }
}

Interactive Page

java
public class ShopPage extends InteractiveCustomUIPage {

@Override protected void build(@Nonnull UICommandBuilder ui) { ui.append("Pages/Shop.ui"); }

@Override protected void onCallback(String callbackId, String data) { if ("buy_item".equals(callbackId)) { // Handle purchase } } }

Showing UI

java
// HUD - persistent
ScoreHud hud = new ScoreHud();
player.getHudManager().setCustomHud(playerRef, hud);
hud.show();

// Page - modal ShopPage page = new ShopPage(); player.getUIManager().show(page);