VS2022 ImGui 最簡 Demo（環境建置） - ImGui 教學

事前準備

安裝VS2022，並勾選C++桌面開發相關元件
下載 ImGui 原始碼，ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies 記得抓release版本
取得GLFW二進位套件，Imgui需要依賴這套程式來建立繪圖視窗

我們這次要在64位元Windows環境執行，直接下載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++目錄

切換到一般(General)分頁

找到包含目錄(Include Directories)，後面有個編輯(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專案時產生的巢狀資料夾有關，大家要照自己本機的資料夾結構調整。

修改包含目錄的路徑設定

$(SolutionDir)ImGuiDemo\imgui
$(SolutionDir)ImGuiDemo\imgui\backends
$(SolutionDir)ImGuiDemo\glfw\includeCode language: JavaScript (javascript)

改完儲存後，原始碼上的紅線就會全部消失。

點擊VS上方工具列的執行按鈕

若出現 cannot open file ‘glfw3.lib 錯誤訊息

成因跟前面一樣，程式庫目錄路徑少加了ImGuiDemo\這一層子目錄，同樣要回去修正設定。

前面程式庫路徑全部一併調整

$(SolutionDir)ImGuiDemo\glfw\lib-vc2022Code language: JavaScript (javascript)

再次編譯執行

到這邊就成功執行第一支範例，從下載依賴套件到完整跑起來的流程都講完，大家可以跟著操作一次。後續文章會繼續分享更多ImGui實作內容。

Next: ImGui 範例解析