Question How does slicing in UI Tookkit works?

The only thing I can find in documentation about slicing in css is to instead use sprites. Sadly, due to the current state of UIT I can't do that.



I've sliced my buttons into 3 parts, put everything together by using Visual Elements, but the right part is above the text, and I can't change it.





So I've tried to use that built-in slicing feature, and it doesn't work? Or I have no idea how to use it, the picture is stretched.

 

You may be observing the same bug I reported here just a few hours ago:

https://forum.unity.com/threads/bug...i-toolkit-creating-abnormal-behavior.1235770/

Even when using a sprite it doesn't seem to be respecting the slicing properly and things are getting distorted. Hopefully Unity will fix this or explain to us the solution.

In principle if you're slicing in UI Builder you can set the slices in the section for this. If you're programmatically generating your elements in C# then you can make a 2D sprite within the Editor and then load it via code from a folder named "Resources" with:

Code (csharp):

1. VisualElement newElement = new VisualElement();
2. newElement.style.backgroundImage = new StyleBackground(Resources.Load<Sprite>("name-of-sprite-file"));

I believe that's the right syntax off the top of my head.

But as noted in my thread it still won't stretch quite right.

So it may not be anything you're doing wrong though I can't say for sure. If you're using UI Builder, can you screencap where you set the slices? There are fields for the slice locations and I think three different ways of stretching the element. If you screencap that part we can see what you did.

 

After your comment, I've decided to play with slicing once more, and it seems to work now.



The issue to me is that now, I have to put some weird, random numbers to make it work. If it's too small, then nothing happens. If it's too big, the texture will start repeating like this.



Not sure what's going on, how to guess a good number but at least it will work. And yeah, the picture is always stretched a bit.

 

The slices are based on pixel positions. In theory. If you open up the image in the sprite editor you should be able to see where you want to put them from that. You can grab and drag the slice lines in the slice editor. Then you should be able to copy and paste the "left" and "right" positions from where the sprite editor tells you that you are putting them.

My guess is if it's too big the slice line falls outside the actual image and then it does weird things like repeating.

The final mild stretching issue looks like we'll have to wait for Unity to fix or reply about.

 

Also I should mention that rather than setting the sprite slicing here you can also just select the image in your Editor, switch the texture/image type to "2D sprite", and then open it in the Sprite Editor from the button there and set the slice positions. Then it will be applied for every time you use that sprite later.

If you do it that way you won't have to enter the slice positions manually in the UI Builder. Otherwise if you always set it in the UI Builder like this you'll have to do it manually for every instance.

 

Seems like that was the answer I was looking for. Now my button works even though it's still is a tiny bit stretched. For now, it works well enough. I hope that some unity dev will read this and do something to make it clear I have to put pixels in there.

I either don't understand what I'm supposed to do or that's not possible.
First I would have to go outside of UI builder, select that texture and change Sprite mode from single to multiple.
Then after cutting, I would have to select sprite in CSS class, but I need one Visual Element and there are 3 sprites.

 

Working with this today in 2022.1.8f1
Maintaining the slice values in the sprite editor without setting values in USS editor (unset) doesn't work at all. And I am working on a pixel art game, where a single pixel makes a big difference.

The only way the sprite displays correctly is to override the slice values in the USS editor, using the same numbers as the sprite editor.

 

At all? In UI Builder did you change background image to sprite in the dropdown menu?

 

Here is the sprite in question:

I tried every combination of settings possible . This is what it looks like without slice values, in sprite mode:


