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