Jump to content
mad_cheese

Help with safeZoning rscControlsgroup

Recommended Posts

I have an RscTitle menu that just does not want to work out over various resolutions. All x-coordinates are incorrect, the rest is working fine , although I am not sure it's REALLY working correctly. 

 

This dialog was made on a small monitor. I have in the meantime bought a 34" and it was very easy to see that my dialogs are not set up correctly. They work, but get stretched, which I thought safeZone would actually prevent.

 

Hopefully  someone here will see what is wrong with my x=coordinates. As I mentioned, they are too high, so the controls are sort of spread outside of the rscControlsgroup. Alsp the background image, which has the same dimensions as the rscControlsGroup, is cut of on the right- and bottom-edges.

 

EDIT/ADDITION:

I should mention that this particular dialog has a rotating image in it. Therefore it is important that all images are displayed as perfect squares in all resolutions. The reason I opted for a rscControlsGroup was a hope of making that a perfect square, while the rest would follow - the dialog I had before got stretched, which is normally not all that bad unless you have a rotating image in it.. Now with this new rscControlsGroup setup, I get perfect squares and all, but the x-coordinates are wrong.. And maybe even more.

 

class RscTitles
{

	class MCSS_HUD_MENU_UI
	{
		idd = 79993;
		duration = 1000000000000;
		fadeIn = 0;
		fadeOut = 0;
		name = "MCSS_HUD_MENU_UI";
		onLoad = "profileNamespace setVariable ['MCSS_C2_HUD_isOpen',true]; uiNamespace setVariable['MCSS_HUD_MENU_UI',_this select 0]";
		onUnload = "profileNamespace setVariable ['MCSS_C2_HUD_isOpen',false]; uiNamespace setVariable['MCSS_HUD_MENU_UI', displayNull]";
		onDestroy =  "profileNamespace setVariable ['MCSS_C2_HUD_isOpen',false]; uiNamespace setVariable['MCSS_HUD_MENU_UI', displayNull]";
		
		class ControlsBackground
		{
			
			class MCSS_C2_HUD_UI_CtrlsGroup: MCSS_RscControlsGroup_NoScroll
			{
				idc = -1;
				x = 0.29372 * safezoneW + safezoneX;
				y = 0.28002 * safezoneH + safezoneY;
				w = (0.660103 * safezoneH) * 0.75;
				h = 0.660103 * safezoneH;
				class Controls
				{
					
					
					class MCSS_C2_HUD_UI_BG : MCSS_RscPicture
					{
						idc = 15;
						type = 0;
						//text = "#(argb,8,8,3)color(1,1,1,1)";
						//text = "C2_CORE\ui\pictures\Frame_HUD_Menu.paa";
						x = 0;
						y = 0;
						w = (0.660103 * safezoneH) * 0.75;
						h = 0.660103 * safezoneH;
					};
					class MCSS_C2_HUD_OVERRIDE_BOX_1 : MCSS_RscPicture
					{
						//idc = 10;
						idc = 16;
						//text = "C2_CORE\ui\pictures\icon_WPWritingMode_OverWrite.paa";
						x = 0.386431 * safezoneW;
						y = 0.530152 * safezoneH;
						w = (0.0586758 * safezoneH) * 0.75;
						h = 0.0586758 * safezoneH;
					};

					class MCSS_C2_HUD_HIDE_BOX_1 : MCSS_RscPicture
					{
						//idc = 12;
						idc = 17;
						//text = "C2_CORE\ui\pictures\icon_showUI_true.paa";
						x = 0.441439 * safezoneW;
						y = 0.530152 * safezoneH;
						w = (0.0586758 * safezoneH) * 0.75;
						h = 0.0586758 * safezoneH;
						//toolTipColorShade[] = {0.5,0.2,0.6,0.6};
						//tooltip = "Change Formation";
						//action = "['Purple',(_this select 1)] call MCSS_C2_MENU_FNC_TEAMCOLOR";
					};
					class MCSS_C2_HUD_UI_TRAVEL_BOX : MCSS_RscPicture
					{
						idc = 10;
						//text = "C2_CORE\ui\pictures\icon_Stance_Auto.paa";
						x = 0.020628 * safezoneW;
						y = 0.532352 * safezoneH;
						w = (0.0586758 * safezoneH) * 0.75;
						h = 0.0586758 * safezoneH;
						//toolTipColorShade[] = {0.5,0.2,0.6,0.6};
						//tooltip = "Change Stance: TRAVEL";
						//action = "[0,_this select 1] call MCSS_C2_HUD_UI_STANCE_BUTTONS";
					};
					class MCSS_C2_HUD_UI_DESTINATION_BOX : MCSS_RscPicture
					{
						idc = 11;
						//text = "C2_CORE\ui\pictures\icon_Stance_Stand_Dim.paa";
						x = 0.130644 * safezoneW;
						y = 0.532352 * safezoneH;
						w = (0.0586758 * safezoneH) * 0.75;
						h = 0.0586758 * safezoneH;
						//toolTipColorShade[] = {0.5,0.2,0.6,0.6};
						//tooltip = "Change Stance: DESTINATION";
						//action = "[1] call MCSS_C2_HUD_UI_STANCE_BUTTONS";
					};
				
