[SOLVED] Help with 9 Slice

I’m pretty sure you can in fact use 9 Slice for this.

Here, you can see how a 9 slice functions. In your case you can have the line subdiving the top chunks to be under your light part, which should result in it not being scaled with everything else.

3 Likes

Hi! Thanks for your reply! I did read this and it was confusing still. Could you possibly use a drawing tool on the second image I sent you to show me how you think I should have the slice setup to see it it’ll make me understand a bit better?

I’m new to this whole 9 slice thing.

1 Like

image
This is pretty much how the setup should look like, as you can see the top line is below the lighter area of your image, which means it won’t be scaled vertically.

1 Like

I’ll try this tomorrow with my comment on how it turned out. Thanks!

i’d just set the BackgroundColor of the TextLabel on top :man_shrugging:

1 Like

But then I have to put a round corner thing in it and it’ll round all 4 corners

1 Like

you can use UICorner with a CanvasGroup instead

1 Like

What is a canvas group? I’ve heard of it but I’m not sure what it does or mean.

1 Like

I’ve used the exact same slice setup and it didn’t seem to work properly

This is the result + slice setup used on the mobile emulator
image
image

This is how it should look for all devices
image

1 Like

they help a lot when you want to make everything transparent or if you want to use UICorner differently

1 Like

Ohhhh, thanks!

Doesn’t having a lot of Canvas Groups use more memory? Most of my UI in the game will have this design and some how I’m also thinking about making a invert colors of this design or a light mode using this design.

Would it be more performant using canvas groups or having 2 separate images the top 2 corners rounded and the bottom sharp corners and coloring them separately?

1 Like

i think it would be better to use canvagroups (it’s what i would do)
but i’m not sure which is better for performance

1 Like

Ahh ok, I’m reading the documentation on it… what does it mean by static sizing?

1 Like

static means it wouldn’t change

1 Like

So if I change the size of the ui it might break it?

1 Like

it won’t break it’s only suggesting you use canvasgroup if you’re not going to change it’s size since that would create extra textures which would impact performance

We recommend using CanvasGroup with static sizes, otherwise a new texture would need to be created to accommodate new sizes.

ngl i just learned this

1 Like

I’m having text scaling problems + images and texts go blurry using canvas group + Using UICorner not looking good when scaling. Any ideas how to fix? The one on the left is Frames + Images as the background and on the right is the canvas group. Edit: I might of fixed it.

image

1 Like

If you’re still going for 9 Slices, you might wanna look after the SliceScale property which as its name, scales the slices.

What is SliceScale

image

Since 9 slices would ignore or limit some regions to certain scaling as seen in the image above, if we let’s say want to make the corner look smaller we would need to use the SliceScale Property.

image

Above is an example of 9 slices ImageLabels with different slice scales.

The problem with SliceScale is that isn’t responsive or scales with the screen size, that’s why when you use a smaller screen the topbar still looks big. I’ve read a post that tries to make it dynamically sized though I haven’t tried them personally. But it’s something to look for.

Possible solutions:

Hope this helps.

2 Likes

I might just stick with canvas groups for a now. Thanks anyways!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.