Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

How can I scale a background image *before* applying 9-slicing?

Discussion in 'UI Toolkit' started by dthurn, Oct 5, 2021.

  1. dthurn

    dthurn

    Joined:
    Feb 17, 2015
    Posts:
    77
    I have a 512x512 image of a button background:

    Screen Shot 2021-10-05 at 11.38.16 AM.png

    I use this image with Unity's 9-slicing feature in order to let it adjust to new sizes:

    Screen Shot 2021-10-05 at 11.41.10 AM.png

    However, I sometimes want to render this button at a smaller size, say 128x128. This presents a problem:

    Screen Shot 2021-10-05 at 11.37.31 AM.png

    The image of course scales down, but the corners stay the same size. What I would like to do is proportionally scale the image *before* applying 9-slicing.

    Some ideas about how to do this:

    1) Use a flexbox scale=0.25 transformation
    - I think this would work, but it's not feasible because transformations cause havoc for positioning logic (the bounds of your button are no longer where they were during layout)

    2) Just make the image asset smaller
    - This would probably also work, but I don't want to lose resolution in my background image -- shrinking it will cause artifacts on high-density screens.

    Is there another common approach to this which I'm missing? Thanks!
     
  2. AlexandreT-unity

    AlexandreT-unity

    Unity Technologies

    Joined:
    Feb 1, 2018
    Posts:
    358
    Here's two additional options:
    a) Use two elements. The outer one is used for positioning/layout/events, etc. The inner one is an absolute-positioned scaled 9-slice that's used for visuals only.

    b) Define your own mesh using the Mesh API (see generateVisualContent)