					class MCSS_C2_HUD_UI_FORM_BOX : MCSS_RscPicture
					{
						idc = 12;
						//text = "#(argb,8,8,3)color(0,1,1,1)";
						x = 0.1719 * safezoneW;
						y = 0.461958 * safezoneH;
						w =(0.203532 * safezoneH) * 0.75;
						h = 0.203532 * safezoneH;
						//toolTipColorShade[] = {0.5,0.2,0.6,0.6};
						//tooltip = "Change Formation";
						//action = "[1] call MCSS_C2_HUD_UI_FORM_BUTTON";
					};
					class MCSS_TBOX : MCSS_RscPicture
					{
						idc = -1;
						text = "#(argb,8,8,3)color(1,1,1,1)";
						x = (0.1719 * safezoneW) * 0.75 ;
						y = 0.461958 * safezoneH;
						w = (0.203532 * safezoneH) * 0.75;
						h = 0.203532 * safezoneH;
					};
					class MCSS_C2_HUD_UI_SPEED_BOX : MCSS_RscPicture
					{
						idc = 13;
						//text = "C2_CORE\ui\pictures\icon_WPSpeed_Diminished.paa";
						x = 0.075636 * safezoneW;
						y = 0.532352 * safezoneH;
						w = (0.0586758 * safezoneH) * 0.75;
						h = 0.0586758 * safezoneH;
						//toolTipColorShade[] = {0.5,0.2,0.6,0.6};
						//tooltip = "";
						//action = "[] call MCSS_C2_HUD_UI_SPEED_BUTTON";
					};
					class MCSS_C2_HUD_UI_GOCODE_BOX : MCSS_RscPicture
					{
						idc = 14;
						//text = "C2_CORE\ui\pictures\icon_goCode_NONE.paa";
						x = 0.331423 * safezoneW;
						y = 0.530152 * safezoneH;
						w = (0.0586758 * safezoneH) * 0.75;
						h = 0.0586758 * safezoneH;
					};			
				};
			};
		};
	};
};

Please ignore my weird idc numbering. 

 

Thanks!!

 

Share this post


Link to post
Share on other sites

Instead of screen space percentages (safeZoneW/H), use the new pixelGrid system instead. This will split the display into grids based on screen height, allowing you to place your images as square and keep everything relative.

Use...

createDialog "RscTestGrids"

...from the debug console for a demonstration of how the different pixelGrid commands effect a ui element (white boxes) based on resolution, aspect ratio and ui size.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Hey guys, thanks for getting back!!

 

@Larrow oh that looks great indeed. I know I stumbled over those pages before but sometimes I don't even know what I'm really looking for yet. pixelGridNoUIScale seems to be just what I'm looking for.

 

I feel a bit dumb to ask this: so for safeZone, GUI_GRID and ABSOLUTE I can get the values and formulas I need by just creating the dialog in the GUI-Editor... I am not clear how to convert (or rebuild) the dialog that I built into this pixelGrid format. I mean, I guess I could work out how to position the main box center screen, but I'm really clueless as to how I would arrange the icons within the controlsGroup. What's the 'right' way to do this? Thanks a million!!

Share this post


Link to post
Share on other sites

Try having a look at this, look in the ui folder at the #_sizes.hpp, then open the #.gui ignore the macros at the top and scroll down to the main class. In there is a controls group that contains all the controls of the ui using the GRID defines from the #_sizes.hpp to set out their positions. Once you have worked yourself out a nice grid size and as all the controls are relative to the controls groups 0,0 everything after that is as easy as placing and sizing items to grid numbers (depends on how regimented your layout is, really cannot tell from your safezone values). Hope it helps.

  • Like 1

