GUI Creator Tutorial request

[AGlass0fMilk]

Can someone write a Tutorial on creating a GUI in the mod editor and then making it do stuff? I think that alot of people would benefit from this and I need it too. If there already is one, please post the link.Thank you!

[Ad Bot]

[Resonance_Cascade]

Here's one I made for v0002, which should, for the most part, still be relevant:
Be gentle though, I wrote it almost 3 years ago:

This tutorial will teach you the basics of using the in-game GUI editor, and making your own GUI. Gui's have many functions, and can be used to make menu's, button's, and all sorts of things to make life easier.

For tutorial purposes, we will be making a small GUI, with buttons, to turn you into a droid, cat, monkey, etc.

First, you need to start up Blockland. Create a Server, and put a password on it so noone will be able to interrupt you, not that you will be able to see them, as you will have the GUI editor open most of the time.

So select a map, and click Create Server, and wait for it to load. Once you have spawned in the server, press F10 to load the GUI editor.

Now, you should have the GUI editor open, and it should be on Play.GUI. If you look in the top left hand corner, You'll see File, click on that, and click New GUI. A box should come up, with "Create New GUI" as the heading. Under GUI Name, Enter any name you like, for this tutorial, I will be using shapeme. Leave control on GUI Control, and click Create.

You'll be taken to the screen you were before, but instead of seeing the game from your characters Point of View, you will be viewing a plain, greeny-bluey screen.

From here, you need to click New Control. This is were all items should be added to the main control you made before. On the dropdown list that comes up, pick GUI Window Control. You'll see a new window open on the green screen, something like the Admin Menu window.



