Poobslag / turbofat

Block-dropping puzzle game
MIT License
46 stars 15 forks source link

Redesign UI to avoid undecorated Godot UI #2437

Open Poobslag opened 2 months ago

Poobslag commented 2 months ago

The UI currently uses Godot's default grey buttons.

image

We should come up with a more fun, colorful theme.

image image

Ideally something colorful with big thick fun borders and little icons.

Poobslag commented 2 months ago

Kenney's UI pack: https://kenney.nl/assets/ui-pack

Instant better UI with Godot 4's Theme Editor: https://www.youtube.com/watch?v=jIk-OG5hG3k (Godot 4)

Poobslag commented 2 months ago

After exploring different options for the UI, I think rounded rectangles using "StyleBoxFlat" is the best approach.

I tried implementing textured buttons with "StyleBoxTexture". However, Godot 3.x does not support upscaled textures (having a 512x512 px image for a 120x30 px button). Since the game's resolution is currently 1024x600, this means anybody playing the game at fullscreen would see pixellated/blurry textures. This may still work OK if we end up wanting simple gradients, but it doesn't look good for the kinds of textures in the Puyo Puyo screenshot above.

We could also work around any kind of shortcomings in Godot's UI (such as the "upscaled texture" problem) by implementing our own UI nodes, but this is too much work for now and I'd rather use Godot's built in UI nodes.

Poobslag commented 2 months ago

image

The built-in "StyleBoxFlat" approach is OK but still does not work if we want icons alongside text, which feels like something pretty basic we'd want. While Godot buttons do support icons and text, sort of, the icon size is arbitrary, and the amount of space between the icon and text is arbitrary too. Getting things to align or look good will require a tremendous effort and possibly involve weird kludges like padding our text or images with whitespace.

A better approach seems to be to implement our own customized Button node which will have child panels, labels and texturerects which can draw however we like. This should also allow us to work around the issues mentioned in the previous comment, as far as not being able to use background textures because there is no way to upscale textures.