VS2022 ImGui 最小デモ（環境構築手順） - ImGui ガイド

事前準備

VS2022をインストールし、C++デスクトップ開発に関連するコンポーネントにチェックを入れる
ImGuiソースコードをダウンロード。ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies からリリース版を取得する
GLFWバイナリパッケージを用意。ImGuiはウィンドウ描画にこのライブラリを依存する

Windows 64bit環境で実行するため、64bit windows binariesをダウンロードすれば大丈夫です。

プロジェクト作成

VS2022を起動し、「空のC++プロジェクト」を作成

プロジェクト名を設定。例：ImGuiDemo

プロジェクトを右クリック→プロパティ→構成を Release x64 に切り替え

ファイル導入

上記でダウンロードした2つのファイルを解凍、フォルダ名をimgui、glfwに変更しプロジェクトルートへコピーする。

2つのフォルダ内にサブフォルダを多重に作らず、直下にソースファイルが配置される状態にする。

├─ imgui/
│  ├─ backends/
│  ├─ imgui.h、imgui.cpp ...
├─ glfw/
│  ├─ include/GLFW/
│  ├─ lib-vc2022/Code language: PHP (php)

上記のようなディレクトリ構成にします。

追加設定

追加インクルードディレクトリ

プロジェクトを右クリックし、プロパティを開く

画面左のVC++ディレクトリをクリック

全般(General)タブへ移動

インクルードディレクトリ(Include Directories)の横にある編集(edit)ボタンを押す

下記3行を追加

$(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)

設定保存後、ソース上の赤い下線が消えます。

上部ツールバーの実行ボタンをクリック

「cannot open file ‘glfw3.lib’」というエラーが出力された場合

原因は上記と同じで、ライブラリディレクトリのパスにImGuiDemo\ の階層が抜けているため、同様に設定を修正する必要があります。

ライブラリパスも一緒に変更

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

再度ビルド・実行

これで最初のサンプルが正常起動します。依存ライブラリのダウンロードから動作確認まで一連の流れを解説したので、実際に手を動かして試してみてください。今後の記事ではImGuiの各種活用方法をさらに紹介します。

Next: ImGuiサンプル解説