Basic concepts of GUI

Structure

UI element consists of its name, which should be a unique identifier (You can have duplicate names, but it may cause issues), parent, which is the name of element parent (Example: Background is a parent of Table, and Table is a parent of Cells), fade out time in seconds and components, which are the properties of your element.

Components

There are multiple available components. Some are required, some are not:

• CuiRectTransformComponent - Position of the element.
• CuiNeedsCursorComponent - Show a cursor that will let you click buttons and such.
• CuiImageComponent - Image with a sprite, material, color and cache.
• CuiRawImageComponent - Image with a sprite, material, color, URL and cache.
• CuiButtonComponent - Button with command to run, element ID to close, sprite, material and color.
• CuiInputFieldComponent - Input field with (broken) default text, font size, font, text align, color, character limit, command to run (with an argument that is field value) etc.
• CuiTextComponent - Text with value, font size, font, text align and color.
• CuiOutlineComponent - Outline for an element with a color, distance and option to use graphics alpha.

Many components have a FadeIn field which lets you specify fade in time in seconds for this element.

Element presets

uMod provides you with a few presets for elements with predefined components, such as:

• CuiButton to create a button.
• CuiLabel to show text.
• CuiPanel to show images or draw a nice background.

They can be used to have predefined fields in case you want to modify them without casting ICuiComponent to the needed type, and to simplify UI creation.

Sending UI

You made a few buttons and a nice background. To send them you have to create a container first, which is CuiElementContainer:

var container = new CuiElementContainer();
var backgroundName = container.Add(myBackground, "Overlay", "MyBackgroundName");
container.Add(myCuiComponent);

There are multiple Add methods - one is for presets, which lets you set the parent and name. If you do not specify a name, a random GUID will be used. Name will also be returned. However, if you have a CuiElement, it works as just a List<CuiElement> so you have to manually specify parent and name.

In order to send UI to the player, you should use AddUi:

CuiHelper.AddUi(basePlayer, container);

If you want to remove your beautiful UI, you should call DestroyUi and specify element ID (name) to remove like that:

CuiHelper.DestroyUi(basePlayer, backgroundName);

Cache

If you are using a URL, client will download the image from the link you specify every time, and its quality might be changed depending on the quality settings. To avoid both issues, you can use "cache" a.k.a. Png option.

Game provides you with a Png option for UI, which is the image ID on the server. You have to store the image server-side first, for example you could use Image Library. After doing so you provide your client with the ID of this image, and client will download it from the server and store in its cache.

UI position

There are two types of positions - Anchor and Offset. Both have Min and Max. Min value is the bottom left corner position, and Max is the top right one. Both Min and Max have X and Y values and are such string: "X Y".

Anchors are numbers that represent width and height in percents (%) from 0.0 (0%) to 1.0 (100%).

Offsets are accurate values that are width and height in pixels relative to 1280x720. Example: You made a 100x100 box for 1280x720 and if you switch to 2560x1440, it will be 200x200 pixels.

Anchors are applied before offsets. If you want offsets to be relative to the screen center, make all anchors 0.5 0.5 so that both corners are in the center. Then to make a 100x100 box you should use offsets -50 -50 for bottom left corner and 50 50 for top right one.

Colors

Rust UI is using normalized RGBA colors. It means that this nice red color (R255 G102 B102 A255) would be 1.0 0.4 0.4 1.0.

The fourth and last number is Alpha (transparency), in the example above it is 100%.

Fonts

All available fonts are:

• DroidSansMono.ttf
• PermanentMarker.ttf
• RobotoCondensed-Bold.ttf(Default)
• RobotoCondensed-Regular.ttf

Layers

You can use specific "layers" as parents for your UI because they are always present:

• Overall
• Overlay
• Hud
• Hud.Menu
• Under