PanosK92 / SpartanEngine

A game engine with an emphasis on real-time cutting-edge solutions
https://panoskarabelas.com
MIT License
2.24k stars 189 forks source link

First pass of Spartan Editor UI Revamp #141

Closed deg3x closed 10 months ago

deg3x commented 10 months ago

This PR includes the following:

PanosK92 commented 10 months ago

Screenshot 2024-01-10 212731

That's an awesome PR, thanks for taking the time to face lift the engine. I like how you repositioned the tool buttons (in the menu bar) to the far right. I want to eventually merge this so here is what I am thinking in case it helps you make it even better:

  1. The menu bar buttons look nice a little bigger, however the entire UI is "bigger", is that intended?
  2. When I select a tab, the horizontal tab line is not visible anymore, see the Assets tab (selected) compared to Console tab: Screenshot 2024-01-10 213238
  3. The color pallet is nice, it does introduce high contrast (green/red/blue) though, what do you think about easier to the eye low contrast themes like this: 7aXEiBwoFMasUh9aXtEvu8-1200-80 It doesn't have to be something that grey, just want to give an example of low contrast (could work with other color pallets)
  4. The render doc button is a tool that is only enabled via changing a flag in the code, its functionality is not core to the engine and not that important in general, I don't think it deserve a special center stage place.

FYI: If you go here you can bring up a window that will allow you to modify the style in real-time and reduce your iteration time:

Screenshot 2024-01-10 214336

What are your thoughts?

deg3x commented 10 months ago

Hey, so to reply to your points:

  1. If by "the entire UI" you mean the main menu bar then yes, its intentionally bigger. I can make it smaller if you don't like it but I think it makes the buttons stand out better.
  2. This is also intentional as, in my eyes, it makes the currently selected tab blend nicely with the "foreground".
  3. When you say high contrast, are you referring to the top buttons or the whole editor? In general the majority of the colors have pretty dark shades.
  4. Yeah I get that, I wanted to have something side by side with the play button and I thought renderdoc is the way to go since many people that use the engine are graphics programmers and they use that functionality a lot.

Now that you know how these choices were made I'm open to suggestions :)

PanosK92 commented 10 months ago
  1. In the example of the render options window, it seems that the UI elements haven't increased in size, but rather the padding around them has. This creates more space between elements, giving the impression of a larger UI. Is this a deliberate design choice, or was it intended only for the menu bar? If it was intended, then it's ok. Screenshot 2024-01-10 234306 Screenshot 2024-01-10 234457
  2. Understood, that makes sense.
  3. Regarding the color choices, the top buttons are quite bright in red and green, the blue theme of the entire editor is dimmer though, which is nice. Overall, the color palate is indeed dark so It's not a real problem, I'm fine with it as is.
  4. Agreed. It would be ideal if RenderDoc was always active without needing recompilation. However, due to its high resource demand (as it intercepts every call), we can't enable it by default. A non-functional button doesn't seem right. Also, the red/green contrast correlates more with start/stop in terms of functionality in my mind. Don't have a solution for this yet but its right in the center, that's why I pay all this attention to it :-)
deg3x commented 10 months ago
  1. I see what you mean now. I didn't do it specifically for the render options window but as a generic option as I felt that different entries needed more space to "breathe" (My main point of focus being the properties window). If you want we can decrease it in rendering options (or even overall). However now it is also better aligned to the elements on the right (draw a line from the middle of the text to the middle of the element in the right [e.g. checkbox] to see what I mean).
  2. :)
  3. I'll tell you what, I'll try to introduce 3-4 palette presets and give an option somewhere to switch between them.
  4. Yeah, I see the point here as well. I tried this just with the play button isolated in the beginning and renderdoc stuck to the right with the rest but it didn't feel quite right. I'll play with this some more to find another solution.
PanosK92 commented 10 months ago

I got latest, I like it, merging. Thank you!