ImGui Learn Data Day 1

ImGui Learn data Day 1

        ImGui::Begin("Hello Gui");
   
        static float u = 0;
        static bool an = 0;
        if (ImGui::CollapsingHeader("Settings"))//展开条
        {//如果点击就展开或者关闭
            ImGui::SliderFloat("滑块", &u, 0.0, 10.0);
            ImGui::Checkbox("按钮", &an);
        }

        //下拉菜单
        const char* items[] = { "op1","op2","op3" };
        static int select = 0;//记录当前选的是哪个
        if (ImGui::Combo("choose one", &select, items, IM_ARRAYSIZE(items)));//最后一个是计算数组大小的	
        {
            ImGui::Text("check then open");
        }
        
        ImGui::SameLine();//上面的和下面的保持在同一行
        ImGui::BeginGroup();//用于把组件分个组 当需要对齐的时候可以一起对齐
        ImGui::Text("check then open1");
        ImGui::Text("check then open2");
        ImGui::Text("check then open3");
        ImGui::Button("ppp");
        //拖动组件
        static float va = 0.0f;
        ImGui::DragFloat("Drag me", &va, 0.001f, 0.0f, 10.0f);//第三个是步长

        //颜色选择器
        ImGui::ColorEdit3("color picker ", color);


        ImGui::EndGroup();//给组件分个组，begin和end中间的会被放到一起


        ImGui::End();

方法	注释
CollapsingHeader()	这是一个展开条，点击可以展开里面的组件，放在if的括号里面
Combo()	和展开条类似，只是展开之后可以选择东西,也是放在if里面，需要一个char*数组记录里面有什么可选的
SameLine()	这个组件的前一个组件和后一个组件放在同一行
DragFloat()	没有滑块的滑条，可以和滑块类似，拖动组件
ColorEdit3()	三个参数的颜色选择器，rgb，可以拿来选择各种颜色
BeginGroup() EndGroup()	给组件分组的时候用，这两个中间的组件被视作为一组

实践作业：

作业要求：创建一个“游戏设置面板”

你需要创建一个界面，模拟一个游戏中的设置面板，可以让用户调整游戏参数。这个面板将包含以下几个部分：

---

1. 游戏基本设置

• 音量控制：使用滑条（SliderFloat）来控制音量。
• 画面亮度：使用滑条（SliderFloat）来控制画面亮度。
• 是否开启背景音乐：使用复选框（Checkbox）来决定是否开启背景音乐。

2. 游戏控制设置

• 鼠标灵敏度：使用浮动滑条（SliderFloat）来调整鼠标灵敏度。
• 键盘布局选择：使用下拉菜单（Combo）让用户选择键盘布局（例如：QWERTY，AZERTY，DVORAK）。
• 控制模式切换：使用一个按钮（Button）来切换控制模式（例如从“标准模式”切换到“飞行模式”）。

3. 显示设置

• 分辨率选择：提供几个不同的分辨率选项，使用下拉菜单（Combo）进行选择。
• 全屏模式：使用复选框（Checkbox）来选择是否启用全屏。

4. 保存设置

• 使用一个按钮（Button）来保存用户的设置。点击后弹出一个消息框，显示用户设置的内容。

---

额外要求：

• 界面布局：确保各个设置项有良好的布局，适当使用 CollapsingHeader 或 BeginGroup/EndGroup 来组织内容。
• 数据持久化：你可以使用静态变量（如 static）来保存用户设置，这样在不同的帧之间可以保持这些设置。

---

实现思路：

1. 创建窗口：你需要一个主窗口来承载这些设置。
2. 音量与亮度：使用滑条来控制数值，并显示在文本中。
3. 复选框：控制音乐是否开启，背景是否为全屏。
4. 下拉菜单：让用户选择键盘布局和分辨率。
5. 保存设置：点击按钮时弹出消息框，展示保存的设置。

---

代码结构大致框架：

ImGui::Begin("Game Settings Panel");

// 1. 游戏基本设置
if (ImGui::CollapsingHeader("Basic Settings"))
{
    static float volume = 0.5f;
    ImGui::SliderFloat("Volume", &volume, 0.0f, 1.0f);

    static float brightness = 1.0f;
    ImGui::SliderFloat("Brightness", &brightness, 0.0f, 2.0f);

    static bool musicEnabled = true;
    ImGui::Checkbox("Enable Background Music", &musicEnabled);
}

// 2. 游戏控制设置
if (ImGui::CollapsingHeader("Control Settings"))
{
    static float mouseSensitivity = 1.0f;
    ImGui::SliderFloat("Mouse Sensitivity", &mouseSensitivity, 0.1f, 10.0f);

    const char* layouts[] = { "QWERTY", "AZERTY", "DVORAK" };
    static int selectedLayout = 0;
    ImGui::Combo("Keyboard Layout", &selectedLayout, layouts, IM_ARRAYSIZE(layouts));

    static bool flightMode = false;
    if (ImGui::Button(flightMode ? "Switch to Standard Mode" : "Switch to Flight Mode"))
    {
        flightMode = !flightMode;
    }
}

// 3. 显示设置
if (ImGui::CollapsingHeader("Display Settings"))
{
    const char* resolutions[] = { "1920x1080", "1280x720", "800x600" };
    static int selectedResolution = 0;
    ImGui::Combo("Resolution", &selectedResolution, resolutions, IM_ARRAYSIZE(resolutions));

    static bool fullscreen = false;
    ImGui::Checkbox("Fullscreen", &fullscreen);
}

// 4. 保存设置
if (ImGui::Button("Save Settings"))
{
    // 这里可以模拟保存设置，并弹出一个消息框
    ImGui::OpenPopup("Settings Saved");
}

if (ImGui::BeginPopupModal("Settings Saved", NULL, ImGuiWindowFlags_AlwaysAutoResize))
{
    ImGui::Text("Settings have been saved:");
    ImGui::Text("Volume: %.2f", volume);
    ImGui::Text("Brightness: %.2f", brightness);
    ImGui::Text("Music: %s", musicEnabled ? "Enabled" : "Disabled");
    ImGui::Text("Mouse Sensitivity: %.2f", mouseSensitivity);
    ImGui::Text("Keyboard Layout: %s", layouts[selectedLayout]);
    ImGui::Text("Mode: %s", flightMode ? "Flight Mode" : "Standard Mode");
    ImGui::Text("Resolution: %s", resolutions[selectedResolution]);
    ImGui::Text("Fullscreen: %s", fullscreen ? "Enabled" : "Disabled");

    if (ImGui::Button("Close"))
        ImGui::CloseCurrentPopup();

    ImGui::EndPopup();
}

ImGui::End();

---

任务要求：

1. 实现并完善上面的框架，确保每个功能都能正确工作。
2. 提交时，提供：
   • 完整的代码
   • 截图或视频，展示界面效果

---

这个任务将帮助你巩固所学的 ImGui 技能，并加深你对界面布局、交互以及控件的使用掌握。完成后，你会更自信地使用 ImGui 来制作更加复杂和实用的用户界面。如果你在完成过程中遇到问题，随时可以向我询问！