Game Setup Rooms aka games creation room UI "overhaul"

[Dade]

Hi all,

having the opportunity to play A22 after so much time really delighted me and by all means I wish to try help the project form my little knowledge. So here I am! It's something I have been thinking a lot on other releases but my extreme laziness prevent me to try out (well I have to confess I played on A20 trying to make an alternative ingame UI, but I lost those files ).

CONCEPT

I always felt the "More Options" button was ok to admin the room, but the info inside it should be much more visible to all players without the need of any "More Options" button. Why not bring that information directly to players in the room? This is my proposal to achieve it. The icons used in this early patch/mod are from within the game, but my idea is to use more specific icons if they idea fits. Last but not least, this is just a proof-of-concept, I see still a lot of margin to improve this.

Enough background! Lets get to the options.

BOTTOM MORE OPTIONS ICONS

This was my first attempt to achieve my objectives. The bottom side of the game room has plenty of space to accommodate some icons, so why not there? I reviewed some of the documentation, started to play on my own et voilá there we have some new graphics on game room bringing some life and personality. Items are organized as they appear on the "More Options" window, but I'd prefer to place the ones with text earlier and then the rest.

Spoiler

MIDDLE MORE OPTIONS ICONS

You know that sensations when you finish a job thinking you could have done better? That brought me to this second option, giving much more relevance to the game information and providing a much clearer separation from players list and chat window. IMO this is a much better implementation, as we also save time from finding another place for certain buttons tooltips (on a side note, some are hardly visible already when using "More Options" window).

Spoiler

ICONS CONCEPT

Even with this messy icons being used right now, the concept is much simpler:

• Icons accompanied by strings should be colored by default as those are active options on the game
• Boolean options icons should have two version: colored (enabled) and grey (disabled).
• Victory Condition and Initial Resources icons could change depending of the option selected.

BONUS TRACK

Think that was all?!?!? Right side of the Games Room could receive a fresh rework:

• "More Options" button can be moved (or even removed, using the icons as option toggles for room admins) to bottom or inline with icons.
• Text from within the right-bottom corner could be used as tooltips (Bootstrap like) over the icons.
• Having more space in this section we can add some extra folklore with a nice looking ancient-papyrus-style description of the map which is going to be played.

 

Questions? Suggestions? Gallows and torches from the horizon?

 

Thanks for your time reading this!

Edited October 20, 2017 by Dade
Minor format

[Imarok]

Wow, I think that's a nice idea (Depending on the available space we might just display the important options...)

Maybe @bb_ has an opinion on that, as he currently is at rearranging the more options window.

[elexis]

Displaying all options instead of hiding them behind the more options window is on the wish list since many generations of 0AD developers. Don't know if we can find icon representations for all of them and if all of the options would fit. Ideally we just had scrolling of GUI objects, sub-GUI pages.

bb indeed had shown some concept screenshots. The last proposal that resonated with me was creating different tabs where one tab shows a scrollable text list that contains all options in one view (i.e. are more complete version of the game description that is shown there currently) and the other tabs just showing the options grouped by logic. Still means that the actual controls are occluded by default though.

But if we're talking about gamesetup patches, it would be very benefitial for multiplayer setups if any player could set up the game. There is a work-had-been-in-progress patch which we should finish up sometime. (Same goes for that lobby authentication patch which could be considered a release blocker while we have a patch around implementing it. Perhaps someone could do a jointventure with Dunedan.)

[Imarok]

1 hour ago, elexis said:

(Same goes for that lobby authentication patch which could be considered a release blocker while we have a patch around implementing it. Perhaps someone could do a jointventure with Dunedan.)

