Ideas for a UI facelift

[doofus-01]

Is that a glass prism? Can you apply some sort of standard "glass distortion" to text, so that this can be translated, if the glass prism is over the text? If the text is over the button, a flat face might be better, and just using the outer bevels would probably give a similar effect?

[LordBob]

New version, should be an improvement compared to the previous one and blend better with the rest of the UI, as it recycles some elements from the minimap frames and has more consistent colors.
@doofus-01: I do intend it as a glass prism so that it stands out from other buttons, but with text on top of the button: I think glass distorsion and readability would not mix well in such small sizes. As consequence, I toned down the transparency a bit so that the text remains legible, yet the button offers some visual interest in the background.

[Blarumyrran]

looks too flat&clear (esp considering how most of wesnoth UI & terrain is grainy and even your new mockups have 1px wide lines)? maybe add a texture on top of the blue thing, maybe just add noise... glass or not, it would fit in better with the rest.

[fabi]

[Crow_T]

Any thought to using a cool medieval font for that button?

[Turuk]

The new button looks more refined, though maybe too shiny and less fitting with the setting of the game.

[fabi]

What about the layout?

I have added some stuff (again) and changed layout (alignment and format and indentation).

New or back in: Alignment, Side, Race

[Turuk]

What about the layout?

I have added some stuff (again) and changed layout (alignment and format and indentation).

New or back in: Alignment, Side, Race

The placement seems to be a bit confusing/jumbled. Both race and alignment seem to be placed randomly, and it makes for a big block of text.

Next to the sprite, I would make it:

HP ---> Race
XP ---> Level
MP ---> Defense

Then underneath the sprite:

Unit Name
Unit Type
->Alignment
->Traits
->Abilities

Attack 1

Attack 2

[LordBob]

I'll give a shot to the button when I have a moment, though this won't happen until february. (I'm on a tight schedule right now, with one big illustration to complete before the end of next week). As for the font, there were attempts in the past to find a new medieval font for Wesnoth, but no free font had satisfied the desired criterias. Sgt Groovy was halfway through conceiving a custom-made font that could have been distributed with the game, but the project froze. If his effort can be carried out by someone else, we might use that font for the button as well ; otherwise, I'm not fond of using a rasterized typeface that will have to be localized afterwards.

Fabi: the new layout is neat, but that shouldn't be a surprise coming from me and besides it doesn't mean much given how little I play lately. Hopefully, we'll have plenty of time to discuss the next revamp steps at FOSDEM (you're coming, right ?)

[fabi]

The placement seems to be a bit confusing/jumbled. Both race and alignment seem to be placed randomly, and it makes for a big block of text.

I am a bit confused myself.
You propose the same placement for the alignment as seen in the screenshot.

Do you mean, "Both race and traits seem to be placed randomly,..."?
My answer is held in this assumption.

Displaying the race is not important for core Wesnoth.
There is no direct game mechanic relying on the race.

Although the UI displays it since 1.3.something and some UMC coders might have used its appearance.
You can filter for it in wml thus additional game mechanics are possible.

Mainline Wesnoth's race attribute is used for only a few issues.
The unit's name is taken from the race, as well as the undead variation.

The only important game mechanic related race feature (although indirect) is the fact that the race determines the set of traits the engine chooses from randomly.

Thus the proposed

Race (Tooltip: the number of traits and the set to choose from)
->Traits (Tooltip: the effect of the trait)

Next to the sprite, I would make it:

HP ---> Race
XP ---> Level
MP ---> Defense

Beside the connection between race and traits,
the space right of the unit box is difficult to fill with attributes whose size is unpredictable.

All non constant characters right of the box are numbers, no translatable variable text.
The proposed UI also only displays variable (status) values right of the image.

Imagine an UMC in which race plays an important role.
The space for the string would be reduced a lot compared to the <1.12 UI.
The example add-on uses race names like "elf dark", "elf wood", "elf desert" etc.
The order is only strange for some languages but perfectly fine for others.
Only "elf d..." would be displayed in the spare region.

Anyway, right of HP is no space left.
We have to assume that mainline features 3 digits hp values and UMC at least 4.

The level would fit but I do not like it to be in the unit box status region for two reasons:
1) All other values there are unit status related variables, the level is mostly constant.
2) When the level changes, it changes together with the unit type.
The unit type determines the level.

