SafeZone: Difference between revisions
m (→Sample configs: fixed typo) |
Lou Montana (talk | contribs) m (Text replacement - "{{arma2}}" to "{{GameCategory|arma2|link= y}}") |
||
(10 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
[[File:UI Size.jpg|thumb|200px|Safezone and Absolute proportions (16:10 / Normal)]] | [[File:UI Size.jpg|thumb|200px|Safezone and Absolute proportions (16:10 / Normal)]] | ||
In [[Arma: Cold War Assault]], user interface [[Display]]s were drawn always in 4:3 aspect ratio. Since then, many other aspect ratios became common and interface has to be compatible with them. Currently, interface is base on following variables: | In [[Arma: Cold War Assault]], user interface [[Display]]s were drawn always in 4:3 aspect ratio. Since then, many other aspect ratios became common and interface has to be compatible with them. Currently, interface is base on following variables: | ||
* '''Aspect Ratio''' - change screen width to fit user's monitor | * '''Aspect Ratio''' - change screen width to fit user's monitor | ||
* '''Interface Size''' - resize size of interface [[Control]]s, like menus, hints, cursors, etc. Introduced in | * '''Interface Size''' - resize size of interface [[Control]]s, like menus, hints, cursors, etc. Introduced in {{GameCategory|arma2|link= y}}. | ||
== Coordinate Systems == | == Coordinate Systems == | ||
Games now contains following two coordinate systems, both of them starting in their top left corner and going bottom right (see picture on right). | Games now contains following two coordinate systems, both of them starting in their top left corner and going bottom right (see picture on right). | ||
* '''Absolute''' ''(red frame)'' - based on CWA system. Its always 4:3 and changes together with Interface Size. | * '''Absolute''' ''(red frame)'' - based on CWA system. Its always 4:3 and changes together with Interface Size. | ||
Line 16: | Line 14: | ||
** [[safeZoneX]], [[safeZoneY]], [[safeZoneW]] and [[safeZoneH]], with additional [[safeZoneXAbs]] and [[safeZoneWAbs]] to work with multi-screen size. | ** [[safeZoneX]], [[safeZoneY]], [[safeZoneW]] and [[safeZoneH]], with additional [[safeZoneXAbs]] and [[safeZoneWAbs]] to work with multi-screen size. | ||
** In case game is running only on one monitor, safeZoneXAbs equals to safezoneX and safezoneWAbs is same as safezoneW. | ** In case game is running only on one monitor, safeZoneXAbs equals to safezoneX and safezoneWAbs is same as safezoneW. | ||
** Safezones serves only as references to absolute positions. Result of safezoneX can for example be -0.452381, which means it | ** Safezones serves only as references to absolute positions. Result of safezoneX can for example be -0.452381, which means it is left from absolute area. | ||
== Sample configs == | == Sample configs == | ||
Control with following size will cover whole screen (middle screen in case of TripleHead): | Control with following size will cover whole screen (middle screen in case of TripleHead): | ||
<syntaxhighlight lang="cpp"> | |||
x = safeZoneX; | |||
y = safeZoneY; | |||
w = safeZoneW; | |||
h = safeZoneH; | |||
</syntaxhighlight> | |||
Following proportions will cover all screens in TripleHead: | Following proportions will cover all screens in TripleHead: | ||
<syntaxhighlight lang="cpp"> | |||
x = safeZoneXAbs; | |||
y = safeZoneY; | |||
w = safeZoneWAbs; | |||
h = safeZoneH; | |||
</syntaxhighlight> | |||
Creates centered control with 80% width and height: | Creates centered control with 80% width and height: | ||
<syntaxhighlight lang="cpp"> | |||
x = safeZoneX + 0.1 * safeZoneW; | |||
y = safeZoneY + 0.1 * safeZoneH; | |||
w = safeZoneW * 0.8; | |||
Creates control with absolute width and height, moved 10% from top left screen corner | h = safeZoneH * 0.8; | ||
</syntaxhighlight> | |||
Creates control with absolute width and height, moved 10% from top left screen corner: | |||
<syntaxhighlight lang="cpp"> | |||
Creates the same as above, but aligned to bottom right corner | x = safeZoneX + 0.1 * safeZoneW; | ||
y = safeZoneY + 0.1 * safeZoneH; | |||
w = 0.2; | |||
h = 0.3; | |||
</syntaxhighlight> | |||
Creates a control that spans the horizontal and is centered on the vertical according to the control's aspect ratio (useful for fullscreen images that shouldn't be stretched but letterboxed). ''' | |||
Creates the same as above, but aligned to bottom right corner: | |||
<syntaxhighlight lang="cpp"> | |||
x = safeZoneX + safeZoneW - 0.2; | |||
y = safeZoneY + safeZoneH - 0.3; | |||
w = 0.2; | |||
h = 0.3; | |||
</syntaxhighlight> | |||
Creates a control that spans the horizontal and is centered on the vertical according to the control's aspect ratio (useful for fullscreen images that shouldn't be stretched but letterboxed). '''{{Color|red|2}}''' is the aspect ratio: | |||
x = safeZoneX; | x = safeZoneX; | ||
y = safeZoneY+((safeZoneH-(safeZoneW/''' | y = safeZoneY + ((safeZoneH - (safeZoneW / '''{{Color|red|2}}''' * (4/3))) / 2); | ||
w = safeZoneW; | w = safeZoneW; | ||
h = safeZoneH/''' | h = safeZoneH / '''{{Color|red|2}}''' * (4/3); | ||
== User Interface Editor == | == User Interface Editor == | ||
[[User Interface Editor]] helps with display creation, enabling designer to place controls in simple WYSIWYG editor and export it afterwards to config format. | [[User Interface Editor]] helps with display creation, enabling designer to place controls in simple WYSIWYG editor and export it afterwards to config format. | ||
== Image gallery == | == Image gallery == | ||
=== Aspect Ratio and Interface Size combinations === | === Aspect Ratio and Interface Size combinations === | ||
<gallery> | <gallery> | ||
File:UI all.jpg|All aspect ratios / All UI sizes | File:UI all.jpg|All aspect ratios / All UI sizes | ||
File:UI 16-10 Normal.jpg|16:10 / Normal | File:UI 16-10 Normal.jpg|16:10 / Normal | ||
File:UI 16-9 VerySmall.jpg|16:9 / Very Small | File:UI 16-9 VerySmall.jpg|16:9 / Very Small | ||
File:UI 4-3 VeryLarge.jpg|4:3 / Very Large ([[ | File:UI 4-3 VeryLarge.jpg|4:3 / Very Large ([[:Category:{{Name|ofp|cat}}|{{Name|arma0|short}}]]'s default) | ||
File:UI 12-3.jpg|12:3 (TripleHead) | File:UI 12-3.jpg|12:3 (TripleHead) | ||
</gallery> | </gallery> | ||
=== Video Options === | === Video Options === | ||
<gallery> | <gallery> | ||
File:UI options size Arma2.jpg| | File:UI options size Arma2.jpg|{{arma2}} - Interface Size | ||
File:UI options aspect Arma2.jpg| | File:UI options aspect Arma2.jpg|{{arma2}} - Aspect Ratio | ||
File:UI options size TakeOn.jpg| | File:UI options size TakeOn.jpg|{{tkoh}} - Interface Size | ||
File:UI options aspect TakeOn.jpg| | File:UI options aspect TakeOn.jpg|{{tkoh}} - Aspect Ratio | ||
</gallery> | </gallery> | ||
[[Category:GUI Topics|GUI Topics]] |
Latest revision as of 13:01, 19 March 2024
In Arma: Cold War Assault, user interface Displays were drawn always in 4:3 aspect ratio. Since then, many other aspect ratios became common and interface has to be compatible with them. Currently, interface is base on following variables:
- Aspect Ratio - change screen width to fit user's monitor
- Interface Size - resize size of interface Controls, like menus, hints, cursors, etc. Introduced in Arma 2.
Coordinate Systems
Games now contains following two coordinate systems, both of them starting in their top left corner and going bottom right (see picture on right).
- Absolute (red frame) - based on CWA system. Its always 4:3 and changes together with Interface Size.
- As absolute area is always centered, [0.5,0.5] is always center a of screen.
- Safezone (black frame) - actual monitor size. Uses following commands:
- safeZoneX, safeZoneY, safeZoneW and safeZoneH, with additional safeZoneXAbs and safeZoneWAbs to work with multi-screen size.
- In case game is running only on one monitor, safeZoneXAbs equals to safezoneX and safezoneWAbs is same as safezoneW.
- Safezones serves only as references to absolute positions. Result of safezoneX can for example be -0.452381, which means it is left from absolute area.
Sample configs
Control with following size will cover whole screen (middle screen in case of TripleHead):
x = safeZoneX;
y = safeZoneY;
w = safeZoneW;
h = safeZoneH;
Following proportions will cover all screens in TripleHead:
x = safeZoneXAbs;
y = safeZoneY;
w = safeZoneWAbs;
h = safeZoneH;
Creates centered control with 80% width and height:
x = safeZoneX + 0.1 * safeZoneW;
y = safeZoneY + 0.1 * safeZoneH;
w = safeZoneW * 0.8;
h = safeZoneH * 0.8;
Creates control with absolute width and height, moved 10% from top left screen corner:
x = safeZoneX + 0.1 * safeZoneW;
y = safeZoneY + 0.1 * safeZoneH;
w = 0.2;
h = 0.3;
Creates the same as above, but aligned to bottom right corner:
x = safeZoneX + safeZoneW - 0.2;
y = safeZoneY + safeZoneH - 0.3;
w = 0.2;
h = 0.3;
Creates a control that spans the horizontal and is centered on the vertical according to the control's aspect ratio (useful for fullscreen images that shouldn't be stretched but letterboxed). 2 is the aspect ratio:
x = safeZoneX; y = safeZoneY + ((safeZoneH - (safeZoneW / 2 * (4/3))) / 2); w = safeZoneW; h = safeZoneH / 2 * (4/3);
User Interface Editor
User Interface Editor helps with display creation, enabling designer to place controls in simple WYSIWYG editor and export it afterwards to config format.
Image gallery
Aspect Ratio and Interface Size combinations
4:3 / Very Large (Arma:CWA's default)