Dear ImGUI for Defold

britzl · February 21, 2021, 2:09pm

I’ve been playing around with Dear ImGUI and I really like how easy it is to quickly create a fairly complex UI with it. I obviously want this in Lua so I’ve started working on a Dear ImgUI extension for Defold:

With a few lines of Lua:

	imgui.begin_window("Hello, world!")
	imgui.text("This is some useful text.")
	local changed, checked = imgui.checkbox("Demo window", self.show_demo_window)
	if changed then
		self.show_demo_window = checked
	end

	imgui.separator()

	if imgui.button("Button") then
		self.counter = self.counter + 1
	end
	imgui.same_line()
	imgui.text(("counter = %d"):format(self.counter))

	imgui.separator()
	
	local pos = go.get_position("object")
	local changed, x, y, z = imgui.input_float3("pos", pos.x, pos.y, pos.z)
	if changed then
		pos.x = x
		pos.y = y
		pos.z = z
		go.set_position(pos, "object")
	end
	imgui.end_window()

You get this:

sergey.lerg · February 21, 2021, 2:13pm

Niiice.

ryanscottlandry · February 21, 2021, 2:42pm

very niiice

gianmichele · February 21, 2021, 5:04pm

This is amazing and also right on time for a few things I wanted to try

britzl · February 21, 2021, 9:17pm

I usually don’t like to share half finished stuff, but it’s at least somewhat useful as it is. There are a lot of ImGUI functions without any Lua bindings (PRs accepted!), and there’s no API docs (PRs please!) so for now you’ll have to look at the example and the extension code to learn how to use it.

britzl · February 22, 2021, 8:38am

Added the Dead ImGUI Combo (dropdown) component. It can be used in two ways:

	local JEDI = { "Luke", "Anakin", "Yoda" }
	
	-- this is the old way of creating combo boxes
	-- it still exists in the ImGUI API since it's a quick way ti create a combo box
	local changed, jedi = imgui.combo("Jedi##array", self.selected_jedi or 1, JEDI)
	if changed then
		self.selected_jedi = jedi
	end

	-- new way of creating combo boxes with a begin and end function
	if imgui.begin_combo("Jedi##selectable", "Select a Jedi") then
		for i=1,#JEDI do
			if imgui.selectable(JEDI[i], i == (self.selected_jedi or 1)) then
				self.selected_jedi = i
			end
		end
		imgui.end_combo()
	end

Note: The ##foobar at the end of the label is a way to give two components the same label (eg “Jedi”) and at the same time give each component a unique id for the internal state handling done in Dear ImGUI.

Pkeod · March 13, 2021, 1:43am

What should be changed to build on Windows? I tried a few things but am at the limit of my own knowledge.

britzl · March 17, 2021, 11:19pm

I’ve updated the extension to use a newer ImGUI implementation file which is more clever with platform detection etc. Please try on Windows again.

Pkeod · March 18, 2021, 6:22am

Here is what it says now when building on Windows 10. Bundling for Windows on Win10 also shows the same thing. Testing bundling for macOS on Win10 did work, but testing bundling for Linux on Win10 did not work - shows same errors below.

