Dynamic UI Size?

Question

Trying to figure this one out the last couple days with no luck...

When the player selects an object I have a UI that shows the options for interaction (ex.Look At, Open, Use, Give, etc...). Depending on the object the UI would have a different size and options. So for example a Door would have LookAt/Open/Lock while a Book would have LookAt/Read and a Phone could have LookAt/Use etc...

Each object has a script that defines what properties he will have, something like this:

 var isLookAt : boolean = false ;        //Look At
 var isOpenable : boolean = false ;        //Open/Close
 var isLockable : boolean = false ;        //Lock/Unlock
 var isTurnOn : boolean = false ;        //Turn On/Off
 var isSit : boolean = false ;            //Sit
 var isLookInside : boolean = false ;    //Look Inside
 var isUsable : boolean = false ;        //Use
 var isReadable : boolean = false ;        //Read
 var isPickUp : boolean = false ;        //Pick Up
 var isDrop : boolean = false ;            //Drop
 var isTalkTo : boolean = false ;        //Talk To
 var isGive : boolean = false ;            //Give

And the idea is that the UI that shows up on top of the object, somethig like this:

alt text

This UI, depending on what options are true/false in the object would change its contents..but how can I achieve that??

This is my current UI script, I can get the buttons to change based on being true/false on the object but how can I make it so that the amount of buttons and their position changes based on my choices as well as the box that frames them do the same?

 function OnGUI () {
     GUI.skin =  customSkin;
     GUI.depth = 0;
 
   
 //        GUI FOR WHEN THE PLAYER CLICKS ON A OBJECT        //
     if (playerNavigation.leftClickOnObject == true){
         // Converting the selectedObject location to ScreenPoint
         var objScreenPoint = camera.main.WorldToScreenPoint(playerNavigation.selectedObject.position);        
         // defining the values for X and Y for the UI using the selected Object ScreenPoint (so that the UI spawns where the object is)
         var mouseX = objScreenPoint.x;
         var mouseY = Screen.height - objScreenPoint.y;
         
         // Make a background box
         GUI.BeginGroup (Rect (mouseX - 90, mouseY -40, 180,160), "");
             // Frame around the gui with the object name.
             GUI.Box (Rect (0, 0, 180, 160), playerNavigation.objProperties.objName);
             
             // LookAt
             if (playerNavigation.objProperties.isLookAt == true){
                 if (GUI.Button (Rect (0, 58, 180, 31), "LOOK AT")) {
                     //Application.LoadLevel (1);
                     print ("It's my fridge...");
                 }
             }
             // Open/Close
             if (playerNavigation.objProperties.isOpenable == true){
                 if (GUI.Button (Rect (0, 90, 180, 31), "OPEN")) {
                     print ("It's too heavy.");
                 }
             }
             // Look Inside
             if (playerNavigation.objProperties.isLookInside == true){
                 if (GUI.Button (Rect (0, 120, 180, 31), "LOOK INSIDE")) {
                     //Application.LoadLevel (2);
                 }
             }
             // Use
             if (playerNavigation.objProperties.isUsable == true){
                 if (GUI.Button (Rect (0, 120, 180, 31), "USE")) {
                     //Application.LoadLevel (2);
                 }
             }
             
         GUI.EndGroup ();
     }
 }

Any help very welcome! Hope I was clear enough on my question.

Answer 1

Best Answer

Answer by turtsmcgurts · Sep 23, 2012 at 04:51 AM

A friend and I did something just like this for Garry's Mod in LUA, here's how we approached it.

 //In this example we want 7 pixels between each string.
 //also going to use the imaginary function drawText(string, x-position, y-position)

 var curY = 10; //starting position for the text (current Y)
 var x = 5;
 
 var showName : boolean = true;
 var showHealth : boolean = true;
 var showArmor : boolean = true;
 //blahblah more variables
 
 function OnGUI()
 {
     if(showName) //if showname == true
     {
         drawText("Bob", x, curY); //drawText(string, x-position, y-position)
         curY += 7; //add 7 to the y-position for the next string
     }
     if(showHealth)
     {
         drawText("100", x, curY); //because we added to the Y position, this will be 7 pixels below "Bob"
         curY += 7;
     }
     if(showArmor)
     {
         drawText("50", x, curY);
         curY += 7;
     }
 }

basically, you're using the same variable for your y-position, you're just adding to it within every if statement. hopefully this answers your question.

Add comment · Show 1 · Share

castor · Sep 24, 2012 at 03:05 AM 0

Share

Dude, amazing!! It worked like a charm, thank you soo much. I thought it would be so much more complicated. Awesome community!

Dynamic UI Size?

1 Reply

Your answer

Follow this Question

Related Questions