Currently I’m trying to make the UI for my game cleaner and easier to deal with and look at, and I’m running into an issue when making the main menu design.
I have a shadow image parented to the bars to give it more detail, done using a 9-slice image with its Y position scaled up a bit more than the original image. It looks fine in Studio’s default window from where I designed it, but on other devices it gets a little funky.
The shadows on screens that are bigger than the viewport are way bigger than they’re supposed to be, and vice versa for smaller screen sizes, making it look like the shadow wasn’t even there in the first place.
How it should look like:
Average computer monitor:
Average phone screen:
It looks very jarring on other devices, and I have checked the settings of the shadows and they’re fine (It scales fine without using a 9 slice image)
Here’s the settings I have for the image:
I tried to look up on how to fix this and I found 2 threads on here with the exact same problem, unfortunately with no responses…
How to make 9 slice scale between devices
How to Make 9-Sliced Frames Scale Properly Across Devices
So I guess third time’s the charm, I’d appreciate any help on how to fix this strange issue.