IGI, the Immediate Gizmo Interface, is a GUI you draw on top of your game: pause and options menus, HUDs, debug panels, level editors and the like. It's built on Dear ImGui, the GUI library used in a great many game tools, and it looks and works the same on the desktop and on the web.

BambooBasic has two GUI toolkits, for two different jobs:

The reference for every function is in Runtime Commands > IGI, and there are four examples in examples/BambooRuntime/27 - IGI, each with a desktop and a web version.

There's nothing to set up. In your game loop, after drawing the game and before b2dFlip, call the igi functions:

Function Main()
    b2dGraphics(800, 600, 1)
    Local speed:Int = 2
    Local paused:Int = False
    Local running:Int = True
    While running
        sysUpdateEvents()
        b2dCls()
        ; ... draw your game ...

        igiBegin("Options")
        speed = igiSliderInt("Speed", speed, 0, 10)
        paused = igiCheckbox("Paused", paused)
        If igiButton("Quit") Then running = False
        igiEnd()

        b2dFlip()
    Wend
    b2dEnd()
    Return False
EndFunction

That's the whole idea: igiBegin opens a window, everything until igiEnd goes in it, and IGI draws it when you call b2dFlip. Next frame you call the same functions again — that's what "immediate" means. If you stop calling them, the window is gone.

A widget that edits something is given the current value and hands back the new one:

volume = igiSliderInt("Volume", volume, 0, 100)
name = igiInputText("Name", name)
difficulty = igiCombo("Difficulty", difficulty, "Easy|Normal|Hard")

If the user didn't touch it this frame, you get the same value back. Buttons and menu items return 1 on the frame they're clicked:

If igiButton("Save") Then SaveGame()

Lists (drop-downs and list boxes) are given as one string with | between the items, and the choice comes back as a number counting from 0.

Some functions open something that has to be closed again:

• igiBegin / igiBeginEx → igiEnd, and igiBeginChild → igiEndChild: always call the End, whatever the Begin returned.
• igiTreeNode, igiBeginTabBar, igiBeginTabItem, igiBeginMenuBar, igiBeginMainMenuBar, igiBeginMenu, igiBeginPopup, igiBeginPopupModal: call their End (or igiTreePop) only when they returned 1 — put it inside the If:

If igiBeginTabBar("tabs") Then
    If igiBeginTabItem("Audio") Then
        music = igiCheckbox("Music", music)
        igiEndTabItem()
    EndIf
    igiEndTabBar()
EndIf

If one is forgotten, IGI tidies up and shows a warning rather than stopping your program.

• igiBegin(title) — a window the user can move, resize and fold up. Its title is its name: the same title is the same window.
• igiBeginEx(title, x, y, w, h, flags) — with a first position and size (used the first time it appears, so the user can still move it) and IGI_WINDOW_* flags added together: NOTITLEBAR, NORESIZE, NOMOVE, NOSCROLLBAR, NOCOLLAPSE, AUTORESIZE (fits its contents), NOBACKGROUND, NOMOUSEINPUTS (clicks pass through to the game), MENUBAR and CLOSEBOX (an X — see igiWindowIsOpen).
• igiSetNextWindowPos / igiSetNextWindowSize — place the next window every frame, for a HUD or a menu that always sits in the same place.
• igiBeginChild — a scrolling area inside a window.

; A HUD in the corner: no title, can't be moved, fits its text
igiSetNextWindowPos(10, 10)
igiBeginEx("HUD", -1, -1, 0, 0, IGI_WINDOW_NOTITLEBAR + IGI_WINDOW_NOMOVE + IGI_WINDOW_AUTORESIZE)
igiText("Score: " & ToString(score))
igiText("Lives: " & ToString(lives))
igiEnd()

Your game still gets every click and key press. When the pointer is over an IGI window, igiWantsMouse() is 1; when an IGI text box has the keyboard, igiWantsKeyboard() is 1. Check them so a click on a button doesn't also fire your gun:

If inpIsMouseHit(VMOUSE_LBUTTON) And Not igiWantsMouse() Then Fire()

IGI tells widgets apart by their label, so two buttons called "Buy" would be the same button. In a loop, put igiPushID / igiPopID round them, or hide a unique part after ## in the label (it isn't shown):

For i = 0 To 4
    igiPushID(ToString(i))
    If igiButton("Buy") Then BuyItem(i)
    igiPopID()
Next

If igiButton("Buy##sword") Then BuySword()

igiOpenPopup(name) asks for a pop-up to open; it opens the next time igiBeginPopup or igiBeginPopupModal with that name is called. So you can open it from anywhere — a button, a menu item, a key:

If igiMenuItem("About") Then igiOpenPopup("About")

If igiBeginPopupModal("About") Then
    igiText("My Game, version 1.0")
    If igiButton("Close") Then igiCloseCurrentPopup()
    igiEndPopup()
EndIf

