From TDN

The purpose of this tutorial is to show you how to create a GUI and link it to your project so that you can use it with your game.

Create Your GUI

First, let's create your GUI and plug it into your game so that it can be reference within the TGB GUI Editor.

1. Load a level in TGB.
2. On the menu bar, click Project > GUI Builder. The GUI Builder opens.
3. On the menu bar, click File > New GUI. The Create New GUI dialog box opens.
4. Click Create. Your new GUI opens in the GUI Builder.
5. Click Toggle Palette in the top right of the Gui Builder window.
6. Select a control from the Control Palette that opened and drag it into the Gui Builder window.
7. On the menu bar, click File > Save GUI. The Save File dialog box opens.
8. In the menu tree, navigate to your project, click on the gui folder, and click Save File. Your GUI, guiNewGui.gui, is saved.
9. In your project folder, open main.cs in a text editor.
10. Add the following line in initializeProject() near the top: exec("~/gui/guiNewGui.gui");
11. Save main.cs. You can now reference your GUI in your game.
    
    

Note: If you do not reference your GUI in main.cs, it will not appear in the GUI Builder's GUI list the next time you load your project in TGB. In the GUI Builder, The list of existing GUIs appears in the drop-down list to the right of the New Control drop-down list.

Use Your GUI

Now that you have created your GUI, you are ready to use it in your game.

1. Load a level in TGB.
2. Click the Create tab.
3. Drag a static sprite onto your level.
4. In the level, click on the sprite.
5. Click the Edit tab.
6. Expand Scripting.
7. Mark the Use Mouse Events checkbox.
8. In the Class field, enter Menu.
9. Press CTRL+S to save your level.
10. Close TGB.
11. In your project folder, open game.cs in a text editor.
12. At the bottom of game.cs, add the following lines of code:

    function Menu::onMouseDown(%this)
    {	
        Canvas.pushDialog(guiNewGui);
    }
    

13. Add sceneWindow2D.setUseObjectMouseEvents(true); to your startGame function.
14. Save game.cs.
15. Reload your level in TGB (it is very important that you close TGB after you make any changes to game.cs).
16. Test your level. When you click on the sprite, your GUI appears on screen.

Note: To release your GUI, use Canvas.popDialog(guiNewGui); in your code.