Then underneath the sprite:

Unit Name
Unit Type
->Alignment
->Traits
->Abilities

Attack 1

Attack 2

This looks strange for units which have no traits but one or more abilities.
The space for the traits is empty then.
I proposed the format shown in the screenshot with all kind of those (missing attributes) combinations in mind.

[Turuk]

am a bit confused myself.
You propose the same placement for the alignment as seen in the screenshot.

Yes I was noting that neither seemed to flow well where they were placed in the screenshot, but by moving other bits around in my proposed set-up, alignment did stay where it was, though other parts changed to accommodate the placement.

Do you mean, "Both race and traits seem to be placed randomly,..."?
My answer is held in this assumption.

No, I did not mean that at all.

Displaying the race is not important for core Wesnoth.
There is no direct game mechanic relying on the race.

Agreed.

The level would fit but I do not like it to be in the unit box status region for two reasons:
1) All other values there are unit status related variables, the level is mostly constant.
2) When the level changes, it changes together with the unit type.
The unit type determines the level.

That's why I proposed race, level and defense there. Race is constant, level will most likely be constant for 90-100% of the scenario, and defense will only change on movement. The three values to the left of hp, xp and mp most likely will change every turn.

This looks strange for units which have no traits but one or more abilities.
The space for the traits is empty then.
I proposed the format shown in the screenshot with all kind of those (missing attributes) combinations in mind.

If there are no traits, can't the text then move up to populate the line below alignment?


In order to make the indentation/categories less confusing, is it possible to change the coloration of the text for the unit type to match that of 'Elf' and 'Attacks'? That way it would make each header stand out equally:

Unit Type
->Unit's alignment
->Unit's abilities
Race Type
->Traits (sometimes racially driven)
Attacks
->Attack 1
->Attack 2
etc.

[fabi]

If there are no traits, can't the text then move up to populate the line below alignment?

Sadly not, theme wml does not feature this.
At a first glance this is not easy to do without evil hacking.
At least it won't be possible to get right before 1.12.

On a second thought, is it a good idea to move information around?
Fixed positions for the items might improve readability.

In order to make the indentation/categories less confusing, is it possible to change the coloration of the text for the unit type to match that of 'Elf' and 'Attacks'? That way it would make each header stand out equally:

Unit Type
->Unit's alignment
->Unit's abilities
Race Type
->Traits (sometimes racially driven)
Attacks
->Attack 1
->Attack 2
etc.

[Turuk]

Sadly not, theme wml does not feature this.
At a first glance this is not easy to do without evil hacking.
At least it won't be possible to get right before 1.12.

On a second thought, is it a good idea to move information around?
Fixed positions for the items might improve readability.

I had the same thought about removing gaps where there is no information, to improve readability.

Regarding the screenshot, that looks great. I think the Elvish Shyde, Elf and Attacks all having the same color establishes the categories nicely.


Edit: For the end turn button, I have noticed that it doesn't center at larger resolutions like the old end turn button did. It sits awkwardly to the left, like it's scared to be front and center... Poor little guy.

[doofus-01]

Hi,

I'm a bit confused as to what is currently being proposed, and wouldn't normally say anything, but race was dropped in 1.11.8 default theme, and I hope it isn't in the future. Just because "Elvish Fighter / Elf" looks silly, it isn't because showing race="Elf" is bad - it's because the name "Elvish Fighter" is bad and should be "Fighter".

As for the flag in the side-panel, to show the side number(?): It does very little for those of us who are colorblind, could we have the team number overlay-ed?

These proposed changes are still all overwrite-able with ThemeWML, right? I'm asking, so I can maybe try to come up with something rather than just throwing rocks, or at least relax in the knowledge that the old Theme will continue to be available.

Thanks.

[Eagle_11]

Please, for the sake of cosmos: Take the end turn button, you know its the must press thing in all gameplay, give it shape of a square, move where ToD stands a bit to right and squeeze it in there between edge and ToD display.
You could structure the part where selected unit's icon stands as:

def HP icon here
MP XP icon here
flag+ <- here remains space to display the snail when slowed etc. You could shrink the icon a bit to display more than just one, for umc ones.
level