This is the expected look, using slice values and texture mode (I can't explain, but it works reliably)

 

I have the same problem and could not find any (temporary) solution to that yet.

@mcoted3d the "Full Rect" setting did not work either. I tried out some newer Unity Versions:
2022.1.11f1 and 2022.2.0b3
but had no luck with that. The USS property -unity-slice-scale was also unknown in these versions. Are there any news in which version the sprite-slice-fix will be released and when?

I will stay with version 2021.2.13f1 for now to move the UI to the new UI toolkit. In this version sprite slicing and scaling works fine.

 

I created a new blank Unity project (2D, Core) with version 2022.1.11f1 (Apple Silicon) for a simple example.

Here are the the settings of the sprite (Sprite Mode: multiple) in the inspector and from within the sprite editor (slicing).





Following is the result in the UI Builder. The outer dark gray frame should be only 1px but it is why too large. It looks like the sprite is some what scaled up.



Down below is the UXML code. There are just to simple Visual Elements and the one in children holds the sliced sprite.
I tried other

-unity-background-scale-modes

as well but with scale mode

stretch-to-fill

I got the best results.
There are no custom USS styles involved.

Code (CSharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
2.     <ui:VisualElement style="flex-grow: 1; flex-shrink: 0; height: 360px; width: 640px; flex-direction: column; align-items: center;">
3.         <ui:VisualElement style="width: 100px; height: 20px; top: 60px; background-image: url(&apos;project://database/Assets/Sprites/Frames_and_Panels_SpriteSheet.png?fileID=1060739838&amp;guid=401fa55a421124970a02f22c2fac40cc&amp;type=3#panel_1px_rounded&apos;); -unity-background-scale-mode: stretch-to-fill;" />
4.     </ui:VisualElement>
5. </ui:UXML>

 

@BusyRoots that is the issue I was having. I was only able to make it work by setting the image to texture mode instead of sprite.

Maybe you can make a sample project from your code and submit a bug report

 

I tried this as well but unfortunately it didn't help and to be honest I don't want to transform all my sprites to textures.
I think the slicing can be fixed to work with sprites, too. I will create a bug report for this behaviour with the the example project, which I mentioned above (and where the screenshots are from).

 

Thank you for looking into that issue. That's interesting.
I created a bug report from within the mentioned minimal example project. I will post the link to the bug as soon as I get the mail response from Unity.

 

The bug can now be found in the unity issue tracker:
https://issuetracker.unity3d.com/is...s-not-created-when-slicing-a-pixel-art-sprite

>>>There are currently 9 votes needed. <<<
Please vote on this issue if you want it to be fixed as well.

 

Thanks for taking a look. Bringing all sprites to a pixel-per-unit value of 100 would be a huge refactoring and I really don't want to do that (all drawn pixel art sprites, camera script, moving pixel perfect, shader snapping to the pixel grid, etc.).

Regarding the style value

-unity-slice-scale

it is unknown in unity version 2022.1.11f1
See my previous thread entry from above.

 

I tried out option "2" and used Unity version 2022.2.0b10 (only the beta version is available yet).
The

-unity-slice-scale

parameter changed something but unfortunately it is not correct (see screenshots below).

The boarders of the bottom button with the blank white content are way too thick, they should be "1px" wide like the border of the top button with the text "Button".


I double checked the bug in the issue tracker and the slicing problem was encountered all the way up to a unity alpha version 2023.1.

 

I finally figured it out.

I also thought a unity-slice-scale value of 1/16 (0.0625) is the solution. But the button frames were not pixel perfect. Visually it seamed like the value needed to be about two times as large. But this was not correct either. Anyway the correct factor is:

unity-slice-scale = [your sprite pixels per unit value] / 100
→ in my case: 16 / 100 = 0.16

That means the following code did the trick:

Code (CSharp):

1. -unity-slice-scale: 0.16px;

Note: Without the added unit "px" there will be a warning saying a unit is missing. Works in Unity beta version 2022.2.0b10

Below is the final result. The green element has the reference 1px border, the blue elements use sliced sprites set in the sprite editor, a pixel per unit value of 16 and the

-unity-slice-scale: 0.16px

in there uss styles. Above all elements is a transparent 1px grid sprite to unsure that everything is pixel perfect.

To be completely safe, I tested it with a random pixel per units value of 23. After adjusting the -unity-slice-scale to 0.23px everything was pixel perfect again.



@mcoted3d Thanks for looking into this. Do you know when the release date of Unity 2022.2 (release version) will be?

 

No problem.

Will the uss property

-unity-slice-scale

stay in that version or is it a temporary property?
Because the UI Builder could get the sprites pixel-per-unit value internally by itself and take it into account when the sprite gets sliced. In that way there would be no need to for the

-unity-slice-scale

property.
Or is there another need/reason for this property?

 

Alright. It would be great if the documentation for the

-unity-slice-scale

property in the uss properties references table page and the slicing code example would be expanded.
The mentioned reference value of 100 pixel per unity and a small code example (like the example above) on how the value is calculated and which unit is required would be super helpful.

 

Never managed to make slicing work (Unity 2022.2.17). In my case I want only 3 slices, not 9. So I leave top and bottom slice values to 0, and setting only right and left values.

The sprite was set to 100ppi in the importer to avoid scaling issues.

Two observations:
1. Slices are not picked up from the sprite editor. They are simply ignored.
2. Slicing with UI builder produces different artefacts, but never the intended results.

I suspect that may happen due to somewhat complex layout I have in UXML (it generates errors about recursive layout but otherwise works fine).

I guess I'll just use 3 different sprites with different stretching modes and call it a day. Just a forewarning to anyone who would rely on slicing in UI Toolkit: it is not guaranteed to work under all circumstances.

 

It works to slice a game asset border...