SafeZone: Difference between revisions

From Bohemia Interactive Community
Jump to navigation Jump to search
m (Text replacement - "{{arma2}}" to "{{GameCategory|arma2|link= y}}")
 
(21 intermediate revisions by 7 users not shown)
Line 1: Line 1:
{{Stub}}
[[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:


== Introduction ==
* '''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 {{GameCategory|arma2|link= y}}.


Terminology
*Display: The video display.
*Game Screen: That part of the video display that shows the game. Either the full Display, or part of the Display in windowed mode.


== Coordinate Systems ==


Dialogs and controls are positioned in the Game Screen in a rectangular box using screen-coordinates where the top left corner of Game Screen = 0,0. Bottom Right = 1,1.
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.


In the Bis world, all positions, widths and heights are expressed in fractions of the full coordinate area of (1.0, 1.0).


Before [[ArmA_2|Arma2]] the positioning of these controls was the game screen.
== Sample configs ==


Post [[ArmA_2|Arma2]] these positions are a user screen (green), embedded in the game screen (red).
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>


*A user can now set his prefered menusize in the grafic options of [[ArmA_2|Arma2]]. So if you choose for example "small", the positioning grid is redefined to a smaller, centered area with borders around.
Following proportions will cover all screens in TripleHead:
<syntaxhighlight lang="cpp">
x = safeZoneXAbs;
y = safeZoneY;
w = safeZoneWAbs;
h = safeZoneH;
</syntaxhighlight>


[[Image:ARMA2_SafeZonesExample.JPG|Example for SafeZone (red areas)]]
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;
h = safeZoneH * 0.8;
</syntaxhighlight>


The SafeZone is the red area, and can only be reached with values outside the range of 0 to 1.
Creates control with absolute width and height, moved 10% from top left screen corner:
<syntaxhighlight lang="cpp">
x = safeZoneX + 0.1 * safeZoneW;
y = safeZoneY + 0.1 * safeZoneH;
w = 0.2;
h = 0.3;
</syntaxhighlight>


== Handling the SafeZone ==
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>


SafeZone = red area including the green one = complete screen.
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;
y = safeZoneY + ((safeZoneH - (safeZoneW / '''{{Color|red|2}}''' * (4/3))) / 2);
w = safeZoneW;
h = safeZoneH / '''{{Color|red|2}}''' * (4/3);


To position your control to the left border of the game screen, you have to set a negative value to the "x" tag of your control. But this value depends on the menusize setting of the user. So how do I get the right value ?


BI give you 4 functions to get the whole dimensions of the screen.
== User Interface Editor ==
* [[SafeZoneX]] returns the value for the left side of screen.
* [[SafeZoneY]] returns the value for the top of the screen.
* [[SafeZoneW]] returns the whole width of the screen.
* [[SafeZoneH]] returns the whole height of the screen.


(to be continued....)
[[User Interface Editor]] helps with display creation, enabling designer to place controls in simple WYSIWYG editor and export it afterwards to config format.


== Code Examples ==
(WIP ...)
<pre>
</pre>


== See also ==
== Image gallery ==
[[SafeZoneX]], [[SafeZoneY]], [[SafeZoneW]], [[SafeZoneH]]
 
=== Aspect Ratio and Interface Size combinations ===
 
<gallery>
File:UI all.jpg|All aspect ratios / All UI sizes
File:UI 16-10 Normal.jpg|16:10 / Normal
File:UI 16-9 VerySmall.jpg|16:9 / Very Small
File:UI 4-3 VeryLarge.jpg|4:3 / Very Large ([[:Category:{{Name|ofp|cat}}|{{Name|arma0|short}}]]'s&nbsp;default)
File:UI 12-3.jpg|12:3 (TripleHead)
</gallery>
 
=== Video Options ===
 
<gallery>
File:UI options size Arma2.jpg|{{arma2}} - Interface Size
File:UI options aspect Arma2.jpg|{{arma2}} - Aspect Ratio
File:UI options size TakeOn.jpg|{{tkoh}} - Interface Size
File:UI options aspect TakeOn.jpg|{{tkoh}} - Aspect Ratio
</gallery>
 
 
[[Category:GUI Topics|GUI Topics]]

Latest revision as of 14:01, 19 March 2024

Safezone and Absolute proportions (16:10 / Normal)

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

Video Options