As you will notice, my GUI looks different to yours (I'm using a blockland mod, that I'm still making, and GUI's were changed for RTB) but basic functionality is the same.

First of all, we are going to change the size of this new window (Already done in my image). This is all done in the bottom right hand section of the GUI Editor. First, if it isn't done already, click the Expand All button.

This will show the windows position, its sizing, its size, etc. For now, we are just going to change the size. In extent, enter in 250 250, this will make it 250 units wide, and 250 units hide (This will do for a shape me menu.)

Now, you are going to position it, roughly in the center of the green/blue background. You can either work out the maths.. (I'm too lazy Smile or you can nudge it to roughly the middle. To nudge it, select it with your mouse, and press the Left, Right, Up and Down arrows to nudge it around, or hold either Shift + Arrow keys to nudge it further each time. I have mine positioned at 190 x 110, this can be set in the position field, above the place you changed the window size.

Once you have decided it's roughly in the middle, you can edit the window's name. This is done in the same window in which you edited size, just scroll down, and look for text. Again, for this tutorial, I will enter Shape Me, and it will appear on the window, on the opposite side to the exit button.

Now, your window is almost finished, we will perform the finishing touches later on.



Select the window control, like above, and click the New Control button again, and pick GuiButtonControl. A new button will appear in the top, left hand corner. First, set it's extent field to 240 x 25. Now, nudge it or drag it into place with the mouse, so it fits smoothly into the GUI Window. Mine is positioned at 195 x 136, but yours may be different, it will not matter.

Once it has been placed, you can set it's text, by looking down in the bottom right hand corner, and the command it performs. Commands should be functions, and functions can be made to perform server cmd's. So for our first button, we will be setting the text to Monkey Me, and the command to commandtoserver('monkeyme');. (No Fullstop!)

I'm just going to place two buttons, you can continue to place more, if you please.

For the second one, we are going to use the same size and position from the first button, only the second lot of numbers for the position, I'll be adding 27 to the previous button. This will make it 27 units lower, and thus, a 2 space gap between buttons. My button is positioned at 195 x 163.

For this button, I will name it Droid Me, and it's command commandtoserver('droidme');.

Now, you need to save the GUI. Click File > Save GUI, and just enter shapeme.gui, and put it in rtb\client\ui.

We'll just leave it as is for now, and open up the .GUI file we just created.
Quit RTB (In the dropdown list with all the GUI's in it, pick Play Gui and hit F10 again, and quit as normal)
So Open it up, in notepad..

Code: [Select]

//--- OBJECT WRITE BEGIN ---
new GuiControl(shapeme) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";
   helpTag = "0";

   new GuiWindowCtrl() {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 110";
      extent = "250 250";
      minExtent = "8 2";
      visible = "1";
      helpTag = "0";
      text = "Shape Me";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";
   };
   new GuiButtonCtrl() {
      profile = "GuiButtonProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "195 136";
      extent = "240 25";
      minExtent = "8 2";
      visible = "1";
      command = "commandtoserver('monkeyme');"
      helpTag = "0";
      text = "Monkey Me";
      groupNum = "-1";
      buttonType = "PushButton";
   };
   new GuiButtonCtrl() {
      profile = "GuiButtonProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "195 163";
      extent = "240 25";
      minExtent = "8 2";
      visible = "1";
      command = "commandtoserver('droidme');"
      helpTag = "0";
      text = "Droid Me";
      groupNum = "-1";
      buttonType = "PushButton";
   };
};
//--- OBJECT WRITE END ---
and you'll see this (or something similar.)

First thing we are going to do, is parent the Buttons to the window (I'm not sure how to do it in the GUI editor, so if anyone knows how, please tell me?) Parenting in the GUI file is all done by the positions of the writing, and the brackets.

Code: [Select]

//--- OBJECT WRITE BEGIN ---
new GuiControl(shapeme) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";
   helpTag = "0";

   new GuiWindowCtrl() {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 110";
      extent = "250 250";
      minExtent = "8 2";
      visible = "1";
      helpTag = "0";
      text = "Shape Me";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";

      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "195 136";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver('monkeyme');"
         helpTag = "0";
         text = "Monkey Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "195 163";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver('droidme');"
         helpTag = "0";
         text = "Droid Me";
         groupNum = "-1";
         buttonType = "PushButton";
       };
   };   
};
//--- OBJECT WRITE END ---
As you'll see, if you compare the two, the positions of the buttons in this code has changed. Before, they where positioned under the main GUI control, shapeme. Now, they have been moved 3 spaces to the right, so they are underneath the window control, and a }; was added to the bottom, to account for the space.

We'll add a bind to open it later.

Now, we can open the game.. and load up shapeme in the GUI editor. Press F10 again to view it as it is, and you will notice that the buttons are waaaaaay off. This is because, now they are going by the position of the top left hand corner of the window, rather than the control. To go back to editor, press F10..

..and we'll just reposition those again..

First Button: 5 30
Second Button: 5 57

And they should be neatly aligned.

Now, we are going to bind a key to open our new menu, aswell as a setting the button to close.

Save it, and quit RTB again.

Open up RTB/Client, and look for config.cs, and at the end of it, add:

Code: [Select]

moveMap.bind(keyboard, "ctrl m", pushShapeMe);feel free to change the button used, though.

Now, open up shapeme.gui, and at the end (after the

Code: [Select]

//--- OBJECT WRITE END ---Add:

Code: [Select]

function pushShapeMe(%Gui)
{
   %Gui = Canvas.pushDialog(ShapeMe);
}
Now, save, load up the game again.. and press control + m, and the menu should pop up. Click a button, and test!

I hope you have enjoyed this tutorial, and learnt something. I will be posting future tutorials on advanced GUI editing. If you require help with anything, don't hesitate to ask!

Here is the finished version of my script, working perfectly:

Code: [Select]

//--- OBJECT WRITE BEGIN ---
new GuiControl(shapeme) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";
   helpTag = "0";

   new GuiWindowCtrl() {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 110";
      extent = "250 250";
      minExtent = "8 2";
      visible = "1";
      helpTag = "0";
      text = "Shape Me";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";
      closeCommand = "canvas.popDialog(ShapeMe);";

      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "5 30";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver('monkeyme');";
         helpTag = "0";
         text = "Monkey Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "5 57";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver('droidme');";
         helpTag = "0";
         text = "Droid Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
   };
};
//--- OBJECT WRITE END ---

function pushShapeMe(%Gui)
{
   %Gui = Canvas.pushDialog(ShapeMe);
}
//--- OBJECT WRITE BEGIN ---
new GuiControl(shapeme) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";
   helpTag = "0";

   new GuiWindowCtrl() {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 160";
      extent = "250 140";
      minExtent = "8 2";
      visible = "1";
      helpTag = "0";
      text = "Shape Me";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";
      closeCommand = "canvas.popDialog(ShapeMe);";

      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "5 30";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver(\'monkeyme\');";
         helpTag = "0";
         text = "Monkey Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "5 111";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver(\'skeleme\');";
         helpTag = "0";
         text = "Skele Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "5 84";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver(\'droidme\');";
         helpTag = "0";
         text = "Droid Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
      new GuiButtonCtrl() {
         profile = "GuiButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "5 57";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver(\'catme\');";
         helpTag = "0";
         text = "Cat Me";
         groupNum = "-1";
         buttonType = "PushButton";
      };
   };
};
//--- OBJECT WRITE END ---

[AGlass0fMilk]

Does anyone else have any more info, Some of these directories don't exist anymore (I don't think) and I need a little more up to date Tutorial, or at least some up to date fixes on that old one.

[AGlass0fMilk]

Here's my code, and I'll put the syntax in:

Code: [Select]

