[NOT] Just Another UI

[Shiyn]

Hayo 0AD!

Here is a scrap for a not very simple UI. 
Adapted it from some previous design made for AOE3. 

 

Sadly for now i have no idea how to implement this, so its pretty much eye candy.
(Feels like this would fit well for 1000 AD thou).  

Any critizing and opinions are welcome!

Edited April 23, 2018 by Shiyn

[Loki1950]

All of the GUI code done with JavaScript as well as the actual modes of the game units are defined with XML files have a look at our wiki for specifics that's the development link at the top of the page  and there is a Mod that does the 1000 AD period.

Enjoy the Choice

[Shiyn]

Oh awsome, ill give a look into it. Tbh, what i meant is that im more of a artist then coder, but i can dig into basic XML. This looks to run under something similar enough to BFME2 and SAGE engine so i may have a little experience on it. Would be great if someone gets interested on it and aggregate it in a current project thou

Edited April 23, 2018 by Shiyn

[wowgetoffyourcellphone]

Panel on the right needs to accommodate 3 rows high. You also need to show mockups for various things like formations, garrison, bartering at Market, etc.

Otherwise this is awesome. 

[av93]

Spectacular! Although there's some detail that I would change, here and there, mainly the arrows around the map and the selected unit, and I would extend the HP and CP bars to the extent of the name. The Drakkar theme should be away also. All is humble opinion.

What about the cultural name? There was a patch allowing users to disable it, it would be nice to implement. I think it looks cleaner like in this concept showing the generic name only.

Speaking of the UI, maybe it could be a construction menu for the builders units, like in AoE1 and AoE2.

It's a photoshopped concept, or it is a modification?

[Shiyn]

2 minutes ago, av93 said:

Spectacular! Although there's some detail that I would change, here and there, mainly the arrows around the map and the selected unit, and I would extend the HP and CP bars to the extent of the name. The Drakkar theme should be away also. All is humble opinion.

What about the cultural name? There was a patch allowing users to disable it, it would be nice to implement. I think it looks cleaner like in this concept showing the generic name only.

Speaking of the UI, maybe it could be a construction menu for the builders units, like in AoE1 and AoE2.

It's a photoshopped concept, or it is a modification?

Just photoshop so far, thou i found the file structure and started to get how the UI works, maybe in the future.. The drakkar would be a placeholder, the idea was to overlay it with a themed civ detail in every setup. The cultural name is great as it is in the game atm, but i think it should be smaller and less relevant then the generic name, not the contrary. Aligning the HP bars sounds wise aswell. 

im giving some touches on it, ill get with something new

