User Interface Editor – Arma 3

Run

The User Interface editor can be launched from within the Debug Console (Esc > F1 > "GUI Editor" button).

Controls

LMB

• Click and hold over GUI element - Move element
• Ctrl - Disable aligning to grid
• Alt - Modify size

RMB

• Click on GUI element - Modify element parameters
• Ctrl + Click on GUI element - Modify custom element parameters (changes won't be visible)
• Click on free space - Add a new element

Key Shortcuts

• H / F1 - Help
• G - Show/hide grid
• Ctrl + G - Modify grid parameters
• Alt + G - Create grid on element under cursor
• Shift + G - Toggle between Absolute and Safezone grid
• Ctrl + N - Add a new element
• Delete - Delete a current element
• Ctrl + C - Copy a current element
• Ctrl + X - Cut a current element
• Ctrl + V - Paste a copied element
• Ctrl + Z - Undo
• Shift + Ctrl + Z - Redo
• Ctrl + L - Display list of all elements, change order and lock/unlock
• Ctrl + S - Export to GUI editor format
• Alt + Ctrl + S - Export to GUI editor format with linebreaks
• Shift + Ctrl + S - Export to a config format
• Shift + Ctrl + S + (1-9) - Export to a config format (class controls variant) with given number of tabs (1-9)
• Shift + Alt + Ctrl + S + (1-9) - Export to a config format (controls[]= variant) with given number of tabs (1-9)
• Ctrl + O - Import from GUI editor format
• Ctrl + I - Import from config
• Ctrl + P - Export parent classes
• Ctrl + Shift + P - Export grid macros
• Space - Highlights all elements (including invisible ones)

Position types

Following variants determine in what format the element position will be saved

• Absolute - absolute position, remains same no matter what UI size or aspect ratio is.
• Safezone - GUI elements stretches based both on UI width and height. Result may differ on different aspect ratios.
• Grid - coordinates are multipliers of grid size
• Control Group - elements is aligned to given RscControlGroup and shares it's position type

Known issues

• When changing element from any position type to controls group type, it's position is not updated correctly.
  • Changed element usually changes it's position. Dragging and dropping it should fix it.
  • If you cannot se the element (it's position is now outside of screen), press Ctrl+L to open list of elements, edit the changed element and modify X and Y coordinates to 0.
• Game sometimes freezes when you're working on layout with controls groups and open (Ctrl+O) another one with different control groups. Press Ctrl+N to clear current layout first or close and open whole editor.
• Listboxes (in "Add Element" and "Element's List' menus) are somehow not clickable in the bottom part. To select items in this area, click anywhere on top and move down using direction keys or Page Up/Down.

Export

Editor format

Ctrl + S

Starts with dollar symbol ($). When you copy this format to clipboard, it can be loaded in editor using Ctrl+O

$[1.043,[["safezoneX","safezoneY","safezoneW","safezoneH"],"safezoneW / 32","safezoneH / 20","GUI_GRID"],[1000,"",[2,"Hello World!",["1 * GUI_GRID_W + GUI_GRID_X","1 * GUI_GRID_H + GUI_GRID_Y","30 * GUI_GRID_W","1 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]],[1500,"MyListbox",[2,"",["1.5 * GUI_GRID_W + GUI_GRID_X","2.5 * GUI_GRID_H + GUI_GRID_Y","9 * GUI_GRID_W","15 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = CUSTOM_IDC;"]],[1700,"",[2,"$STR_DISP_CANCEL",["1 * GUI_GRID_W + GUI_GRID_X","18 * GUI_GRID_H + GUI_GRID_Y","10 * GUI_GRID_W","1 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]],[2300,"Group",[2,"",["11.5 * GUI_GRID_W + GUI_GRID_X","2.5 * GUI_GRID_H + GUI_GRID_Y","19 * GUI_GRID_W","15 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]],[-1001,"GroupText",[2300,"",["0 * GUI_GRID_W","0 * GUI_GRID_H","19 * GUI_GRID_W","15 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]]]

Editor format (multi-line)

Alt + Ctrl + S

Ready to be included into config or description file.

/*
$[
	1.043,
	[["safezoneX","safezoneY","safezoneW","safezoneH"],"safezoneW / 32","safezoneH / 20","GUI_GRID"],
	[1000,"",[2,"Hello World!",["1 * GUI_GRID_W + GUI_GRID_X","1 * GUI_GRID_H + GUI_GRID_Y","30 * GUI_GRID_W","1 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]],
	[1500,"MyListbox",[2,"",["1.5 * GUI_GRID_W + GUI_GRID_X","2.5 * GUI_GRID_H + GUI_GRID_Y","9 * GUI_GRID_W","15 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = CUSTOM_IDC;"]],
	[1700,"",[2,"$STR_DISP_CANCEL",["1 * GUI_GRID_W + GUI_GRID_X","18 * GUI_GRID_H + GUI_GRID_Y","10 * GUI_GRID_W","1 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]],
	[2300,"Group",[2,"",["11.5 * GUI_GRID_W + GUI_GRID_X","2.5 * GUI_GRID_H + GUI_GRID_Y","19 * GUI_GRID_W","15 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]],
	[-1001,"GroupText",[2300,"",["0 * GUI_GRID_W","0 * GUI_GRID_H","19 * GUI_GRID_W","15 * GUI_GRID_H"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],[]]
]
*/

Config format

Shift + Ctrl + S

	//--- Header contains player's profile name and editor version
	////////////////////////////////////////////////////////
	// GUI EDITOR OUTPUT START (by Karel, v1.043)
	////////////////////////////////////////////////////////

	class RscText_1000: RscText
	{
		idc = 1000;
		text = "Hello World!"; //--- ToDo: Localize; //--- Plain text is automatically marked to be localized
		x = 1 * GUI_GRID_W + GUI_GRID_X;
		y = 1 * GUI_GRID_H + GUI_GRID_Y;
		w = 30 * GUI_GRID_W;
		h = 1 * GUI_GRID_H;
	};
	class MyListbox: RscListbox
	{
		idc = CUSTOM_IDC; //--- Custom params are listed first and are divided by one empty line from generated params

		x = 1.5 * GUI_GRID_W + GUI_GRID_X;
		y = 2.5 * GUI_GRID_H + GUI_GRID_Y;
		w = 9 * GUI_GRID_W;
		h = 15 * GUI_GRID_H;
	};
	class RscShortcutButton_1700: RscShortcutButton
	{
		idc = 1700;
		text = $STR_DISP_CANCEL;
		x = 1 * GUI_GRID_W + GUI_GRID_X;
		y = 18 * GUI_GRID_H + GUI_GRID_Y;
		w = 10 * GUI_GRID_W;
		h = 1 * GUI_GRID_H;
	};
	class Group: RscControlsGroup
	{
		idc = 2300;
		x = 11.5 * GUI_GRID_W + GUI_GRID_X;
		y = 2.5 * GUI_GRID_H + GUI_GRID_Y;
		w = 19 * GUI_GRID_W;
		h = 15 * GUI_GRID_H;
		class controls
		{
			class GroupText: RscText
			{
				idc = 1001;
				x = 0 * GUI_GRID_W;
				y = 0 * GUI_GRID_H;
				w = 19 * GUI_GRID_W;
				h = 15 * GUI_GRID_H;
			};
		};
	};
	////////////////////////////////////////////////////////
	// GUI EDITOR OUTPUT END
	////////////////////////////////////////////////////////

Import from config

• Sometimes one has to do more changes, even after the user interface was considered done. One can always load one's dialog by pressing CTRL + I and entering the path to the dialog.

Example