Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Round icon position and size in buttons to make them look sharper #63957

Merged
merged 1 commit into from
Aug 5, 2022

Conversation

YuriSizov
Copy link
Contributor

@YuriSizov YuriSizov commented Aug 5, 2022

I'm not sure if this is a good fix, but it's a naïve one that seems to work for now. For the longest time in 4.0 I've noticed that at an editor scale >100% buttons have blurry icons. It affected all the buttons, but it didn't affect the same icons used in TextureRects, for example. Even though both would render the button at the same size.

I'd tried to spot if there is any difference between the approach to submitting a texture to render in Button and in TextureRect, but I could find nothing. I'd checked, and the blurred texture was still the same size as it was supposed to be, just a bit offset. So I assumed that it may be something related to floating point imprecision. I don't see any code that rounds position and scale in TextureRect, but maybe it just happens by accident because the source values it uses for positioining are already rounded. Not sure.

However, when I'd tried to round position and size of icons in buttons, it did help. It can create an uneven offset, because we're dealing with small pixel sizes at this point, but it works as a naïve approach, as I've already mentioned. Maybe there is a way to force pixel snapping for icons in GUI that would work better? I guess this issue would return if your UI element is anchored to some non-integer position, so this is definitely not a cure. But it makes the editor look way better.

So up to reviewers to decide, I guess!

Comparison screenshots (the extra pair of icons on the toolbar are for testing/demo, not a part of the actual UI nor of this PR; but notice how one is blurry and another is sharp in the "before" — the sharp one is TextureRect).

all-before
all-later


Not sure why button used the *_region method there, since it copied the entire size of the original texture anyway. I can revert that part if there is a reason for that.

@YuriSizov YuriSizov added this to the 4.0 milestone Aug 5, 2022
@YuriSizov YuriSizov requested a review from a team as a code owner August 5, 2022 12:59
@YuriSizov YuriSizov requested a review from a team August 5, 2022 12:59
@fire-forge
Copy link
Contributor

If the snap controls to pixels setting is enabled, it makes sense to also snap textures drawn by controls. So I'd say this is a good way to fix it.

Copy link
Member

@Geometror Geometror left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion this is a correct fix. I can't think of any situation where you don't want this behavior as controls always snap to pixels. (Looking at the way blender seems to resize its icons when changing the UI scale it seems to do the same)

@akien-mga akien-mga merged commit 15d1af1 into godotengine:master Aug 5, 2022
@akien-mga
Copy link
Member

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants