Custom GUI clipping shapes

#1

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

image

I know there are solutions like this:


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! :wink:

I also thought about a simple solution where I can use two built-in GUI shapes: box + pie, like this:
image
But I can’t add one bar below both of this nodes, so I can either add it below box shape or pie shape :confused:
It would be nice if we could bound(?) somehow those nodes?

Or could there be a capsule shape? :smiley:

0 Likes

#2

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

0 Likes

#3

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? :smiley:
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 :smiley:

0 Likes

#4

Try this:

3 Likes

#5

I’ve done exactly this, but I cheated. :yum:

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.

3 Likes