Doing some rough UI *styling* tests now. The little 1970s Swiss minimalist graphic designer living inside my head wants the plain black, but it’s probably too obtrusive. Outlined option feels a bit inelegant as usual, but I’m surprised how much the drop-shadows improve it. #gamedev
Can’t be bothered prototyping it here, but the final shapes won’t be this pointy. Instead of rounding them I’ll try using cut corners. Inspired by Avona, the calligraphic display font I’m using for my logo and big bits of text elsewhere in the UI.
Loving this sort of UI prototyping as a part of the game design process.
Get annoyed by UI element → change mechanics so it can be removed → accidentally solve pile of completely unrelated design problems.
Tried making the UI super wispy for a laugh and surprisingly I don’t hate it? Minimal separation from the world, but still high readability.
Some of the artsier JRPGs have used this style now and then. Child of Light’s also leans into this direction. https://interfaceingame.com/games/child-of-light/
@jonikorpi The speech bubble would need the bubble outline though :D
@jonikorpi yeah it’s nice! I feel like it would look fantastic if it was a bit more elaborate/irregular, more like a cloud or fog than just a blurred rectangle. Not like I’d have any idea how to accomplish that 😅
@mipstian A dumb idea I have is to use CSS clip-path to irregularise the edge, and then slap a big CSS blur filter on it. I think it would look right but also probably lagspike every time it repainted. :s
@jonikorpi Probably! But the game seems perfectly capable of rendering pretty clouds, can’t you reuse those?
@mipstian I would like to! Just not sure how to align them with the UI. I think the only reliable way to tell where an element is in the viewport is to use getBoundingClientRect, which is heavy as hell for some reason?
@jonikorpi Can’t the ui be handled by the engine?
@mipstian As in entirely? Nah the “engine” is just a couple of functions and shaders I wrote cobbled together. :D
As in position it? Kind of, but it would still have to know the dimensions of each element. ResizeObservers can do that, but I’m pretty sure they’re just async getBoundingClientRects in a trenchcoat.
@jonikorpi it’d be super cool if they reacted to the ambience like the clouds in the world tho
Oct 14, 2026, 3:03 PM@jonikorpi this is very nice looking. but it looks to me like there's five widgets here that are equally likely to be clickable: are they all buttons, or are some of them labels? it seems like "6/10 Mana\nSomewhere Cliffs" and "Moves\n4/4" might be labels, or maybe they're all buttons? if some of them aren't, i think it should be easier to distinguish between what's clickable and what isn't, but if they're all buttons, then it's fairly clear!
@jk Just managed to remove one!
All interactable. Hoping I won’t have to differentiate them much because of that.
Some are buttons (the destructive ones have confirmations) and some just pop out a tooltip with more details. I think I can differentiate them enough with just typography, but we’ll see.
