Cross Health GUI

Help and Feedback Game Design Support
#1

Hi!
I’ve been making a health GUI and got a problem like this
image

I wonder, how do I resize the overlay, so it will fit in GUI, and not go outside the GUI.

1 Like
#2

I would use a Gui Rescaler plugin to fix your problem. I hope this helps. :herb:

#3

I meant, hide corners or something. So it can really look good.

Like this: image

Corners outside yellow lines should be sliced. (i can’t really explain this).
Something like fill it will light red texture, without outside textures.

#4

What about if you create a new frame, make his background invisible and smaller it. Then add your image inside this frame. The image shouldn’t rescale in this point outside of the frame. I hope this helps. :herb:

#5

How small i make it???

#6

I am confused about what are you trying to achieve right now. Do you want to cover the black-red color with white-red color? Or do you want just white-red color to fit in black-red color angle? You make it as small as you want to be small.

#7

I wanna achieve this (30 chars)

image
Like the frame changes their size, and nothing happens to red-light overlay that are inside the frame

#8

So you are going to Tween this image in script?

#9

You can create a new frame and enable a property called GuiDescendants if im not wrong. And may look something that you want to achieve. If this didn’t work i can give you a model, also cause i can’t understand correcty your problem.

#11

Hi, It’s a bit hard to explain the process, but you can use ClipDescendant to make the asset a Masking Zone, whatever’s outside the frame will be hidden, so what you needed to do was keeping the Child’s size intact to either X or Y, and the resizing masking should be the opposite so that it won’t affect the Progressive hidden asset :
LoadProg

If you have a hard time doing it, here the GIF assets :
UI_Mask.rbxm (4.1 KB)

Tween :
HP = Health
FrameMask:TweenSize(UDim2.new(1,0,HP/100,0),"InOut","Quad",1.5,true)

9 Likes
Cropping UI elements on a billboard?
#12

Thanks, this really worked!!!

#15

Although your solution is fine, you should use TweenService instead of using FrameMask:TweenSize because using TweenService is more modern and has a less chance of being deprecated in the future. Here’s the link if you dont want to search for it: TweenService | Documentation - Roblox Creator Hub.

#16

What? The potential of a function to be deprecated in the future isn’t really a great reason not to use it. There are plenty of benefits to using TweenService that actually affect functionality, too:

  • You can use it for stuff that isn’t UI
  • You can use it for properties that aren’t size/position
  • It’s always the same function, :Create, so you don’t need to remember if it’s TweenSizeAndPosition or TweenPositionAndSize (a completely arbitrary distinction)
  • You can wait for a tween to complete across multiple threads (if you want to) as opposed to providing just one callback function
  • You can reverse/repeat the same tween instead of using callbacks to imitate that
  • You can cancel an in-progress tween without creating a new one
5 Likes