Screens and elements

A mod's UI is built from elements - panels, labels, buttons, sliders, your own - placed on screens. The loader updates, draws and routes the mouse to them every frame they're shown, in the game's look.

Screens

var panel = context.UI.MainMenu.Add(new ExamplePanel());
var notes = context.UI.InGame.Add(new NotesPanel());
context.UI.MainMenu.Hidden += () => panel.Visible = false;

A screen out of its context isn't drawn, updated or clicked, and as it leaves nothing stays held: the mouse lets go, an open dropdown closes, a text box lets go of the keyboard. Its elements keep their own Visible for when it's back. A screen has IsActive, Shown and Hidden events, and MouseOverUI.

While the mouse is over mod UI, the game doesn't get the click (a click on a panel doesn't walk or attack), and while a text box has the keyboard, the game's hotkeys stay quiet.

Layers

Mod UI is drawn on one of two layers:

var bar = context.UI.Hud.Add(new UIProgressBar(8, 40, 0, max: 100));
var screen = context.UI.When(() => Gm.InGame && Player.InCombat, UILayer.Hud);
context.DrawHud += () => Draw.Text(8, 60, "With the HUD", Draw.White);

A HUD element only has the mouse where none of the game's UI drawn over it is under the mouse: a click on a game window over it is the window's. context.DrawHud draws on the HUD layer as context.DrawGui draws over everything. Mod windows (UIWindow) still open over everything.

Elements

public class ExamplePanel : UIPanel
{
    private readonly UILabel _clicks;
    private int _count;

    public ExamplePanel() : base(6, 0, 200, 120, UIAnchor.Left)
    {
        Add(new UILabel("Example", 10, 10));
        _clicks = Add(new UILabel("", 10, 30, Draw.Muted));
        var button = Add(new UIButton("Click me", 10, 0, 85) { Anchor = UIAnchor.BottomLeft, Y = 10 });
        button.Clicked += _ => _count++;
        Add(new UIButton("Close", 10, 0, 85, onClick: () => Visible = false) { Anchor = UIAnchor.BottomRight, Y = 10 });
    }

    protected override void OnUpdate(double deltaTime) => _clicks.Text = $"Clicks: {_count}";
}

Every element (UIElement) has:

Built-in elements

Controls

var health = Add(new UISlider(70, 31, value: 0.75, width: 120) { Tooltip = "Drag it, click the bar or use the wheel." });
var bar = Add(new UIProgressBar(12, 74, health.Value, style: UIBarStyle.Health, width: 196));
health.Changed += value => bar.Value = value;

var difficulty = Add(new UIDropdown(new[] { "Easy", "Normal", "Hard" }, 70, 102, 140, selected: 1));
difficulty.Changed += index => Say($"Difficulty: {difficulty.Selected}");

var name = Add(new UITextBox(70, 124, 140, placeholder: "Type a name...") { MaxLength = 24 });
name.Submitted += text => Say($"Hello, {text}!");

var list = Add(new UIScrollList(12, 148, 196, 104));
for (int row = 1; row <= 20; row++)
    list.Add(new UIButton($"Row {row}", 0, 0, height: 14));

Your own elements

Inherit UIElement (or any element) and override what you need:

using System;
using System.Collections.Generic;
using System.Linq;
using StoneForge;

public class FpsGraph : UIElement
{
    private readonly Queue<double> _frames = new();

    protected override void OnUpdate(double deltaTime)
    {
        _frames.Enqueue(deltaTime);
        while (_frames.Count > 100)
            _frames.Dequeue();
    }

    protected override void OnDraw(double x, double y)
    {
        Draw.Rectangle(x, y, x + Width - 1, y + Height - 1, Draw.Rgb(18, 16, 26));
        double average = _frames.Count / Math.Max(_frames.Sum(), 0.001);
        Draw.Text(x + 4, y + 3, $"{average:0} fps", IsHovered ? Draw.White : Draw.Muted);
    }
}