Designing a GUI.Box help/guides?

Hi there!

I would love some help on setting up a GUI.Box’s design.
*I’m very new to GUI, but I’ve gathered the following code so far:


#pragma strict

var showPhoto : boolean;
var windowRect : Rect;
var AddPhoto : Texture2D;
 
function OnGUI(){
   if(showPhoto){
      GUI.Box( windowRect, AddPhoto);
      windowRect = Rect(Screen.width/2-300, Screen.height/2-300, 1000, 600);
	  
   }
}
 
 
function OnTriggerStay(){
   if(Input.GetKeyDown( KeyCode.L )){
   //showPhoto = true;
   showPhoto = !showPhoto;
}
 
}
 
function OnTriggerExit(){
 
   showPhoto = false;
 
}

What I’d like to do is:

  • Assign a certain spot to the left for
    my AddPhoto var, and a text box to
    the right.

  • Make the Box black and transparent.

  • Maybe have an X in corner.

It looks like this at the moment:
alt text

And I need it look somewhat like this:

alt text

I’ve never really played around with GUI before, so any guide or help would be appreciated!
Thanks.

Ok, first as reference my GUI crash course.

What you should do is create a GUISkin and add a custom style at the bottom. You should create a small texture for the box background. Keep in mind that the texture’s transparency is responsible if you can see through it (like the default box texture). The texture can be 3x3 splitted by setting top / left / bottom / right border values in the GUIStyle.

I would always recommend to use GUILayout instead of GUI. Your example would be something like this:

var skin : GUISkin; // assign your skin in the inspector

function DrawPhoto()
{
    GUILayout.BeginArea(Rect(Screen.width/2-300, Screen.height/2-300, 1000, 600));
    GUILayout.BeginHorizontal("YourCustomStyleName");
    
    GUILayout.BeginVertical();
    GUILayout.FlexibleSpace();          // this will align the image at the bottom
    GUILayout.Label(AddPhoto);
    //GUILayout.FlexibleSpace();        // with this it would be centered
    GUILayout.EndVertical();

    GUILayout.BeginVertical();
    GUILayout.Space(50);
    GUILayout.Label(YourCaptionText, "AnotherCustomStyleForTheCaptionText");
    GUILayout.Label(YourDescriptionText, "CustomStyleForTheDescriptionText");
    GUILayout.EndVertical();
    
    GUILayout.EndHorizontal();
    if (GUI.Button(Rect(980,0,20,20),"X"))
    {
        showPhoto = false;
    }
    GUILayout.EndArea();
}


function OnGUI()
{
    GUI.skin = skin;   // make unity use our custom skin
    if(showPhoto)
    {
        DrawPhoto();
    }
}

You can do a lot with the GUIStyle setting in your GUISkin. You can even tweak the values at runtime in the editor and they’ll keep their settings, so watch out.