Quick GUI button question

Unity Engine
1

I’m still learning how to create GUIs in Unity so these are probably elementary questions.

  1. I have a picture of a circle that I want to use as a button. The picture has an alpha channel so everything outside the circle is transparent.
    The reference section for GUI.Button says that I have to use Position : Rect for the buttons. When I do, the entire picture (inside and outside the circle) turns into a button. That isn’t my desired result as I just want the circle to be the button and not the entire area. Can someone point me in the right direction?

  2. In addition to the query above, I have another question on buttons and their ‘priority’ (for a lack of a better term off the top of my head). I have two pictures of a circle - one larger than the other. The smaller circle is in the larger circle. The desired result is if I push the larger circle with the mouse (squeek), a message is printed out saying, “Larger button pressed.” When I push the smaller button, a message is printed out saying, “Smaller button pressed.” However, the result is when I push either button (large or small), it just registers the larger button.

Any thoughts on how I could correct these issues would be most appreciated. Thanks,

-S

2

Hello Sevisin,

for question 1)

I would create a GUI Skin Once you have created the skin Give it a name and then in the inspector you will see “Custom Styles” make it whatever size you like 2 (one for small button and one for big Button) I named mine Ok and Invite

Im attaching an image so you can see the Inspector of My Ok and Invite buttons

If the image you have is transparent around the edges click on the image and select Texture type (GUI) this will make the size look nice I think the default is Texture.

now click back on your GUI skin that you created Drag and drop in the image in the Background filed of the name you gave in the Custom Styles.

Ok time for the scripting part:

var yourSkin : GUISkin; Drag and drop your skin into this variable

var yourSkin : GUISkin;


function OnGUI()
{
	GUI.skin = yourSkin;
	
         
   		  //Ok Button Change the size 229 x 75 to your image
   		if (GUI.Button (Rect (65, 172, 229,75), "", "Ok")) //Replace OK with your BigButton Name
   		 {
   		 	//code for when clicked
   		 }	
   	 
   		//Then another If statement for your small button
}

Thats it you should now have a transparent Button with your image that is clickable the only draw back is that if its a round button it will still be clickable from the square of the image, so you might want to crop the tranparentcy as much as possible.

Sorry I cant help with question 2? I just dont know

474195--16662--$Picture 6.png
474195--16662--$Picture 6.png397×544 17.9 KB

3

@zeek
Thanks for the reply! I’ll check it out later tonight and see if I can find a solution to #2. I theorize it may have to do with GUI.depth and/or GUI groups.

If anyone else has any input on the subject, that’ll be great.

Thanks,

-S