Creating a Clock with ImGui

Written by J$K

For this example we will explore the use of ImGui. ImGui is a GUI (Graphical User Interface) framework. This allows us to draw a multitude of things on screen.

First, lets create a function that will run an ImGui window each frame.

local function ImGuiExample()
	-- Begin our ImGui window
	ImGui.Begin("Clock", ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize)
	-- Add text to our window.
	ImGui.Text("J$K is boss.")
	-- End our window.
	ImGui.End()
end

engine.addEventListener("render", ImGuiExample)

If you've tried this in game, you'll have noticed that the text is quite small, and the window isn't resizable. So let's take a look at editing the style of ImGui. When we initialized ImGui we set some properties that the window will follow.

ImGui.Begin("Clock", ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize)

ImGuiWindowsFlags.NoTitleBar and ImGuiWindowFlags.NoResize are two properties, or "flags" we defined above. NoTitleBar means our ImGui window will not have a title above our window, and NoResize is just as it sounds, we won't be able to resize our window. To see a full list of flags that are available, click here.

So let's start adding some styles to the rest of our program. We can start off by making the background transparent, and making our text bigger. We do this by "pushing" our styles.

local function ImGuiExample()
        ImGui.PushFont("RobotoMono-Light", 36);
        ImGui.PushStyleColor(ImGuiCol.WindowBg, Vec4:new(0, 0, 0, 0))
        ImGui.PushStyleVarFloat(ImGuiStyleVar.WindowBorderSize, 0)
        
        --Our Imgui code goes here from the example above.
        
        ImGui.PopFont()
        ImGui.PopStyleColor()
        ImGui.PopStyleVar()
end

It is important for every push, we also pop. For instance, our ImGui.PushFont() must also have ImGui.PopFont(). Now with these styles applied let's see how it looks in-game.

Awesome! Now our styles are applied, and we have some draggable text. So let's plug in a clock to our ImGui.Text and we are done!

	local clockTime = os.date("%X")
	ImGui.Text(tostring(clockTime))

In Lua, to get our clock working we have to call os.date("%X") where %X is our format for time. You can see all the other formats here. Then we can plug that in to ImGui.Text as a string.

Our full code should look something like this.

local function ImGuiExample()
	-- Pushing Styles
        ImGui.PushFont("RobotoMono-Light", 36);
        ImGui.PushStyleColor(ImGuiCol.WindowBg, Vec4:new(0, 0, 0, 0))
	ImGui.PushStyleVarFloat(ImGuiStyleVar.WindowBorderSize, 0)

	-- Begin our ImGui window
	ImGui.Begin("Clock", ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize)
	
	-- Add text to our window.
	local clockTime = os.date("%X")
	ImGui.Text(tostring(clockTime))

	-- End our window & Pop Styles.
	ImGui.End()
        ImGui.PopFont()
        ImGui.PopStyleColor()
	ImGui.PopStyleVar()
end

engine.addEventListener("render", ImGuiExample)