Search Unity

Question Tiled slice mode in UI Toolkit / Builder?

Discussion in 'UI Toolkit' started by NNSkelly, Feb 10, 2023.

  1. NNSkelly

    NNSkelly

    Joined:
    Nov 16, 2015
    Posts:
    35
    Tile Mode (as per https://docs.unity3d.com/Manual/9SliceSprites.html ) was a great way to get a pixel-clean but visually engaging background to UI boxes of widely varying sizes and aspects, frequently without even needing to make a source texture more than ~64x64. I'm not seeing anything like tiled mode in the current UI Toolkit documentation, however, and the default slice behavior appears to be to stretch everything but the corner slices. This seems to mean that if your center or sides are anything but flat colors or smooth gradients, they will be stretched and blurred to heck, and a project will need independently baked source textures for pretty much every size and shape of window, largely defeating the point of slicing.

    Is tiled slicing possible in UI Toolkit? If so, how (manually typed USS is fine)? If not, is this a planned feature?

    Riffing off a very simple repeated-pinstripes pattern a la classic Phantasy Star Online, a single 64x64 square PNG can look great filling a narrow box spanning most of a 1920x1080 screen space in ye olde 2D Sprite UI system, but seems to only be able to look like hot trash in UI Toolkit.
    tiled.png UIBuilder.png
     
    NNSkelly, Feb 10, 2023
    #1

  2. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    480
    Hi @NNSkelly!

    Unfortunately, this is not possible out-of-the-box today. You can use 9-sliced sprites (by either setting up the sprite directly or using the slicing style properties) and you can use tiling (background-repeat and other related style properties), but you can't use both at the same time to achieve sliced tiling.

    One (suboptimal) workaround would be to use two visual elements:
    • One with a 9-sliced sprite for the border
    • One with the "content" that can be tiled using the background-repeat style properties
    It is suboptimal because it doesn't fix the stretching issues that would appear on the borders.

    Hope this helps!
     
    martinpa_unity, Feb 15, 2023
    #2

  3. ElevenArt

    ElevenArt

    Joined:
    Dec 12, 2012
    Posts:
    17
    Hi, slicing in your solution is working, but your scale mode setting is set to stretch-to-fill. Have you tried changing the scale mode?
     
    ElevenArt, Feb 15, 2023
    #3

  4. vallis_unity

    vallis_unity

    Joined:
    Apr 14, 2022
    Posts:
    73
    Is supporting this combination out of the box on the roadmap, or is the workaround the only option?
     
    vallis_unity, Mar 12, 2023
    #4

  5. benoitd_unity

    benoitd_unity

    Unity Technologies

    Joined:
    Jan 2, 2018
    Posts:
    331
    Hello, could you please report a bug about this limitation? It seems the feature is not working as expected and we'll try to see if this can be prioritized.

    Thanks!
     
    benoitd_unity, Mar 22, 2023
    #5
    RageAgainstThePixel likes this.

  6. Big_Friggin_Al

    Big_Friggin_Al

    Joined:
    Jan 9, 2014
    Posts:
    37
    Are there any plans to have unity support 9-slice tiling?
     
    Big_Friggin_Al, Sep 27, 2023
    #6

  7. Hellfim

    Hellfim

    Joined:
    Sep 11, 2014
    Posts:
    123
    Hellfim, Sep 28, 2023
    #7

  8. Alex16212

    Alex16212

    Joined:
    Dec 20, 2018
    Posts:
    41
    Unlike the topicstarter, I achieved unblurred behaviour for my 9-sliced texture. But tiling not. Please explain, is the feature of tiling is still under development, or is it another feature, which already works, and I need to make some changes to achieve the tiling?

    In my case, the original texture source is this 48x48 pixels PNG image with transparency (each smallest uncolored square is transparent):
    upload_2023-10-27_13-15-46.png

    So, I imported it two times - as a normal texture and as a sprite:
    upload_2023-10-27_13-25-57.png

    Through the UI Toolkit Builder I added a Visual Element with the texture as background and a ListView with the sprite as background (each smallest square has 4 pixels size in the original texture source, so I sliced 16 pixels from each side):

    upload_2023-10-27_13-32-52.png


    In runtime it looks like this:
    upload_2023-10-27_14-8-4.png


    So, there is no tiling as it described here for the SpriteRenderer.


    The desirable behaviour should be like this:
    upload_2023-10-27_13-58-8.png
     
    Last edited: Oct 27, 2023
    Alex16212, Oct 27, 2023
    #8
    obliviouschimp and DrViJ like this.

  9. obliviouschimp

    obliviouschimp

    Joined:
    Jul 30, 2021
    Posts:
    1
    Same issue with tiling

    See attached attempting to create basic dashed line border.

    Any fixes or workarounds suggested?


    Screenshot 2024-01-24 at 12.37.00 PM.png
     
    obliviouschimp, Jan 24, 2024
    #9

  10. RageAgainstThePixel

    RageAgainstThePixel

    Joined:
    Mar 11, 2020
    Posts:
    66
    I keep seeing "not supported" over and over again. Do we at least have an ETA on this?
     
    RageAgainstThePixel, Jan 25, 2024
    #10

  11. jpdodson42

    jpdodson42

    Joined:
    Dec 26, 2017
    Posts:
    2
    Here to say I had same experience, really wish that this feature would be possible soon, it's a really core function of UI and makes me want to backtrack to old UI.
     
    jpdodson42, Feb 6, 2024
    #11