Conversation
> Fix up the check button icon. > Add a new button type variant: BigFontButton, which is used by the buttons in Main Menu.
> Make CheckButtons flat. > Make margins and font sizes consistent.
This enforces 16x16 size for all UI that displays check icons, ensuring consistency and not relying on manual icon size overrides in Controls
Increasing original SVG size while scaling down the SVG in godot import seem to provide better quality (more details) on the UI.
This should give a more "satisfying" feel.
With a proper check button icon now used in `thrive_theme.tres`, this change should make existing check button instances look more normal.
> fix keyprompt minimum size and icon positioning > remove PointLight2D node which no longer works (this was for a masking effect)
…eft panels animations a bit
> improve transition animations a bit > add autowrapping in case title gets too long (common in non-english languages) > set left alignment for the value labels on compound progress bars
> tweak show/hide animation's easing value > adjust text alignment and autowrapping
> this includes fixing a `call method` keyframe targetting the wrong Node. > expand/collase animation is now more smooth
timeline panel This should remove the unnatural small gaps on the panel's vertical borders.
This comment was marked as resolved.
This comment was marked as resolved.
|
I think that visually these changes look really good |
hhyyrylainen
left a comment
hhyyrylainen
left a comment
There was a problem hiding this comment.
I didn't check all the changed animations and other minor changes in the game yet as if the button size is tweaked further that'll be when I'll focus my testing energy.
hhyyrylainen
left a comment
hhyyrylainen
left a comment
There was a problem hiding this comment.
I think I managed to check all the GUI changes. Many of them are good, but I noticed some problems, most critical of being checkbox focus style not working at all anymore.
| focus_next = NodePath("../BackButton") | ||
| focus_previous = NodePath("../../HBoxContainer3/MarginContainer2/MarginContainer/VBoxContainer/PageTree") | ||
| focus_previous = NodePath("../../HBoxContainer3/Control/PanelContainer/MarginContainer/VBoxContainer/PageTree") | ||
| toggle_mode = true |
There was a problem hiding this comment.
I would expect this if the toggle mode is kept to be the opposite, i.e when active and sidepanel is shown then the button is in pressed state. Otherwise the toggled state is like the opposite than it should be.
And personally that kind of seems strange so, I think I'd prefer to not give this the toggle mode attribute...
There was a problem hiding this comment.
Ah, this is accidental, it was left over from me experimenting. Thanks for noticing.
There was a problem hiding this comment.
I think something here is causing quite an ugly black line overlapping the nicely curving bit here:
I noticed that the scroll bar is no longer fully within the container like before which avoided the clipping of the parent container's edge.
There was a problem hiding this comment.
Also the bottom of the report tab now doesn't line up with the patch map tab. So when swapping between the tabs the bottom of the main "content" shifts up and down a few pixels which is distracting.
This is the part I'm talking about:
It now does match the editor tab so I guess patch map tab needs a slight height fix?
There was a problem hiding this comment.
I think something here is causing quite an ugly black line overlapping the nicely curving bit here:
I can fix this one, should be as easy as setting the corner radius.
I noticed that the scroll bar is no longer fully within the container like before which avoided the clipping of the parent container's edge.
Unfortunately, I think this is unavoidable. But the justification is so that the actual content in the container does not get clipped abruptly at the borders, which was caused by the margins applied. As seen below:
Versus (margins removed):
This looks more natural and is common in every other UI, although scrollbar do get squished at the border.
There was a problem hiding this comment.
Also the bottom of the report tab now doesn't line up with the patch map tab. So when swapping between the tabs the bottom of the main "content" shifts up and down a few pixels which is distracting.
Apparently, all the three screens are inconsistent lol. I found the problem though; it was incorrect control sizing. The fix was reapplying full rect anchors for all three screens.
There was a problem hiding this comment.
This looks more natural and is common in every other UI, although scrollbar do get squished at the border.
Honestly, I'd prefer to keep using the margin-based view then as it avoids scrollbar clipping, because otherwise I think the rounding needs to go as it looks extremely sloppy that a scrollbar cuts into the border of the container it is in.
There was a problem hiding this comment.
I'm not exactly sure what line it is, but this change has broken focus style on checkboxes, which is a pretty critical error.
This Mute checkbox has focus but the player cannot see it:
(the font colour is ever so slightly different, but you cannot tell)
Less critically I'm not yet fully sold on wider toggle buttons than they need to be.
There was a problem hiding this comment.
I'm not exactly sure what line it is, but this change has broken focus style on checkboxes, which is a pretty critical error.
So, I somehow replaced the focus style with an empty stylebox...
Less critically I'm not yet fully sold on wider toggle buttons than they need to be.
Which toggle buttons do you mean?
There was a problem hiding this comment.
All of them as this is the theme definition. There's now quite many pixels of extra padding on the left and right side of the content:
(I highlighted in red where the extra padding is added that doesn't exist on the master branch version)
| Button/colors/font_color_disabled = Color(1, 1, 1, 1) | ||
| Button/colors/font_color_hover = Color(1, 1, 1, 1) | ||
| Button/colors/font_color_pressed = Color(0, 0, 0, 1) | ||
| Button/colors/font_color_pressed = Color(1, 1, 1, 1) |
There was a problem hiding this comment.
It seems like this doesn't actually do anything? I'd revert this because I think it is good that button font colour changes on click and this one line trying to undo that which doesn't work seems a bit confusing to leave in.
There was a problem hiding this comment.
Yeah, this is non-functional... there's even another similar property named font_pressed_color which is probably the actual one being used. I guess we can safely delete this one.
|
Is this PR still worked on? If not, then I would borrow the changes to main game UI (the stop button) and the organelle upgrade UI |
4 participants
Brief Description of What This PR Does
Hi everyone, this is my first PR in quite a while.
This PR polishes several elements of the UI that may stand out to keen players. Polishing includes tidying up UI elements and improving UI animations for better player experience, with work focused on the microbe stage UI.
I have made two notable changes that may require agreements:
Buttons by default now have font size of 16 px.Main menu and pause menu buttons specifically use the old button style variant with the 20 px font size.There are many more changes I would like to make, but it'd be wise to separate them into many PRs.
The following is some still image comparisons of old vs new:
Slider/Grabber
Check button (reverted)
Microbe HUD
Organelle popup menu
Related Issues
N/A
Progress Checklist
Note: before starting this checklist the PR should be marked as non-draft.
break existing features:
https://wiki.revolutionarygamesstudio.com/wiki/Testing_Checklist
(this is important as to not waste the time of Thrive team
members reviewing this PR)
styleguide.
Before merging all CI jobs should finish on this PR without errors, if
there are automatically detected style issues they should be fixed by
the PR author. Merging must follow our
styleguide.