Page MenuHomeWildfire Games

gui: remove empty space between logo and buttons
Needs ReviewPublic

Authored by Nescio on Tue, Jan 14, 6:16 PM.

Details

Reviewers
bb
Summary

As discussed in rP23387, there is some unnecessary empty space in the pre-game main menu, between the 0 A.D. logo and the “Learn To Play” button.
This patch removes that, so it looks better on 1280×720 screens.
Before:


After:

On 3840×2160:

[Update]: divide the empty space dynamically, as requested by @elexis;
C = 50%, A, B, D, E, F 10%, with:
A: space between top and logo
B: space between logo and buttons
C: space between buttons and project box
D: space between project box and organization logo
E: space between organization logo and product build
F: space between product build and bottom
On 1280×720:


On 3840×2160:

Test Plan

Apply arc patch --diff 11012, launch the game, take a screenshot, exit, revert.
Apply arc patch --diff 11160, launch the game, take a screenshot, exit, revert.
Compare the two critically and decide which one looks best.

Event Timeline

Nescio created this revision.Tue, Jan 14, 6:16 PM
Owners added a subscriber: Restricted Owners Package.Tue, Jan 14, 6:16 PM

Successful build - Chance fights ever on the side of the prudent.

Link to build: https://jenkins.wildfiregames.com/job/vs2015-differential/1035/display/redirect

elexis added a subscriber: elexis.Tue, Jan 14, 6:19 PM

Why did I post the JS?

Successful build - Chance fights ever on the side of the prudent.

Link to build: https://jenkins.wildfiregames.com/job/macos-differential/131/display/redirect

Successful build - Chance fights ever on the side of the prudent.

Link to build: https://jenkins.wildfiregames.com/job/docker-differential/1553/display/redirect

Why did I post the JS?

Because you're friendly and helpful?
This xml change seemed easier, though.

Should optimize the solution for the user, not for the developer, and it looks more appealing if it is vertically centered, which is relevant for all resolutions greater than that one?
Otherwise one should do an evaluation which of the two (top alignment vs center alignment) looks more appealing. (Or perhaps even some golden ratio stuff?)
And then pick the one that looks best for all relevant resolutions.