igiImage and igiImageButton draw any image you loaded with b2dLoadImage — icons in an inventory, a portrait in a dialogue box, a minimap.

This is where IGI is yours. Styling stays until you change it, so you normally set it up once, before your loop:

• Themes: igiStyleDark (the start), igiStyleLight, igiStyleClassic. A theme sets every colour, so set your own colours after it.
• Colours: igiSetColour(IGI_COL_..., r, g, b, a) for any of the 61 colours (window background, title bars, buttons and their hover/pressed colours, text, sliders, tabs…).
• Sizes and shapes: igiSetStyle(IGI_STYLE_..., value) for roundings, borders, padding, spacing, opacity and alignment.
• Fonts: igiLoadFont(file, size), then igiPushFont / igiPopFont round the text. igiSetGlobalScale makes all the text bigger or smaller.

igiSetStyle(IGI_STYLE_WINDOWROUNDING, 8.0)
igiSetStyle(IGI_STYLE_FRAMEROUNDING, 4.0)
igiSetColour(IGI_COL_WINDOWBG, 20, 20, 30, 240)
igiSetColour(IGI_COL_TITLEBGACTIVE, 20, 120, 120, 255)
igiSetColour(IGI_COL_BUTTON, 20, 120, 120, 200)
igiSetColour(IGI_COL_BUTTONHOVERED, 30, 160, 160, 255)
titleFont = igiLoadFont("Media/MyFont.ttf", 28)

Using a Dear ImGui theme from the internet: the colour names match ImGui's, so ImGuiCol_WindowBg is IGI_COL_WINDOWBG, ImGuiCol_ButtonHovered is IGI_COL_BUTTONHOVERED, and so on. ImGui themes give colours from 0.0 to 1.0: multiply by 255. So colors[ImGuiCol_WindowBg] = ImVec4(0.10f, 0.10f, 0.12f, 0.94f) becomes igiSetColour(IGI_COL_WINDOWBG, 26, 26, 31, 240).

Example 04_Styling is a live editor to try it all out.

IGI has a code editor: a text box for code with syntax colouring, line numbers, undo and the usual editing keys. Use it for an in-game console, a script editor in a level editor, a shader tweaker, or a game where the player writes code.

It's the one IGI widget with a handle, because it keeps its own text. Make it once, then draw it every frame inside a window:

Global editor:Int
Global basic:Int

; In Main
basic = igiLoadLanguage("Media/bamboobasic.lang")
editor = igiCreateCodeEditor()
igiCodeEditorSetLanguage(editor, basic)
igiCodeEditorSetText(editor, "Print " & Chr(34) & "Hello" & Chr(34))

; Every frame
igiBegin("Script")
igiText("Line " & ToString(igiCodeEditorLine(editor)))
igiCodeEditor(editor, 0, 0)          ; 0, 0 = fill the window
If igiCodeEditorChanged(editor) Then CheckScript()
igiEnd()

Languages are files you can write. How a language is coloured — its comments, strings, numbers, keywords and colours — is described in a small text file, a .lang file. Load one with igiLoadLanguage, or build one from text with igiDefineLanguage (handy for a language your game makes up). Ready-made ones are in userlibs\languages: bamboobasic.lang (coloured like the IDE), cpp.lang, lua.lang, wgsl.lang and hlsl.lang. Copy the one you want next to your program, as with any other media file.

To show problems, igiCodeEditorMarkLine colours a line and gives it a tooltip; igiCodeEditorClearMarks takes them all away. igiCodeEditorGotoLine jumps to a line, and igiCodeEditorInsertText types text in at the caret. There are settings for read-only, tab size and line numbers. The reference lists every function.

Example 05_CodeEditor is a turtle-graphics script editor that checks the script as you type.

IGI works the same in the browser, with three small differences that come from how browsers work:

• The GUI module loads the first time an igi function is called, so the GUI appears a few frames after the game. Until then the widgets hand back the value they were given, and styling calls made in Main are kept and applied when it's ready.
• igiLoadFont fetches the font in the background: text pushed in it uses the normal font until it arrives.
• Ctrl+V into a text box pastes from the system clipboard.
• igiLoadLanguage fetches the .lang file in the background too: the code editor shows plain text until it arrives. The editor's monospace font is fetched the first time an editor is made.

In a web program the loop body lives in WebLoop(), as always — see Building for the Web.

• 01_FirstWindow — a window over a moving scene: a slider, a checkbox, a button and igiWantsMouse.
• 02_OptionsMenu — a pause menu with tabs that edits copies of the settings, with Apply and Cancel, and a custom look.
• 03_DebugPanel — a developer overlay: live tweaks, a main menu bar, a list of objects with details, a log, and a b2d image.
• 04_Styling — a live theme editor: themes, colours, roundings, fonts and text scale.
• 05_CodeEditor — a turtle-graphics script editor: a language defined in the program, lines marked with problems as you type, and BambooBasic loaded from its .lang file.

BambooBasic © 2026 Michael Denathorn