Jump to content

shiny - alternative main menu & UI theme


maroder
 Share

Recommended Posts

9 hours ago, maroder said:

indeed, but that's always the case at the minimum resolution. Only option would be to make the font smaller (which I don't want to do).

It's fine on minimal resolution, but I'd rather not inflict this on other resolutions if we don't have to.

9 hours ago, maroder said:

And having nothing on there?

Yeah. I think it'd generally look better. Might be weird on the biggest screens, but it's going to look a little weird on the biggest screens anyways so.

9 hours ago, maroder said:

Yeah it's the same one, just shifted to the top. See, the problem is the that the pictures wow posted were just the first design I did with those double lines. But then I asked @Stan` and @wowgetoffyourcellphone how they liked it or if they would prefer one of my other drafts and they both choose the current design you don't like.

So ... you see my problem? Kind of going in a circle :/

Yeah sure. I'm just giving you my opinion haha. IMO the 'art-deco' box border is out of place. I preferred this one if we're going for art-deco-ish. I would probably prefer something else still, but I'm not entirely sure what to be honest.

I actually liked the initial pyramidal notch, even though most of you seemed to think it wad 'too modern' haha. But the rest of the menu is super sleek and modern so I didn't really mind.

That being said, this is just my opinion and I can certainly get overruled. It's not like it's the ugliest thing on Earth either, just not my preference :P and I think overall it's still an improvement on the current menu.

  • Like 1
Link to comment
Share on other sites

51 minutes ago, wraitii said:

I actually liked the initial pyramidal notch,

same, that's why I made it. haha

51 minutes ago, wraitii said:

It's fine on minimal resolution, but I'd rather not inflict this on other resolutions if we don't have to

yes. The problem is that I have then to come up with some css like js/xml stuff to manage that. I.e. switching between fixed position and a relative position depending on the screen size. That may take a while.

Link to comment
Share on other sites

  • 4 weeks later...
On 22/01/2022 at 4:23 PM, maroder said:

mockup:

623597186_furthertest.thumb.png.2b56a9bc0a858e790b3b44514739909d.png

Alright seems like some people like this draft, but unfortunately: This is not possible.

the min resolution width of 1280 offers not enough space to put the wfg logo and the build / alpha name in the top menu.

This would be possible when dropping support for everything under 1920, but that seems like a bad idea.

So here are some alternative drafts: (Do note that those are fixed width menus -> so they don't stretch over the whole screen anymore)

screenshot0301.thumb.png.993dfeaba57fe6233731f87cc903a6ce.png

screenshot0303.thumb.png.2ae07399080ed6679ef922a25c877ecd.png

screenshot0305.thumb.png.7597c4a3fd7933dc4da7afdfad725eda.png

  • Like 2
Link to comment
Share on other sites

2 hours ago, Stan` said:

Maybe you can find a way to make it responsive e.g. remove elements when resolution is too small.

I mean yeah there probably is a way to do that.

Although it's sound very cumbersome and the question is what should happen to those elements? are they not displayed at all on small resolutions?

But I can look into it, maybe it's easier to do than I think.

Link to comment
Share on other sites

On 27/02/2022 at 4:13 PM, maroder said:

I mean yeah there probably is a way to do that.

There definitely is. Look at eg. Blender or Gimp projects, in blender i believe it is coded in icons are in svg.  In Gimp there are larger and smaller icons plus it depends on theme too. https://gitlab.gnome.org/GNOME/gimp/-/commits/master?search=icons ...

On 27/02/2022 at 4:13 PM, maroder said:

But I can look into it, maybe it's easier to do than I think

That would be much obliged. 

  • Like 1
Link to comment
Share on other sites

2 hours ago, asterix said:

There definitely is. Look at eg. Blender or Gimp projects, in blender i believe it is coded in icons are in svg. 

I know that there is generally a way to do that :) my problem is more that the pyrogenesis engine is not designed to build that kind of UI. The combination of javascript and xml that is used for the UI is good at producing static elements (or semi adaptive), but what is normally used in combination with javascript to produce reactive graphic elements is CSS -> and that is not part of pyrogenesis.

So every element that should be reactive has to be coded with a custom logic, which is just much work. But as I said, I will look into it, maybe it's not so complicated.

Link to comment
Share on other sites

4 hours ago, maroder said:

I know that there is generally a way to do that :) my problem is more that the pyrogenesis engine is not designed to build that kind of UI. The combination of javascript and xml that is used for the UI is good at producing static elements (or semi adaptive), but what is normally used in combination with javascript to produce reactive graphic elements is CSS -> and that is not part of pyrogenesis.

So every element that should be reactive has to be coded with a custom logic, which is just much work. But as I said, I will look into it, maybe it's not so complicated.

You can now change style dynamically if your style is in styles.xml :)

But yeah it's not as flexible as CSS.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Alright, some progress was made. This is the version I'm considering for the next release.

It is adaptive and compatible to small 1024 screens.

The bottom menu is a bit crowded and I would like to maybe remove some of the stuff, but that is more a consideration of the base game.

screenshot0458.thumb.png.d9e9273116b9b77d20e9842cc0fdf76a.png

 

 

  • Like 7
  • Thanks 2
Link to comment
Share on other sites

  • 3 months later...

Some suggestions based on testing in A26. Do with them what you will.

You could make the loading bar golden, and the background a little more blueish maybe.

Maybe restyle the mod loader too?

The background is a bit blurry, maybe it could tile?

The fps counter in the main menu overrides the wildfiregames logo.

Good work :)

Link to comment
Share on other sites

10 hours ago, Stan` said:

You could make the loading bar golden, and the background a little more blueish maybe.

I wanted to avoid to make it too similar to aoe4 :)

10 hours ago, Stan` said:

Maybe restyle the mod loader too?

When I ever have time, then I will. But it's not that high on the priority list for now.

(One could even do something fancy and fetch some images from the mods from mod.io)

10 hours ago, Stan` said:

The background is a bit blurry, maybe it could tile?

Which one? the main menu one or the "normal" dark menu background (that is also used in dialogs) ?

They both should actually be fully tillable... Maybe the compression is messing something up? or do you have a screenshot of what exactly you mean?

10 hours ago, Stan` said:

The fps counter in the main menu overrides the wildfiregames logo.

good point. I will keep it in mind.

Link to comment
Share on other sites

  • 1 month later...
27 minutes ago, maroder said:

What specific points do you have in mind regarding the inconsistency? I'm always open for feedback / suggestions

Some random points:

  • Start page has 4 different hover effects and there are more variants in other places
  • red old style buttons need to go
  • tooltip background transparency (only used sometimes) may lead to hard to read tooltips
  • radio button are of the old theme, same for drop down arrow
  • ai options icon color
  • button borders come in variants
  • some enabled buttons lack hover
  • there is an issue when expanding the menu in-game
  • full screen pages like match-setup shouldn't have inset window borders/decorations

As for incomplete, well, the in-game game controls are untouched as of yet.

While there are many small issues, overall I feel like the direction is right so I hope you won't give up on it as this is an aspect that I think is in dire need of some love.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • maroder changed the title to shiny - alternative main menu & UI theme

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.

 Share

×
×
  • Create New...