Poll

Did this tutorial help?

Yes
28 (56%)
No
7 (14%)
Somewhat
15 (30%)

Total Members Voted: 50

Author Topic: [Tutorial] Creating A GUI [Updated 4/1/2012]  (Read 13061 times)

Creating A GUI (tutorial)

Table of Contents
Top
What is a GUI?
Mission Editor
Getting started
Making the GUI
Making a parent
Making buttons
Saving
Scripting your GUI
More controls
GuiBitmapCtrl
GuiScrollCtrl
GuiCheckBoxCtrl
Useful GUI Script
HUD GUI
Bottom

What is a GUI?
A GUI is a Graphic User Interface. In fact you are reading this on a GUI right now! The main purpose of a GUI(in Blockand) is to not make the user have to know so many slash commands and to make things more simple.

Mission Editor
To make a GUI you first want to get mission editor HERE and put it in your add ons folder.

Getting started
First things first, make a new folder in your add ons folder and name it Client_DesiredNameHere, for the tutorial we will refer to it as Client_testGUI. After making your folder you want to make a description.txt that should contain the following text:
Code: [Select]
Title: TITLE OF THE ADD-ON
Author: YOUR BLOCKLAND NAME
A SHORT DESCRIPTION HERE
After that you want to make another text file named client.cs, we will work with this file later.

Making the GUI
First open Blockland and push f10 (Cmd + G on Mac) and click File>New GUI in the upper left corner. Fill in the GUI name (I will refer to it as testGUI) and click create. Now you should be here:

Click the New Control button and find and select GuiWindowCtrl. Now right click size the window using  the eight dots. After sizing the window you will see a list of preferences to the bottom right of the screen, find the close command preference and put in it canvas.popDialog(YOUR GUI NAME HEREGui); , also put that in the command box. Optional: If you like you can put escape in the accelerator box so you can push the escape key to close the GUI. In the text box put whatever you want it to say at the top of the window (Optional: you may also fill out the other self explanatory boxes if you like) and click the APPLY button.

Making a parent
Making a parent is easy and useful. If you have a something with a(for example) window as a parent then if you move the window then everything that is parented to that window will move too.
To something have a parent right click the thing you want to make the parent until it looks like this:

Now make a new control and it will have the thing you just right clicked as it's parent!

Making buttons
Make a GuiBitmapButtonCtrl with the GuiWindowCtrl as it's parent. Now position the box and resize it how you desire and put in the bitmap box base/client/ui/button2. In the profile box select BlockButtonProfile. In the command box put YOURGUINAMEHEREButtonPush();(you CAN name it anything you want but we are naming it this for reference reasons). In the text box put whatever you want the button to say. In the mColor box put the RGB color you want the button to be, the first row is red, the second row is green, the third row is blue, and the fourth row is transparency.

Saving
To save your GUI go to File>Save GUI... and select the Directory to Add-Ons/Client_YourFolderName and click the Save button. Now click the Your GUI Name Here - NUMBER button and change it to MainMenuGui - 4544 and push f10 (Cmd + G on Mac) and exit Blockland.

Scripting your GUI
So you made your GUI and now you wanna know how to make it do things right? so, lets get started!

Go to Add-Ons/Client_YourAddOn and select YouGui.gui and put the following at the end of it:
Code: [Select]
function Open_YOURGUINAME(%toggle)
{
if(%toggle)
{
if(YOURGUINAMEGui.isAwake())
{
canvas.popDialog(YOURGUINAMEGui);
}

else
{
canvas.pushDialog(YOURGUINAMEGui);
}
}
}
Now put in the client.cs
Code: [Select]
exec("./YOURGUINAME.gui");

    $remapDivision[$remapCount] = "Category";
    $remapName[$remapCount] = "Action";
    $remapCmd[$remapCount] = "Open_YOURGUINAME";
    $remapCount++;
Now you can go in game and go to the options menu and set a keybind to open your GUI.
Now to script your button put in the client.cs
Code: [Select]
function YOURGUINAMEHEREButtonPush()
{
//Put whatever you want the button to do here.
}
Hoped you liked the tutorial, see you next time!
Back to top

« Last Edit: April 01, 2012, 02:32:44 PM by jes00 »

More Controls
GuiBitmapCtrl
This control is to add images for effects to your GUI, just simply put in the Bitmap box Add-Ons/client_Your Add On Name/Image Name or something similar.

GuiScrollCtrl
Create a GuiScrollCtrl with a window as it's parent and create a GuiTextListCtrl as the scroll control's child.
To add to the Text List Control do:
Code: [Select]
%list = CONTROL_NAME;

%list.addRow(NUMBER, "WORDS");

