Search Unity

Background repeat?

Discussion in 'UI Toolkit' started by rastlin, Jul 8, 2019.

  1. rastlin

    rastlin

    Joined:
    Jun 5, 2017
    Posts:
    127
    So yeah, when can we expect to be able to control background repeat patterns? Similarly to repeat-x/repeat-y properties of css background-repeat.

    It seems pretty easy to implement, it just require some uv calculation for rendered texture depending on the setting. The current options available for background cropping produces really terrible results on non-fixed rects.
     
    rastlin, Jul 8, 2019
    #1
    Yecats likes this.

  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi rastlin,

    Background repeat would be a nice feature to have indeed.
    However, it won't be available in the near future but is on the road map.

    As a side note, UIElements store textures into an atlas to provide a fast rendering which then makes background repeat not straightforward to add.
     
    jonathanma_unity, Jul 11, 2019
    #2

  3. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    I was wondering if this is still coming and if there will be an option to also animate its UVoffset?

    Thanks!
     
    MousePods, Oct 27, 2020
    #3

  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    It's not on our immediate roadmap, which means unlikely to be implemented in the 2021 range.

    That said, you can use the custom mesh UI Toolkit API to create your own mesh that does repeat its texture via your own UVs (which...you can then also animate). Here's the documentation for that:
    https://docs.unity3d.com/ScriptReference/UIElements.VisualElement-generateVisualContent.html

    More details and examples here:
    https://forum.unity.com/threads/draw-unity-gl-under-ui.914960/#post-5996561
    https://forum.unity.com/threads/solved-drawing-a-curve-onto-an-element.691882/
     
    uDamian, Nov 11, 2020
    #4
    MousePods likes this.

  5. oobartez

    oobartez

    Joined:
    Oct 12, 2016
    Posts:
    167
    We need this too! The built-in 9-slice background is very limited and hey, any actual game needs custom borders right? Unless you go for an all out flat design but I'd still estimate some 75% of games need this.
     
    oobartez, Jan 9, 2021
    #5
    RageAgainstThePixel likes this.

  6. JasonBricco

    JasonBricco

    Joined:
    Jul 15, 2013
    Posts:
    956
    Over a year later, any update? I’m not sure how this isn’t a high priority considering how many games I’d think need this (including mine). Does everyone make flat UI?
     
    JasonBricco, Apr 17, 2022
    #6

  7. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    MousePods, Apr 17, 2022
    #7
    RunninglVlan and JasonBricco like this.

  8. niuage

    niuage

    Joined:
    Nov 17, 2019
    Posts:
    123
    UI Toolkit is so frustrating at times. It promises a web-like workflow and features and then you realize you can't repeat a background image? :'(

    It was "in-progress" a year ago, almost exactly :D
     
    niuage, Apr 30, 2022
    #8
    RageAgainstThePixel likes this.

  9. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi, here's a small update. There's a pull request open and ready to merge that adds background-repeat, background-position and background-size properties.
     
    jonathanma_unity, May 9, 2022
    #9
    RageAgainstThePixel, bajja, TeorikDeli and 6 others like this.

  10. niuage

    niuage

    Joined:
    Nov 17, 2019
    Posts:
    123
    Excellent \o/

    ps: I think in the current version, there's a sort of background-size property in the inspector, with 3 options (cover, contain etc). Each of these options is an icon. But hovering over the icon iirc just displays the unity property name, it doesnt display the value. It would be great to change that, so that we can know exactly what each icon does without trying to decipher what the icon looks like. Just a small request in case you agree it would be a good change.
     
    niuage, May 10, 2022
    #10

  11. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    It's definitely something we want to improve on, there's a task in the UI builder backlog about this.
     
    jonathanma_unity, May 11, 2022
    #11

  12. radianhelixmedia

    radianhelixmedia

    Joined:
    Dec 10, 2018
    Posts:
    8
    Background repeating and scaling as mentioned above would be a huge help.

    Having PPU controls of 9-slices is also essential.

    Here on the Right you can see my uGUI canvas buttons, nice and tidy.

    On the Left, you can see my UI Toolkit buttons. Same art, same 9-slices, same absolute pixel sizes -- wildly different results.

    The ability to set the Pixels Per Unit to control texil density would be a huge help. It seems the workaround up above is to use meshes to control this, but that's a bit of a pain when it could, and should be right there in the options, like it was in the inspector for uGUI.
     

    Attached Files:

    radianhelixmedia, May 12, 2022
    #12

  13. Midiphony-panda

    Midiphony-panda

    Joined:
    Feb 10, 2020
    Posts:
    243
    Midiphony-panda, Jun 6, 2022
    #13

  14. ncerone_unity

    ncerone_unity

    Unity Technologies

    Joined:
    Jan 13, 2022
    Posts:
    36
    Hi, the background-repeat (background-size and background-position) feature of UI Toolkit is coming in the next alpha release of 2022.2.
     
    ncerone_unity, Jun 8, 2022
    #14
    rage2050a, pblpbl, ChGuidi and 2 others like this.

  15. spakment

    spakment

    Joined:
    Dec 19, 2017
    Posts:
    96
    An FYI for anyone waiting for this - it's just been released in the 2022.2.0b7, only supported via style sheets, not in the UI Builder at the moment
     
    spakment, Sep 5, 2022
    #15
    RunninglVlan likes this.

  16. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    699
    There is also background-size in 2023.1.0a6, I guess it is in 2022.2.0b7 too, it is a very nice addition.
     
    dlorre, Sep 6, 2022
    #16

  17. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    182
    Doesn't work for me in 2022.2.0b7 =(
    What am I doing wrong?
    Code (CSharp):
    1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    2.     <Style src="project://database/Assets/NewUSSFile.uss?fileID=7433441132597879392&amp;guid=ac8b1643aace9b94dbc432c69888485e&amp;type=3#NewUSSFile" />
    3.     <ui:VisualElement class="bg" />
    4. </ui:UXML>
    Code (CSharp):
    1. .bg {
    2.     width: 100%;
    3.     height: 100%;
    4.     background-repeat: repeat-x;
    5.     background-image: url('project://database/Assets/img_flwr.gif?fileID=21300000&guid=f06bd476ce7795348bd7bd6bcf1b18ed&type=3#img_flwr');
    6. }
    The same code works in browser
    Code (CSharp):
    1. <html>
    2.   <head>
    3.   <style>
    4. .bg {
    5.     width: 100%;
    6.     height: 100%;
    7.     background-repeat: repeat-x;
    8.     background-image: url(https://www.w3schools.com/cssref/img_flwr.gif);
    9. }
    10.   </style>
    11.   </head>
    12.   <body>
    13.     <div class="bg" />
    14.   <script>
    15.   </script>
    16.   </body>
    17. </html>

    Edit: Had to add 
    background-size: contain;
     
    Last edited: Sep 6, 2022
    RunninglVlan, Sep 6, 2022
    #17
    RageAgainstThePixel and Wobbers like this.

  18. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    True. For now. That said, the UI Builder should not forget/reset/corrupt the style if you do manually use it in a StyleSheet. Meaning, if you just want to use it for one selector/element, just add it in a text editor and then continue using UI Builder for the rest of the work.
     
    uDamian, Sep 11, 2022
    #18

  19. sphair

    sphair

    Joined:
    Jan 22, 2014
    Posts:
    4
    Are these changes regarding background-repeat documented somewhere ?
     
    sphair, Dec 30, 2022
    #19

  20. Kokujou

    Kokujou

    Joined:
    Mar 7, 2013
    Posts:
    7
    well thanks for nothing unity :( apparently the background-repeat is affected by the border radius. means, if you have a border radius and use background-repeat you will repeat an image clipped with a border radius...

    that's frustrating for a newbie starting with UI Toolkit
     
    Kokujou, Jun 3, 2023
    #20

  21. Hellfim

    Hellfim

    Joined:
    Sep 11, 2014
    Posts:
    123
    I've reported this issue and they said it's a low-priority which can be easily mitigated (and it is), so there is not estimation on a fix. You can workaround by creating a child with background-repeat.

    Anyway despite of having a simple workaround I believe it's a rather frustrating issue for newcommers, so I pushed them into creating a public issue. If you agree with me I advise you to vote for it's fix.
    https://issuetracker.unity3d.com/issues/uir-sliced-background-ignore-masking
     
    Hellfim, Jun 4, 2023
    #21

  22. RageAgainstThePixel

    RageAgainstThePixel

    Joined:
    Mar 11, 2020
    Posts:
    66
    2024, any update on this?
     
    RageAgainstThePixel, Jan 25, 2024
    #22
    B_ware likes this.