Game, Buttons, area of the button considered as the top of the button and in relation to which the elements inside the button are centered

[LeHerosInconnu]

I suggest to set up a convention about the area of the button considered as the top of the button and in relation to which the elements inside the button are centered.

Hello @zenseii,

Hi, @LeHerosInconnu.

For centering, I think we should also agree on what is considered to be the top area of the button, for this button and also for the others.

Here you can see the area which is ~consistently (more than any other way anyways) used in the game for buttons:

Any change to this, like your proposed change to have the extra pixel on the right side, will need to be discussed in a separate discussion thread.

I did notice that the way the elements are centered inside the buttons is not regular in the original game.
From the areas of your images, what do you think of the areas indicated by the red frames?
That is, from the pixel right next to the shiny effect for the top and right of the button, and up to the area of the button's main color for the bottom and left of the button.
This would make it possible to have a well defined and similar area for all button types.
I'll open an issue or a discussion thread if it's suitable.

Display buttons: (click to expand)

Originally posted by @LeHerosInconnu in #9470 (comment)

[zenseii]

Hi, @LeHerosInconnu. I suggest taking a look at evil interface buttons, pressed state buttons and other button types (well, kingdom summary, battle screen).

I also have to point out that changing practically all of the buttons and all of their pressed states as well as the evil counterparts would be a huge undertaking and not one that I personally would be willing to do.

[LeHerosInconnu]

@zenseii,

Yes, I understand. :)
If we consider that the initial buttons of the original game are "okay", I think it would still be much more practical to have a defined base for all new buttons to come.
If only for verification purposes during testing.
And it would also be a good reference for the buttons that will be generated automatically.

[zenseii]

I agree that we need to have a convention, and right now we have one which comes from what I could figure out from looking at all of the original buttons and all their variants, and even the localized buttons (French, German etc.).

As shown in the pictures I made in your initial post, the area of alignment seems to be the one I showed, and for leftover pixels they seem to most consistently be put below and/or to the left. Although looking closer I placed the rectangle 1 px too low on the ANNULER button, which means there's 1 px above and 1 below the text.

Considering that the original buttons are almost guaranteed to not be changed by us, I believe it is best to try to mimic them as close as possible in terms of text alignment. If you find any inconsistencies with how we've done that then as always feel free to point them out.

[LeHerosInconnu]

@zenseii,

Here's what we have so far.

For the hero button, this gives:
Distance from gray frame to nearest brown pixel:
Right: 3 pixels
Left: 3 pixels
Top: 2 pixels
Bottom: 2 pixels
Distance from red frame to nearest brown pixel:
Right: 4 pixels
Left: 4 pixels
Top: 3 pixels
Bottom: 3 pixels
This is the same centering, the area of the red frame is just larger.

For the area fill button, this gives:
Distance from gray frame to nearest black pixel:
Right: 3 pixels
Left: 4 pixels
Top: 2 pixels
Bottom: 2 pixels
Distance from red frame to nearest black pixel:
Right: 4 pixels
Left: 4 pixels
Top: 2 pixels
Bottom: 2 pixels
The centering is not correct horizontally with the gray frame.

For the button with the word "ANNULER", this gives:
(Taking into account the upward shift of the gray frame by one pixel, as you indicate.)
Distance from gray frame to nearest brown pixel:
Right: 6 pixels
Left: 7 pixels
Top: 4 pixels
Bottom: 3 pixels
Distance from yellow frame to nearest brown pixel:
(The left edge of the red frame (now yellow frame) has been moved to the right side of the vertical line of shiny pixels to the left of the button.)
Right: 7 pixels
Left: 7 pixels
Top: 4 pixels
Bottom: 4 pixels
The centering is not correct either horizontally or vertically with the gray frame.

By taking into account, for all button types, the shiny pixel lines when present (for example, present to the left of the button in the case of the button with the word "ANNULER") and the edge of the area of the button's main color, this would be easier to remember when checking than an area specific to each button type.