Blockland Forums > Modification Help
[Tutorial] Creating A GUI [Updated 4/1/2012]
jes00:
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: ---Title: TITLE OF THE ADD-ON
Author: YOUR BLOCKLAND NAME
A SHORT DESCRIPTION HERE
--- End code ---
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: ---function Open_YOURGUINAME(%toggle)
{
if(%toggle)
{
if(YOURGUINAMEGui.isAwake())
{
canvas.popDialog(YOURGUINAMEGui);
}
else
{
canvas.pushDialog(YOURGUINAMEGui);
}
}
}
--- End code ---
Now put in the client.cs
--- Code: ---exec("./YOURGUINAME.gui");
$remapDivision[$remapCount] = "Category";
$remapName[$remapCount] = "Action";
$remapCmd[$remapCount] = "Open_YOURGUINAME";
$remapCount++;
--- End code ---
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: ---function YOURGUINAMEHEREButtonPush()
{
//Put whatever you want the button to do here.
}
--- End code ---
Hoped you liked the tutorial, see you next time!
Back to top
jes00:
More ControlsGuiBitmapCtrl
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: ---%list = CONTROL_NAME;
%list.addRow(NUMBER, "WORDS");
--- End code ---
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: ---if($YOURGUINAMEHERE::CheckBox == //1 FOR CHECKED OR 0 FOR NOT CHECKED HERE
{
//Code here
}
--- End code ---
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: ---%list = CONTROL_NAME;
--- End code ---
Now add to it:
--- Code: ---%list.addRow(ROW_NUMBER, "WORDS");
--- End code ---
Now if you ever want to clear the list do:
--- Code: ---%list.clear();
--- End code ---
To get what the row says and do a server/function do:
--- Code: ---%rowId = CONTROL_NAME.getSelectedID();
%word = SAME_CONTROL_NAME.getRowTextById(%rowId);
--- End code ---
Now do:
--- Code: ---commandToServer('COMMAND_NAME', %word);
--- End code ---
Or:
--- Code: ---FUNCTION_NAME(%word);
--- End code ---
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: ---CONTROL_NAME.setText("TEXT");
--- End code ---
Function Stuff
Here are some functions and when they are called:
--- Code: ---function GUI_NAME::onWake(%vars) //Called when the GUI is opened.
--- End code ---
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: ---GuiName.getObject(NUMBER).whatever = "whatever";
--- End code ---
Need to get a control that has a parent in the GUI? no problem.
--- Code: ---GuiName.getObject(NUMBER).getObject(Number).whatever = "whatever";
--- End code ---
Back to top
Tezuni 2.0:
Nice tutorial jes
Fluff-is-back:
I prefer AGlass0fMilk's tutorial, but I am sure that this will help some players. Good job.
jes00:
--- Quote from: Fluff-is-back on October 25, 2011, 04:11:50 AM ---I prefer AGlass0fMilk's tutorial, but I am sure that this will help some players. Good job.
--- End quote ---
I made this tutorial because AGlass0fMilk's tutorial did not satisfy me when I first learned to make GUIs.
--- Quote from: Tezuni 2.0 on October 24, 2011, 03:36:29 PM ---Nice tutorial jes
--- End quote ---
Thanks Tezuni!