//--- OBJECT WRITE BEGIN ---
new GuiControl(TestGUI) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiWindowCtrl(TestGUI) {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 110";
      extent = "250 250";
      minExtent = "8 2";
      visible = "1";
      text = "Test GUI";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";
   };
      new GuiButtonCtrl(Pressme) {
         profile = "BlockButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "195 221";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver(\'Hello\');";
         text = "PRESS ME";
         groupNum = "-1";
         buttonType = "PushButton";
      };
   };
};##<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<SYNTAX
##
//--- OBJECT WRITE END ---
function pushTestGui(%Gui)
{
%Gui = Canvas.pushDialog(TestGui)
}
//--- OBJECT WRITE BEGIN ---
new GuiControl(TestGUI) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiWindowCtrl(TestGUI) {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 110";
      extent = "250 250";
      minExtent = "8 2";
      visible = "1";
      text = "Test GUI";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";
   };
      new GuiButtonCtrl(Pressme) {
         profile = "BlockButtonProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "195 221";
         extent = "240 25";
         minExtent = "8 2";
         visible = "1";
         command = "commandtoserver(\'Hello\');";
         text = "PRESS ME";
         groupNum = "-1";
         buttonType = "PushButton";
      };
   };
};
//--- OBJECT WRITE END ---


[Destiny/Zack0Wack0]

Canvas.pushDialog(TestGui) is missing a semi-colon.

[Space Guy]

It seems to have too many close brackets...

new GuiControl(TestGUI) {
   ...

   new GuiWindowCtrl(TestGUI) {
      ...
   };
      new GuiButtonCtrl(Pressme) {
         ...
      };
   }; <-- ?
};

[AGlass0fMilk]

Also, how can make you make something effect everyone in the server, and how can you kick someone through code. Just throwing those out there.

-EDIT-
I have some problems and a question, One problem is that when I load up the GUI the console says this:

Code: [Select]

Loading Add-On: Script_GUITest (CRC:418549445)
Executing Add-Ons/Script_GUITest/server.cs.
Executing Add-Ons/Script_GUITest/TestGUI.gui.
Error: cannot change namespace parent linkage for TestGUI from GuiControl to GuiWindowCtrl.
0 datablocks added.
Now I don't know what I should do about that, and when I open the Gui in the game, it gives me a big Giant, fullscreen box with the push me button off to the side. How do I fix this? Here is the code:

Code: [Select]

//--- OBJECT WRITE BEGIN ---
new GuiControl(TestGUI) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiWindowCtrl(TestGUI) {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "190 110";
      extent = "250 250";
      minExtent = "8 2";
      visible = "1";
      text = "Test GUI";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";

      new GuiButtonCtrl(Pressme) {
      profile = "BlockButtonProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "195 221";
      extent = "240 25";
      minExtent = "8 2";
      visible = "1";
      command = "commandtoserver(\'Hello\');";
      text = "PRESS ME";
      groupNum = "-1";
      buttonType = "PushButton";
      };
   };
};
//--- OBJECT WRITE END ---
function pushTestGui(%Gui)
{
%Gui = Canvas.pushDialog(TestGui);
}
and here is the server.cs

Code: [Select]

exec("./TestGUI.gui");
moveMap.bind(keyboard, "cntrl m", pushTestGui);
And here is a picture of a cat:

Now to my question:
How do I make buttons do things? (I'll look through codes but if you can briefly explain, please do so)
Please help!

-Yet another edit-
I think it has something to do with the fact that I named my Gui and Gui window control TestGui, I'll fix that.

[rkynick]

(quote isn't working)

and here is the server.cs
Code:

exec("./TestGUI.gui");
moveMap.bind(keyboard, "cntrl m", pushTestGui);




Should be a client.cs

[AGlass0fMilk]

Look up there again. Plus, the button is still off to the side (I think I can fix that) but I can't close the window even though canclose is set to 1.

[Tom]

You set the closeCommand to Canvas.popDialog(blabla);

[AGlass0fMilk]

Okay, now you can close it, but I have some more questions:

• How can I make it toggle-able (you press cntrl-m to open it, you press cntrl-m to close it)
• And also, What is "Helptag" for?
• How do you make those Block buttons? (I tried making a bitmap to Base/Client/ui/Button2)
• How do you color the buttons?
• How do you make something pop up when you click something?
• How do you make tabs? Like when you press a tab, another page pops up on that same GUI?
  
• How do you make a scroll bar (I'm trying to design a help thing after the RTB manual)
  
• A little off topic but, how do you get little pictures of guys like the RTB welcome guy and where did they get icons?
  

Now I have it so that when you press the button an ok box pops up and says Thanks! You just pressed a button on a test GUI!

[Tom]

How can I make it toggle-able (you press cntrl-m to open it, you press cntrl-m to close it)

Look in an existing add-ons client.cs.

[AGlass0fMilk]

I posted a couple more.

[rkynick]

Answer to all:

Look in an existing add-on's client.cs.

[AGlass0fMilk]

Bumpedy bump