Improve GUI images with low resolution

[hhyyrylainen]

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

• Main menu background thrive logo (we already have higher res, this accidentally? uses a low res one)
• spinbox up/down arrows (currently uses godot inbuilt, we should create our own)
• checkbox selected and deselected images (checkA.png, checkB.png, CheckboxCheck.png and all of the variants,)
• slider circular part (grab.png with all variants and sliderTick.png)
• environment and compound panels the compact and normal view icons (expandPanel.png, compressPanel.png and all of their variants)
• in the microbe stage all the bottom left row icons (MainMenu.png, PauseIcon.png, PlayIcon.png, environmentButton.png, compoundsButton.png, chemicalButton.png, statisticsButton.png, searchButton.png, helpButton.png, suicideButton.png, and all of the hover etc. variants of those)
• reproduction indicator bars, the circle, and the central dna icon (ReproductionBar.png, LargeTwoNormal.png, LargeTwoHover.png etc.) The bars use the normal icon for the compound which is 200x200 so it is maybe fine?
• the trashcan icon / button
• close x in dialogs (uses graphMarkerCross.png, should probably get a separate icon file)
• all of the patch map, patch icons (abyss.png, bathy.png, etc. in the assets/textures/gui/bevel folder)
• patch condition up and down arrows (arrowUp.png, arrowDown.png)
• symmetry icons (1xSymmetry.pmg, 2xSymmetry.png etc.)
• colour picker HSV and RAW off / on buttons (these use the Godot inbuilt colour picker images now, we should make our own variants that match our GUI style)
• undo and redo in editor
• the plus icon in new cell button (NewIcon.png)
• ExpandUpIcon.png, ExpandDownIcon.png

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]

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]

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:

(it's white on transparent so it isn't visible on github)

[athariqk]

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:

The one above was the original size DonGororo made, but I had to reduce it to 15x15px to make it fit nicely.

[hhyyrylainen]

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]

Looks like there is already a godot proposal for this godotengine/godot-proposals#660

[skyace65]

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]

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]

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

[athariqk]

@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]

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

[hhyyrylainen]

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]

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

[skyace65]

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]

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

[hhyyrylainen]

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]

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

[Kertit]

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

[hhyyrylainen]

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]

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]

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]

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]

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

[hhyyrylainen]

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:

• The symmetry icons have a bunch of whitespace in them. The new icons should preserve the existing ratio of whitespace to the icon at the center. Also the new icon files are actually smaller (100x100) than the ones they would replace (240x240). So I think those need another iteration of making those again at maybe 800x800 resolution (which will give the center image more resolution to work with even when preserving the whitespace ratio).

• For the other icons (check), I think doing them at 240x240 resolution (or 200x200) would be the best as that seems to be used for other buttons (and various other icons).

[Kertit]

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)

• As for the symmetry Icons, they are 80x80 not 240. The only 240px icon is the 1xsymmetry. on my screen (1440p) they looks good. But could be bigger res if you really want to. that's no problem I've created them in 2000px then just resized them.
  Will check that whitespace thing I'm not sure what you mean.

• Will double the size then.

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]

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