Background repeat?

[rastlin]

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.

[jonathanma_unity]

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.

[MousePods]

@jonathanma_unity

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.

I was wondering if this is still coming and if there will be an option to also animate its UVoffset?

Thanks!

[uDamian]

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:

Unity - Scripting API: UIElements.VisualElement.generateVisualContent

More details and examples here:

Draw Unity GL under UI

[SOLVED] Drawing a curve onto an Element

Hi all, I’m creating an interface using UIElements and need to draw curves representing connection points that run over the top of some Elements. This used to be easy using the Handles API: Handles.DrawBezier(startPoint, endPoint, startTangent, endTangent, color, null, 5); I have attempted to insert an absolutely positioned IMGUIContainer into the element, and place this on top of everything in order to draw the beziers using the same Handles code, but the IMGUIContainer doesn’t allow click …

[oobartez]

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.

[JasonBricco]

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?

[MousePods]

@JasonBricco

Over a year later, any update?

Great news, its in the “in progress” area!

https://unity.com/roadmap/unity-platform/gameplay-ui-design

[niuage]

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?

@MousePods

Great news, its in the “in progress” area!

https://unity.com/roadmap/unity-platform/gameplay-ui-design

It was “in-progress” a year ago, almost exactly

[jonathanma_unity]

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.

[niuage]

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.

[jonathanma_unity]

It’s definitely something we want to improve on, there’s a task in the UI builder backlog about this.

[radianhelixmedia]

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.

[Midiphony-panda]

@radianhelixmedia

Having PPU controls of 9-slices is also essential.

I had success controlling PPU starting from Unity 2021.3.3f1 :
https://forum.unity.com/threads/scale-sprite-9-slicing-in-background.1243585/#post-8003570

[ncerone_unity]

Hi, the background-repeat (background-size and background-position) feature of UI Toolkit is coming in the next alpha release of 2022.2.

[spakment]

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

[dlorre]

There is also background-size in 2023.1.0a6, I guess it is in 2022.2.0b7 too, it is a very nice addition.

[RunninglVlan]

Doesn’t work for me in 2022.2.0b7 =(
What am I doing wrong?
UXML

<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">
    <Style src="project://database/Assets/NewUSSFile.uss?fileID=7433441132597879392&guid=ac8b1643aace9b94dbc432c69888485e&type=3#NewUSSFile" />
    <ui:VisualElement class="bg" />
</ui:UXML>

USS

.bg {
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-image: url('project://database/Assets/img_flwr.gif?fileID=21300000&guid=f06bd476ce7795348bd7bd6bcf1b18ed&type=3#img_flwr');
}

The same code works in browser
HTML

<html>
  <head>
  <style>
.bg {
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-image: url(https://www.w3schools.com/cssref/img_flwr.gif);
}
  </style>
  </head>
  <body>
    <div class="bg" />
  <script>
  </script>
  </body>
</html>

Edit: Had to add background-size: contain;

[uDamian]

@spakment

not in the UI Builder at the moment

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.

[sphair]

Are these changes regarding background-repeat documented somewhere ?

[Kokujou]

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