Custom GUI clipping shapes

[Pawel]

I want to create a full clipping for hp bar like in the image:

I know there are solutions like this:

Making a "flashlight"

Ok, so I’ve been fiddling around with the render_script , placing out clears in different spots, but I have no real idea what I’m doing Code looks like this: function update(self) render.set_viewport(0, 0, render.get_window_width(), render.get_window_height()) render.clear({[render.BUFFER_COLOR_BIT] = vmath.vector4(1, 0, 0, 0)}) render.disable_state(render.STATE_DEPTH_TEST) render.enable_render_target(self.light_rt) render.set_viewport(0, 0, render.get_window_width(), rend…

Custom shape clipping

I may have found a solution. You can use a model component with any shape mesh that you like and give it a material with the “gui” tag so it renders in screen space like a normal gui component. I didn’t mess around with enlarging the texture and moving it around, but that should be pretty easy to do by messing with the UVs in the fragment shader. You would lose the special perks of gui components (automatic alignment, etc.), but if all else fails I think it would work. [image]

But in general it is a common use case, and I think Defold GUI system would be way awesomer if there will be a built-in feature that could allow to create custom clipping shapes!

I also thought about a simple solution where I can use two built-in GUI shapes: box + pie, like this:

But I can’t add one bar below both of this nodes, so I can either add it below box shape or pie shape
It would be nice if we could bound(?) somehow those nodes?

Or could there be a capsule shape?

[COCO]

I think you need to set your white bar as a 9-slice bitmap picture.

[Pawel]

Ok, it is a solution, but what if I want at e.g. 50% HP have a straight edge of this bar at the end, but when at 100% have it clipped below the rounded shape?
Maybe even for this thick border an image could be hidden below the rounded end, so the box shape could be used, but again, all those are workarounds, therefore I think custom clipping shapes would be awesome

[COCO]

Try this:

jhonnyking/my-public-defold-examples

[totebo]

Ok, it is a solution, but what if I want at e.g. 50% HP have a straight edge of this bar at the end, but when at 100% have it clipped below the rounded shape?

I’ve done exactly this, but I cheated.

I used a transparent border overlay which covers the percent rectangle:

I set the percentage by simply resizing the rectangle underneath the border. To illustrate how things are layered, I’ve moved the progression rectangle in this screenshot:

This technique works as long as the curvature of the overlay border completely covers the progression rectangle and as long as the progression rectangle doesn’t stick out in the corners.