Hello, I’m working on a GUI for a game I am making and currently as shown in the first picture I am using 2 seperate frames to create a nice background but I’m wanting to use an image instead of 2 seperate frames and still get the same design and I’ve practiced with 9 slice and it looked fine but when I looked how it looked in phone mode the lighter part stretched out a lot instead of staying normal so I’m wondering if I should stay with 2 seperate parts or if it’s fine to use 9 slice if I adjust it properly.
Image 1 (Focus on the background, this was the only image I could find on my iPad using the 2 seperate frames for the background)
Image 2 (I would like to just use this 1 image as the background instead of 2 frames):
Image 2 did work fine for it but if I use the device emulator the lighter grey part will stretch. Is it possible to just use 1 image for the background while maintaining sizes or would I have to use 2 seperate frames?
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.
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?
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.
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?
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.
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.
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
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.
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.
