This tutorial will:•How to open the GUI editor
•How to make nicely put together GUI's
•How to put your GUI's ingame
•How to make your GUI's display variables
What is a GUI?A GUI is a graphic user interface. Which means that if you call the function in which the GUI is called in (Usually a canvas/PlayGUI,) then the GUI will interact how scripted, if it is updating a variable. Or showing itself from the undead. Or closing it self because you have had enough of it, it will do, what ever (Unless torque script (The Scripting Language) blocks it from happening) you want. Examples of a GUI:
This is a GUI that is on a window, it is tabbed and will show you variables and allow you to edit variables.
This is a GUI that is not on a window, this opens when you spawn and will display variables.
How do I make a GUI?Thats not hard! Both mac and windows can do this simple thing.
What do I do if I am on a mac?No problem there!
1. Open Finder
2. Search: Blockland v-whatever version here- (Right now it is v16)
3. Open up the folder.
4. Double click editor.command
5. When the blockland window is open hit 'cmd g'
What do I do if I am on a windows?No problem there!
1. Right click your Blockland Shortcut on your desktop.
2. It click on properties.
3. It should say something like C:/Blockland/Blockland.exe or around that.
4. At the end, put '-mod editor'
5. Open up blockland
6. Press f10!
[size=50]This image was ripped from AGlassOfMilks Tutorial[/size]
Now that we know how to open the GUI editor, lets learn how to use it!The Following has 55 photo's•Open Up The GUI Editor
•Click file then click NewGUI
•Click Create and you will Enter this menu:
•Now lets get started, click where the mouse is and you should see a scroll menu
•Now scroll to the bottom and click "GuiWindowControl"
•You should see this
•Resize it to about that.
•In the right, below that scroll menu, you see a bunch of words buttons edit boxes, this is variables for what you have clicked, make sure that you have the window clicked- Make the Text "NewGUI" and click apply, you should see a name on the window
•Right click the window (So what ever you add next is parented to the window
•Look through the scroll menu until you find "GuiBitmapControl" Click it.
•Go to the list of variables. Where it says bitmap means that what pictures do you want on your bitmap, a bitmap is a picture. Most default bitmaps are in "Base/client/ui/", so today, we will use "base/client/ui/planterrors_Small/Planterror_teams" and click apply. You should see a what i see- And if you see just random Black dots, click in the middle of those dots that usually form something like a box, and drag it onto the GUI, this happens because you parented it to the window- And it wasn't on the window, so it isn't in the parent, so it isn't visible.
•Now you should see the picture we put on there :D
•Now we go to Edit (Next to file on top) then click copy. Then go back there and click paste, then you can either drag it with your mouse, or click shift arrow key, you should see a duplication of your photo emerging from the bottom of the photo that is on, put it parallel from the first one
•Now go back to the scroll bar that has all the controls and select GuiMLTextControl.(Make sure that the window is on parent mode)
•Now go to the first one (Profiles) and click the little button, a giant list should pop up, scroll down until you see HUD-stuff, click size 5, :D, then scroll to text, and put in "My First GUI," then click apply.
•Click on the words, then use the one pointing towards the right, make go longer to the side, then click apply. You should see that the words go on a straight line not like one on top of another.
•Go to the scroll menu, and scroll until you see GuiSwatchControl. Click it(Make sure that the window is in parent mode!)
•Resize it to about like the photo above
•Click on the words, then to go edit then cut it, move the SwatchControl if you must, but move it back, then go to the color variable, see how it says 0 0 0 0, thats invisible, change it to 0 0 0 100.
•Right click the Swatch control then paste the Words, if its off the parent, then get it on the swatch control, put it at the top.
•Go back into the control menu and pick out GuiScrollControl(Make sure that the swatch is on parent mode)
•You should see that...
•Resize it to about that.
•Go to the control where it says h/v scroll show, make sure that H SCROLL is ALWAYS OFF.
•Go to the Control list and click GuiTextControl(MAKE SURE SCROLL IS ON PARENT MODE)
•For the text, put in "Hi this is my very first GUI and this is a very nice thing to learn." Then click apply
• Stretch out the right then click apply again.
•Go to the scroll menu find the control that says GuiButtonControl. Click it (Make sure that the WINDOW is on parent)
•resize it using the black dots and make the text "Close" Then put it under the scroll.
•Go to the variable Command and punch in "canvas.popDialog(NewGUI);", without the quotes. That means it will close the window when you click that very button
•Go to the GUI control menu and click GuiBitmapButton(Make sure that the window is on parent mode)
•Go to the variables list and click profile, sort through the list until you find "BlockbuttonCtrl" click it then click apply.
•Make it small and put it down there, then go to the bitmap variable and the button control is "base/client/ui/button1", then click apply, change the text to Finsh then click apply again.
•Make the command "canvas.popDialog(NewGUI);" then click apply. Then go to colors, if it is 255 255 255 255 now, then lets make it read, RedGreenBlueAlpha, lets make it.... 255 0 0 255. Then click apply.
•Now, go to file, then click save. Go through the scroll menu and try to make it Add-Ons/, then, go to your add-ons folder, find the loose file NewGUI.gui, create a folder and name it "Client_newGUI" (Without the quotes,) place the small file into the folder.
Then open up textedit/notepad, put in:
Title: NewGUI
Author: Yourself
This is my first GUIThen save it as "description.txt" (Without Quotes,) make sure it gets into Client_newGUI.
•Open your text editing program, then copy & paste:
exec("./NewGUI.gui");
//GUI
if(!$NewGui)
{
$remapDivision[$remapCount] = "NewGui";
$remapName[$remapCount] = "NewGui";
$remapCmd[$remapCount] = "NewGui";
$remapCount++;
}
function NewGui(%val)
{
if(%val)
{
switch(NewGui.isAwake())
{
case 0:
canvas.pushdialog(NewGui);
case 1:
canvas.popDialog(NewGui);
}
}
}
Then save it to the Client_newGUI as Client.cs. Then, it should be in your add-ons folder, then open up blockland.
•Bind a control in it for Options>Controls>Scroll to newGUI and bind it.
•Join any server (this doesn't work in main menu.) and use the bind! Tada! It works!
Reply if you have any questions. Thank you, it took me 5 hours and 17 minutes (Due to pictures being the "Wrong Format" then having to crop the TWICE.) to do this, so please no negative comments. And, if you want help on making the GUI display variables- It doesn't work with evented variables so unless you have a mod to show me (NOT CITYRPG OR ANY EDIT OF THAT PIECE OF BULLstuff) I'll help you out.
Credits:•Brian Smith (Me)
•AGlassOfMilk, the picture of the windows thing.
•EasyCrop; Photoshop; Layers; Tools i use to screen shot Blockland.
•Everybody who supports me.
This was taken from Brian Smith's topic on RTB
