How to make a circle button?

Questions & Answers
1

I have a bunch of buttons being instantiated in my scene in random positions, sizes, and colors using this c# script:

for (int i = 0; i < 10; i++) 
		{
			colorSetter = Random.Range (Random.Range (Random.Range (1, 2), Random.Range (3, 4)), Random.Range (Random.Range (5, 6), Random.Range (7, 8)));
			
			size = Random.Range (1, 3);
			
			circle.gameObject.transform.localScale = new Vector2 (size, size);
			
			if (colorSetter == 1)
			{
				circle.image.color = blue;
			}
			if (colorSetter == 2)
			{
				circle.image.color = red;
			}
			if (colorSetter == 3)
			{
				circle.image.color = green;
			}
			if (colorSetter == 4)
			{
				circle.image.color = grey;
			}
			if (colorSetter == 5)
			{
				circle.image.color = pink;
			}
			if (colorSetter == 6)
			{
				circle.image.color = yellow;
			}
			if (colorSetter == 7)
			{
				circle.image.color = cyan;
			}
			if (colorSetter == 8)
			{
				circle.image.color = purple;
			}
			
			GameObject newObject = Instantiate(circle.gameObject, new Vector2(Random.Range(0, 500), Random.Range(0, 750)), Quaternion.identity) as GameObject;
			
			newObject.transform.SetParent(canvas);

		}

in the editor I have a button prefab that I use to instantiate. this button has a circle for the “Source Image” section of the “Image(Script)” section under the button. I need it so you must click on the art work of the button for it to be triggered, currently if you click anywhere inside the rect transform of the button it activates. It NEEDS to be so you must click on the artwork to activate the button. I have done a lot of research on this but all I can find on this, either uses the old UI system, or uses an incredibly complex mathematical equation using calculus and trigonometry. I however am using the new UI system and the most complex math I know is some algebra. Is there a simpler way to do this and if there is would somebody please point me in the right direction to get this problem solved.

Thank you for your help in advance.

3

In order to make circular…

  1. Create a button from canvas
  2. Click button from hierarchy view, and choose rect transform from inspector window.
  3. Reduce the size to 51.69(width) and 30(height)
  4. In the Image script, choose the knob option from the source image.
  5. And check Preserve Aspect.
  6. Now circle shape you will get.
  7. And now if you want to resize the circle… then change the scale values… you will get a beautiful circle.:slight_smile:
2

Take the position of the touch and check its distance with the position of the button (considering this one is in the middle of it).

If the distance is less than the diameter of the circle, you are inside.

float distance = Vector2.Distance(button.position, touch.position);
if(distance < circleDiameter){
     // Pressed
}