Bug/Limitations of 9-Slice and UIAspectRatioConstraint

BUG/LIMITATION:
UIAspectRatioConstraint seemingly does not apply to images with ScaleType set to “Slice”.

OBSERVATION:
The following are two images of the same CombatGUI for my game, but the only difference is the Aspect Ratio emulated in studio (these differences are visible in-game aswell).

[1920 x 1080]

[480 x 320]

As you can see, the Specials GUI (1, 2, 3, 4 + G) are perfectly fine, while the Health and Stamina GUI (blue and green bars) are sized and positioned incorrectly.

The only difference between these two sets of GUI, other than their size and positions, are their ScaleTypes. One set is set to Stretch (Specials), while the other is set to Slice (HP+Stmna).

When looking at the image in 1920x1080, you can see that the image corners roughly touch their bounding box, making it similar to the Stretch or Fit ScaleTypes
Slice:
image
Fit:
image
Stretch:
image

However, upon changing the resolution, you can see that the image does not ‘stretch’ to fit its bounding box, unlike ‘Stretch’
Slice:
image

Fit:
image

Stretch:
image

This is despite their AbsoluteSizes staying the exact same, and having UIAspectRatioConstraints throghout the entire observation

CONCLUSION:
Thus, we can conclude that UIAspectRatioConstraint does not apply to sliced images, which resulted in the deformed images as seen above.

REFLECTION/POTENTIAL SOLUTIONS:

  1. UIAspectRatioConstraints now apply to sliced images. However, this may break any experience’s image assets that currently have both modifications put to them, making them deformed from the developer’s intention

  2. New Scale-SubTypes for 9-Slice, called “Default”, “Fit” and “Stretch”. Default would be the new setting that reflects how9-Slice appears in all experiences as of today.
    However, applying the “Fit” or “Stretch” SubType, allows the user to affect sliced images , to act as if they were using the ‘Fit’ (Sliced areas fit bounding Box), or ‘Stretch’ (Sliced areas stretch until unsliced areas reach bounding box). Applying UIAspectRatioConstraint to this image would allow the modified slice image with its Slice-SubType look the same, no matter the resolution.
    This impletation of the bug fix would solve the issue that I am facing, without affecting the current Sliced-Image work of all experiences at once.

FINAL STATEMENTS:

  1. As for why I decided to use 9-Slice for my game, I used it to overcome the ‘Resizing while stretching’ issues with the Stretch ScaleType, aswell as to make a ‘CoverImage’ that blocks out unclipped images that ClipDescendants failed to clip.
External Media
  1. If anyone else had this issue, and had ways to overcome the limitation, feel free to reply below.
2 Likes

SOLUTION FOUND:
Setting the x and y anchor points of the imagelabels to be the same value (for my case: 1, 1), and setting the Top and Bottom Slice Center values to the middle of the image (Y size / 2), worked.
Before:

After:

The only problem remaining problem now is the visual image being slightly deformed whe in certain positions, especially when its moving around or on lower resolutions. Though I think that’s an issue I can’t fix

External Media