How to set a Button's background texture?

Unity Engine
1

Over the past half year I’ve been trying my best to develop a game from scratch using the Unity Engine and I’m finally getting close, but stepping out of the programming side of things I wanted to make a menu for my game and thus started fiddling with buttons. The crux of the problem is that I have no idea what I’m doing, but more to the point even after figuring out how to position and hook a script up to a button and how to change its text/font and such I still don’t know how to change the texture/image of the button so that it look visually appealing. I tried giving it another material and it went completely black, and when I found that I could give it another source image I could make it have a smushed up version of what I wanted but not rounded at the edges or anything. For reference this is where I’m at;

So I guess my question is, how do I make it so that the button keeps that shape but uses another image as a tiled background that doesn’t get smushed into oblivion? If I need to learn a ton about sprites and you know of a source I’m fine with taking the time to, I just don’t know where to start. Thanks!

2

In your screenshot, see how the image in the lower-right is cut up like a grid into 9 different pieces? That’s called a 9-slice. When you try to render a 9-sliced sprite larger than it’s actual size, it will stretch in such a way that the corners keep their actual size, and the other slices will get stretched accordingly. So what you want is to 9-slice your own sprites.

Select your Sprite in your Asset folder within Unity, then click the “Sprite Editor” button in the inspector. You can then drag green bars from the 4 sides of your image. When positioning these bars, I find it easiest to just focus on the corners that you don’t want to scale. When you’re done, click “apply” at the top of the Sprite editor.

After that, your sprite is 9-sliced, and the button should resize the way you’ve requested. Just make sure your SpriteRenderer or Image component uses the “draw mode” or “image type” called “sliced”.

3

Worked like a charm, thanks so much!