GUI Button The BASICS.

Questions & Answers
1

I need some help guys. Correct me if I am wrong. By the way. I trying to create a small button in left bottom of the screen. I made a gui skin with a set up specific for that button. I set its normal background and active background. my problem is the center button is also using that skin.
How do I prevent a center button to use the gui skin of left bottom button and set its own GUI skin with different sets of background? I was using an object and put a rigidbody so the onmouseup command will work. the problem is the unity keeps showing GUI warning mouse events

public GUISkin mGui;

float nativeWidth = 1080f;
float nativeHeight = 1920f;

void OnGUI()
	{  
		GUI.skin = mGui;
		float rx = Screen.width / nativeWidth;
		float ry = Screen.height / nativeHeight; 
		GUI.matrix = Matrix4x4.TRS(new Vector3(0, 0, 0), Quaternion.identity, new Vector3(ry, ry, 1)); 
		float adjustedWidth = nativeWidth * (rx / ry); 
		float adjustedHeight = nativeHeight * (ry / rx); 

//Left Bottom
		if (GUI.Button (new Rect (10, adjustedHeight + 190, 100, 100), "")) {
			Debug.Log( "Clicked" );		
		}

             //center 
            if (GUI.Button (new Rect (adjustedWidth / 2, adjustedHeight /2 , 200, 100), "")) {
			Debug.Log( "Clicked" );		
		}
	}

34076-untitled-2-compressed.jpg
34076-untitled-2-compressed.jpg830×512 16 KB

2

Nicely phrased question. I see a few possible solutions to this.

  • Assign the skin after the start button has been rendered. Basically move line 8 and lines 15-19 to the end of you OnGUI function.
  • Assign the skin to null before rendering your start button.
  • Create a separate style for both buttons in your skin.

Its also worth considering moving to 4.6 and using the new UI. Its far simpler to work with then skins.

3

You should only have one GUISkin and have all your styles in that one skin. Don’t touch the default styles unless you want to change how a “normal”, “standard” button looks like. For each “special” button like your facebook button you would create a custom style at the bottom of your skin.

In your Button code you have to tell the button which style you want to use:

if (GUI.Button (new Rect (10, adjustedHeight + 190, 100, 100), "", "FacebookButton")){
    Debug.Log( "Clicked" );
}
 
//center
if (GUI.Button (new Rect (adjustedWidth / 2, adjustedHeight /2 , 200, 100), "")) {
    Debug.Log( "Clicked" );
}

In this case you would need a custom style named “FacebookButton”. Just increase the count variable so you get a new custom style at the bottom. Set it up the way you want.

For more information take a look at my GUI crash course.