GUI and the Aspect Ratio: "How can i get my GUI seperated from the aspect ratio?"

[dasmaeh 10]

Hey folks,
 
iam hoping that this isnt an old topic... never the less: The questen here is: "How can i get my GUI seperated from the aspect ratio?"

 

Iam working on a GUI for my own TFAR Radio. My own setup is a FullHD Ressolution with the aspect radio of 16:9.

And that is how it looks right now:

 

 

But my community is using different aspect ratios too. Below is an example, how it looks at 16:10. All is a bit thick and off its original postion:

 

 

This is how all the grapical elements are positioned. All positions have their origins in the lower right corner (thats why i substract the height of each y position):

class RscBackPicture
{
    access = 0;
    type = 0;
    idc = -1;
    style = 48;
    colorBackground[] =
    {
        0,
        0,
        0,
        0
    };
    colorText[] =
    {
        1,
        1,
        1,
        1
    };
    font = "TahomaB";
    sizeEx = 0;
    lineSpacing = 0;
    text = "";
    fixedWidth = 0;
    shadow = 0;
    x = 0;
    y = 0;
    w = 0.2;
    h = 0.15;
};


        class background: RscBackPicture
	{
		idc = IDC_SEM52SL_BACKGROUND;
		text = "\jgkp_radios\sem52sl\ui\sem52sl_day.paa";
		x = safezoneX + safezoneW * 0.02;
		y = safezoneY + safezoneH * 0.98 - (1.3 * safezoneW);
		w = 1.3 * safezoneH;
		h = 1.3 * safezoneW;
		moving = 0;
	};

	class volume_background: RscBackPicture
	{
		idc = IDC_SEM52SL_VOLUME_BACKGROUND;
		text = "\jgkp_radios\sem52sl\UI\VolumeKnob\Volume_07.paa";
		x = safezoneX + safezoneW * 0.019;
		y = safezoneY + safezoneH * 0.77 - (0.085 * safezoneW);
		w = 0.085 * safezoneH;
		h = 0.085 * safezoneW;
		moving = 0;
	};

	class channel_background: RscBackPicture
	{
		idc = IDC_SEM52SL_CHANNEL_BACKGROUND;
		text = "\jgkp_radios\sem52sl\UI\ChannelKnob\Channel_01.paa";
		x = safezoneX + safezoneW * 0.019;
		y = safezoneY + safezoneH * 0.57 - (0.085 * safezoneW);
		w = 0.085 * safezoneH;
		h = 0.085 * safezoneW;
		moving = 0;
	};
	
	class headset_connector: RscBackPicture
	{
		idc = IDC_SEM52SL_HS_CONNECTOR;
		text = "\jgkp_radios\sem52sl\UI\sem52sl_headset_plugged.paa";
		x = safezoneX - safezoneW * 0.028;
		y = safezoneY + safezoneH * 0.408 - (0.155 * safezoneW);
		w = 0.155 * safezoneH;
		h = 0.155 * safezoneW;
		moving = 0;
	};

Please let me know, if you encountered this problem yourself and find a solution.

[tacticalnuggets 24]

Just use these defines that I made:

#define SZ_SCREEN_UNIT_W(w) (w * safeZoneW / 100)
#define SZ_SCREEN_UNIT_H(h) (h * safeZoneH / 100)
#define POS_SCREEN_UNIT_X(x) (safeZoneX + (x * safeZoneW / 100))
#define POS_SCREEN_UNIT_Y(y) (safeZoneY + (y * safeZoneH / 100))
#define TEXT_SIZE(s) (sqrt(safeZoneW*safeZoneH*s*s))

[dasmaeh 10]

Do you have an example? I have no idea how to use your definitions

[Deadfast 43]

You should only use safeZones for the X/Y positions, not width/height unless you mean for those to scale according to the aspect ratio as well.

[dasmaeh 10]

the GUI must have the exact same size all time. Thats why iam using safezones for width and height too.

[Deadfast 43]

If you use w = 0.5 (for example) it will be the same size no matter what aspect ratio is set.

[dasmaeh 10]

yes right, but if the player users "User Interface Scaleing" in his Grafik Settings, the GUI will be scale too, and i dont want it to scale.

[tacticalnuggets 24]

Do you have an example? I have no idea how to use your definitions

 

Sure,

 

Basically, these are for height and width, where max is 100 and 0 is.. well.. 0 lol, 

#define SZ_SCREEN_UNIT_W(w) (w * safeZoneW / 100)
//so you would use like this "w = SZ_SCREEN_UNIT(45.3)"
// where 45.3% of screen width will be width
#define SZ_SCREEN_UNIT_H(h) (h * safeZoneH / 100) //same here, but for height :P

And these are for screen positions, where putting 0 for both will be top left corner, and 100 for both would be bottom right corner

#define POS_SCREEN_UNIT_X(x) (safeZoneX + (x * safeZoneW / 100))
#define POS_SCREEN_UNIT_Y(y) (safeZoneY + (y * safeZoneH / 100))

And this for text size, as it scales with aspect ratio relative with the other defines

#define TEXT_SIZE(s) (sqrt(safeZoneW*safeZoneH*s*s))

[tacticalnuggets 24]

Oh, i think i just realized you dont want any stretching of .paa's. In that case, just avoid safe zone all together and keep your sizes smaller.

 

Or you could probably just make duplicates at different aspect ratios or something lol

[dasmaeh 10]

but without the safezones, the GUI will be on a different position depending on the resolution/Menu scaling?!

[dasmaeh 10]

to be clear...

 

the GUI should be at the same position in the same size, no matter what resolution, aspect ratio or menu scaling is choosen.

[Kerc Kasha 102]

They're saying to remove the safezones from width and height which only effect the size of it, that way they'll be in the same position and same size no matter screen size or aspect ratio

[dasmaeh 10]

Okay i tried it without safezones for height and width and you are right. The aspact ratio dont influence the GUI anymore.

The problem is, that the "GUI sacling" option in the grafical configuration menu now influences the GUI again, that it doesnt with the use of safezones for height and width.

 

Is it posible to combine the results somehow?

[dasmaeh 10]

Finally, I made it! And this is about how:

 

class background: RscBackPicture
	{
		idc = IDC_SEM52SL_BACKGROUND;
		text = "\jgkp_radios\sem52sl\ui\sem52sl_day.paa";
		x = safezoneX + safezoneW * 0.02 * 1.77778 / (getResolution select 4);
		y = safezoneY - safezoneH * 0.7565;
		w = 2.3705855 / ((getResolution select 5)* 1.81818182);
		h = 3.160791 / ((getResolution select 5)* 1.81818182);
		moving = 0;
	};

 I build up the GUI in an 16:9 aspect ratio. To convert the x-axis value to another aspect ratio, iam multipling with "16:9" (1.77778) and divide it again with the current aspect ratio (getResolution select 4)

In my case, there was no need to convert the y-axis, so no changes here.

 

The width and height values need to be converted coresponding to actual GUIScaling. As i was build up the GUI with a GUIScaling of "Small", i need to count out... math out... uh... remove the dependency of my scaling by multipling with 1.81818182 and divide it again with the actual GUIScale. And thats it. Peh :D

 

Maybe, you had similar issues and i could helped you out with that above.