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:

51
Screenshot 2021-02-21 at 15.07.51.png1072×774 55.1 KB

22 Likes
#2

Niiice.

6 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

5 Likes