(Isn't the patch already finished and just misses review?) Developement on the gameattribs patch is stalled, but I'll resume with it at some point.

[bb_]

I have indeed worked on changing the more options window since it is too small on min res (screenshots are at 1366x768, so at least min height, which is the problem here mostly). Notice the problem will grow worse when we add more options to the screen.

For solving that I created with some hacky code a number of options for solving that, after a some discussion and some more code the the picture below matched our taste best (ok we did say the gamedescription and the tabs should exchange position and probably the two columns also, but those are minor things):

However the downside of this approach is that "< elexis> its just asking for scrolling unfortunately". Also since then study and stuff took over so my coding time was limited and the work got stalled a bit.

Attaching two more proposals made:

remove the more options button and make all tab button toggle the screenon that tab, the buttons in the window could ofc also be removed and stuff.

 

Notice no duplicate buttons, but lots of clicks needed to change just 1 setting.

[Dade]

@bb_ first of all thx for pointing me in the right direction yesterday on IRC.

IMO a mix between your latest 2 screenshots could be the best solution. I believe map settings should be easier and quick to access, it's probably what many players will usually use the most. This, mixed with the rest of buttons (duplicates on the window, but it would save time) below the maps settings should make it. The main problem with this is space, getting rid of map title, "More Options" button and lowering height (when no erradicate) the text-box below, will give all space and more. Another option could be setting those buttons on the bottom side, but that's not likely 'user-friendly' (having similar functionality buttons near each other should be priority).

If you wan't a completely different approach, what about this: resize the map image (keeping it square) and use image buttons at the right to access "More Options" sections/divisions. My only concern is it may get too bloaty, specially if we implement my suggestion of the settings icons.

Maybe is stupid, but I make some Draw files that maybe can help to better discuss or take decisions (tell me if I have to change names). Feel free to edit it at will a

0AD_GameSetup_UI.odg

0AD_GameSetup_UI.pdf

[bb_]

Just giving some pro's and cons on the pdf:

DADE’S POLL | WINNING OPTION - MATCH SETUP:

+++ icons seem nice and save some space, since we can remove the description text, and put the in tooltips and stuff, also perhaps with clickable icons the more options window can be removed

--- we need icons for everything, which are clear what they mean

--- Where to place the tooltips (as they are now placed under the buttons)

--- What if the buttons do not fit?

 

DADE’S POLL | LOOSING OPTION - MATCH SETUP

+++ icons seem nice and save some space, since we can remove the description text, and put the in tooltips and stuff, also perhaps with clickable icons the more options window can be removed

+++ tooltips can stay where the are

--- we need icons for everything, which are clear what they mean

--- smaller chat window height, not nice on min res to chat in that

--- What if the icons do not fit?

 

DADE’S APPROACH TO BB - MATCH SETUP

+++ certainly enough space for the option

--- not enough space for the tabs, can be solved by putting the map option under a tab too

--- gamedescription gone

 

DADE’S APPROACH TO BB | ALTERNATIVE - MATCH SETUP

--- map image not aligned (autistic screeching)

--- not enough space for icons

 

DADE’S + BB + BONUS TRACK - MATCH SETUP

+++ map title on logical place

+++ gamedescription on logical place

--- needs resize the map image (not too bad though)

--- where to place tooltips?

---- not enough space for the tabs, can be solved by putting the map option under a tab too

--- what if icons do not fit?

 

Another problem with the icons is that they cost space (which we don't really have) and yet doesn't give new information/options. Since if we remove the gamedescription/more-options in favour of the icons we need good icons for all of them, and every new option needs a new icon. Also how do we get dropdowns into an icon? So I rather remake/remove the more-options window than burning my hands on something which is very hard to maintain (sadly enough thouh, since visually it is nice).

[Dade]

@bb_ assuming "DADE’S + BB + BONUS TRACK - MATCH SETUP" is the best candidate:

TOOLTIPS
For tooltips I already mentioned we could create ones with equal or similar behavior to Bootstrap Framework (DEMO LINK). This requires some dependencies, but there are others options as Tippy or TTips for example. I am wrong assuming we can 'easily' integrate other JavaScripts into the game? (in case current Tooltips coded can't do that by setting a new style)

SCREEN SIZE

On first place, I considered 1366x768 resolutions as the lowest taking into account STEAM Survey. On the other hand, WildFire telemetry unfortunately does not offer such information and  from JSON file we can't discriminate from date to try visualize the current state of users configs, so I am afraid it's not possible to get exact conclusions.

However, considering the engine already calculate somehow client area to position GUI objects, can't it show a "legacy" and "current" UI depending on max client area size as follows:

• Legacy would be pretty similar to what we have right now. Maybe something similar to "DADE’S + BB + BONUS TRACK - MATCH SETUP" without icons and with the only objective of assuring compatibility for everyone, minimalist and efficient.
• Current could focus on standard gaming screen and above (1366x768) which should cover almost 95% of current gaming PCs, fancy and elegant.

ICONS SIZE AND NUMBERS

I understand your concerns, but I never intended to let the icons so big, specially if the final plan is to really display them all and not only a few relevant/most consulted ones. But even in case we want to put them all at any cost, we could always resize them to fit the next ones. For example: current icons sizes could be reduced by half without loosing essence and details, so you almost have 2 lines of possible icons.

On the other hand, if the thing I said about "legacy" and "current" UI wouldn't be possible, this could still apply by setting a relevant amount of icons.

 

PS: Just in case is not clear enough, my knowledge of Javascript is still limited but I can already work with XML files, so you won't be alone in this trip if you want an extra pair of hands.

[bb_]

Finally after exams were done and having a free day, had time to rethink and code a bit on this:

I took the approach without the more options window, but made the panel where the options are hide-able:

 

This solves both the problem of "not enough chat space", since when hiding the panel, we have the original chat space. And the "asks for scrollbar" problem since it is rather easy (and already code :P) to allow multiple columns of options, so there certainly is enough space (true the chat space become very small as min res is even smaller in width...):

Yet there are still some bugs/ ugliness which aren't really visible on the screenshots that needs to be fixed first.

[elexis]

There shouldn't be unused GUI space as seen on the third screenshot. Should be possible to mitigate by having an equal amount of rows in both columns (maybe only having one checkbox per row) and centering/maximizing the tab buttons and game description frame.

Having tabs also has the disadvantage that one has to click through every tab to see which settings changed if one cares to only ready up after reading the settings. Scrolling on the other hand also means that one can't see all options (perhaps its easier to keep track, dunno).

[bb_]

Do notice that the whole option panel can be hidden by clicking again on the tab button, so the gui space is not entirely unused, just temporarily. But indeed the space below the tabs can go into the description space, and maybe evening the rows helps a bit visually (the amount of unused space won't change that way, it might only look better). Also notice I putted way to many options on this single tab just for the screenshot, just to showcase the column behaviour, the actual thing would look much more like the second.

If one really hates the space right of the tab buttons, the buttons can be centred or enlarged, but that space is actually free and can be used for future things.

 

Quote

Having tabs also has the disadvantage that one has to click through every tab to see which settings changed if one cares to only ready up after reading the settings. Scrolling on the other hand also means that one can't see all options (perhaps its easier to keep track, dunno).

Currently one also has to click on the more options button, ofc that is just one button and now we have 4... But there is also the gamedescription for this purpose...

[mapkoc]

A bit off topic, when I hover over a selected map a description for a different map appears in the bottom

[sphyrth]

I'm going to butt in just a bit. Please don't use too much of the empty space... too much info can be an overwhelming eye-strain. Red Alert's UI Lobby didn't evolve much because it's been working.

The only thing I might suggest is on the minimap. You can select where you "spawn" by clicking on the numbers (or selecting it). Not to mention that the numbers make it easier to see where you actually are on the map before the game begins.

[elexis]

1 hour ago, mapkoc said:

A bit off topic, when I hover over a selected map a description for a different map appears in the bottom

Noticed that too some days ago. IIRC @vladislavbelov wrote the hover-text feature.

5 hours ago, bb_ said:

Currently one also has to click on the more options button

More buttons imply more mouse movements (cursor aiming) in between. Hotkeys (currently only escape) could tremendously reduce that user interaction time as well later. Does the gamedescription in the gamesetup display all information currently (iirc it filtered out only the information that is visible elsewhere in the gamesetup page)? If all information is visible to the clients there, then it shouldn't be an issue to keep track of the host changing things.

[vladislavbelov]

5 hours ago, elexis said:

Noticed that too some days ago. IIRC @vladislavbelov wrote the hover-text feature.

What's the problem? May I see a screenshot?

[elexis]

A different tooltip depending on the vertical position of the cursor within the same hovered dropdown item (map description for instance)

[bb_]

10 hours ago, elexis said:

More buttons imply more mouse movements (cursor aiming) in between. Hotkeys (currently only escape) could tremendously reduce that user interaction time as well later.

A hotkey to swap between tabs (tab) would be easy to implement, so that solves half :P. also do notice that we currently don't have enough space and we need to find it somewhere. Besides that the pixel distance from the "button" (was more options button now the tabs) to the actual options is shortened with screenshots, so that comensates slightly for the more buttons. (This approach is better than putting the more options window, then players have to click and move even more.)

Quote

Does the gamedescription in the gamesetup display all information currently (iirc it filtered out only the information that is visible elsewhere in the gamesetup page)? If all information is visible to the clients there, then it shouldn't be an issue to keep track of the host changing things.

Currently no, but it is as easy as removing a check to put it all there.

[elexis]

There was some reason for these properties to be extended. The mapsize for instance is shown above the description, so it would be redundant to show it twice. Hence the boolean should not be removed in the current state. But with your patch hiding all options including the mapsize under a tab, all properties should be seen, hence the extended would always be true and can be removed.

Then we can even merge the push calls, possibly to the point of creating an array directly without later modification by possibly using ...(biome ? [{...}] : []) for optional options.

[bb_]

If that is the reason for the extended, why are popcap , starting res an some others then hidden under the extended tag? Personally have nothing against just removing the thing extended thing, the only thing that might stay in extended for this reason is the map name, as that already is shown. But having the thing for just 1 value => meh

[fabio]

I find annoying that the map choice in the game setup is under the civ choice. The player should be supposed to select his options starting from the top of the screen, like when you read a page in the browser or in a book, so the map selection should be done before selecting civilizations. The map preview is also inconsistent being before the map selection. Also when you change the map the civilization are partially reset and you have to check them again.

I always find this arrangement a bit weird from the usability point of view.

Ideally the map selection should be the first possible selection starting from top left, with the map preview next to it. Then all other options may follow.

I know however it is not so easy to do, for example the civ selections requires space for up to 8 row and it fit nice before the map preview.

It would be nice to find a proper way to improve on this.

[bb_]

In MP it happens rather often that specific players wants to play on a specific map, so following that logic one should first select the players then the map then the rest (civs etc.). But that would be ultra ugly gui wise, since players and civs should be grouped together.

However the topic is open for new suggestions for the gamesetup ui, if someone comes up with a nice sketch, I would certainly consider it.

[mapkoc]

On 11/11/2017 at 1:51 AM, vladislavbelov said:

What's the problem? May I see a screenshot?

[Sundiata]

On a side-note, wouldn't it be nice to show the civ-emblem next to the name of the civ, so you have a secondary visual association with each civ?

[wowgetoffyourcellphone]

22 hours ago, Sundiata said:

On a side-note, wouldn't it be nice to show the civ-emblem next to the name of the civ, so you have a secondary visual association with each civ?

 

[Sundiata]

@wowgetoffyourcellphone   YEAAAHS!!!

Did you just make that???? It looks amazing! And it finally puts to good use those emblems! I love...