ImGui

imgui 是什么

Dear imgui 是一个 C++ 的图形用户界面库,她输出优化的顶点缓冲区,可以随时在支持 3D 管线的应用程序中渲染这些缓冲区。它快速、可移植、与渲染器无关且自包含(无外部依赖关系)。在笔者写这篇文章时,她已经在github上收获了 54.3k star 了。

Dear ImGui 旨在实现快速迭代,它特别适合集成到游戏引擎、实时 3D 应用程序、全屏应用程序、嵌入式应用程序或操作系统功能非标准的控制台平台上的任何应用程序中。

Dear imgui 还支持多种语言 绑定,比如常用的Python, Java, Go, Lua 还包括很多你可能连听都没听过的语言绑定。

快速开始

快速,当然得选择脚本语言了(这可以免去编译的痛苦,并让你在享受 Dear imgui 强大能力之前,先远离编译错误), 就先选择LUA脚本绑定吧。

1
2
3
4
5
6
wget https://github.com/love2d/love/releases/download/11.5/love-11.5-x86_64.AppImage
chmod +x love-11.5-x86_64.AppImage
mkdir test && cd test
wget https://codeberg.org/apicici/cimgui-love/releases/download/1.90-1/cimgui-love-linux-x64-1.90-1.zip 
unzip cimgui-love-linux-x64-1.90-1.zip
vi main.lua

示例程序文件 main.lua 的内容如下:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103

local imgui = require "cimgui" -- cimgui is the folder containing the Lua module (the "src" folder in the git repository)

love.load = function()
    imgui.love.Init() -- or imgui.love.Init("RGBA32") or imgui.love.Init("Alpha8")
end

love.draw = function()
    -- example window
    imgui.ShowDemoWindow()
    
    -- code to render imgui
    imgui.Render()
    imgui.love.RenderDrawLists()
end

love.update = function(dt)
    imgui.love.Update(dt)
    imgui.NewFrame()
end

love.mousemoved = function(x, y, ...)
    imgui.love.MouseMoved(x, y)
    if not imgui.love.GetWantCaptureMouse() then
        -- your code here
    end
end

love.mousepressed = function(x, y, button, ...)
    imgui.love.MousePressed(button)
    if not imgui.love.GetWantCaptureMouse() then
        -- your code here 
    end
end

love.mousereleased = function(x, y, button, ...)
    imgui.love.MouseReleased(button)
    if not imgui.love.GetWantCaptureMouse() then
        -- your code here 
    end
end

love.wheelmoved = function(x, y)
    imgui.love.WheelMoved(x, y)
    if not imgui.love.GetWantCaptureMouse() then
        -- your code here 
    end
end

love.keypressed = function(key, ...)
    imgui.love.KeyPressed(key)
    if not imgui.love.GetWantCaptureKeyboard() then
        -- your code here 
    end
end

love.keyreleased = function(key, ...)
    imgui.love.KeyReleased(key)
    if not imgui.love.GetWantCaptureKeyboard() then
        -- your code here 
    end
end

love.textinput = function(t)
    imgui.love.TextInput(t)
    if imgui.love.GetWantCaptureKeyboard() then
        -- your code here 
    end
end

love.quit = function()
    return imgui.love.Shutdown()
end

-- for gamepad support also add the following:

love.joystickadded = function(joystick)
    imgui.love.JoystickAdded(joystick)
    -- your code here 
end

love.joystickremoved = function(joystick)
    imgui.love.JoystickRemoved()
    -- your code here 
end

love.gamepadpressed = function(joystick, button)
    imgui.love.GamepadPressed(button)
    -- your code here 
end

love.gamepadreleased = function(joystick, button)
    imgui.love.GamepadReleased(button)
    -- your code here 
end

-- choose threshold for considering analog controllers active, defaults to 0 if unspecified
local threshold = 0.2 

love.gamepadaxis = function(joystick, axis, value)
    imgui.love.GamepadAxis(axis, value, threshold)
    -- your code here 
end

然后回到终端输入

1
../love-11.5-x86_64.AppImage .

你将得到如下图所示的一个图形界面。 love2d_imgui

除去下载用的时间,并且你不是一条条手动输入 lua 脚本,那么应该不到1分钟吧, 现在就让我们用 Dear ImGui 开始愉快的构架自己的GUI吧。

对上面内容的一点说明

love-11.5-x86_64.AppImage 是 love2d 的linux 系统下的应用。LÖVE 是一个用LUA开发 2D 游戏的 Framework, 她是开源且跨平台的, 在 Windows, macOS, Linux, Android 和 iOS 上都能工作。

直接用 C++ 开发

Dear ImgUI 已经提供了大量的 C++ 示例, 所以就不用我上代码了, 这里只是一个简单测试示例的命令。

1
2
3
4
5
git clone https://github.com/ocornut/imgui.git
cd imgui/examples/example_glut_opengl2
make
# 如果不出意外编译是直接成功的,反之你需要安装好缺失的库。
./example_glut_opengl2
updatedupdated2024-02-272024-02-27