Revolutionary-Games / Thrive

The main repository for the development of the evolution game Thrive.
https://revolutionarygamesstudio.com/
Other
2.86k stars 507 forks source link

Improve GUI images with low resolution #1581

Open hhyyrylainen opened 4 years ago

hhyyrylainen commented 4 years ago

The following things in the GUI are too low resolution at 4K and look blurry:

The buttons should be 240x240 to match what properly sized buttons currently are. Some of the other elements should be a bit larger, maybe up to 500 or even 1000?

Note: there might be places where changing the icon resolution breaks things so there's a chance that godot GUI scenes need tweaking as well as just the image files.

skyace65 commented 4 years ago

Any of these images that don't have an SVG file are going to have to be traced. There was someone on discord who might have some of these.

EDIT: It's also probably worth looking into if we can use svg files directly in Godot. I know Godot supports the format but I don't know if there's any performance cost.

hhyyrylainen commented 4 years ago

It was discussed on our dev discord that apparently godot does support svg import, but what it does it just automatically makes a png out of it, hopefully the resolution of which is configurable.

Related to the icons, I have a 1000x1000 thrive logo image which might be a replacement for the menu background logo: Thrivelogobig (it's white on transparent so it isn't visible on github)

athariqk commented 4 years ago

The slider grabber icon seems to have to be a small res for some reason, there isn't a setting to control its size (at least from what I've seen) on the theme styling options, so if it were to be made big it will take up a lot of space: 2020-09-06_21 23 57 2280 The one above was the original size DonGororo made, but I had to reduce it to 15x15px to make it fit nicely.

hhyyrylainen commented 4 years ago

That seems like something Godot should fix. Could you see if you can find an open bug about this, and maybe open a bug / godot proposal for allowing to set the size for the slider?

athariqk commented 4 years ago

Looks like there is already a godot proposal for this https://github.com/godotengine/godot-proposals/issues/660

skyace65 commented 4 years ago

It might be worth trying what Calinou suggested in that issue

Set the project width and height to the desired resolution in the Project Settings, then set Test Width and Test Height to the default window size you'd like.

Though it's probably best to try that after we have svgs for the stuff that needs to be replaced.

hhyyrylainen commented 4 years ago

Would that work correctly in exported game as well? I think I had a look at the test width and based on the tooltip for it didn't consider it a suitable choice. Would it also still be easy to edit the GUI so that it works fine at 720p? I think we might need to set the project resolution to at least 1440p to not have visible blurriness at 4k. So it might be then difficult to actually make sure that the game is playable at 720p (as that's the minimum resolution I want thrive to support).

skyace65 commented 4 years ago

Theoretically it should. I'll test it out when I get the chance.

athariqk commented 4 years ago

@skyace65 Narotiza shared some svg files for the new editor and current microbe stage UI on the dev forum (which I used to get some new icons for the editor UI rework) https://drive.google.com/drive/folders/19B-ji46CMayUiXWGFdy7UM7Bl9AC70vZ?usp=sharing And here's the svg for the checkboxes and grabbers UI_Buttons.zip

Also, the reproduction indicator bar, undo, redo and the plus icon are probably gonna be obsolete as it has been replaced in my branch with the newer ones.

skyace65 commented 2 years ago

Looks like this should be easier to do now with this PR merged https://github.com/godotengine/godot/pull/52137. I'll look into it this weekend but I'm making this comment in case I don't get around to it

hhyyrylainen commented 2 years ago

If Godot has now fixed this, that is excellent news. We plan to update to the latest Godot version next week or we might wait for 3.5 to be released.

skyace65 commented 2 years ago

The fix is actually in 3.4 so thrive can use it right now. I'm currently testing it.

skyace65 commented 2 years ago

Unfortunately this solution isn't going to work for thrive. For stuff like the main menu logo the scale property gets completely disregarded because it's in a center container. The slider grabber has no scale property so we're stuck with the "it gets too big" issue.

I think we're just going to have to wait for proper SVG support. That is something wanted by the community but it's not being actively worked on as far as I know.

Kertit commented 1 year ago

'Been a while no ones cared about those images. Are they still a thing to care about?

hhyyrylainen commented 1 year ago

I still care that parts of the GUI are pixelated. And anyone with a high resolution monitor will be able to notice the weird different clarity of GUI elements on the same screen.

Kertit commented 1 year ago

That Is true as I do with my 1440p monitor. Going to see what I can do

Kertit commented 1 year ago

erw, yeah I don't how its done in godot but higher res element provoke this image

hhyyrylainen commented 1 year ago

Yes, that's the original reason why things are low-res. Referring back to those Godot proposal and change linked above, it should now be possible to specify in the style the "expand" option for the texture, which contrary to the name also allows an image to be scaled down from its native resolution.

If you can't find how to get it working some programmer may be needed to look into this.

Kertit commented 1 year ago

well i've tried to use that expand option but the icon keeps diappearing when I change value (so it works well)>save>quit>reopen. Will pack those icon in DevCenter someone else will probably don't get that problem

hhyyrylainen commented 1 year ago

When expand is on there needs to be a minimum size set, otherwise the size ends up at 0x0 pixels so it disappears entirely.

Kertit commented 1 year ago

Noted. Anyway here a good start of what I've made so far https://dev.revolutionarygamesstudio.com/files/Asset%20development/Icons/GUI_highres.zip

Kertit commented 1 year ago

Seems like some of the listed elements are good already. The list might not be up to date?

hhyyrylainen commented 1 year ago

Which ones are already good? I'm asking so that I can double check those ones.

A few comments on the icons you already posted:

Kertit commented 1 year ago

List of already good thing (to me):

the trashcan icon / button -"colour picker HSV and RAW off / on buttons" (I don't know where that button is) -undo and redo in editor -"the plus icon in new cell button" (I don't know where that button is)

May I ask you to rename the element list with the actual file name? I can't find some of them/not sure what is what

hhyyrylainen commented 1 year ago

the trashcan icon / button

agree

-"colour picker HSV and RAW off / on buttons" (I don't know where that button is)

this uses the inbuilt Godot texture, which is very low res. We should do our own. This is currently hidden in the game as the microbe editor colour picker has these turned off.

-undo and redo in editor

agree

-"the plus icon in new cell button" (I don't know where that button is)

I think it is "NewIcon.png" which is 40x40

May I ask you to rename the element list with the actual file name? I can't find some of them/not sure what is what

I'll see if I can find them and update the list.

Edit: done adding names of files to the list