How to Make 9-Sliced Frames Scale Properly Across Devices

Help and Feedback Game Design Support
#1

Hello, I am a novice UI designer who is currently working on an unnamed project. For the games UI, I have been using 9-Slice which seemed to work fine until I changed the device the game was played on. When switched to mobile, the boarder noticeably becomes much larger and in doing so obscures the frame’s contents. Here is an example:

On Average PC: (Intended Look)

image
image1341×754 90.6 KB

On an iPhone XR:

image
image1182×574 64 KB

On an iPhone 4s:

image
image865×577 115 KB

Now obviously nobody will be playing this game on an iPhone 4s, but I used it as the most extreme example to demonstrate the distortion that occurs.

Is there any remedy to making the 9-Sliced boarders scale correctly with each device? I have tried UIAspectRatio, but it does not seem to preserve the images original size.

Any help or feedback is appreciated. Thank you for your time!

(UI Help) 9-Slice image not scaling properly across devices
#2

Still haven’t figured out a solution 3 days after posting this… I’m assuming that there is no way to correct this issue given 9-Slices behavior. This leads me to believe that different variations must be made for each type of device unfortunately. Really hope I’m missing something. Any reply helps. Thanks.

2 Likes