How do I make nicer UI buttons?

Unity Engine
1

I have UI buttons (in a VR app) that I would like to make “cooler” but I don’t quite understand what I need to modify. I suspect the Image/Source Image/UISprite needs to be replaced with a sprite of my own. (If I’m wrong please let me know).

I think I could manage to create a sprite but I wanted to see what that default one consisted of (dimensions, etc.). I can’t find that sprite on my computer, anyone know where it is?

Or is there an optimal size/shape that I should make mine to conform with the default? I just want to try to make a more metallic look to the buttons and (maybe) to eliminate the darkened edge around the default one.

Any pointers as to where I should start would be appreciated.

2

I think that one is built in.

What you want is a sprite, and you import it as a sprite and then set up 9-slicing so it can be used on arbitrary-shapedbuttons.

Here’s some docs:

https://docs.unity3d.com/Manual/9SliceSprites.html

Slicing applies to both a SpriteRenderer (not UI) as well as usage in a UnityEngine.UI.Image, which is what the default UnityEngine.UI.Button class co-operates with.

1 Like
3

Thanks for the quick reply. I was messing around in the meantime and I turned a .png file into a sprite and added it to the button. It worked so I’m on the right track. Installed the Sprite editor and found a couple of videos about it.

So now (I think) I just need to know if there is some optimal image size to use. It may as well not be larger than needed. I also managed to round the corners on my test image but didn’t do a good job of that. And the dark border is gone so I’m probably headed in the right direction. :eyes:

4

Oooh I have glossy buttons!

5

So you know too, if you are using UGUI and have specific questions, you can find the dedicated forum here.

6

I wouldn’t overthink that. :slight_smile: