- Home /
How to make a circle button?
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.
I can give you some other possible solutions to your issue.
You can use your artwork as GameObjects. To do this you would just need to make sure that the user has touched a point that overlaps the collider of that specific gameobject (fake button). If done this way, you can choose to SetActive the button GameObjects when the art work is clicked on.
Create prefabs of every color and adjust the scale as necessary. Then when you instantiate each one individually, they should for the most part do what you're expecting so long as it's scripted correctly. If done this way, the buttons should also be SetActive.
And if I might suggest. Ins$$anonymous$$d of running that many if statements, you could increase efficiency with the use of a switch.
I hope I understood your problem and didn't go all wonky on you.
Thank you for your comment. Using the switch does seem to work better for what I'm doing. I have tried #2 of what you said, however it does not seem to work, maybe I just don't fully understand how to do that. I created each color as a prefab and then instantiated that however, you can still click anywhere within the rect transform and it will still trigger the button. On #1 in your comment, you said "you can choose to SetActive the button GameObjects when the art work is clicked on" I took this as, I would add a collider to the button and create a script so the button activates when the collider has been clicked. Is this correct and if it is could you possibly help me out with some of the scripting, I am still fairly new and I don't understand how to do some things yet.
1) Add a collider to the artwork (as a sprite). Check touch overlap on the collider attached to the artwork. If the user touched the artwork where you want them to, button.SetActive (true). button being the name of your button GameObject.
2) Access the Transform (Type) component of the gameobject. This is where you can adjust the position, rotation, and scale. You can increase the scale by x, y, and z.
If any of this is too complicated for you, I suggest doing some research on what Types are, how they relate, and their purpose.
Example of your switch:
for (int i = 0; i < 10; i++)
{
colorSetter = Random.Range (1, 5)
size = Random.Range (1, 3);
circle.gameObject.transform.localScale = new Vector2 (size, size);
switch (colorSetter)
{
case 1:
circle.image.color = blue;
break;
case 2:
circle.image.color = red;
break;
}
What the heck is that:
Random.Range (Random.Range (Random.Range (1, 2), Random.Range (3, 4)), Random.Range (Random.Range (5, 6), Random.Range (7, 8)));
I have a feeling you don't understand what Random.Range does... First of all when using integers the max value is exclusive. So Random.Range(1,2) will always return 1. Likewise Range(3,4) will always return 3 (5,6) => always 5 and (7,8) => always 7
So what you're actually doing is this:
Random.Range (Random.Range (1,3), Random.Range (5,7));
That's also a bit strange you pick a lower limit of 1 or 2 and an upper limit of 5 or 6 and then pick a number between 1/2 and 5/6. That will make 1 and 5 quite rare and 2,3,4 more likely.
If you want a random number between 1 and 8 (inclusive) you just have to use
Random.Range(1,9)
Thank you for your comment. You are correct in saying that I don't fully understand Random.Range, your solution works beautifully and it has immensely simplified that part of my script thank you.
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.:)
thanks. it also worked for me, but i only got problem with black borders :(
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
}
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.
Your answer

Follow this Question
Related Questions
Multiple Cars not working 1 Answer
Distribute terrain in zones 3 Answers
Transfer items between inventories with a button 1 Answer
Making a bubble level (not a game but work tool) 1 Answer
How to change anchor? 1 Answer