[ImGui游戏设置UI模拟实践] ImGui Learn Data Day 2

[ImGui游戏设置UI模拟实践] ImGui Learn Data Day 2

今天把ImGui的一些相关部件熟悉了一下，敲了个模拟游戏设置UI界面设计

今日关注点：

今日关注点：

1. ImGui是实时渲染的：
   • 由于 ImGui 是实时渲染的，每次更新都会立刻反映在界面上，因此许多设置项的更新逻辑需要非常小心。特别是在操作时需要谨慎处理控件的状态和交互。
2. 静音按钮的实现：
   • 在 Base Settings 中实现了静音按钮功能。点击静音按钮时，音量的滑块会被锁定，无法调节，同时将音量设置为 0。
   • 需要注意的是，Checkbox 控件本身有返回值，每次更改复选框的状态时，都会触发 if 判断语句。因此，需要记录上次的状态，以便在取消勾选时恢复之前的音量。
3. 保存状态的按钮：
   • 模拟了一个 保存设置 的按钮。使用 Button 时，点击保存后，保存信息仅会显示一瞬间。为了保持保存信息的显示状态，我们使用了 Checkbox 来记录选中状态，确保保存信息能够持续显示。

另有工程中需要注意的点，如果想输出保存信息而不显示其他信息，需要把所有显示信息统一管理，采用类的方式

变量结构体的管理

 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	使用结构体统一管理变量