SliceCenter code works in studio, but not in game

I’m trying to use SliceCenter to allow me to resize a bar along the X-axis while retaining its shape on the sides.

Example of it working in studio

https://gyazo.com/2b1185e929dedd5474e409706b66d59a

In-game, the bars do not even show. Based on my previous tests with this, I believe the bars are not showing because the math is wrong and the SliceCenter points’ X values are too large.

Example of it broken in game

image
You can even notice how the right side of the background frame is sized incorrectly.

My code:

    local screenSize = workspace.CurrentCamera.ViewportSize
	local SizeHealthBarBGInPixels = Vector2.new(ScreenGui.BossHealth.BackgroundBar.Size.X.Scale * screenSize.X, ScreenGui.BossHealth.BackgroundBar.Size.Y.Scale * screenSize.Y)
	local SizeHealthBarInPixels = Vector2.new(SizeHealthBarBGInPixels.X * ScreenGui.BossHealth.BackgroundBar.HealthBar.Size.X.Scale, SizeHealthBarBGInPixels.Y * ScreenGui.BossHealth.BackgroundBar.HealthBar.Size.Y.Scale)
	local SizeXPBGBarInPixels = Vector2.new(HUD.Size.X.Scale * ExperienceFrame.Size.X.Scale * screenSize.X, HUD.Size.Y.Scale * ExperienceFrame.Size.Y.Scale * screenSize.Y)
	local SizeXPBarInPixels = Vector2.new(SizeXPBGBarInPixels.X * ExperienceFrame.XPBar.Size.X.Scale, SizeXPBGBarInPixels.Y * ExperienceFrame.XPBar.Size.Y.Scale)
	
	
	ExperienceFrame.SliceCenter = Rect.new(SizeXPBGBarInPixels.X / 5.82, 0, SizeXPBGBarInPixels.X, 0)
	ExperienceFrame.XPBar.SliceCenter = Rect.new(SizeXPBarInPixels.X / 7, SizeXPBarInPixels.Y, SizeXPBarInPixels.X * 1.4, SizeXPBarInPixels.Y)
	ScreenGui.BossHealth.BackgroundBar.SliceCenter = Rect.new(SizeHealthBarBGInPixels.X / 5.82, 0, SizeHealthBarBGInPixels.X , 0)
	ScreenGui.BossHealth.BackgroundBar.HealthBar.SliceCenter = Rect.new(SizeHealthBarInPixels.X / 7, SizeHealthBarInPixels.Y / 2, SizeHealthBarInPixels.X * .95, SizeHealthBarInPixels.Y / 2)

The 5.82, 7, 1.4, .95 I used to divide/multiply some of the points by came from trial and error.

9Slice (which uses SliceCenter) is supposed to be used to set the proper boundaries of 9 separate areas inside an image. Instead of setting it (in real-time) to approximate how you’d want the bar to be stretched, why don’t you just set it properly once and adjust the Size instead?

Here’s a 9slice tutorial I found that might help you. Set your bars’ Y values to something constant, and change the fill bar’s X Scale to match what XP currently is. Like this:
FillBar.Size = UDim2.new(CurrentXP/TotalXP,0,YScale,YOffset)

I’m not setting it in real time, I call that function once just to set the SliceCenter properly depending on the player’s screen size

SliceCenter shouldn’t be given screen values, but the boundaries of the image it’s slicing.

I’m not giving it screen values.

I’m using the screen’s size to find the size in pixels of the image so I can then make borders.

The 9slice feature should automatically apply borders. If you still want to see the size of the image (as it’s shown in Roblox, not the dimensions that SliceCenter actually takes into consideration) AbsoluteSize is your friend.

I believe I just found my problem. I thought X0,Y0 was a point, as was X1, Y1.

Turns out they’re lines!

1 Like