Jump to content

[NOT] Just Another UI


Recommended Posts

Hayo 0AD!

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

 

CIoht5a.jpg

6o2fa6j.jpg

H6l8eU1.jpg

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 by Shiyn
  • Like 8
Link to post
Share on other sites
  • Replies 123
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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 matc

The easiest solution to hide hide the black corners of the minimap is to use à ring enough large.   I began to implement the gui designed by Shyin. However, it will take me a lot of tim

Posted Images

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 :)

  • Like 1
Link to post
Share on other sites

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 by Shiyn
  • Like 1
Link to post
Share on other sites

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?

  • Like 1
Link to post
Share on other sites
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.. :D 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 :D

Link to post
Share on other sites
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/

Link to post
Share on other sites
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 :)

  • Like 1
Link to post
Share on other sites
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.

Link to post
Share on other sites

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.

ui-notes.thumb.jpg.e98cc4e00cfe89dc48661bb520db4e6d.jpg

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.

 

 

RGMERGt.jpg&key=5cbe2718e43350e4dcfbe140

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 by wowgetoffyourcellphone
  • Like 5
Link to post
Share on other sites
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.

  • Like 4
Link to post
Share on other sites
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:

Screenshot_from_2018-04-24_12-31-57.thumb.png.b2086565b138aef81e30dc22de342595.png

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 by Nescio
ce
Link to post
Share on other sites

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

Link to post
Share on other sites
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.

Link to post
Share on other sites

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.

 

  • Like 3
Link to post
Share on other sites
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?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...