Skip to content

SHORTTUTORIAL: UserInterface

roxxploxx edited this page May 20, 2017 · 7 revisions

UNDER CONSTRUCTION - If you're reading this, know that I am currently editing it and adding to it. So, it's a work in progress.

The RimWorld system of drawing the user interface is a stateful approach where global configuration options are specified and then the widgets themselves are defined, using those options. Most of this occurs in the Widget class and are drawn on Windows and Dialogs (Dialogs being a type of Window, generally used as small displays and not intended as they main focus for the user's task). Tabs sit on Dialogs. The other useful thing to know is Gizmos (and its children Command* and Designator*). Gizmos represent a graphical overlay on the map as well as in most cases some interaction. This includes things like modifying your roof sizes (Designator), selecting a Gizmo to place a building and a Command to change the type of plant to put in a pot.

Top Level Classes to Know (and love...maybe?)

  • Find (static)- so much utility. This is one big happy and useful global variable storage, where you go to get those classes that do all the work of the UI.
    • Current (static)- a buddy to Find and so much like it. Find calls Current many times to get the classes it needs. Just use Find so all your dependencies are on one class.
    • Game - the instance of many of the data structures that are referenced by Find and Current.
  • ReverseDesignatorDatabase - use Find.ReverseDesignatorDatabase.Get() to find a specific Designator.
  • UI - Handy static class with helpful utility functions for the mouse position and UI scale.
  • Root - sets with root is running of either UIRoot_Entry (start of game screens) or UIRoot_Play (actually playing the game). These two extend UIRoot which holds the WindowStack mostly. And shortcut keys.
  • WorldInterface - the UI for when you are showing the globe and managing caravans and such. Lots of stuff under this and probably requires it's own page.

Things of the GUI

I will try to break each of these out in their own section.

  • WindowStack - Tracks the open windows. Top most is shown and newly created windows are added to it. This includes Dialogs. Created in Verse/UIRoot.
  • Page - a full screen UI such as Page_SelectScenario and Page_SelectStoryteller.
  • Window - opens over the game window, generally used for large interaction such as the work tab, pawn listing and
    • Dialog - like Window, but a small window of text or simple interaction during play
    • FloatMenu
      • FloatMenuOption
    • Drawer - ex. MainMenuDrawer - holds windows
  • Tabs - added to Dialogs for opening other Dialogs (ex. 'Character' tab when you have selected a Pawn)
    • Verse/IInspectTabBase, ITabs, WTabs, IInspectPane
  • Widget - graphical interface widgets. ex. button, label, etc.
  • Gizmo - a things shown at the bottom when something is selected. ex. 'Draft', 'Cancel', 'Harvest', 'Activate Lightsaber'
    • GizmoGridDrawer - the thing that holds Gizmos at the bottom
    • Command - a Gizmo -
      • Designator - adds function to a Gizmo or UI element
      • Command_Action - used to do something when a Gizmo is clicked

MainTabWindows

Ok, that bar of tabs at the bottom of the screen when you play... Architect, Work, Restrict,... well, that is drawn by the MainTabWindow and its child classes MainTabWindow_Architect, MainTabWindow_Work, etc. One interesting class though is the MainTabWindow_Inspect, which uses InspectGizmoGrid and GizmoGridDrawer to draw the Gizmos of the selected object(s) on the main world map. Nifty eh?

MainTabWindow and how it draws itself and the selected item.

Note that MainTabWindow_Inspect is where all the magic happens when you select something. It uses InspectPaneFiller to draw the actual readout for a Pawn or Thing (i.e. name, health, area widgets) and InspectPane and InspectPaneUtility.

Ok, that probably isn't much use to you if you want to add GUI elements to your Mod, but it's interesting to know.

Gizmos

This is where the fun is at.

Gizmos along with Commands and Designators make up the non-widget-based interaction of the GUI.

WindowStack

Here are some example uses:

Find.WindowStack.Add(new Dialog_DebugSettingsMenu());
Find.WindowStack.Add(new Dialog_NamePlayerFactionAndBase(factionBase));

Here is from the CharacterCardUtility class. This code creates the icon, tooltip and dialog window to open if the icon is clicked. The first thing it does is create rect7 (30x30 pixels) which stores the icon, and sizes it based upon the CharacterCardUtility window that it fits in (-85 pixels from it's right edge). When creating the button, if the button is active, create the Dialog just in case. Then when the button is clicked, the Dialog opens:

Rect rect7 = new Rect(CharacterCardUtility.PawnCardSize.x - 85f, 0f, 30f, 30f);
TooltipHandler.TipRegion(rect7, new TipSignal("RenameColonist".Translate()));
if (Widgets.ButtonImage(rect7, TexButton.Rename)) 
{
    Find.WindowStack.Add(new Dialog_ChangeNameTriple(pawn));
}
  • RimWorld/Dialog_ManageAreas.cs This is the little button that changes where a Pawn or animal is allowed to go. Ex. Area 1, Area 2, etc. When not

External Links