Using a spritesheet with BillboardGuis - 9 slicing leading to weird scaling?

Context

I’m working on a test map for a 2.5D / 2D-3D hybrid turn-based RPG prototype and using BillboardGuis for the sprites. I’ve noticed that BillboardGuis will behave noticeably differently depending on whether you use the “Fit” or “Slice” scale type. “Fit” works without any issues, but “Slice” runs into some serious issues unless you are very close to the BillboardGui. This is a problem, because I need to use “Slice” for spritesheets. Some sample images explaining the different behaviors:

When using a BillboardGui with an ImageLabel with the scale type “Fit”, it also looks as intended while zoomed in:

And when using a BillboardGui with an ImageLabel with the scale type “Fit”, it looks as intended while zoomed out as well:

image

The problem:

When animating character movement, I kind of have no choice but to use spritesheets, and 9 slicing seemed like the easiest way to accomplish that. But I’ve noticed a strange behavior that only seems to occur when you use the Slice scale type on an ImageLabel inside a BillboardGui.

When using a BillboardGui with an ImageLabel with the scale type “Slice”, it looks as intended while zoomed in:

But when using a BillboardGui with an ImageLabel with the scale type “Slice”, it does not look as intended while zoomed out:

image

Does anyone know why that might be? Is this just an unavoidable problem with using 9 slicing on billboard guis, or can I fix it by adjusting the properties? And if it is not possible to fix it using the slice property on a billboard gui, can anyone suggest alternative ways I can make a spritesheet work here?

I’m mainly worried about needing to potentially upload every single sprite separately, as that would take quite a long time.

Thanks!

2 Likes

BGUI_SpriteSheet.rbxm (5.8 KB)
I made it to test some settings real quick.
This is how i would do it.
The spritesheet I took from the internet for educational use only.
Its a 4x4 image, but it would be easier to animate if all sprites, were in a single row, i dont know how your sprites are arranged.
To animate it just change the X and, or Y scale position by 1.
Let me know if you have any questions and if this helped you.
Ps. Cant wait to play retro final fantasy like games in roblox!!!

1 Like

You can continue to use ScaleType.Fit alongside sprite sheets if you set the ImageRectSize to the size of an individual sprite frame and then the ImageRectOffset to choose which frame you want.

You can even use negative values in ImageRectSize to flip sprites, although you’ll need to fiddle with the offset, as well.

2 Likes

Thank you & thank you to @MysteriousVagabond as well! I’ll try these solutions out and let you know what the results are! I’ll mark as the solution whichever method is my favorite.

Luckily, this shouldn’t be a problem. I arranged the sprites so I can update a character’s animation by moving along the X axis and change which character I’m working with by moving along the Y axis:

Very glad to see someone who recognized that this project is based on Final Fantasy IV! This is mostly just a tech demo and I certainly won’t release a full recreation of the original video game unless I make some serious modifications and replace all official sprites with fanart since I don’t want to violate the intellectual property rights of the copyright holders, but I’ve always been passionate about this genre so trying to recreate a scene from one of the games is helping me to get the motivation I need to create a functioning product :slightly_smiling_face:

3 Likes