How to make a circle button?

Question

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.

Answer 1

Answer by Madhur26 · Oct 04, 2017 at 01:06 PM

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.:)

Add comment · Show 2 · Share

sergioadair · Jun 24, 2018 at 01:22 AM 0

Share

This is the answer! Thanks

unity_dyG3Ag-Fm1v-jg · Aug 13, 2018 at 08:29 AM 0

Share

thanks. it also worked for me, but i only got problem with black borders :(

Answer 2

Answer by fafase · Oct 20, 2015 at 03:33 PM

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
 }

Add comment · Show 1 · Share

Peysbubby · Oct 20, 2015 at 03:36 PM 0

Share

Thank you for your response. As I told Guppie1337, I am fairly new to scripting and there is still a lot that I don't know. would you possibly help me out with some of the scripting.

How to make a circle button?

2 Replies

Your answer

Follow this Question

Related Questions