SafeZone: Difference between revisions

From Bohemia Interactive Community
Jump to navigation Jump to search
No edit summary
 
m (Text replacement - "{{arma2}}" to "{{GameCategory|arma2|link= y}}")
 
(24 intermediate revisions by 8 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}}.


Before Arma2 the positioning grid for dialogs and controls reach from 0,0 (top left corner of game screen) to 1,1 (bottom right corner of game screen).


This changes in [[ArmA_2|Arma2]], because a user can now set his prefered menusize in the grafic options of [[ArmA_2|Arma2]].
== Coordinate Systems ==


So if you choose for example "small", the only thing that happened, is that the positioning grid is redefined to a smaller, centered area with borders around.
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.


I created an example screen:
* monitor dimensions: 1280x1024 pixel
* menusetting: small


Green area, is the default area fom 0,0 to 1,1. It is now smaller that the whole screen
== Sample configs ==
[[Image:ARMA2_SafeZonesExample.JPG|Example for SafeZone (red areas)]]


The green area will shrink, if you select a smaller menusize.
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>


The SafeZone is the red area, and can only be reached with values outside the range of 0 to 1.
Following proportions will cover all screens in TripleHead:
<syntaxhighlight lang="cpp">
x = safeZoneXAbs;
y = safeZoneY;
w = safeZoneWAbs;
h = safeZoneH;
</syntaxhighlight>


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


SafeZone = red area including the green one = complete screen.
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>


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 ?
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>


BI give you 4 functions to get the whole dimensions of the 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:
* [[SafeZoneX]] returns the value for the left side of screen.
x = safeZoneX;
* [[SafeZoneY]] returns the value for the top of the screen.
y = safeZoneY + ((safeZoneH - (safeZoneW / '''{{Color|red|2}}''' * (4/3))) / 2);
* [[SafeZoneW]] returns the whole wide of the screen.
w = safeZoneW;
* [[SafeZoneH]] returns the whole height of the screen.
h = safeZoneH / '''{{Color|red|2}}''' * (4/3);


(to be continued....)


== See also ==
== User Interface Editor ==
[[SafeZoneX]], [[SafeZoneY]], [[SafeZoneW]], [[SafeZoneH]]
 
[[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 ===
 
<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