User Interface

Runtime Studio provides several extension points for building custom editor UI at runtime. Most UI extensions can be discovered automatically, but registering them through an IEditorModule is recommended.

UI Extension Overview

API	Purpose
IEditorPanel	Create custom docked or overlay panels.
SceneToolOverlayItem	Add buttons and controls to the Scene View overlay.
SceneSettingsMenuItem	Add entries to the Scene Settings menu.
IRuntimeComponentDrawer	Draw custom inspector UI for Unity components.
IRuntimePropertyDrawer	Draw custom inspector UI for nested data types.
HierarchyAdornmentDefinition	Show icons beside hierarchy items.
IRuntimeHierarchyContextAction	Add hierarchy right-click menu actions.
FieldInspector	Draw runtime-safe fields inside custom drawers.
EditorStyles	Create UI that matches Runtime Studio's look and feel.

---

Panels

Panels are UI Toolkit views displayed inside the Runtime Studio editor.

using Fullscreen.RuntimeStudio.Runtime;
using Fullscreen.RuntimeStudio.Runtime.UI;
using UnityEngine.UIElements;

public sealed class NotesPanel : IEditorPanel
{
    public NotesPanel()
    {
        Root = EditorStyles.PanelElement("NotesPanel");

        Root.Add(EditorStyles.Title("Notes"));
        
        Root.Add(new TextField());
    }

    public VisualElement Root { get; }

    public void Refresh() { }
    public void Tick() { }
    public void Dispose() { }
}

Register the panel:

public sealed class NotesModule : IEditorModule
{
    public void Register(EditorModuleBuilder builder)
    {
        builder.AddDefaultPanel(
            PanelDefinition.Left(
                "my-game.notes",
                "Notes",
                _ => new NotesPanel()
            )
        );
    }
}

Panel Locations

PanelDefinition.Left(...)
PanelDefinition.Right(...)
PanelDefinition.Overlay(...)

Common Options

.Ordered(100)
.HiddenByDefault()
.Widths(320f, 220f, 500f)
.Heights(400f, 250f, 700f)
.Flexible()

Scene Tool Overlay Items

Scene tool overlay items appear as buttons inside the Scene View.

builder.AddDefaultSceneToolOverlayItem(
    SceneToolOverlayItem.Button(
        "my-game.spawn",
        context =>
        {
            CreateObject();
        })
    .WithTooltip("Create Object")
    .Ordered(100)
);

Common Options

.WithLabel("Spawn")
.WithTooltip("Create Object")
.Ordered(100)
.VisibleWhen(context => true)
.EnabledWhen(context => true)
.ActiveWhen(context => false)

Placement

.Placed(SceneToolOverlayPlacement.TransformTools)
.Placed(SceneToolOverlayPlacement.SceneViewActions)

Scene Settings Menu Items

Add custom entries to the Scene Settings dropdown.

builder.AddDefaultSceneSettingsMenuItem(
    SceneSettingsMenuItem.Button(
        "my-game.rebuild",
        context =>
        {
            RebuildData();
        })
    .WithLabel("Rebuild Data")
);

Headers:

SceneSettingsMenuItem.Header(
    "my-game.header",
    "My Tools"
);

Submenus:

SceneSettingsMenuItem.Submenu(
    "my-game.options",
    "Options",
    context => BuildItems()
);

Component Drawers

Component drawers control how a component appears in the inspector.

using System;
using Fullscreen.RuntimeStudio.Runtime.UI.ComponentDrawers;

public sealed class HealthDrawer :
    IRuntimeComponentDrawer
{
    public Type ComponentType => typeof(MyHealth);

    public void Draw(
        ComponentDrawerContext context,
        Component component)
    {
        var health = component as MyHealth;
        if (health == null) return;

        context.DrawFloat(
            "Health",
            health.Current,
            value => health.Current = value
        );

        context.DrawBool(
            "Invincible",
            health.Invincible,
            value => health.Invincible = value
        );
    }
}

Register it:

builder.AddDefaultComponentDrawer(
    new HealthDrawer()
);

Context Helpers

context.DrawBool(...)
context.DrawInt(...)
context.DrawFloat(...)
context.DrawVector2(...)
context.DrawVector3(...)
context.DrawText(...)

---

Property Drawers

Property drawers customize how nested objects are displayed.

using Fullscreen.RuntimeStudio.Runtime.UI.PropertyDrawers;

public sealed class StatBlockDrawer :
    IRuntimePropertyDrawer
{
    public bool CanDraw(
        PropertyDrawerContext context)
    {
        return context.DeclaredType == typeof(MyStatBlock);
    }

    public void Draw(
        PropertyDrawerContext context)
    {
        var value = context.Value as MyStatBlock;

        context.FieldDrawer.DrawValue(
            context.Parent,
            "Power",
            typeof(float),
            value.Power,
            $"{context.Path}.power",
            next => value.Power = (float)next
        );
    }
}

Register it:

builder.AddDefaultPropertyDrawer(    new StatBlockDrawer());

Hierarchy Adornments

Hierarchy adornments display small icons next to objects in the hierarchy.

builder.AddDefaultHierarchyAdornment(
    new HierarchyAdornmentDefinition
    {
        Id = "my-game.spawn",
        Tooltip = "Spawn Point",
        IsVisible = go =>
            go.GetComponent<MySpawnPoint>() != null
    }
);

Use them to highlight important objects or runtime data.

Hierarchy Context Actions

Context actions appear when right-clicking objects in the hierarchy.

public sealed class CreateSpawnAction :
    IRuntimeHierarchyContextAction
{
    public int Order => 100;

    public bool Supports(
        HierarchyActionContext context)
    {
        return true;
    }

    public bool IsEnabled(
        HierarchyActionContext context)
    {
        return true;
    }

    public string GetMenuPath(
        HierarchyActionContext context)
    {
        return "Create/Spawn Point";
    }

    public void Execute(
        HierarchyActionContext context)
    {
        new GameObject("Spawn Point");
    }
}

Register it:

builder.AddDefaultHierarchyAction(
    new CreateSpawnAction()
);

FieldInspector

FieldInspector provides the same field UI used by Runtime Studio's built-in inspector.

Draw a value:

context.FieldDrawer.DrawValue(
    context.Parent,
    "Speed",
    typeof(float),
    speed,
    "speed",
    value => speed = (float)value
);

Draw object fields:

context.FieldDrawer.DrawObjectFields(
    context.Parent,
    settings,
    "settings",
    0
);

Draw a type picker:

context.FieldDrawer.DrawTypeSelector(
    context.Parent,
    "action",
    typeof(MyAction),
    currentType,
    selected => Create(selected),
    "Select Action"
);

EditorStyles

Use EditorStyles when creating custom UI so your extension matches the rest of Runtime Studio.

Titles

parent.Add(
    EditorStyles.Title("Settings")
);

Buttons

parent.Add(    
    EditorStyles.Button(
          "Reset",    
           ResetSettings    
           )
);

Rows

var row = EditorStyles.RowElement();

Panels

var panel =    EditorStyles.PanelElement("MyPanel");