前置准备
- 安装VS2022,并且勾选C++桌面开发相关组件
- 下载 ImGui 源码，ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies 下载release版本的
- GLFW 二进制包，Imgui依赖这个包来绘制窗口
由于我们是在windows 64位运行，所以下载64位 windows binaries就可以。
创建项目
打开VS2022,创建「空项目 C++」
然后给项目起一个名字，例如ImGuiDemo
右键项目>>>属性 >>> 配置改成 Release x64
引入文件
把上面下载的两个文件，解压出来，改名位imgui和glfw，拷贝到项目根目录中。
这两个文件夹里面不要再嵌套子文件夹，直接就是项目文件了。
├─ imgui/
│ ├─ backends/
│ ├─ imgui.h、imgui.cpp ...
├─ glfw/
│ ├─ include/GLFW/
│ ├─ lib-vc2022/Code language: PHP (php)例如这样。
附加
附加包含目录
右键项目，选择属性
点击上图的VC++ Directories
然后看到，General（常规）
Include Directories 有个edit 点击edit
然后添加如下三行
$(SolutionDir)imgui
$(SolutionDir)imgui\backends
$(SolutionDir)glfw\includeCode language: JavaScript (javascript)
Library Directories
继续当前配置页面，找到 Library Directories，填入 GLFW 的 lib 文件夹路径
增加 $(SolutionDir)glfw\lib-vc2022
链接器 lib 依赖
Linker >>> Input >>> Additional Dependencies
glfw3.lib
opengl32.lib
user32.lib
gdi32.lib
shell32.libCode language: CSS (css)
添加源码到项目
右键源文件，添加现有项，选中这些文件
imgui/imgui.cpp
imgui/imgui_draw.cpp
imgui/imgui_widgets.cpp
imgui/imgui_tables.cpp
imgui/imgui_demo.cpp
imgui/backends/imgui_impl_glfw.cpp
imgui/backends/imgui_impl_opengl3.cpp
新建项目入口
新建 main.cpp
#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>
int main()
{
// Initialize GLFW
if (!glfwInit())
{
printf("GLFW initialization failed\n");
return -1;
}
// OpenGL 3.3
const char* glsl_version = "#version 330";
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
// Create window
GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);
if (!window)
{
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSwapInterval(1); // VSync enable
// Initialize ImGui
IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO();
ImGui::StyleColorsDark();
// Bind GLFW + OpenGL3 backend
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init(glsl_version);
// UI state variables
float slider_value = 0.5f;
int click_count = 0;
bool show_full_demo = false;
// Main render loop
while (!glfwWindowShouldClose(window))
{
glfwPollEvents();
// Start new ImGui frame
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
// Draw custom UI panel
ImGui::Begin("Control Panel");
ImGui::Text("Hello ImGui + VS2022");
ImGui::SliderFloat("Slider Value", &slider_value, 0.f, 1.f);
if (ImGui::Button("Click to Count"))
click_count++;
ImGui::SameLine();
ImGui::Text("Click Count: %d", click_count);
ImGui::Checkbox("Show Full ImGui Demo Window", &show_full_demo);
ImGui::End();
if (show_full_demo)
ImGui::ShowDemoWindow(&show_full_demo);
// Render ImGui draw data
ImGui::Render();
int width, height;
glfwGetFramebufferSize(window, &width, &height);
glViewport(0, 0, width, height);
glClearColor(0.12f, 0.12f, 0.12f, 1.f);
glClear(GL_COLOR_BUFFER_BIT);
ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
glfwSwapBuffers(window);
}
// Cleanup resources
ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();
glfwDestroyWindow(window);
glfwTerminate();
return 0;
}Code language: C++ (cpp)
但是出现上图这样的，检查发现是我们附加目录的时候，
D:\Demos\ImGuiDemo\ImGuiDemo 我们的imgui和glfw是再这个目录（多了一个ImGuiDemo子目录）的，但是我们配置的时候，没考虑这里。这个和我们创建vs项目有关系，读者要看你的vs创建项目有没有多了一层文件夹。
修改附加目录
$(SolutionDir)ImGuiDemo\imgui
$(SolutionDir)ImGuiDemo\imgui\backends
$(SolutionDir)ImGuiDemo\glfw\includeCode language: JavaScript (javascript)
配置后，红色波浪线就消失了。
点击顶部的运行
cannot open file ‘glfw3.lib’ 出现这个错误
原因和上面一样，也是我们的两个文件夹配置错了，要继续修改上面的，加上ImGuiDemo\ 这个目录
前面的配置都要
$(SolutionDir)ImGuiDemo\glfw\lib-vc2022Code language: JavaScript (javascript)再次运行
ok，以上就是我们的第一个例子，从下载依赖，到运行起来，读者可以自己试试。后面我们继续来学习imgui。