Dear ImGUI for Defold

#1

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:

32 Likes

#2

Niiice.

7 Likes

#3

very niiice

3 Likes

#4

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

2 Likes

#5

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.

6 Likes

#6

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.

50

6 Likes

#7

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

0 Likes

#8

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.

2 Likes

#9

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=]
2 Likes

#10

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:

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 :sweat:

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.

0 Likes

#11

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

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

2 Likes

#12

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.

4 Likes

#13

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.

2 Likes

#14

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.

1 Like

#15

I added this just now:

All constants defined in the ImGUI API:

6 Likes

#16

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

3 Likes

#17

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.

9 Likes

#18

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!

3 Likes

#19

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)
7 Likes

#20

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

4 Likes