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

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

今日关注点：

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

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

变量结构体的管理

c++ 复制代码

 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 获取屏幕的分辨率，并根据用户的设置调整窗口大小。如果全屏模式开启，则设置为屏幕大小；否则，窗口大小固定。

c++ 复制代码

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");
}

基本项管理：

c++ 复制代码

// 基本设置：音量、亮度等
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();
}

游戏设置管理

c++ 复制代码

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 控件来模拟设置保存的操作。点击保存时，显示保存的信息，包括音量、亮度、鼠标灵敏度等设置项。

c++ 复制代码

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