[ImGui游戏设置UI模拟实践] ImGui Learn Data Day 2
今天把ImGui的一些相关部件熟悉了一下，敲了个模拟游戏设置UI界面设计
今日关注点：
今日关注点：
- ImGui是实时渲染的：
- 由于 ImGui 是实时渲染的，每次更新都会立刻反映在界面上，因此许多设置项的更新逻辑需要非常小心。特别是在操作时需要谨慎处理控件的状态和交互。
- 静音按钮的实现：
- 在
Base Settings中实现了静音按钮功能。点击静音按钮时，音量的滑块会被锁定，无法调节，同时将音量设置为 0。 - 需要注意的是，
Checkbox控件本身有返回值，每次更改复选框的状态时，都会触发if判断语句。因此，需要记录上次的状态，以便在取消勾选时恢复之前的音量。
- 在
- 保存状态的按钮：
- 模拟了一个 保存设置 的按钮。使用 Button 时，点击保存后，保存信息仅会显示一瞬间。为了保持保存信息的显示状态，我们使用了
Checkbox来记录选中状态，确保保存信息能够持续显示。
- 模拟了一个 保存设置 的按钮。使用 Button 时，点击保存后，保存信息仅会显示一瞬间。为了保持保存信息的显示状态，我们使用了
另有工程中需要注意的点，如果想输出保存信息而不显示其他信息，需要把所有显示信息统一管理，采用类的方式
变量结构体的管理
struct ui //变量结构体{float volume = 0.0f; // 音量float previousVolume = 0.0f; // 保存的音量，用户禁用音量时使用float brightness = 0.0f; // 亮度bool isVolumeMuted = false; // 音量是否被静音bool isVolumeLastState = false; // 上次音量状态（是否被禁用）float mouseSensitivity = 50.0f; // 鼠标灵敏度const char* layoutOptions[3] = { "QWERTY", "AZERTY", "DVORAK" }; // 键盘布局选项int selectedLayoutIndex = 0; // 当前选择的键盘布局索引int radioSelection = 0; // 单选按钮的选择bool isFullScreen = false; // 是否全屏显示bool isSettingsSaved = false; // 是否已保存设置};ui ui;
窗口设置：
- 使用
ImVec2获取屏幕的分辨率，并根据用户的设置调整窗口大小。如果全屏模式开启，则设置为屏幕大小；否则，窗口大小固定。
if (uiSettings.isFullScreen)
{ImVec2 screenSize = ImGui::GetIO().DisplaySize;ImGui::SetNextWindowPos(ImVec2(0, 0)); // 设置窗口位置为屏幕左上角ImGui::SetNextWindowSize(screenSize); // 设置窗口大小为屏幕尺寸ImGui::Begin("FullScreen Window", NULL, ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove);
}
else
{ImGui::Begin("Hello Gui");
}
基本项管理：
// 基本设置：音量、亮度等
if (ImGui::CollapsingHeader("Base Settings"))
{ImGui::BeginGroup();// 静音按钮的处理逻辑if (uiSettings.isVolumeMuted) { uiSettings.volume = 0; }if (uiSettings.isVolumeLastState){ImGui::BeginDisabled();ImGui::SliderFloat("Volume", &uiSettings.volume, 0.0f, 100.0f, "%.3f");ImGui::EndDisabled(); // 锁死滑动条}else{ImGui::SliderFloat("Volume", &uiSettings.volume, 0.0f, 100.0f); // 音量滑块}ImGui::SliderFloat("Brightness", &uiSettings.brightness, 0.0f, 100.0f); // 亮度调整if (ImGui::Checkbox("Mute Volume", &uiSettings.isVolumeMuted)) // 静音按钮{if (!uiSettings.isVolumeLastState){uiSettings.previousVolume = uiSettings.volume;uiSettings.volume = 0;}else{uiSettings.volume = uiSettings.previousVolume;}uiSettings.isVolumeLastState ^= 1;}ImGui::EndGroup();
}
游戏设置管理
if (ImGui::CollapsingHeader("Game Settings"))
{ImGui::BeginGroup();// 鼠标灵敏度ImGui::SliderFloat("Mouse Sensitivity", &ui.mouseSensitivity, 0.0f, 100.0f);// 键盘布局选择ImGui::Combo("Choose Keyboard Layout", &ui.selectedLayoutIndex, ui.layoutOptions, IM_ARRAYSIZE(ui.layoutOptions));// 使用单选按钮进行选择if (ImGui::RadioButton("Option 1 (Standard)", ui.radioSelection == 0)){ui.radioSelection = 0; // 选择 "Option 1"}if (ImGui::RadioButton("Option 2 (Scientific)", ui.radioSelection == 1)){ui.radioSelection = 1; // 选择 "Option 2"}// 全屏设置ImGui::Checkbox("Enable Fullscreen?", &ui.isFullScreen);ImGui::Text("Current Mode: %s", ui.isFullScreen ? "Fullscreen" : "Windowed");ImGui::EndGroup();
}
模拟保存设置：
- 通过
Checkbox控件来模拟设置保存的操作。点击保存时，显示保存的信息，包括音量、亮度、鼠标灵敏度等设置项。
ImGui::Checkbox("Save Settings", &uiSettings.isSettingsSaved); // 保存设置按钮
if (uiSettings.isSettingsSaved)
{// 显示保存的内容ImGui::Text("Saving Settings...");ImGui::Text("Fullscreen: %s", uiSettings.isFullScreen ? "Enabled" : "Disabled");ImGui::Text("Volume: %.3f", uiSettings.volume);ImGui::Text("Brightness: %.3f", uiSettings.brightness);ImGui::Text("Mouse Sensitivity: %.3f", uiSettings.mouseSensitivity);ImGui::Text("Radio Option: %s", uiSettings.radioSelection == 0 ? "Option 1 (Standard)" : "Option 2 (Scientific)");ImGui::Text("Keyboard Layout: %s", uiSettings.layoutOptions[uiSettings.selectedLayoutIndex]);ImGui::Text("Settings have been saved (simulated)!");
}
| 新方法 | 效果 |
|---|---|
| SetNextWindowSize(ImVec2(800, 600)) | 设置窗口大小为 |
| RadioButton() | 单选按钮，在许多个RadioButton里，只选一个，取消其他。 根据里面的变量判断按钮的分组情况 |
| ui | 使用结构体统一管理变量 |