(Also, not that it matters for these three characters, but crediting isn't wrong when distributing patches)

Should optimize the solution for the user, not for the developer, and it looks more appealing if it is vertically centered, which is relevant for all resolutions greater than that one?
Otherwise one should do an evaluation which of the two (top alignment vs center alignment) looks more appealing. (Or perhaps even some golden ratio stuff?)
And then pick the one that looks best for all relevant resolutions.

Personally I think top alignment looks best, but I'm biased, of course. Here's how it looks on 3840×2160:


For comparison, this is how it looks with size="8 50%-100 100%-8 50%+100" on 3840×2160:

Undoubtedly something neater could be achieved with JavaScript, but I'm not a programmer, so what's easy and straightforward for you isn't necessarily for me. XML at least I understand.

(Also, not that it matters for these three characters, but crediting isn't wrong when distributing patches)

I apologize if I did something wrong. What do you mean exactly?

What do you mean exactly?

This is the patch I uploaded at https://code.wildfiregames.com/rP23387#40853 so it would be correct to credit that.

Perhaps it would look best

Personally I think top alignment looks best, but I'm biased, of course. Here's how it looks on 3840×2160:


For comparison, this is how it looks with size="8 50%-100 100%-8 50%+100" on 3840×2160:

Perhaps it would look best if the space between the top of the window and the product logo, between the product logo and the mainmenu buttons, and between the main menu buttons and the top of the project info box, and the bottom of the project info box and the bottom of the window would be divided uniformly?

This is the patch I uploaded at https://code.wildfiregames.com/rP23387#40853 so it would be correct to credit that.

Again, I'm not sure what you mean, the summary already starts with “As discussed in rP23387”. Or did you mean you want your username explicitly mentioned? (No problem!)

Perhaps it would look best if the space between the top of the window and the product logo, between the product logo and the mainmenu buttons, and between the main menu buttons and the top of the project info box, and the bottom of the project info box and the bottom of the window would be divided uniformly?

I suppose I could try out how that would look, although I don't think floating elements would be an improvement.
Is there a XML equivalent to (La)TeX \vfill?

This is the patch I uploaded at https://code.wildfiregames.com/rP23387#40853 so it would be correct to credit that.

did you mean you want your username explicitly mentioned?

Yes. (I don't care about this one line changed here, just in general. Discussion != patch)

Is there a XML equivalent to (La)TeX \vfill?

Regardless of the implementation, the productLogo would need to be moved to a different parent object.
And nope, need to compute the space manually currently.
(Not terribly hard, one can get an object by a name using Engine.GetGUIObjectByName("foo") and change the size property, which has top, left, right bottom values. One can find many examples should be 5-10 lines. Anyway)

I suppose I could try out how that would look, although I don't think floating elements would be an improvement.

One could make a mockup with different size numbers and then decide if it looks better or not (for 3840×2160).

Actually another possibility would be to use percent numbers. So perhaps one can use something like 10% +/- offset for the product logo, so that its not aligned at the utter top for large resolutions, only for small ones. (Its quite boring to compute / implement, so I guess one can also argue with the best implementation being too boring to implement and this one being the best one that is feasible given motivation.)

Regardless of the implementation, the productLogo would need to be moved to a different parent object.

Do you mean the 0 A.D. at the top or the Wildfire Games at the bottom?

One could make a mockup with different size numbers and then decide if it looks better or not (for 3840×2160).
Actually another possibility would be to use percent numbers. So perhaps one can use something like 10% +/- offset for the product logo, so that its not aligned at the utter top for large resolutions, only for small ones. (Its quite boring to compute / implement, so I guess one can also argue with the best implementation being too boring to implement and this one being the best one that is feasible given motivation.)

(The idea was actually to improve things for 1280×720; if it works for a small screen, it typically works for a higher resolution as well; the reverse is not true; anyway, I'll do some tinkering with the numbers and see what I can get.)

Perhaps it would look best if the space between the top of the window and the product logo, between the product logo and the mainmenu buttons, and between the main menu buttons and the top of the project info box, and the bottom of the project info box and the bottom of the window would be divided uniformly?

This is what you meant, right?


I still think sticking with top-down and bottom-up looks better.

Perhaps the logo can be moved something like 25-100px depending on resolution, perhaps a percent number to the bottom, and then some margin to the buttons?

Something like this?

Nescio added a comment.EditedMon, Jan 20, 6:53 PM

Perhaps it's easier if you'd state the percentages how you'd like to distribute the empty space?
A: space between top and logo
B: space between logo and buttons
C: space between buttons and project box
D: space between project box and organization logo
E: space between organization logo and product build
F: space between product build and bottom

(The total vertical space currently required is 684 (100 for the logo, 200 for the buttons, 266 for the project box, 48 for the organization, and 36 for the product build), which leaves 36 at 1280×720, 396 at 1920×1080, and 1476 at 3840×2160.)
[EDIT]: I'd prefer C=100%.

Nescio updated this revision to Diff 11132.Tue, Jan 21, 10:41 AM
Nescio edited the summary of this revision. (Show Details)

C = 50%, A, B, D, E, F 10%.

Nescio edited the test plan for this revision. (Show Details)Tue, Jan 21, 10:43 AM
Nescio edited the summary of this revision. (Show Details)Tue, Jan 21, 10:45 AM

Successful build - Chance fights ever on the side of the prudent.

Link to build: https://jenkins.wildfiregames.com/job/docker-differential/1620/display/redirect

Perhaps it's easier if you'd state the percentages how you'd like to distribute the empty space?

(Finding good numbers would take some time, and to me its currently not broken.)

I would keep the organization logo and build information grouped, otherwise looks ok to me (and the product logo offset looks better than not having it so this iteration improves that).
Perhaps the projectinformation box should also be moved further below, or kept aligned at the organization logo.

(Also equations like -144+120 should be computed)

(Finding good numbers would take some time, and to me its currently not broken.)

Yes, I understand, I meant some approximate mock-up values.

(Also equations like -144+120 should be computed)

Actually I kept those intentionally: the third number is the position at 720 pixels, since the second number cancels out the percentage.
And 1280×720 is equivalent to 3840×2160 at 300% zoom.

I would keep the organization logo and build information grouped, otherwise looks ok to me (and the product logo offset looks better than not having it so this iteration improves that).

So E is 0% and C is 60%?

Perhaps the projectinformation box should also be moved further below, or kept aligned at the organization logo.

(I still think the original diff looks best.)

Nescio updated this revision to Diff 11160.Thu, Jan 23, 6:13 PM
Nescio edited the summary of this revision. (Show Details)
Nescio edited the test plan for this revision. (Show Details)

new iteration requested by @elexis

Nescio edited the summary of this revision. (Show Details)Thu, Jan 23, 6:14 PM

Successful build - Chance fights ever on the side of the prudent.

Link to build: https://jenkins.wildfiregames.com/job/docker-differential/1639/display/redirect