Scaling GUI Overlays

[Flenix]

Hey guys,

 

Sorry for this post, I probably seem a bit stupid but I can't get my head around this at all. I've asked 3 times on IRC but annoyingly every time, the person helping mysteriously disappears half way through...

 

Anyway,

what I want to do is have an overlay rendered on the screen. However, the overlay's position is set in the config file.

So, for example, if the xPos number in the config was 60, the image would start rendering at 60,0 along the top of the screen.

 

Initially, it works fine - but when the screen is rescaled (eg, full screen mode), they don't move to the correct position.

 

I understand I need to use ScaledResolution, and I've got the integers for scaledWidth and scaledHeight.

What I don't understand, is how to make those numbers interact with mine, to keep my stuff in the correct place.

 

Can anyone give me a hand with this?

[Alexiy]

I can't look at the code now, but yes, use Scaled resolution - create one every time before rendering and use its getScaledWidth, getScaledHeight.

[Flenix]

(Sorry, won't let me quote you Alexiy)

 

What I don't understand, is how to make those numbers interact with mine, to keep my stuff in the correct place.

 

I've got as far as using scaled res; I just can't get my head around the math behind implementing it. I'm usually quite good at doing clever math calculations - it took me seconds to do what I was told was "impossible" and round a double to two decimal places, but I just can't get this one for some reason.

[Flenix]

Ok, I'm going to guess, due to the fact everyone seems to stop helping after that point, that ScaledResolution will NOT work for what I want to do.

 

Therefore, the only way I can imagine that I can allow my widgets to be placed anywhere on the screen is like so:

 

If they want it in the top left, they just set X/Y to a positive int

X = 0

Y = 0

 

If they want it right of the crosshair,

rightScreen = true

X = 0 (Or a NEGATIVE offset)

Y = 0 (or a POSITIVE offset)

 

If they want it below the crosshair,

lowerScreen = true

X = 0 (Or a POSITIVE offset)

Y = 0 (Or a NEGATIVE offset)

 

And finally if they want it in the bottom right,

lowerScreen = true

rightScreen = true

X = 0 (Or a NEGATIVE offset)

Y = 0 (Or a NEGATIVE offset)

 

 

As you can see, all that configuration gets VERY confusing. I'd much rather just be able to set X and Y, and it move correctly according to the screen's scale...

Anyone got ANY ideas?

[Draco18s]

it took me seconds to do what I was told was "impossible" and round a double to two decimal places

 

You mean multiply by 100, round to the nearest int, then divide by 100?

 

As you can see, all that configuration gets VERY confusing. I'd much rather just be able to set X and Y, and it move correctly according to the screen's scale...

Anyone got ANY ideas?

 

actualX = configX / intendedDefaultScreenWidth * currentScreenWidth

 

Ditto for Y

[Flenix]

From memory, something similar to that didn't work.

 

However, I've now got it to work. I caused quite a heated discussion on the whole subject in IRC, but for anyone who wants to do this in the future, here's what I did:

 

First, I run a bit of code in the preInit which checks the screens current resolution, and saves it as a variable.

I then later compare this variable with the current resolution, and work out the % difference.

I turn the % into a double, add 1, and multiply my config value by that.

 

Basically what that does is moves my GUI widget based on the % increase in screen size.

 

 

The ONLY issue with this is relevant spacing; if you have multiple widgets, the gap between them increases with screen size. I got around this by making my config more flexible and offering an offset - so if a user sets the coordinates of two widgets the same, they can use offset to move the second widget in relation to the first. That way, when they get scaled by the screen resizing, they will stay in the same relative position to one another and move together.

 

I also offered a fallback for people who didn't like the X/Y option (as it can be hard to get position exact with it), and allow players to simply choose a corner/side of the screen to use as a base point.

 

It all works absolutely beautifully; when I finish making the initial release widgets, I'll post up a jar here for anyone who wants to see it in action

 

I've just got one last bug; but I'll post a new thread for that tomorrow if I can't fix it tonight.