【亲测免费】 Dear ImGui 使用教程

项目介绍

Dear ImGui（也称为 ImGui）是一个即时模式图形用户界面（GUI）库，主要用于游戏开发和实时应用程序。它由Omar Cornut开发，是一个轻量级、高效的C++库，旨在快速构建调试工具、配置面板和其他用户界面元素。Dear ImGui 的设计理念是简单、直观，且易于集成到现有项目中。

项目快速启动

环境准备

1. 克隆项目：

   git clone https://github.com/ocornut/imgui.git
   cd imgui
   

2. 集成到项目： 将 imgui 目录复制到你的项目中，并包含必要的头文件和源文件。

示例代码

以下是一个简单的示例，展示如何在应用程序中使用 Dear ImGui：

#include "imgui.h"
#include "imgui_impl_glfw.h"
#include "imgui_impl_opengl3.h"
#include <GLFW/glfw3.h>

int main() {
    // 初始化 GLFW
    if (!glfwInit())
        return -1;

    // 创建窗口
    GLFWwindow* window = glfwCreateWindow(1280, 720, "Dear ImGui Example", NULL, NULL);
    if (window == NULL)
        return -1;

    glfwMakeContextCurrent(window);
    glfwSwapInterval(1); // 启用垂直同步

    // 初始化 ImGui
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO(); (void)io;
    ImGui::StyleColorsDark();

    // 设置 GLFW 和 OpenGL 后端
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init("#version 130");

    // 主循环
    while (!glfwWindowShouldClose(window)) {
        glfwPollEvents();

        // 开始新帧
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // 创建 ImGui 窗口
        ImGui::Begin("Hello, world!");
        ImGui::Text("This is some useful text.");
        ImGui::End();

        // 渲染
        ImGui::Render();
        int display_w, display_w;
        glfwGetFramebufferSize(window, &display_w, &display_w);
        glViewport(0, 0, display_w, display_w);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    // 清理
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();

    glfwDestroyWindow(window);
    glfwTerminate();

    return 0;
}

应用案例和最佳实践

调试工具

Dear ImGui 常用于创建调试工具，例如显示实时数据、调整参数等。以下是一个简单的调试工具示例：

ImGui::Begin("Debug Window");
ImGui::Text("Application average %.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate);
ImGui::End();

配置面板

使用 Dear ImGui 创建配置面板，可以方便地调整应用程序的参数：

ImGui::Begin("Configuration");
static float f = 0.0f;
ImGui::SliderFloat("float", &f, 0.0f, 1.0f);
ImGui::End();

典型生态项目

imgui-sfml

imgui-sfml 是一个将 Dear ImGui 集成到 SFML 库中的项目，使得在 SFML 应用程序中使用 ImGui 变得非常简单。

imgui-node-editor

imgui-node-editor 是一个基于 Dear ImGui 的节点编辑器库，适用于创建复杂的图形编辑器和数据流图。

通过这些生态项目，Dear ImGui 的功能得到了进一步扩展，使其更加适用于各种复杂的应用场景。