TGB/MiniTutorials/Your First Dynamic GUI Tutorial
From TDN
The purpose of this tutorial is to show you how to build a GUI dynamically. When you build a GUI dynamically, you take multiple GUI objects and "patch" them together into one GUI.
[edit]
Create Your GUI Objects
First, let's create your GUI objects and plug them into your game. Unlike the previous tutorial, Your First GUI Tutorial, I am going to show you how to create your GUI objects using code, not the GUI Editor.
- Navigate to your project's gui folder.
- Create a text file called dynamicmenu.gui.
- Open dynamicmenu.gui in a text editor, and paste in the following code:
new GuiControl(dynamicmenuGui) { canSaveDynamicFields = "0"; Profile = "GuiDefaultProfile"; HorizSizing = "right"; VertSizing = "bottom"; position = "0 0"; Extent = "1024 768"; MinExtent = "8 2"; canSave = "1"; Visible = "1"; hovertime = "1000"; }; new GuiControl(backgroundGui) { canSaveDynamicFields = "0"; Profile = "GuiWindowProfile"; HorizSizing = "right"; VertSizing = "bottom"; position = "346 104"; Extent = "508 411"; MinExtent = "8 2"; canSave = "1"; Visible = "1"; hovertime = "1000"; }; new GuiButtonCtrl(exitGUI) { canSaveDynamicFields = "0"; Profile = "GuiButtonProfile"; HorizSizing = "right"; VertSizing = "bottom"; position = "815 476"; Extent = "30 30"; MinExtent = "8 2"; canSave = "1"; Visible = "1"; Command = "menu::exit(shopGui);"; hovertime = "1000"; text = "x"; groupNum = "-1"; buttonType = "PushButton"; }; - Save dynamicmenu.gui.
- In your project folder, open main.cs.
- Add the following line in initializeProject() near the top: exec("~/gui/dynamicmenu.gui");
- Save main.cs. You can now reference your GUI objects in your game.
[edit]
Dynamically Generate a GUI
Now, lets use our GUI objects to dynamically generate a GUI in your game.
- In your project folder, open game.cs in a text editor.
- At the bottom of game.cs, add the following lines of code:
function Sprite::onMouseDown(%this) { dynamicmenuGui.addGuiControl(backgroundGui); backgroundGUI.addGuiControl(exitGui); Canvas.pushDialog(dynamicmenuGui); } - Save game.cs.
- Load a level in TGB.
- Click the Create tab.
- Drag a static sprite onto your level.
- In the level, click on the sprite.
- Click the Edit tab.
- Expand Scripting.
- Mark the Use Mouse Events checkbox.
- In the Class field, enter Sprite.
- Press CTRL+S to save your level.
- Test your level. When you click on the sprite, your generated GUI appears on screen.
Categories: TGB | GUI | Tutorial



