Update theme for 720p resolution #1168
Conversation
The dialogue balloon scene sets a minimum height of 64px on the ribbon. Be consistent.
When we switched the game's base resolution from 1920×1080 to 1280×720, we did not adjust the font size to compensate. The new resolution is 2/3 of the old resolution in both axes. The previous font only had one size, and we were using it at 2× that size. Halving it to its natural size looked too small against the scroll assets. Having switched to a font that has a variety of sizes, we can now reduce its size by approximately 1/3: - The default font was Jersey-20 at 1×. Change it to Jersey-15. Since Jersey-20 is slightly smaller than the old font was, this works out at almost exactly 2/3 the size of m6x11plus. - BigFlatButton (used for the buttons on the main menu) was Jersey-20 at 2×. Change it to Jersey-25 at 1×. Helps #1136
We have reduced the font size to approximately 66% of its former size, so we should at least reduce the line separation proportionately. But to my eye, reducing from 9px to 6px is still too spacious. Reduce it further to 3px.
We have less space to spare at 720p.
This is roughly 2/3 of the old value, matching the reduction in the game's base resolution.
Since changing the game's base resolution, dialogue balloons have taken up way too much of the viewport. Reducing the font size and box margins/padding have helped a bit but we can go further: - Reduce the minimum size of the balloon by 1/3 in the y-axis and 1/5 in the x-axis. To my eye, reducing the minimum width to 320 looked too narrow. - Reduce the padding around the Next button by eliminating the HBoxContainer and MarginContainer it was packed in. Adjust its horizontal container sizing to shrink end to preserve its right-aligned position; and the script to show and hide the button rather than the now-removed container. The assets from Tiny Swords that we are using for the balloons (and other UI elements) are the limiting factor in making this much smaller, since they are based around a 64×64 grid. In future I think we'll want to replace them.
|
Play this branch at https://endlessm.github.io/threadbare/branches/endlessm/update-theme-for-720p. (This launches the game from the start, not directly at the change(s) in this pull request.) |
|
I didn't spend any time on the storybook because that is being redesigned. |
We have less space after switching to 720p. Remove the MarginContainer that previously surrounded all the controls. Make the Back button smaller. Fixes #1142
Previously the right column of the credits page had two sections in separate scrolls. This took up so much vertical space with margins and padding that neither of the RichTextLabels within could be read without scrolling. Merge them. Set the longer of the two (the third-party components section) to have twice the stretch ratio of the Art & Music section, so that both fit entirely without scrolling. This page is still a placeholder but at least players can now see, without scrolling, all of the credits that we are required to show!
wjt
force-pushed
the
update-theme-for-720p
branch
from
8ba23f2 to
c39c4b2
Compare
manuq
left a comment
manuq
left a comment
There was a problem hiding this comment.
Looks great to me! I experimented with a bit more margin to the left of the panels, for readability. Feel free to take my suggestion.
| content_margin_left = 96.0 | ||
| content_margin_left = 64.0 | ||
| content_margin_top = 64.0 | ||
| content_margin_right = 96.0 | ||
| content_margin_right = 64.0 |
There was a problem hiding this comment.
I agree that there is less space to spare in 720p! But at the same time I find a bit odd that the balloon is sparing space on the left of the texture showing the background behind instead of having the solid paper background for better margin and readability. The text is too close to the border. Ideally we should expand the texture to the left:
I gave it a try, I thought it was impossible without editing the asset in an external program because the texture comes in 64x64 tiles. But there is an "Expand Margin" option. Setting left to 16 px looks much better to me. And right too to keep things centered. Before:
After:
Now this also enlarged the texture to the right, we can compensate by reducing the width in the custom minimum size by 16 px:
I think this looks better. Here is a commit for reference, in case you agree: 036157a
I checked the credits and the intro dialogues and didn't saw anything overflow because of the 16 px horizontal reduction. What do you think?
There was a problem hiding this comment.
I think this is much better! I didn't know this was supported. I'll look at your patch.
There was a problem hiding this comment.
I amended it to apply the same to the top and bottom margins; and to adjust the default size of the balloon so that it does not need to resize unless there are more than 3 lines of dialogue, or 2 or more responses.
There was a problem hiding this comment.
I amended it to apply the same to the top and bottom margins; and to adjust the default size of the balloon so that it does not need to resize unless there are more than 3 lines of dialogue, or 2 or more responses.
I was about to suggest doing the same in the vertical axis, you read my mind!
The scroll/parchment texture we are using for PanelContainer's background has around 30px of transparent border. For PanelContainer we would prefer to use this space as margin between the edge of the visible parchment and its contents. Expand the margin by 16px in each axis. Reduce the content margin at the top by 16px to compensate - the shape of the scroll means there is additional margin there. Co-authored-by: Will Thompson <wjt@endlessaccess.org>
Due to the previous change to effectively add 16px to the content margins for PanelContainer, we can reduce the minimum width of the balloon by 2×16px to compensate. In addition, hide the ResponsesMenu container, and update the offsets saved to the PanelContainer node in the scene. Previously the saved size included both the "Next" button and 1 row of responses; now, the saved size has space for the speaker's name, 3 lines of dialogue, and a next button. This means that in most cases, the balloon does not need to grow when the "Next" button appears or between lines of dialogue.
This adjusts the font sizes used in the game (building on #1162 which gives us more font sizes to use), and adjusts the margins, separation, and sizes of various elements to better fit the UI in the reduced resolution.
All screenshots taken fullscreen on a 3840x2160 monitor for fairness: this common hidpi display resolution is precisely 200% larger than 1080p and 300% larger than 720p, so all screenshots have integer scaling.
Fixes #1136
Fixes #1142