- Home /
How to make a button with rounded corners?
How can I make a button with rounded corners.
Answer by Josh_He · Jan 11, 2016 at 07:57 AM
I made a Unity Package for doing such things very fast and directly in Unity. And you're also able to animate the border-radius and border-width.
AssetStore link: http://u3d.as/mYk
FANTASTIC !!!!!!!!!!!!!
BUY THIS ASSET I$$anonymous$$$$anonymous$$EDIATELY !
It's so good !!!!
You are a golden god. These are the kinds of UI tools that should have come with Unity out of the box.
Answer by VildNinja · Aug 24, 2015 at 12:52 PM
Create an image with rounded corners (and blank in the center). Import as sprite, slicing it up so the corners do not get stretched (drag the green lines). http://i.imgur.com/6qwCT9j.png
Set it as image for the Button http://i.imgur.com/gB5VtRY.png
Unity already has gfx with slightly rounded corners for the default UI. But otherwise you'll probably need some vector tool, or just a pack of premade assets. Check the Assest store. There is NO css for the Unity UI if that's what you're asking.
Documentation link that explains this approach more: https://docs.unity3d.com/2019.2/Documentation/$$anonymous$$anual/9SliceSprites.html
Answer by paulwhowrites · Mar 23, 2020 at 07:07 PM
By far the easiest way I've ever found is to just make the button in PowerPoint (rounded corners or whatever design you want), then right click, save as image, drag and drop into unity. Lastly, in the inspector change the Texture Type to sprite (2D and UI) and assign it as the Source Image for your button. Beautifully rounded buttons in just 5 minutes:)
Answer by vElumi · Jul 30, 2020 at 02:26 PM
In case you want procedurally generated mesh:
public class RoundedButton : MonoBehaviour {
[SerializeField] private float width;
[SerializeField] private float height;
[SerializeField] private float borderRadius;
[SerializeField] private MeshFilter meshFilter;
[Button]
private void GenerateMesh() {
var w = width * .5f;
var h = height * .5f;
var vertices = new Vector3[91 * 4];
var j = 0;
for (var startAngle = 0; startAngle < 360; startAngle += 90) {
var p = new Vector3((w - borderRadius) * (startAngle == 0 || startAngle == 270 ? 1 : -1),
(h - borderRadius) * (startAngle < 180 ? 1 : -1));
for (var i = startAngle; i <= startAngle + 90; i++) {
var a = i * Mathf.Deg2Rad;
vertices[j++] = p + new Vector3(Mathf.Cos(a), Mathf.Sin(a)) * borderRadius;
}
}
var triangles = new int[90 * 3 * 4 + 18];
for (var o = 0; o < 4; o++) {
var offset = o * 90;
var aoff = o * 91;
triangles[offset * 3] = aoff;
triangles[1 + offset * 3] = 90 + aoff;
triangles[2 + offset * 3] = 89 + aoff;
for (var i = 3; i < 90 * 3; i += 3) {
triangles[i + offset * 3] = aoff;
triangles[i + 1 + offset * 3] = triangles[i - 1 + offset * 3];
triangles[i + 2 + offset * 3] = triangles[i - 1 + offset * 3] - 1;
}
}
var remaining = new[] {
0, 91, 90,
91, 182, 181,
182, 273, 272,
273, 0, 363,
273, 91, 0,
273, 182, 91
};
for (var i = 0; i < 18; i++) triangles[90 * 3 * 4 + i] = remaining[i];
meshFilter.mesh = new Mesh {vertices = vertices, triangles = triangles};
}
private void OnValidate() {
if (meshFilter == null)
meshFilter = GetComponent<MeshFilter>();
GenerateMesh();
}
}
How can I apply this script ?
I created a script file and copy the code , attached it in a button object, but no rounded corner show, can you help ? thank you so much
Your answer
Follow this Question
Related Questions
I have doubt please help me 2 Answers
GUI.Button press (not click) 3 Answers
GUI Button to create another GUI 1 Answer
Why this simple code doesnt work? 0 Answers