GuiCheckBoxCtrl
To use a GuiCheckBoxCtrl put something like $YOURGUINAMEHERE::CheckBox in the variable box and to check if the box is checked or not use the following:
Code: [Select]
if($YOURGUINAMEHERE::CheckBox == //1 FOR CHECKED OR 0 FOR NOT CHECKED HERE
{
//Code here
}
NOTE: Ignore the // because they are comments.

GuiRadioCtrl
Ever wanted to make one of these: but don't know how?
To make a GuiRadioCtrl select it from the menu of controls, size it how you want, put a number in the groupNum box and put whatever you want in the text box and put whatever you want in the command box. Now however many other GuiRadioCtrls with the same number in the groupNum box and a different thing in the command box.

Useful GUI Script
Just some useful GUI script.

List Stuff
To add a row to a list first define the list:
Code: [Select]
%list = CONTROL_NAME;
Now add to it:
Code: [Select]
%list.addRow(ROW_NUMBER, "WORDS");
Now if you ever want to clear the list do:
Code: [Select]
%list.clear();

To get what the row says and do a server/function do:
Code: [Select]
%rowId = CONTROL_NAME.getSelectedID();
%word = SAME_CONTROL_NAME.getRowTextById(%rowId);
Now do:
Code: [Select]
commandToServer('COMMAND_NAME', %word);
Or:
Code: [Select]
FUNCTION_NAME(%word);

Text Stuff
To set the text to a text control do the following (this is also a good way to display vars in a text control):
Code: [Select]
CONTROL_NAME.setText("TEXT");

Function Stuff
Here are some functions and when they are called:
Code: [Select]
function GUI_NAME::onWake(%vars)  //Called when the GUI is opened.

Finding A Control With No Name
Need to edit a control with no name? Look no further!

To find a control do the following code:
Code: [Select]
GuiName.getObject(NUMBER).whatever = "whatever";
Need to get a control that has a parent in the GUI? no problem.
Code: [Select]
GuiName.getObject(NUMBER).getObject(Number).whatever = "whatever";

Back to top
« Last Edit: January 20, 2012, 08:48:16 PM by jes00 »


I prefer AGlass0fMilk's tutorial, but I am sure that this will help some players. Good job.

I prefer AGlass0fMilk's tutorial, but I am sure that this will help some players. Good job.
I made this tutorial because AGlass0fMilk's tutorial did not satisfy me when I first learned to make GUIs.
Nice tutorial jes
Thanks Tezuni!
« Last Edit: October 28, 2011, 05:51:00 AM by jes00 »

Bump because this is rather helpful.

Added a section on making a parent and added a section for GuiRadioCtrl.

Add something about making a custom HUD with GUIs. Like using playgui.add(GUINAME) and making the GUIs show a value, like money.

Add something about making a custom HUD with GUIs. Like using playgui.add(GUINAME) and making the GUIs show a value, like money.
You write it, I put it in and give you credit, profit?

HUD GUIs.
By MP6767, for jes00's tutorial.

Usually, when making a HUD-type GUI, you use GUISwatchCtrls, GUITextCtrls, and GUIBitmapCtrls. Do NOT use a GUIWindowCtrl, or any buttonctrls.


Make a GUI and name it HUDGUITEST. Now, make a GUISwatchCtrl, recolor it, with the digits on the left, to your liking, and right-click it. This will be what a window would be on a normal GUI. Lets start out by making a simple one that shows a number. Make a GUITextCtrl in the middle of the Swatch, and name it TESTHUDTEXT. Set it to the middle of your GUI, save the GUI as test.gui and to somewhere you know you'll find it, and exit Blockland.

For now, we'll leave that GUI alone, and start the scripting aspect of it. Open up your favorite text editor and type

Code: [Select]
function GUIFUNCTIONTEST(%client)
{
%lol = 25;
testhudtext.setValue(%lol);
}

Now save this file as test.cs, and put it in a folder with your GUI, open up another text file in your favorite text editor, and type

Code: [Select]
exec("./test.cs");
exec("./test.gui");
Save this as server.cs


Almost there! Next, make a text file called description.txt, and put this
Code: [Select]
Title: HUD TEST
Author: You
Save that and leave it alone.

Now, open up the GUI in your favorite text editor. If it doesn't open, select it to open in whatever you use to edit text and such.
At the bottom of the file, type playGUI.add(HUDGUITEST);, and select your server.cs, test.cs, test.gui, and description.txt, and send them all to a zipped file, and name the zip server_hudtest.

Lastly, start up a server in Blockland with server_hudtest enabled. If your GUI is on your screen, you did it right. Now, open up the console (~), and type GUIFUNCTIONTEST();. Your GUI should have 25 in the middle of it now.

Congrats, you just made a HUD.
« Last Edit: April 19, 2012, 04:34:58 PM by mp7964 »

Nice tutorial. I'm sure it'll help people.


When I try to create a button it doesn't have the text or the the mcolor box?
What wrong?

When I try to create a button it doesn't have the text or the the mcolor box?
What wrong?
Make sure you choose GuiBitmapButtonCtrl.