当前位置：首页 > news >正文

【C++游戏引擎开发】第16篇：ImGui指南

news 来源：原创 2025/5/25 5:11:59

ImGui官方Github
ImGUI（即时模式图形用户界面）是一种颠覆传统GUI开发范式的界面系统，由Casey Muratori于2005年提出概念，后经Omar Cornut开发为Dear ImGui开源库。其核心设计理念彻底改变了开发者构建交互式工具的方式。

一、vcpkg安装与特点介绍

1.1 安装

vcpkg install imgui[core,glfw-binding,opengl3-binding,docking-experimental,freetype]

1.2 设计哲学与技术特性

即时模式（Immediate Mode）范式
- 无状态架构：每帧完全重建界面，无持久化控件对象
- 过程式编程：通过函数调用序列直接描述界面布局
- 实时响应：输入状态与界面渲染严格同步，延迟低于1帧
架构特点

// 典型代码结构
ImGui::Begin("Control Panel");
static float value = 0.0f;
ImGui::SliderFloat("参数调节", &value, 0.0f, 1.0f); // 直接绑定变量
if (ImGui::Button("执行操作")) {// 立即响应用户操作
}
ImGui::End();

二、核心实现机制

2.1 输入输出处理流程

2.2 关键数据结构

ImDrawList：包含顶点/索引数据的动态缓冲区
ImGuiStorage：用于维护控件状态的键值存储
ImGuiContext：全局上下文管理样式/字体/堆栈

2.3 上下文创建

// 初始化三部曲
IMGUI_CHECKVERSION(); // 版本校验
ImGui::CreateContext(); 
ImGuiIO& io = ImGui::GetIO();// 配置输入行为
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard; // 启用键盘导航
io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;      // 启用停靠系统// 设置INI文件存储路径
io.IniFilename = "imgui_config.ini";

2.4 平台后端绑定

// GLFW绑定
ImGui_ImplGlfw_InitForOpenGL(window, true);// OpenGL绑定
const char* glsl_version = "#version 460";
ImGui_ImplOpenGL3_Init(glsl_version);// 字体加载（推荐使用TTF）
io.Fonts->AddFontFromFileTTF("fonts/SourceHanSansCN-Regular.otf", 18.0f, nullptr, io.Fonts->GetGlyphRangesChineseFull());

若在VS2022下出现中文乱码，可在代码文件开头加上如下代码：

#if _MSC_VER >= 1600
#pragma execution_character_set("utf-8")
#endif

三、常用UI元素解析

3.1 基础控件库

3.1.1 按钮与交互

// 普通按钮
if (ImGui::Button("提交")) {// 处理点击事件
}// 带图标的按钮
ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.2f, 0.7f, 0.2f, 1.0f));
if (ImGui::Button(ICON_FA_SAVE " 保存")) {SaveData();
}
ImGui::PopStyleColor();// 按钮尺寸控制
ImGui::Button("特大按钮", ImVec2(200, 80));

3.1.2 数值输入

// 浮点数输入
static float velocity = 0.0f;
ImGui::DragFloat("速度", &velocity, 0.1f, 0.0f, 100.0f, "%.2f m/s");// 整数输入带步进按钮
static int itemCount = 10;
ImGui::InputInt("数量",