GUI Box node with rounded corners?

Hello again!

Got a question once again and this time it has to do with rounded corners of gui box nodes. I’ve seen that this is possible to do by utilizing textures but is there any way to make a box node that only has a color to have rounded corners? Are you supposed to utilize the Splice9 values in some way I can’t make sense of?

Looking forward to any answer you can come up with!

1 Like

I’m afraid this isn’t possible to do with a box node out of the box (ha ha), but maybe something can be done using a shader?

1 Like

You can use Slice9 for stuff like that, for example here is a simple white rounded rectangle I created:

If I then add it to my GUI scene (included in a texture atlas), and set the Slice9 settings like this:

I can create box nodes with varying sizes and colors that will have rounded corners, like this:

4 Likes

I know it can be done with a texture and Slice-9, but is it actually possible to request such feature? - to have rounded corners property for built-in GUI box nodes? This could be a very useful features for quick, minimalist GUI. What is a stopper here? I think detecting input over node could be still like for a rectangle box if this is a problem.

1 Like

For sure you can do a feature request in our github issues (not sure if we already have it).

1 Like

Didn’t found any, that’s why I asked. So I made one :wink:

1 Like

It could be done a few ways.

Instead of using a quad the mesh shape of the node could be dynamically generated.

Another option would be the dynamic generation of a mask image. And there could be a few ways of doing that some more efficient.

It could open up the door for more node shapes. As in allowing user shapes / dynamic node shape the same as collision shapes.

pick_node could still be made smart enough to find inside of the shape in both ways.

There must be a will to make all of this and probably it would be low priority since doing it with images the current way is pretty good.

And down the road we’ll have vector shapes to use in GUI potentially!

1 Like

Vector shapes would be something awesome!
I just thought that adding round corners could be a nice, simple task, it could be really limited, like I proposed in the solution, but having such makes Defold GUI way more attractive :wink:

So I came here to open this back up. I’ve done it using shapes but one of the problems with using shapes is it’s hard to make it work perfectly with outlines. As a plain single color shape it works well, but once you are doing borders it can get difficult to accomplish because the inset corner needs to be slightly different depending on scale of the overall final node. So anything that could be done to improve the ability to do rounded corners ideally to facilitate outlines on said shapes would be great. Until then back using textures and slice9, etc.

1 Like

On the Github @britzl wrote:

“Instead of implementing this very specific request we’d like to add a shape node instead. The shape node should have some predefined shapes but also ability to add a custom shape from file.”

So it looks like it will allow much more and open new roads - follow the ticket to be notified when it will be implemented :wink:

1 Like

When is that coming? Interestingly for my work I’ve found some nice use of the Pie_Node and defining 5,6,8 vertices to create pentagon, hexagon, and octagon shapes so in some ways it already has this but a more advanced shape node sounds super useful. One thing to consider if speech bubbles would be cool. Having been working on them though there are many different types and variants of speech bubbles so it’s maybe not the best idea unless we could use SVG or otherwise to define different shapes using a shape file format.

1 Like

It is not scheduled for a specific release. It will likely take quite a while before you will see it in Defold.

Hello, Are you already doing this? :pensive: Almost 3 years…

Nope, we are not doing this yet.

… Okay !..