/imgui/src/imgui/imgui_impl_opengl3.cpp
	Line 161: use of undeclared identifier 'GL_MAJOR_VERSION'
    glGetIntegerv(GL_MAJOR_VERSION, &major);
                  ^
	Line 162: use of undeclared identifier 'GL_MINOR_VERSION'
    glGetIntegerv(GL_MINOR_VERSION, &minor);
                  ^
	Line 250: use of undeclared identifier 'GL_FUNC_ADD'
    glBlendEquation(GL_FUNC_ADD);
                    ^
	Line 251: use of undeclared identifier 'glBlendFuncSeparate'
    glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
    ^
	Line 289: use of undeclared identifier 'glUseProgram'
    glUseProgram(g_ShaderHandle);
    ^
	Line 290: use of undeclared identifier 'glUniform1i'
    glUniform1i(g_AttribLocationTex, 0);
    ^
	Line 291: use of undeclared identifier 'glUniformMatrix4fv'
    glUniformMatrix4fv(g_AttribLocationProjMtx, 1, GL_FALSE, &ortho_projection[0][0]);
    ^
	Line 300: use of undeclared identifier 'glBindVertexArray'
    glBindVertexArray(vertex_array_object);
    ^
	Line 304: use of undeclared identifier 'GL_ARRAY_BUFFER'
    glBindBuffer(GL_ARRAY_BUFFER, g_VboHandle);
                 ^
	Line 305: use of undeclared identifier 'GL_ELEMENT_ARRAY_BUFFER'
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, g_ElementsHandle);
                 ^
	Line 306: use of undeclared identifier 'glEnableVertexAttribArray'
    glEnableVertexAttribArray(g_AttribLocationVtxPos);
    ^
	Line 307: use of undeclared identifier 'glEnableVertexAttribArray'
    glEnableVertexAttribArray(g_AttribLocationVtxUV);
    ^
	Line 308: use of undeclared identifier 'glEnableVertexAttribArray'
    glEnableVertexAttribArray(g_AttribLocationVtxColor);
    ^
	Line 309: use of undeclared identifier 'glVertexAttribPointer'
    glVertexAttribPointer(g_AttribLocationVtxPos,   2, GL_FLOAT,         GL_FALSE, sizeof(ImDrawVert), (GLvoid*)IM_OFFSETOF(ImDrawVert, pos));
    ^
	Line 310: use of undeclared identifier 'glVertexAttribPointer'
    glVertexAttribPointer(g_AttribLocationVtxUV,    2, GL_FLOAT,         GL_FALSE, sizeof(ImDrawVert), (GLvoid*)IM_OFFSETOF(ImDrawVert, uv));
    ^
	Line 311: use of undeclared identifier 'glVertexAttribPointer'
    glVertexAttribPointer(g_AttribLocationVtxColor, 4, GL_UNSIGNED_BYTE, GL_TRUE,  sizeof(ImDrawVert), (GLvoid*)IM_OFFSETOF(ImDrawVert, col));
    ^
	Line 326: use of undeclared identifier 'GL_ACTIVE_TEXTURE'
    GLenum last_active_texture; glGetIntegerv(GL_ACTIVE_TEXTURE, (GLint*)&last_active_texture);
                                              ^
	Line 327: use of undeclared identifier 'GL_TEXTURE0'
    glActiveTexture(GL_TEXTURE0);
                    ^
	Line 328: use of undeclared identifier 'GL_CURRENT_PROGRAM'
    GLuint last_program; glGetIntegerv(GL_CURRENT_PROGRAM, (GLint*)&last_program);
                                       ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]

Alex_8BitSkull · March 20, 2021, 4:36pm

I’m taking a look at this and I’m aware that there isn’t any documentation on what functions are available. For others in my position, searching for “Functions exposed to Lua” in this file gives you an idea of what’s available:

github.com

britzl/extension-imgui/blob/master/imgui/src/extension_imgui.cpp

// myextension.cpp
// Extension lib defines
#define LIB_NAME "ImGui"
#define MODULE_NAME "imgui"

#include <stdlib.h>

#if defined(DM_PLATFORM_WINDOWS)
#include <GL/gl3w.h>
#endif

// include the Defold SDK
#include <dmsdk/sdk.h>


#include "imgui/imgui_impl_opengl3.h"

This file has been truncated. show original

I was going to ask if anyone knew where the API documentation for Dear ImGui is, but then found this quote in the repo:

" This library is poorly documented at the moment and expects the user to be acquainted with C/C++."

Oh

I wanted to investigate whether Dear ImGui was viable in-game (rather than just debug) for me but I find that a bit off-putting.

britzl · March 20, 2021, 6:01pm

Did you check the example? I’m going to update it so that the example reflects the current state of the API:

github.com

britzl/extension-imgui/blob/master/example/example.script

function init(self)
	self.counter = 0
	self.show_demo_window = false
