User Interface Editor – Arma 2

From Bohemia Interactive Community
Jump to navigation Jump to search
m (Text replacement - "Category:Dialogs" to "Category:GUI Topics")
m (Some wiki formatting)
 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
== Installation ==
== Installation ==


<span style="font-size:200%">'''[http://moricky.com/items/stra_gui.rar Download GUI editor]'''</span>
<span style="font-size: 200%">'''{{Link|http://moricky.com/items/stra_gui.rar|Download GUI editor}}'''</span>


[http://moricky.com/items/stra_gui_preview.rar Download Preview Mission]
{{Link|http://moricky.com/items/stra_gui_preview.rar|Download Preview Mission}}


* Current version: '''1.03'''
* Current version: '''1.03'''
* Compatible with: [[{{arma2}}]]; [[{{arma2oa}}]]
* Compatible with: {{GameCategory|arma2|link= y}}; [[{{arma2oa}}]]




Line 15: Line 15:
== Running ==
== Running ==


Place Functions module and during game, execute following code:
Place the Functions module in editor and during game, execute the following code:
[] call BIS_fnc_GUIeditor;
<sqf>0 call BIS_fnc_GUIeditor;</sqf>




== First steps ==
== First Steps ==


* GUI Editor is transferring data to and from game by copying to clipboard. To load some interface, simply copy it (Ctrl + C) and import it in game using Ctrl + L.
* GUI Editor is transferring data to and from game by copying to clipboard. To load some interface, simply copy it ({{Controls|Ctrl|C}}) and import it in game ({{Controls|Ctrl|L}}).
* Same way, when exporting, result is again copied to clipboard and you can paste it using Ctrl+V anywhere you need.
* Same way, when exporting, result is again copied to clipboard and you can paste it ({{Controls|Ctrl|V}}) anywhere you need.
* When GUI Editor is started, it automatically tries to load content from clipboard.
* When GUI Editor is started, it automatically tries to load content from clipboard.
* Custom params (Ctrl + RMB) are params which are exported, but their effects cannot be seen in editor itself.
* Custom params ({{Controls|Ctrl|RMB}}) are params which are exported, but their effects cannot be seen in editor itself.
** If you define some param which is already set by classic editing (idc, text, position ...), custom param will have larger priority.
** If you define some param which is already set by classic editing (idc, text, position ...), custom param will have larger priority.


Line 30: Line 30:
== Controls ==
== Controls ==


=== LMB===
=== LMB ===


*'''Click and hold over GUI element''' - Move element
* '''Click and hold over GUI element''' - Move element
*'''  Ctrl''' - Align to grid
* {{Controls|Ctrl}} - Align to grid
*'''  Alt''' - Modify size
* {{Controls|Alt}} - Modify size
*'''  Alt + Shift''' - Modify size with constant proportions
* {{Controls|Alt|Shift}} - Modify size with constant proportions


=== RMB ===
=== RMB ===


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


=== Key Shortcuts ===
=== Key Shortcuts ===


*'''H''' - Help
* {{Controls|H}} - Help
*'''G''' - Show/hide grid
* {{Controls|G}} - Show/hide grid
*'''Ctrl + G''' - Modify grid parameters
* {{Controls|Ctrl|G}} - Modify grid parameters
*'''Alt + G''' - Create grid on element under cursor
* {{Controls|Alt|G}} - Create grid on element under cursor
*'''Shift + G''' - Toggle between Absolute and Safezone grid
* {{Controls|Shift|G}} - Toggle between Absolute and Safezone grid
*'''Ctrl + N''' - Add a new element
* {{Controls|Ctrl|N}} - Add a new element
*'''Delete''' - Delete a current element
* {{Controls|Delete}} - Delete a current element
*'''Ctrl + C''' - Copy a current element
* {{Controls|Ctrl|C}} - Copy a current element
*'''Ctrl + X''' - Cut a current element
* {{Controls|Ctrl|X}} - Cut a current element
*'''Ctrl + V''' - Paste a copied element
* {{Controls|Ctrl|V}} - Paste a copied element
*'''Ctrl + Z''' - Undo
* {{Controls|Ctrl|Z}} - Undo
*'''Shift + Ctrl + Z''' - Redo
* {{Controls|Ctrl|Shift|Z}} - Redo
*'''Ctrl + S''' - Clipboard Export to GUI editor format
* {{Controls|Ctrl|S}} - Clipboard Export to GUI editor format
*'''Alt + Ctrl + S''' - Clipboard Export to GUI editor format with linebreaks
* {{Controls|Ctrl|Alt|S}} - Clipboard Export to GUI editor format with linebreaks
*'''Shift + Ctrl + S''' - Clipboard Export to a config format
* {{Controls|Ctrl|Shift|S}} - Clipboard Export to a config format
*'''Shift + Ctrl + S + (1-9)''' - Clipboard Export to a config format with given number of tabs (1-9)
* {{Controls|Ctrl|Shift|S|1..9}} - Clipboard Export to a config format with given number of tabs (1-9)
*'''Ctrl + L''' - Clipboard Import from GUI editor format
* {{Controls|Ctrl|L}} - Clipboard Import from GUI editor format
*'''Ctrl + P''' - Clipboard Export parent classes
* {{Controls|Ctrl|P}} - Clipboard Export parent classes
*'''Shift + Ctrl + P''' - Clipboard Export grid proportions
* {{Controls|Ctrl|Shift|P}} - Clipboard Export grid proportions
*'''Ctrl + I''' - Import from config
* {{Controls|Ctrl|I}} - Import from config
*'''Space''' - Highlights all elements (including invisible ones)
* {{Controls|Space}} - Highlights all elements (including invisible ones)
 
=== Position Types ===


=== Position types ===
Following variants determine in what format the element position will be saved
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.
* '''Absolute''' - absolute position, remains same no matter what UI size or aspect ratio is.
Line 75: Line 76:


== Control Panels ==
== Control Panels ==
<gallery>
<gallery>
Image:gui_workspace.jpg|Workspace
Image:gui_workspace.jpg|Workspace
Line 87: Line 89:
=== Editor format ===
=== Editor format ===


'''Ctrl + S'''
{{Controls|Ctrl|S}}


Starts with dollar symbol ($). When you copy this format to clipboard, it can be loaded in editor using '''Ctrl+L'''
Starts with dollar symbol ($). When you copy this format to clipboard, it can be loaded in editor ({{Controls|Ctrl|L}})


  $[1.03,[["safezoneX","safezoneY","safezoneW","safezoneH"],"safezoneW / 32","safezoneH / 20"],[1000,"",[1,"",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.3 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],[]],[1001,"MyHeader",[1,"Hello World",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.05 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],["style = ST_CENTER;"]],[1400,"MyEditbox",[1,"",["0.328125 * safezoneW + safezoneX","0.425 * safezoneH + safezoneY","0.34375 * safezoneW","0.15 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = 1234;"]],[1700,"MyButtonOK",[1,"Ok",["0.53125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |hint ctrltext ((ctrlParent (_this select 0)) displayCtrl 1234);|;"]],[1701,"MyButtonBack",[1,"Cancel",["0.328125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |((ctrlParent (_this select 0)) closeDisplay 3000);|;"]]]
  $[1.03,[["safezoneX","safezoneY","safezoneW","safezoneH"],"safezoneW / 32","safezoneH / 20"],[1000,"",[1,"",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.3 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],[]],[1001,"MyHeader",[1,"Hello World",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.05 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],["style = ST_CENTER;"]],[1400,"MyEditbox",[1,"",["0.328125 * safezoneW + safezoneX","0.425 * safezoneH + safezoneY","0.34375 * safezoneW","0.15 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = 1234;"]],[1700,"MyButtonOK",[1,"Ok",["0.53125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |hint ctrlText ((ctrlParent (_this select 0)) displayCtrl 1234);|;"]],[1701,"MyButtonBack",[1,"Cancel",["0.328125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |((ctrlParent (_this select 0)) closeDisplay 3000);|;"]]]


=== Editor format (multi-line) ===
=== Editor Format (Multiline) ===


'''Alt + Ctrl + S'''
{{Controls|Ctrl|Alt|S}}


Ready to be included into config or description file.
Ready to be included into config or description file.


<pre>/*
<sqf>
/*
$[
$[
1.03,
1.03,
Line 106: Line 109:
[1001,"MyHeader",[1,"Hello World",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.05 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],["style = ST_CENTER;"]],
[1001,"MyHeader",[1,"Hello World",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.05 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],["style = ST_CENTER;"]],
[1400,"MyEditbox",[1,"",["0.328125 * safezoneW + safezoneX","0.425 * safezoneH + safezoneY","0.34375 * safezoneW","0.15 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = 1234;"]],
[1400,"MyEditbox",[1,"",["0.328125 * safezoneW + safezoneX","0.425 * safezoneH + safezoneY","0.34375 * safezoneW","0.15 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = 1234;"]],
[1700,"MyButtonOK",[1,"Ok",["0.53125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |hint ctrltext ((ctrlParent (_this select 0)) displayCtrl 1234);|;"]],
[1700,"MyButtonOK",[1,"Ok",["0.53125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |hint ctrlText ((ctrlParent (_this select 0)) displayCtrl 1234);|;"]],
[1701,"MyButtonBack",[1,"Cancel",["0.328125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |((ctrlParent (_this select 0)) closeDisplay 3000);|;"]]
[1701,"MyButtonBack",[1,"Cancel",["0.328125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |((ctrlParent (_this select 0)) closeDisplay 3000);|;"]]
]
]
*/</pre>
*/
</sqf>


=== Config format ===
=== Config format ===


'''Shift + Ctrl + S'''
{{Controls|Ctrl|Shift|S}}
 
<syntaxhighlight lang="cpp">
<syntaxhighlight lang="cpp">
class RscText_1000: RscText
class RscText_1000 : RscText
{
{
idc = 1000;
idc = 1000;
Line 122: Line 127:
w = 0.375 * safezoneW;
w = 0.375 * safezoneW;
h = 0.3 * safezoneH;
h = 0.3 * safezoneH;
colorBackground[] = {0,0,0,0.5};
colorBackground[] = { 0, 0, 0, 0.5 };
};
};
class MyHeader: RscText
 
class MyHeader : RscText
{
{
style = ST_CENTER;
style = ST_CENTER;
Line 134: Line 140:
w = 0.375 * safezoneW;
w = 0.375 * safezoneW;
h = 0.05 * safezoneH;
h = 0.05 * safezoneH;
colorBackground[] = {0,0,0,0.5};
colorBackground[] = { 0, 0, 0, 0.5 };
};
};
class MyEditbox: RscEdit
 
class MyEditbox : RscEdit
{
{
idc = 1234;
idc = 1234;
Line 145: Line 152:
h = 0.15 * safezoneH;
h = 0.15 * safezoneH;
};
};
class MyButtonOK: RscShortcutButton
 
class MyButtonOK : RscShortcutButton
{
{
onButtonClick = "hint ctrltext ((ctrlParent (_this select 0)) displayCtrl 1234);";
onButtonClick = "hint ctrlText ((ctrlParent (_this select 0)) displayCtrl 1234);";


idc = 1700;
idc = 1700;
Line 156: Line 164:
h = 0.1 * safezoneH;
h = 0.1 * safezoneH;
};
};
class MyButtonBack: RscShortcutButton
 
class MyButtonBack : RscShortcutButton
{
{
onButtonClick = "((ctrlParent (_this select 0)) closeDisplay 3000);";
onButtonClick = "((ctrlParent (_this select 0)) closeDisplay 3000);";
Line 172: Line 181:
== Disclaimer ==
== Disclaimer ==


This is not an official addon released or approved by Bohemia Interactive or any of {{arma2}} 2 publishers. Use at your own risk.
This is not an official addon released or approved by {{Name|bi}} or any of {{arma2}} publishers. Use at your own risk.


As long as it stays free, you can redistribute it or modify it as you wish.
As long as it stays free, you can redistribute it or modify it as you wish.

Latest revision as of 10:43, 6 December 2023

Installation

Download GUI editor

Download Preview Mission


Copy file stra_gui.pbo into your Arma 2 or Arma 2: OA addons folder.


Running

Place the Functions module in editor and during game, execute the following code:


First Steps

  • GUI Editor is transferring data to and from game by copying to clipboard. To load some interface, simply copy it (Ctrl + C) and import it in game (Ctrl + L).
  • Same way, when exporting, result is again copied to clipboard and you can paste it (Ctrl + V) anywhere you need.
  • When GUI Editor is started, it automatically tries to load content from clipboard.
  • Custom params (Ctrl + Right Mouse Button) are params which are exported, but their effects cannot be seen in editor itself.
    • If you define some param which is already set by classic editing (idc, text, position ...), custom param will have larger priority.


Controls

LMB

  • Click and hold over GUI element - Move element
  • Ctrl - Align to grid
  • Alt - Modify size
  • Alt + ⇧ Shift - Modify size with constant proportions

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 - 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
  • Del - 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
  • Ctrl + ⇧ Shift + Z - Redo
  • Ctrl + S - Clipboard Export to GUI editor format
  • Ctrl + Alt + S - Clipboard Export to GUI editor format with linebreaks
  • Ctrl + ⇧ Shift + S - Clipboard Export to a config format
  • Ctrl + ⇧ Shift + S + 1..9 - Clipboard Export to a config format with given number of tabs (1-9)
  • Ctrl + L - Clipboard Import from GUI editor format
  • Ctrl + P - Clipboard Export parent classes
  • Ctrl + ⇧ Shift + P - Clipboard Export grid proportions
  • Ctrl + I - Import from config
  • 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 - Position is calculated as multiplier of grid parameters.


Control Panels


Export

Editor format

Ctrl + S

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

$[1.03,[["safezoneX","safezoneY","safezoneW","safezoneH"],"safezoneW / 32","safezoneH / 20"],[1000,"",[1,"",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.3 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],[]],[1001,"MyHeader",[1,"Hello World",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.05 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],["style = ST_CENTER;"]],[1400,"MyEditbox",[1,"",["0.328125 * safezoneW + safezoneX","0.425 * safezoneH + safezoneY","0.34375 * safezoneW","0.15 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = 1234;"]],[1700,"MyButtonOK",[1,"Ok",["0.53125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |hint ctrlText ((ctrlParent (_this select 0)) displayCtrl 1234);|;"]],[1701,"MyButtonBack",[1,"Cancel",["0.328125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |((ctrlParent (_this select 0)) closeDisplay 3000);|;"]]]

Editor Format (Multiline)

Ctrl + Alt + S

Ready to be included into config or description file.

/* $[ 1.03, [["safezoneX","safezoneY","safezoneW","safezoneH"],"safezoneW / 32","safezoneH / 20"], [1000,"",[1,"",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.3 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],[]], [1001,"MyHeader",[1,"Hello World",["0.3125 * safezoneW + safezoneX","0.35 * safezoneH + safezoneY","0.375 * safezoneW","0.05 * safezoneH"],[-1,-1,-1,-1],[0,0,0,0.5],[-1,-1,-1,-1],""],["style = ST_CENTER;"]], [1400,"MyEditbox",[1,"",["0.328125 * safezoneW + safezoneX","0.425 * safezoneH + safezoneY","0.34375 * safezoneW","0.15 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["idc = 1234;"]], [1700,"MyButtonOK",[1,"Ok",["0.53125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |hint ctrlText ((ctrlParent (_this select 0)) displayCtrl 1234);|;"]], [1701,"MyButtonBack",[1,"Cancel",["0.328125 * safezoneW + safezoneX","0.575 * safezoneH + safezoneY","0.140625 * safezoneW","0.1 * safezoneH"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],""],["onButtonClick = |((ctrlParent (_this select 0)) closeDisplay 3000);|;"]] ] */

Config format

Ctrl + ⇧ Shift + S

class RscText_1000 : RscText
{
	idc = 1000;
	x = 0.3125 * safezoneW + safezoneX;
	y = 0.35 * safezoneH + safezoneY;
	w = 0.375 * safezoneW;
	h = 0.3 * safezoneH;
	colorBackground[] = { 0, 0, 0, 0.5 };
};

class MyHeader : RscText
{
	style = ST_CENTER;

	idc = 1001;
	text = "Hello World";
	x = 0.3125 * safezoneW + safezoneX;
	y = 0.35 * safezoneH + safezoneY;
	w = 0.375 * safezoneW;
	h = 0.05 * safezoneH;
	colorBackground[] = { 0, 0, 0, 0.5 };
};

class MyEditbox : RscEdit
{
	idc = 1234;

	x = 0.328125 * safezoneW + safezoneX;
	y = 0.425 * safezoneH + safezoneY;
	w = 0.34375 * safezoneW;
	h = 0.15 * safezoneH;
};

class MyButtonOK : RscShortcutButton
{
	onButtonClick = "hint ctrlText ((ctrlParent (_this select 0)) displayCtrl 1234);";

	idc = 1700;
	text = "Ok";
	x = 0.53125 * safezoneW + safezoneX;
	y = 0.575 * safezoneH + safezoneY;
	w = 0.140625 * safezoneW;
	h = 0.1 * safezoneH;
};

class MyButtonBack : RscShortcutButton
{
	onButtonClick = "((ctrlParent (_this select 0)) closeDisplay 3000);";

	idc = 1701;
	text = "Cancel";
	x = 0.328125 * safezoneW + safezoneX;
	y = 0.575 * safezoneH + safezoneY;
	w = 0.140625 * safezoneW;
	h = 0.1 * safezoneH;
};


Disclaimer

This is not an official addon released or approved by Bohemia Interactive or any of Arma 2 publishers. Use at your own risk.

As long as it stays free, you can redistribute it or modify it as you wish.