Share this post


Link to post
Share on other sites

Wow thank you @Larrow ! I have not fully grasped it yet, but that is definitely what I am going for.

 

I am messing around with it now, trying to work out my grid and positions, it's a bit abstract without the GUI-Editor where you can just see where things are going and how proportionate they are..

 

This is what the menu is supposed to look like:

 

rjrbrJx.png

 

The icons need to be in uber precise locations, the big circle in the middle has different variants that  can rotate, so it needs to be perfectly sized and placed to not look terrible... I'm gonna work the crap out of this now, I'm just fishing if maybe something will jump in your eye (or that impressive brain of yours).

 

So far I have this:

 

3dyl7XQ.png

 

So there's the main rscCtrlsGroup and the background image tha covers the entire area. I managed to move it into the center, the height is giving me some problem that I have not understood but I can live with that for now (it's a little bit too high and the values I am getting from my old script seem to behave weird).

Notice the small white pixel next to the radio tower, a bit hard to see unfortunately. That's me trying to get a grip on the grid that I (or more like.. you) created.

 

So now, if that pixel was to be the rotating circle-icon from the first picture - how would I go to size and place it perfectly in it's designated position? it seems that you built your interface only using textfiles, no editor... And yet it looks perfectly organized.

 

This is the grid defines:

#define GRIDX( num ) ( num * ( pixelGrid * pixelW * 2 ))
#define GRIDY( num ) ( num * ( pixelGrid * pixelH * 2 ))

//UI element sizes
#define MAIN_WIDTH 40
#define MAIN_HEIGHT 40

 

and the UI:

class RscTitles
{

    class MCSS_HUD_MENU_UI
    {
        idd = 79993;
        duration = 1000000000000;
        fadeIn = 0;
        fadeOut = 0;
        name = "MCSS_HUD_MENU_UI";
        onLoad = "profileNamespace setVariable ['MCSS_C2_HUD_isOpen',true]; uiNamespace setVariable['MCSS_HUD_MENU_UI',_this select 0];";
        onUnload = "profileNamespace setVariable ['MCSS_C2_HUD_isOpen',false]; uiNamespace setVariable['MCSS_HUD_MENU_UI', displayNull]";
        onDestroy =  "profileNamespace setVariable ['MCSS_C2_HUD_isOpen',false]; uiNamespace setVariable['MCSS_HUD_MENU_UI', displayNull]";

        class ControlsBackground
        {
            

            
        
            //[0.124999,0.100052,0.900222,1.20014]
            class TestThing : MCSS_RscControlsGroup_NoScroll
            {
                idc = 22222;
                
                x = 0.5 - (GRIDX( MAIN_WIDTH ) / 2); //-- center ctrlsGroup
                y = 0.3002 * safezoneH + safezoneY;
                w = GRIDX( MAIN_WIDTH );
                h = GRIDY( MAIN_HEIGHT );
        

        
                class controls
                {

        
                    class main_background: MCSS_RscPicture
                    {
                        idc = -1;
        
                        x = 0;
                        y = 0;
                        w = GRIDX( MAIN_WIDTH );
                        h = GRIDY( MAIN_HEIGHT );
        
                        text = "C2_CORE\ui\pictures\Frame_HUD_Menu_Black.paa";
                    };
                    class palette_white: MCSS_RscPicture
                    {
                        idc = -1;
        
                        x = GRIDX( 1 );
                        y = GRIDY( 1 );
                        w = GRIDX( 1 );
                        h = GRIDY( 1 );
        
                        shadow = 0;
                        colorText[] = { 1, 1, 1, 1 };
                        text = "#(argb,8,8,3)color(1,1,1,1)";
                    };
                };
            };
        };
    };
};

 

EDIT: it's really hard to guess the values... Would you think I can use the data from my GUI_Editor layout for this method somehow?

EDIT 2: It took me about 45mins to layer in the first icon :D  Not perfect but okay and most of all: reliable! --> I do not mind tormenting myself at all, but if there's the 'smart' way I would definitely love to learn.

 

Larrow you are definitely one of the great minds of this community. Thank you!

Share this post


Link to post
Share on other sites

GOT IT!!!!

 

 

 

I'm sure there was a better way to come up with the values than mine (guessing and about 500 cycles of loading mission, previewing mission, changing hpp), but I am just happy it works :D Thank you so much Larrow!

  • Like 1

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

×