end


local function update_tab1(self)
	imgui.text("This is some useful text.")
	local changed, checked = imgui.checkbox("Demo window", self.show_demo_window)
	if changed then
		self.show_demo_window = checked
	end

	imgui.separator()

	if imgui.button("Button") then
		self.counter = self.counter + 1
	end
	imgui.same_line()
	imgui.text(("counter = %d"):format(self.counter))

This file has been truncated. show original

Also I don’t like to spend time documenting an API that is still in development.

Alex_8BitSkull · March 20, 2021, 6:15pm

I did see the example, yes!

To be clear I wasn’t criticising the state of the documentation of your extension. I was wondering about the documentation of Dear ImGui itself so I could:

a) evaluate its potential for my projects; and
b) identify what i would like to see implemented in your extension.

britzl · March 21, 2021, 6:34am

Ah, got it. DearImGUI does include a Demo Window with all features included. I can’t remember if I added this to the example app, but it’s very useful if you want an example of all the things you can do.

Alex_8BitSkull · March 21, 2021, 6:47am

Yes, I found that too. Quite impressive! What I was looking for specifically was editing the style. You can do it in the demo but I was trying to find what options were available to do it via the API. That would be quite important for non-debug applications of Dear ImGui.

britzl · March 24, 2021, 11:35pm

I added this just now:

github.com

britzl/extension-imgui/blob/master/example/example.script#L1-L39


local function set_style()
	imgui.set_style_window_rounding(6)
	imgui.set_style_frame_rounding(3)
	imgui.set_style_scrollbar_rounding(10)
	imgui.set_style_color(imgui.ImGuiCol_Text, 0.90, 0.90, 0.90, 0.90)
	imgui.set_style_color(imgui.ImGuiCol_TextDisabled, 0.60, 0.60, 0.60, 1.00)
	imgui.set_style_color(imgui.ImGuiCol_WindowBg, 0.09, 0.09, 0.15, 1.00)
	imgui.set_style_color(imgui.ImGuiCol_PopupBg, 0.05, 0.05, 0.10, 0.85)
	imgui.set_style_color(imgui.ImGuiCol_Border, 0.70, 0.70, 0.70, 0.65)
	imgui.set_style_color(imgui.ImGuiCol_BorderShadow, 0.00, 0.00, 0.00, 0.00)
	imgui.set_style_color(imgui.ImGuiCol_FrameBg, 0.00, 0.00, 0.01, 1.00)
	imgui.set_style_color(imgui.ImGuiCol_FrameBgHovered, 0.90, 0.80, 0.80, 0.40)
	imgui.set_style_color(imgui.ImGuiCol_FrameBgActive, 0.90, 0.65, 0.65, 0.45)
	imgui.set_style_color(imgui.ImGuiCol_TitleBg, 0.00, 0.00, 0.00, 0.83)
	imgui.set_style_color(imgui.ImGuiCol_TitleBgCollapsed, 0.40, 0.40, 0.80, 0.20)
	imgui.set_style_color(imgui.ImGuiCol_TitleBgActive, 0.00, 0.00, 0.00, 0.87)
	imgui.set_style_color(imgui.ImGuiCol_MenuBarBg, 0.01, 0.01, 0.02, 0.80)
	imgui.set_style_color(imgui.ImGuiCol_ScrollbarBg, 0.20, 0.25, 0.30, 0.60)
	imgui.set_style_color(imgui.ImGuiCol_ScrollbarGrab, 0.55, 0.53, 0.55, 0.51)
	imgui.set_style_color(imgui.ImGuiCol_ScrollbarGrabHovered, 0.56, 0.56, 0.56, 1.00)

This file has been truncated. show original

All constants defined in the ImGUI API:

github.com

britzl/extension-imgui/blob/master/imgui/src/imgui/imgui.h#L1365-L1419


