Make ST_PICTURE look same on all resolutions

[jts_2009 96]

Hi. Anyone know how to make ST_PICTURE looks same on all resolutions..? Because on lower resolution or aspect ratio there is a little spaghettification (Well, depends on resolution actually. On very low it's big)

 

Currently I use:

w = safeZoneW * 0.3; 
h = safeZoneH * 0.478;

 

[GEORGE FLOROS GR 4206]

I'm using this ,

check :

		x = 0 * safezoneW + safezoneX;
		y = 0 * safezoneH + safezoneY;
		w = 1 * safezoneW;		
		h = 1 * safezoneH;		

 

[Larrow 2792]

Always 512 x 512 pixels in the center of the screen.

x = safeZoneX + ( safeZoneW / 2 ) - ( 256 * pixelW );
y = safeZoneY + ( safeZoneH / 2 ) - ( 256 * pixelH );
w = 512 * pixelW;
h = 512 * pixelH;

 

Center of the screen based on 10 pixelGridNoUIScale grids, which should keep it relatively the same size no matter resolution and ui size. (changes very slightly)

x = safeZoneX + ( safeZoneW / 2 ) - ( pixelW * pixelGridNoUIScale * 5 );
y = safeZoneY + ( safeZoneH / 2 ) - ( pixelH * pixelGridNoUIScale * 5 );
w = pixelW * pixelGridNoUIScale * 10;
h = pixelH * pixelGridNoUIScale * 10;

 

[jts_2009 96]

@Larrow Thanks I'll try that. Will give then a feedback

[jts_2009 96]

1 hour ago, Larrow said:

x = safeZoneX + ( safeZoneW / 2 ) - ( 256 * pixelW ); y = safeZoneY + ( safeZoneH / 2 ) - ( 256 * pixelH ); w = 512 * pixelW; h = 512 * pixelH;

 

What is here actually the position on the screen? Or do I need to add it?

[Larrow 2792]

12 hours ago, jts_2009 said:

What is here actually the position on the screen? Or do I need to add it?

 

12 hours ago, jts_2009 said:

safeZoneX + ( safeZoneW / 2 )

This is actual position on the screen.

12 hours ago, jts_2009 said:

- ( 256 * pixelW )

Minus half the picture width, so as to centre the picture at the position.

 

Maybe this makes it clearer?

#define PIC_SIZE_PIXELS_X	512 * pixelW
#define PIC_SIZE_PIXELS_Y	512 * pixelH

#define PIC_SIZE_GRIDS_X	10 * pixelW * pixelGridNoUIScale
#define PIC_SIZE_GRIDS_Y	10 * pixelH * pixelGridNoUIScale

#define SCREEN_CENTER_X		safeZoneX + ( safeZoneW / 2 )
#define SCREEN_CENTER_Y		safeZoneY + ( safeZoneH / 2 )

//Pixels - Not visually the same size on all machines, resolution will cause it to change
x = SCREEN_CENTER_X - ( PIC_SIZE_PIXELS_X / 2 );
y = SCREEN_CENTER_Y - ( PIC_SIZE_PIXELS_Y / 2 );
w = PIC_SIZE_PIXELS_X;
h = PIC_SIZE_PIXELS_Y;
 
//Grids - Visually the same size on all machines (very slight variation) no matter resolution and ui size
x = SCREEN_CENTER_X - ( PIC_SIZE_GRIDS_X / 2 );
y = SCREEN_CENTER_Y - ( PIC_SIZE_GRIDS_Y / 2 );
w = PIC_SIZE_GRIDS_X;
h = PIC_SIZE_GRIDS_Y;

 

[jts_2009 96]

On 12.01.2019 at 10:15 AM, Larrow said:

This is actual position on the screen.

 

I use range 0-1 for positioning UI elements on screen. So I know that when x is 0.9, it's right on the screen. Like 90% right.

 

Here:

w = safeZoneW * 0.3; // this value
h = safeZoneH * 0.478; // this value

but I can't understand how it's to be done here:

 

x = safeZoneX + ( safeZoneW / 2 ) - ( 256 * pixelW );
y = safeZoneY + ( safeZoneH / 2 ) - ( 256 * pixelH );
w = 512 * pixelW;
h = 512 * pixelH;

 

or here:

 

x = safeZoneX + ( safeZoneW / 2 ) - ( pixelW * pixelGridNoUIScale * 5 );
y = safeZoneY + ( safeZoneH / 2 ) - ( pixelH * pixelGridNoUIScale * 5 );
w = pixelW * pixelGridNoUIScale * 10;
h = pixelH * pixelGridNoUIScale * 10;

 

I want to place the picture where I want on the screen with configuring the size of it. For example at x = 0.3 and y = 0.8. Or at x = 0.5 and y = 0.1.

I thought it is maybe possible to have these value from 0 to 1, so you know where to place the picture on the screen. But, based on correct calculation. And, after correct calculation, I'll use that 0-1 range

[Larrow 2792]

3 hours ago, jts_2009 said:

I use range 0-1 for positioning UI elements on screen.

For example at x = 0.3 and y = 0.8. Or at x = 0.5 and y = 0.1.

Unless this is a ui element inside a controlsGroup then you are not using the whole screen.

The screen goes from

safezoneX to safezoneX + safezoneW in the horizontal

and

safezoneY to safezoneY + safezoneH in the vertical

 

0 is not the left hand side OR the top(unless your UI size is VLarge) of the screen.

Left and Top (safezoneX and safezoneY respectively) are both negative numbers.

 

 

 

3 hours ago, jts_2009 said:

Here:

w = safeZoneW * 0.3; // this value
h = safeZoneH * 0.478; // this value

That is not positioning anything. That is the size of the element w/h, being 30% of the screens width and 47.8% of the screens height.

 

x = safeZoneX + ( safeZoneW * yourValueX );
y = safeZoneY + ( safeZoneH * yourValueY );

Where yourValueX/Y is 0-1 (percentage of screen / 100). This will place the top left of the image at this position.

 

If you wish to place the centre of the image at the position then you need to minus half the picture width/height from the x/y of the position.

#define PIC_WIDTH	512 * pixelW	//Picture width in pixels
#define PIC_HEIGHT	512 * pixelH	//Picture height in pixels
  
x = safeZoneX + ( safeZoneW * yourValueX ) - ( PIC_WIDTH / 2 );
y = safeZoneY + ( safeZoneH * yourValueY ) - ( PIC_HEIGHT / 2 );
w = PIC_WIDTH;
h = PIC_HEIGHT;

The above will cause the image to be different sizes visually dependant on the users resolution.

Although always 512 x 512 pixels, if the users resolution is say 1920 x 1080 then the image will be roughly 1/4 of the width and 1/2 the height of the screen.

If the users resolution is 1280 x 720 then the image will be roughly 2/5th's the width and 2/3rd's the height of the screen.

 

#define PIC_WIDTH	10 * pixelW * pixelGridNoUIScale	//Picture width in grids
#define PIC_HEIGHT	10 * pixelH * pixelGridNoUIScale	//Picture height in grids

x = safeZoneX + ( safeZoneW * yourValueX ) - ( PIC_WIDTH / 2 );
y = safeZoneY + ( safeZoneH * yourValueY ) - ( PIC_HEIGHT / 2 );
w = PIC_WIDTH;
h = PIC_HEIGHT;

The above will keep the picture size roughly the same size visually on all machines no matter the resolution or ui size.

A grid (1 * pixelH * pixelGridNoUIScale) is roughly your vertical screen space divided by 60. The width is then divided by a vertical grids screen size so as to make a grid space square. So the image will always be 10/60th's of the screen height and the same dimensions in width.

 

TEST_MISSION use actions on player

[HazJ 1288]

There is also RscPictureKeepAspect type which may also be worth noting.

[jts_2009 96]

6 minutes ago, HazJ said:

There is also RscPictureKeepAspect type which may also be worth noting.

 

Hm, thanks. Sometimes it's easier than expected... :3

 

45 minutes ago, Larrow said:

TEST_MISSION use actions on player

 

thanks