GUI Tutorial - Revision history

Ansin11: /* createDialog vs createDisplay vs cutRsc */ Added information about text and voice chat (courtesy of Asmo from Discord, https://discord.com/channels/105462288051380224/105465701543723008/1435366081198821457)

2025-11-08T12:23:22Z

createDialog vs createDisplay vs cutRsc: Added information about text and voice chat (courtesy of Asmo from Discord, https://discord.com/channels/105462288051380224/105465701543723008/1435366081198821457)

← Older revision		Revision as of 14:23, 8 November 2025
Line 232:		Line 232:
	\|-		\|-
	!		!
	! createDialog		! [[createDialog]]
	! createDisplay		! [[createDisplay]]
	! cutRsc		! [[cutRsc]]
	\|-		\|-
	\| Interactable		\| Interactable
Line 243:		Line 243:
	\| Player can move		\| Player can move
	\| {{Icon\|unchecked}}		\| {{Icon\|unchecked}}
	\| ~~Depends on~~ the parent display		\| {{Icon\|checked}} (unless player movement is blocked by the parent display, e.g. if the parent display is a dialog)
	\| {{Icon\|checked}}		\| {{Icon\|checked}}
	\|-		\|-
Line 249:		Line 249:
	\| {{Icon\|unchecked}}		\| {{Icon\|unchecked}}
	\| {{Icon\|unchecked}}		\| {{Icon\|unchecked}}
			\| {{Icon\|checked}}
			\|-
			\| Player can use text chat (multiplayer only)
			\| {{Icon\|checked}}
			\| {{Icon\|checked}}
			\| {{Icon\|checked}}
			\|-
			\| Player can use voice chat (i.e. VoN; multiplayer only)
			\| {{Icon\|unchecked}}
			\| {{Icon\|checked}}
	\| {{Icon\|checked}}		\| {{Icon\|checked}}
	\|-		\|-
Line 256:		Line 266:
	\| {{Icon\|unchecked}}		\| {{Icon\|unchecked}}
	\|-		\|-
	\| Can be returned by [[findDisplay]]		\| Can be returned by [[findDisplay]] and [[allDisplays]]
	\| {{Icon\|checked}}		\| {{Icon\|checked}}
	\| {{Icon\|checked}}		\| {{Icon\|checked}}

Nelis75733126: sentence formatting, and fixed incorrect references to other references within the page.

2024-04-21T12:36:11Z

sentence formatting, and fixed incorrect references to other references within the page.

← Older revision		Revision as of 14:36, 21 April 2024
Line 1:		Line 1:
	{{TOC\|side}}		{{TOC\|side}}

	This page will teach you how to create your ~~first~~ own UI. The second part of this page will dive deeper into the possibilities of Arma 3 ~~UIs~~.		This page will teach you how to create your very own User Interface for Arma.<br>
			The second part of this page will dive deeper into the possibilities for creating User Interfaces for Arma 3.


Line 8:		Line 9:
	=== Terminology ===		=== Terminology ===

	Before we begin let us ~~clear up some~~ words ~~and their meaning~~:		Before we begin, let us define a few words:
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
Line 15:		Line 16:
	\|-		\|-
	\| UI		\| UI
	\| '''U'''ser '''I'''nterface. ~~What~~ the ~~player will see~~. ~~Also:~~ GUI ('''G'''raphical ~~User Interface, IGUI (meaning not entirely clear, used for HUDs in Arma), display, dialog~~.		\| '''U'''ser '''I'''nterface. This is a general term that describes anything on a screen that can interface with the user.
			\|-
			\| GUI
			\| '''G'''raphical '''U'''ser '''I'''nterface. a more specific version of UI. It refers to a user interface that has a graphical appearance.
	\|-		\|-
	\| Dialog/Display		\| Dialog/Display
	\| ~~Generally speaking they are~~ the ~~same. There~~ are ~~a few tiny~~ differences between ~~these~~ two ~~terms~~ which ~~will be~~ explained in [[#~~createDialog vs createDisplay vs cutRsc~~\|this ~~section~~]] ~~later on~~.		\| Both of them refer to a Graphical User Interface, but within the context of Arma, there are small differences between the two, which is explained [[#createDialog_vs_createDisplay_vs_cutRsc\|later in this page]].
	\|-		\|-
	\| HUD		\| HUD
	\| '''H'''eads-'''u'''p-'''D'''isplay. A type of display for ~~displaying~~ information ~~that does not interfere with~~ the ~~player's controls~~.		\| '''H'''eads-'''u'''p-'''D'''isplay. A type of display meant for showing information without affecting the ability of the user to move and look around.
	\|-		\|-
	\| UIEH		\| UIEH
	\| '''U'''ser '''I'''nterface '''E'''vent '''H'''andler. ~~Detects changes~~ to ~~the UI~~. ~~Explained in~~ [[#~~User Interface Event Handlers~~\|this ~~section~~]].		\| '''U'''ser '''I'''nterface '''E'''vent '''H'''andler. Specific events can happen inside User Interface, for example: when the mouse cursor enters a specific area of the User Interface. If a Handler for that particular event has been created, it will execute any code which has been assigned to that handler. More details about this [[#User_Interface_Event_Handlers\|can be found later in this page]].
	\|}		\|}

Ansin11: /* UI Variables and Serialization */ Fixed some code

2024-01-19T09:42:35Z

UI Variables and Serialization: Fixed some code

← Older revision		Revision as of 11:42, 19 January 2024
Line 307:		Line 307:
	<sqf>		<sqf>
	// Wrong, stores MissionDisplay in the missionNamespace:		// Wrong, stores MissionDisplay in the missionNamespace:
	MissionDisplay = [[findDisplay]] 46;		MissionDisplay = findDisplay 46;
	</sqf>		</sqf>
	<sqf>		<sqf>
	// Correct:		// Correct:
	with uiNamespace do {		with uiNamespace do {
	MissionDisplay = [[findDisplay]] 46;		MissionDisplay = findDisplay 46;
	};		};
	</sqf>		</sqf>
Line 332:		Line 332:
	_myCtrl ctrlSetText _text;		_myCtrl ctrlSetText _text;
	</sqf>		</sqf>


	== Final Result ==		== Final Result ==

Lou Montana: Text replacement - " ( class [a-zA-Z0-9_]+): ([a-zA-Z0-9_]+ *) " to " $1 : $2 "

2023-12-06T09:58:22Z

Text replacement - " ( *class [a-zA-Z0-9_]+): *([a-zA-Z0-9_]+ *) " to " $1 : $2 "

← Older revision		Revision as of 11:58, 6 December 2023
Line 438:		Line 438:
	class ControlsBackground		class ControlsBackground
	{		{
	class Background: RscText		class Background : RscText
	{		{
	idc = -1;		idc = -1;
Line 450:		Line 450:
	class Controls		class Controls
	{		{
	class ClickMe: RscButton		class ClickMe : RscButton
	{		{
	idc = -1;		idc = -1;
Line 474:		Line 474:
	class Controls		class Controls
	{		{
	class CenterText: RscStructuredText		class CenterText : RscStructuredText
	{		{
	text = "This text box will stay here for 10 seconds. You can still move and look around.";		text = "This text box will stay here for 10 seconds. You can still move and look around.";
Line 680:		Line 680:
	class Controls		class Controls
	{		{
	class Text: RscStructuredText		class Text : RscStructuredText
	{		{
	idc = IDC_RSCDISPLAYTEST_TEXT;		idc = IDC_RSCDISPLAYTEST_TEXT;
	...		...
	};		};
	class Hint: RscButton		class Hint : RscButton
	{		{
	idc = IDC_RSCDISPLAYTEST_HINT;		idc = IDC_RSCDISPLAYTEST_HINT;

Lou Montana: Text replacement - "import (Config)" to "import"

2023-10-30T16:57:33Z

Text replacement - "import (Config)" to "import"

← Older revision		Revision as of 18:57, 30 October 2023
Line 57:		Line 57:

	==== Import Classes Via import Keyword (Mission Only) ====		==== Import Classes Via import Keyword (Mission Only) ====
	{{GVI\|arma3\|2.02}} You can use the base classes from the game config by using the [[~~import\|~~import (Config)]] keyword:		{{GVI\|arma3\|2.02}} You can use the base classes from the game config by using the [[import (Config)\|import]] keyword:
	<syntaxhighlight lang="cpp">		<syntaxhighlight lang="cpp">
	import RscObject;		import RscObject;

Lou Montana: Text replacement - "import" to "import (Config)"

2023-10-30T16:54:58Z

Text replacement - "import" to "import (Config)"

← Older revision		Revision as of 18:54, 30 October 2023
Line 57:		Line 57:

	==== Import Classes Via import Keyword (Mission Only) ====		==== Import Classes Via import Keyword (Mission Only) ====
	{{GVI\|arma3\|2.02}} You can use the base classes from the game config by using the [[import]] keyword:		{{GVI\|arma3\|2.02}} You can use the base classes from the game config by using the [[import\|import (Config)]] keyword:
	<syntaxhighlight lang="cpp">		<syntaxhighlight lang="cpp">
	import RscObject;		import RscObject;

R3vo: /* Scripted Event Handlers */ Added missing sqf tag

2023-07-18T17:01:21Z

Scripted Event Handlers: Added missing sqf tag

← Older revision		Revision as of 19:01, 18 July 2023
Line 609:		Line 609:

	Example:		Example:
			<sqf>
	[] spawn {		[] spawn {
	[missionNamespace, "OnDisplayRegistered", {		[missionNamespace, "OnDisplayRegistered", {
Line 630:		Line 631:
	};		};
	</sqf>		</sqf>


	== UI Scripts ==		== UI Scripts ==

Lou Montana: Text replacement - "Eden" to "Eden"

2023-07-09T12:22:05Z

Text replacement - "Eden" to "Eden"

← Older revision		Revision as of 14:22, 9 July 2023
Line 523:		Line 523:
	=== Mission ===		=== Mission ===

	The mission config is reloaded every time the mission is saved or when you return from the preview to [[Eden]]. Instead of previewing the mission and creating your UI it is possible to instead preview the UI in Eden directly. Execute the following command in the Debug Console while in Eden:		The mission config is reloaded every time the mission is saved or when you return from the preview to [[:Category:Eden Editor\|Eden]]. Instead of previewing the mission and creating your UI it is possible to instead preview the UI in Eden directly. Execute the following command in the Debug Console while in Eden:
	<sqf>findDisplay 313 createDisplay "RscDisplayAAR";</sqf>		<sqf>findDisplay 313 createDisplay "RscDisplayAAR";</sqf>
	Your UI is created on top of the [[Arma 3: IDD List\|Eden display (IDD: 313)]]. Now you can simply make changes to the UI, close the display, save the mission and execute the command again. The changes should now take effect.		Your UI is created on top of the [[Arma 3: IDD List\|Eden display (IDD: 313)]]. Now you can simply make changes to the UI, close the display, save the mission and execute the command again. The changes should now take effect.

Lou Montana: Text replacement - "\[ (https?:\/\/[^ = ]+) +([^= ]+) \]" to "{{Link|$1|$2}}"

2023-04-28T14:08:47Z

Text replacement - "\[ *(https?:\/\/[^ = ]+) +([^= ]+) *\]" to "{{Link|$1|$2}}"

← Older revision		Revision as of 16:08, 28 April 2023
Line 511:		Line 511:
	== Afterword ==		== Afterword ==

	Now it is up to you to create some UIs. If you have questions feel free to ask them on the BI Forums for {{Link\|link= https://forums.bohemia.net/forums/forum/154-arma-3-mission-editing-scripting/\|text= mission makers}} or {{Link\|link= https://forums.bohemia.net/forums/forum/162-arma-3-addons-configs-scripting/\|text= addon makers}}. You can also find a Discord channel dedicated to GUI editing on the [https://discord.com/invite/arma Arma 3 Discord].		Now it is up to you to create some UIs. If you have questions feel free to ask them on the BI Forums for {{Link\|link= https://forums.bohemia.net/forums/forum/154-arma-3-mission-editing-scripting/\|text= mission makers}} or {{Link\|link= https://forums.bohemia.net/forums/forum/162-arma-3-addons-configs-scripting/\|text= addon makers}}. You can also find a Discord channel dedicated to GUI editing on the {{Link\|https://discord.com/invite/arma\|Arma 3 Discord}}.

Lou Montana: Text replacement - "`" to ""`


2023-01-11T10:53:06Z
Text replacement - "<code>" to "<code style="display: block">"

				
				
				
				
				
				← Older revision
				Revision as of 12:53, 11 January 2023
				
Line 36:
Line 36:



Your folder structure could look something like this: Your folder structure could look something like this:
<code>mission.World/ <code style="display: block">mission.World/
├── mission.sqm ├── mission.sqm
├── description.ext ├── description.ext

← Older revision		Revision as of 12:53, 11 January 2023
Line 36:		Line 36:

	Your folder structure could look something like this:		Your folder structure could look something like this:
	<code>mission.World/		<code style="display: block">mission.World/
	├── mission.sqm		├── mission.sqm
	├── description.ext		├── description.ext