enum ImGuiCol_
{
    ImGuiCol_Text,
    ImGuiCol_TextDisabled,
    ImGuiCol_WindowBg,              // Background of normal windows
    ImGuiCol_ChildBg,               // Background of child windows
    ImGuiCol_PopupBg,               // Background of popups, menus, tooltips windows
    ImGuiCol_Border,
    ImGuiCol_BorderShadow,
    ImGuiCol_FrameBg,               // Background of checkbox, radio button, plot, slider, text input
    ImGuiCol_FrameBgHovered,
    ImGuiCol_FrameBgActive,
    ImGuiCol_TitleBg,
    ImGuiCol_TitleBgActive,
    ImGuiCol_TitleBgCollapsed,
    ImGuiCol_MenuBarBg,
    ImGuiCol_ScrollbarBg,
    ImGuiCol_ScrollbarGrab,
    ImGuiCol_ScrollbarGrabHovered,
    ImGuiCol_ScrollbarGrabActive,

This file has been truncated. show original

Alex_8BitSkull · March 25, 2021, 2:34am

Oh that’s awesome, great work! Excited to check this out.

aglitchman · March 25, 2021, 7:46pm

ImGUI is a fantastic thing for doing simple internal tools!

I implemented UI with it for our artist to preview in-game models. The screenshot is from Windows build, but we actually run it as a web app on iPad.

britzl · March 25, 2021, 8:52pm

I totally agree. I’m really impressed by how easy it is to use, also from C. I want to play around with some custom widgets as well to get a feel for how those are created.

I’m really happy to see that the extension is already put to use!

aglitchman · March 28, 2021, 4:59pm

ImGUI’s light theme:

imgui.set_style_color(imgui.ImGuiCol_Text, 0.00, 0.00, 0.00, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TextDisabled, 0.60, 0.60, 0.60, 1.00)
imgui.set_style_color(imgui.ImGuiCol_WindowBg, 0.94, 0.94, 0.94, 1.00)
imgui.set_style_color(imgui.ImGuiCol_ChildBg, 0.00, 0.00, 0.00, 0.00)
imgui.set_style_color(imgui.ImGuiCol_PopupBg, 1.00, 1.00, 1.00, 0.98)
imgui.set_style_color(imgui.ImGuiCol_Border, 0.00, 0.00, 0.00, 0.30)
imgui.set_style_color(imgui.ImGuiCol_BorderShadow, 0.00, 0.00, 0.00, 0.00)
imgui.set_style_color(imgui.ImGuiCol_FrameBg, 1.00, 1.00, 1.00, 1.00)
imgui.set_style_color(imgui.ImGuiCol_FrameBgHovered, 0.26, 0.59, 0.98, 0.40)
imgui.set_style_color(imgui.ImGuiCol_FrameBgActive, 0.26, 0.59, 0.98, 0.67)
imgui.set_style_color(imgui.ImGuiCol_TitleBg, 0.96, 0.96, 0.96, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TitleBgActive, 0.82, 0.82, 0.82, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TitleBgCollapsed, 1.00, 1.00, 1.00, 0.51)
imgui.set_style_color(imgui.ImGuiCol_MenuBarBg, 0.86, 0.86, 0.86, 1.00)
imgui.set_style_color(imgui.ImGuiCol_ScrollbarBg, 0.98, 0.98, 0.98, 0.53)
imgui.set_style_color(imgui.ImGuiCol_ScrollbarGrab, 0.69, 0.69, 0.69, 0.80)
imgui.set_style_color(imgui.ImGuiCol_ScrollbarGrabHovered, 0.49, 0.49, 0.49, 0.80)
imgui.set_style_color(imgui.ImGuiCol_ScrollbarGrabActive, 0.49, 0.49, 0.49, 1.00)
imgui.set_style_color(imgui.ImGuiCol_CheckMark, 0.26, 0.59, 0.98, 1.00)
imgui.set_style_color(imgui.ImGuiCol_SliderGrab, 0.26, 0.59, 0.98, 0.78)
imgui.set_style_color(imgui.ImGuiCol_SliderGrabActive, 0.46, 0.54, 0.80, 0.60)
imgui.set_style_color(imgui.ImGuiCol_Button, 0.26, 0.59, 0.98, 0.40)
imgui.set_style_color(imgui.ImGuiCol_ButtonHovered, 0.26, 0.59, 0.98, 1.00)
imgui.set_style_color(imgui.ImGuiCol_ButtonActive, 0.06, 0.53, 0.98, 1.00)
imgui.set_style_color(imgui.ImGuiCol_Header, 0.26, 0.59, 0.98, 0.31)
imgui.set_style_color(imgui.ImGuiCol_HeaderHovered, 0.26, 0.59, 0.98, 0.80)
imgui.set_style_color(imgui.ImGuiCol_HeaderActive, 0.26, 0.59, 0.98, 1.00)
imgui.set_style_color(imgui.ImGuiCol_Separator, 0.39, 0.39, 0.39, 0.62)
imgui.set_style_color(imgui.ImGuiCol_SeparatorHovered, 0.14, 0.44, 0.80, 0.78)
imgui.set_style_color(imgui.ImGuiCol_SeparatorActive, 0.14, 0.44, 0.80, 1.00)
imgui.set_style_color(imgui.ImGuiCol_ResizeGrip, 0.35, 0.35, 0.35, 0.17)
imgui.set_style_color(imgui.ImGuiCol_ResizeGripHovered, 0.26, 0.59, 0.98, 0.67)
imgui.set_style_color(imgui.ImGuiCol_ResizeGripActive, 0.26, 0.59, 0.98, 0.95)
imgui.set_style_color(imgui.ImGuiCol_Tab, 0.76, 0.80, 0.84, 0.93)
imgui.set_style_color(imgui.ImGuiCol_TabHovered, 0.26, 0.59, 0.98, 0.80)
imgui.set_style_color(imgui.ImGuiCol_TabActive, 0.60, 0.73, 0.88, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TabUnfocused, 0.92, 0.93, 0.94, 0.99)
imgui.set_style_color(imgui.ImGuiCol_TabUnfocusedActive, 0.74, 0.82, 0.91, 1.00)
imgui.set_style_color(imgui.ImGuiCol_PlotLines, 0.39, 0.39, 0.39, 1.00)
imgui.set_style_color(imgui.ImGuiCol_PlotLinesHovered, 1.00, 0.43, 0.35, 1.00)
imgui.set_style_color(imgui.ImGuiCol_PlotHistogram, 0.90, 0.70, 0.00, 1.00)
imgui.set_style_color(imgui.ImGuiCol_PlotHistogramHovered, 1.00, 0.45, 0.00, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TableHeaderBg, 0.78, 0.87, 0.98, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TableBorderStrong, 0.57, 0.57, 0.64, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TableBorderLight, 0.68, 0.68, 0.74, 1.00)
imgui.set_style_color(imgui.ImGuiCol_TableRowBg, 0.00, 0.00, 0.00, 0.00)
imgui.set_style_color(imgui.ImGuiCol_TableRowBgAlt, 0.30, 0.30, 0.30, 0.09)
imgui.set_style_color(imgui.ImGuiCol_TextSelectedBg, 0.26, 0.59, 0.98, 0.35)
imgui.set_style_color(imgui.ImGuiCol_DragDropTarget, 0.26, 0.59, 0.98, 0.95)
imgui.set_style_color(imgui.ImGuiCol_NavHighlight, 0.26, 0.59, 0.98, 0.80)
imgui.set_style_color(imgui.ImGuiCol_NavWindowingHighlight, 0.70, 0.70, 0.70, 0.70)
imgui.set_style_color(imgui.ImGuiCol_NavWindowingDimBg, 0.20, 0.20, 0.20, 0.20)
imgui.set_style_color(imgui.ImGuiCol_ModalWindowDimBg, 0.20, 0.20, 0.20, 0.35)

britzl · March 28, 2021, 8:56pm

There are some really nice looking themes here as well: https://github.com/ocornut/imgui/issues/707