[Stan`]

I really like it too. One thing you could start with is getting the source code and starting playing around with files in binaries/data/mods/public/art/textures/ui

 

[Shiyn]

30 minutes ago, stanislas69 said:

I really like it too. One thing you could start with is getting the source code and starting playing around with files in binaries/data/mods/public/art/textures/ui

 

Nice, thanks man!
Hmm, by your description so i need a public folder, not just the extracted art inside data.. thats why nothing was changing ingame .. lol

Updated it with a selection mockup and its various mini icons. Good catch on that, WowGetOff o/

[aeonios]

That looks freaking awesome. It'd be cool if there were unique themes for each civ.

[Shiyn]

Heres my 2 cents with the main screen:

[Lion.Kanzen]

Isn't bad, but what is the reason of solar iron ornament in the main portrait ? very nice work.

[Lion.Kanzen]

No, this can be better. don't change the logo. and the propose dont have same quality.

I like the lower icons brilliant.

[Shiyn]

2 minutes ago, Lion.Kanzen said:

No, this can be better. don't change the logo. and the propose dont have same quality.

I like the lower icons brilliant.

Haha, i got a bit carried away... xD Think its a good idea to add some blur for the paralax interations imo ^^

Quote

Isn't bad, but what is the reason of solar iron ornament in the main portrait ? very nice work.

Uh, i just used the minimap asset to draw the portrait radials. I have to make them more runeish, but then, i couldnt use it in other civs, so i decided to go with it since its generic for many civs. Thanks man

[Lion.Kanzen]

4 minutes ago, Shiyn said:

Haha, i got a bit carried away... xD Think its a good idea to add some blur for the paralax interations imo ^^

Uh, i just used the minimap asset to draw the portrait radials. I have to make them more runeish, but then, i couldnt use it in other civs, so i decided to go with it since its generic for many civs. Thanks man

We can add some ... you know more civilization elements to ornaments  the menu, @wowgetoffyourcellphone Have some ideas and layouts, and we still missing things for the minimal.

[wowgetoffyourcellphone]

Comments/Notes

Overall style looks great to me. The "paper" sections could be different colors/textures/have different edge detail for each culture, while the metallic elements can change to match as well, such as silver, iron, stone, wood, bronze, gold, etc. Keeping the same shapes and overall look.

1. These buttons are unit actions, so should go with the buttons [2] around the unit portrait [3].

2. I think these should be centered over the top arrowhead. If [9] can be extended a few pixels leftward, then the additional buttons at 1 can be placed radially around the portrait. Initially there would be too many, but if WFG adopted my suggestion to simplify stances to 3 selectable stances only [Aggressive, Defensive, Stand Ground], then there is enough room for all of the buttons, a total of 9.

3. The portrait needs a spot for the Rank insignia. I like the "gloss" overlay. Nice touch. I also agree that if the selection is multiple units but just 1 type, then the large portrait should remain, with a large number overlain.

4. This is nice, I like this. Makes the formations prominent. Would look even nicer if, again, number of formations were reduced. Box, Skirmish, and Flank formations are useless.

5. Need a yellow bar for resource count.

6. Minimap buttons can go radially here, all the way around. Total of 8 possible minimap buttons. Plenty. Or just go with the 5 buttons you have there, bunched together. That works too. I don't think we really want more than about 5 different minimap features anyway.

7. I like how this gives room for 1 more additional icon [9 wide instead of the current 8 wide]. This panel here is where this UI can adapt to different screen widths. On narrower widths, there can be an arrow-over to scroll this over to show any hidden icons. 

8. I like the negative space around the icons here. Gives "breathing room."

9. May I suggest a nifty little feature here? Perhaps clicking here toggles between GenericName and SpecificName. Does a quick little rollover animation.

 

The "Drakkar" detail you have there on the right side can further customize for each culture. On lower resolutions the feature wouldn't even show up, but it would on 1600+px widths.

 

 

I'd like to see the above, but using the real 0 A.D. logo. I like the style and the buttons at the bottom.

Edited April 24, 2018 by wowgetoffyourcellphone

[Nescio]

12 hours ago, Shiyn said:

Hayo 0AD!

Here is a scrap for a not very simple UI. 
Adapted it from some previous design made for AOE3.

Sadly for now i have no idea how to implement this, so its pretty much eye candy.
(Feels like this would fit well for 1000 AD thou).  

Any critizing and opinions are welcome!

Yes, your mock-up looks aesthetically more pleasing than what 0 A.D. currently has. However, 0 A.D.'s GUI is designed to work at a minimum width of 1024px. I have a 3840px screen, but I've set 0 A.D.'s zoom at 2.0 and I often play at half a screen, thus my effective resolution is actually 960px. Your mock-up seems to be wider than the current GUI, therefore it'll probably be problematic for lower resolution screens.

You can browse the relevant files at https://trac.wildfiregames.com/browser/ps/trunk/binaries/data/mods/public/gui/session (Editing GUI files can be a bit frustrating, though.)

Probably the best approach would be to turn your idea into a mod, play around with things, try it at different resolutions, and if it works, ask others to test it. Afterwards you could propose it then to have it integrated in 0 A.D.'s main distribution.

[vladislavbelov]

1 hour ago, Nescio said:

I have a 3840px screen, but I've set 0 A.D.'s zoom at 2.0 and I often play at half a screen, thus my effective resolution is actually 960px.

What OS do you use? And why the effective resolution is lower than 3840 / 2?

[Nescio]

41 minutes ago, vladislavbelov said:

What OS do you use? And why the effective resolution is lower than 3840 / 2?

Fedora 27, at 100% OS zoom. However, 0 A.D.'s GUI scale is set to 2.0; at half a screen it looks like this:

So basically my screen is 3840×2160, and I use it at 1:1, as you can see, but 0 A.D.'s GUI is effectively limited to a width of (3840/2)/2=960 pixels, which is less than 1024, thus a bit is missing at the left and right.

Edited April 24, 2018 by Nescio
ce

[vladislavbelov]

2 hours ago, Nescio said:

at half a screen it looks like this:

Is it possible to change proportions?

[Shiyn]

Wow, thats some amazing feedback, man, this is awsome. Thanks a lot for putting so much detail and depth on this!

1. These buttons are unit actions, so should go with the buttons [2] around the unit portrait [3].
True, i did tried to fit then on, but i couldnt find a way to attach them without making it too crumpy (as if wasnt crumpy already lol). But maybe i can do a sub radial inside the first one.

2. I think these should be centered over the top arrowhead. If [9] can be extended a few pixels leftward, then the additional buttons at 1 can be placed radially around the portrait. Initially there would be too many, but if WFG adopted my suggestion to simplify stances to 3 selectable stances only [Aggressive, Defensive, Stand Ground], then there is enough room for all of the buttons, a total of 9.
Yea, if we could operate with the default stances the extra items at .1 would fit better and allow for one big glorious radial around it.

3. The portrait needs a spot for the Rank insignia. I like the "gloss" overlay. Nice touch. I also agree that if the selection is multiple units but just 1 type, then the large portrait should remain, with a large number overlain.
Oh i forgot rank indeed. Actually rank seems like a valuable info, guess we need to handle a corner for it. I wonder if its wise to keep the low opacity icon as it is now.

4. This is nice, I like this. Makes the formations prominent. Would look even nicer if, again, number of formations were reduced. Box, Skirmish, and Flank formations are useless.
Yup, same logic as 2.

5. Need a yellow bar for resource count.
Oh fair, didnt noticed that one.

6. Minimap buttons can go radially here, all the way around. Total of 8 possible minimap buttons. Plenty. Or just go with the 5 buttons you have there, bunched together. That works too. I don't think we really want more than about 5 different minimap features anyway.
So we basically invert the axis and make it come from the left corner? I like it.

7. I like how this gives room for 1 more additional icon [9 wide instead of the current 8 wide]. This panel here is where this UI can adapt to different screen widths. On narrower widths, there can be an arrow-over to scroll this over to show any hidden icons. 
I see. in a 4:3 proportion it think it would tight up and hide the effect of the civ-related detail but thats the most of it.

8. I like the negative space around the icons here. Gives "breathing room."
Hehe thanks. I did tried to fit the formations or build actions in the bottom row but it just got the crumpyness again.

9. May I suggest a nifty little feature here? Perhaps clicking here toggles between GenericName and SpecificName. Does a quick little rollover animation.
Thats an great idea. Loved it.

The "Drakkar" detail you have there on the right side can further customize for each culture. On lower resolutions the feature wouldn't even show up, but it would on 1600+px widths.
True. I think the biggest catch would be to change materials on the current look, make the stoneish gloss turn into wood, bamboo, and other materials would be a fitting addition but would mean to redraw all over it again.

I will put your guidelines to the test today. Thanks <3

[Shiyn]

Quote

Nescio said:

Yea, thanks for pointing out about resolutions. I mocked up considering only 16:9 and my own res, so.

[Shiyn]

Tbh i like the logo as it is, i just think the letters are too spread , and the dots are a little too proeminent. Also the bevel in the 0 cross seems a bit too obvious.

Edited April 24, 2018 by Shiyn

[Nescio]

37 minutes ago, vladislavbelov said:

Is it possible to change proportions?

Sorry, I don't quite understand what you mean. The image I posted is not a mock-up, it's an actual screenshot with an unmodified A22. Just launch 0 A.D. in windowed mode (Options) and press Win+Right to move it to the right half of the screen. GUI elements have fixed sizes, their proportions do not change.

[elexis]

The screenshot looks exciting.

There are some restrictions like 1024x768 minimum resolution and logical constraints as mentioned by the other guys already.

If those are met, then the most difficult task would be to position all the elements correctly (figuring out the right X, Y coordinates for each button).

The engine certainly supports transparency already, so it should be possible to implement that.

 

[vladislavbelov]

11 minutes ago, Nescio said:

Sorry, I don't quite understand what you mean. The image I posted is not a mock-up, it's an actual screenshot with an unmodified A22. Just launch 0 A.D. in windowed mode (Options) and press Win+Right to move it to the right half of the screen. GUI elements have fixed sizes, their proportions do not change.

I mean, doesn't the Fedora support the screen division in a different proportion? And why you don't use a lower scale, i.e. 1.5?