How can I create a frame where the front frame hides the frame below it?

Help and Feedback Art Design Support
#1
  1. What do you want to achieve?

I want to have a frame in front of another frame where the front frame makes the frame behind it invisible.
Screenshot 2022-05-19 014107

This is the picture I want to achieve. Let’s say this is the health bar. I wanted to have 3 frames, 1 for the length of the entire health bar, 1 for the current health, and 1 where the frame would do the following above for each segments (where the arrow is pointing at).

  1. What is the issue?

The current GUI I have right now does not do the following requirement. I have made individual segments and current frames to replicate what I wanted to achieve. I want to know if there is some kind of trick I can replicate this without scripting it.

  1. What solutions have you tried so far?

I know a way to script it so that I can create each individual GUI part for the entire health bar, but this may not be reasonable as there are too many frames to handle if the player has a really large health pool. I know there is a way to make the parent frame hide any excess size of the inner frame that are past the parent’s size, but not the other way around (if such a thing exists).

1 Like
#2

Just make the borders overlap the progress bar
Here’s a demonstration:

Screen Shot 2022-05-19 at 5.00.49 PM

1 Like
#3

I have something like this in mind, but how would I make each segment transparent so that I can see the background of the game?

1 Like
#4

here’s another point of view
Screenshot 2022-05-19 020428

1 Like
#5

Well, the only solution is to make individual frames, one by one. But don’t worry though, even if you have 100 individual frames, you will still keep up to 60 fps if you optimize your code well. There’s really nothing special to say about this

1 Like
#6

Although I mentioned that I am worried about the performance, that’s not the main problem, but at least I know 100 frames won’t affect the game too much :slight_smile: Thanks for your input! :+1:

1 Like
#7

Use 2 image labels with the bars as the image. One as a child of a frame and the other is a background. The Frame will have ClipsDescendants set to true. Using offset on all the objects (or aspect ratio if you know how), scale down the frame with ClipsDescendants set to true so that the image may be clipped.

2 Likes