8_zn
February 10, 2020, 4:32am
#1
I am trying to use 9-slice scaling on this image, but I can’t get it to work properly. I am creating a health bar for my game. Here is the original image:
The original size of this image is 1180 x 80, but in Roblox Studio I resized it to 293 x 20.
I’ve followed step-by-step of the tutorial, linked here:https://devforum.roblox.com/t/how-to-use-slicecenter-robloxs-9-slice-gui-property/18313
I just don’t understand it. I’ve looked through the Devforum for solutions, and I didn’t get it to work. I tried many times and the best result I had was this:
My SliceCenter settings are 20, 0, 278, 20 . If you could help, I would gladly appreciate it. Thank you!
nezuo
February 10, 2020, 4:52am
#2
Why are you using 9-Slice for this? 9-Slice is usually used on box like images with corners.
8_zn
February 10, 2020, 4:54am
#3
The image gets distorted when scaling down the x-axis. Is there another way?
nezuo
February 10, 2020, 4:58am
#4
Instead of scaling the healthbar with Size, you can modify the ImageRectSize property…
8_zn
February 10, 2020, 5:03am
#5
Isn’t that for image animation using a spritesheet?
nezuo
February 10, 2020, 5:04am
#6
Yes but you can also use it for clipping an image. Basically HealthPercent = Health / Max; ImageRectSize = Vector2.new(HealthPercent * 1180, 0) iirc.
8_zn
February 10, 2020, 5:11am
#7
Setting the ImageRectSize to 1180 or any other number makes it like this:
nezuo
February 10, 2020, 5:15am
#8
Ah, sorry it’s been a while. You want to scale both the ImageRectSize and the Size properties. And I made a mistake, the ImageRectSize should actually be this:
ImageRectSize = Vector2.new(HealthPercent * 1180, 80)
8_zn
February 10, 2020, 5:24am
#9
Changing the size still distorts it for some reason.
nezuo
February 10, 2020, 5:25am
#10
It doesn’t look like you are using ImageRectSize in this picture.
8_zn
February 10, 2020, 5:51am
#11
Sorry for the late response, but I did use ImageRectSize.
nezuo
February 10, 2020, 5:51am
#12
Can you show me a picture of the properties?
8_zn
February 10, 2020, 5:53am
#13
Not sure if you wanted the whole thing, but I’ll just show you the Image section
nezuo
February 10, 2020, 5:55am
#14
Yeah, that’s your problem… The Size and ImageRectSize need to be based on the same health percent.
local HealthPercent = Health / MaxHealth
ImageRectSize = Vector2.new(1180 * HealthPercent, 80)
Size = UDim2.fromOffset(293 * HealthPercent, 20)
2 Likes
8_zn
February 10, 2020, 5:58am
#15
Ah I see, thank you! I will mark this as a solution.
1 Like
