Possible to have a 9 Slice UI Element?

Hi I need a panel in my UI that uses the 9 slice functionality but the only way I can seem to make a 9 Slice image is by creating a sprite. The problem with that is that I then cant seem to set the sprites z above my existing UI elements. ie its always hidden behind them even if they are on the same layer. Does anyone know how to achieve this?


Is the element with the sprite lower in the hierarchy than the things you want to be below it? The draw order for elements is hierarchy order.

Yes, but that doesn’t seem to make a difference, the sprite always sits below the UI element.

I managed to solve this by creating an additional UI layer (UI_2) above my regular UI layer and putting my sprite in there. It seems a bit overkill, but it works. I would expect the sprites order to be defined depending on its order in the hierarchy even when its in the same layer as UI elements like you say.

You should be able to use the sprite asset in a standard image element. That should negate the need for a 2nd 2D screen

I tried this but the 9 slicing didn’t work. As a regular UI element it just stretched it.

When you make your sprite from the atlas editor, youw ill want to make sure you click on ‘New Sliced Sprite From Selection’. Your sprite should then work as a 9-sliced image element.

Just had a go here: https://playcanvas.com/editor/scene/1139794

Seems to be fine.

Are the layer that the UI is on has the rendering order sort set to manual?

Continuing the discussion from Possible to have a 9 Slice UI Element?:

eproasim I just tried to find those options but my Texture AStlas>Sprite editor has none of those options. It looks like this…

I couldn’t find any options to edit like that on the sprite>sprite editor either.


Select a frame in the sprite editor. That will give options that eproasim had

Thanks but it didn’t do anything. In your example is everything an image element (ie no sprites)? I cant select a sprite to be the Texture for an image element. That seems to be the issue.

I can only select a texture, and the texture doesnt have the slicing information presumably?

Hi @Grimmy,

I hope that this video capture helps you.

If you already have a texture defined, please make sure you remove it from the image element to make the sprite option appear.

Isn’t that what you wanted? A 9 sliced UI element? The UI element is referencing a sliced sprite asset. The blue button is the sliced sprite asset on a UI element.

Okay I see it now. Thanks! The problem was that I couldn’t see that I could assign a sprite to an image element because I had already assigned a texture, which in turn removes the options to add a sprite or material.

1 Like