恭喜你成功完成环境搭建并运行出预期效果！这是一个非常棒的里程碑，现在完全可以顺利进入《基础组件》阶段了，这个阶段的核心是掌握 ImGUI 的 \(3\) 个核心基础组件（Text、Button、ProgressBar），并落地到挂机游戏的核心数值展示与简单交互，咱们一步步推进，全程基于你现有的代码扩展，不破坏原有框架。
基础组件阶段核心目标回顾（落地挂机游戏）
- 用
ImGui::Text稳定展示挂机游戏核心数值：金币、等级、每秒收益； - 用
ImGui::Button实现交互功能：收取金币、升级建筑（修改对应游戏数值）； - 用
ImGui::ProgressBar展示挂机进度（比如 “下次自动收益倒计时”“建筑升级冷却”）；
核心要求：组件排版整齐，交互能实时修改数值，效果直观可见。
步骤 1：先准备游戏核心全局变量（存储数值）
在main.cpp中，先定义几个全局变量（方便帧循环中读写，后续进阶再优化为模块化），放在main函数外部（保证作用域覆盖整个程序），代码如下：
// 新增：挂机游戏核心全局变量（放在main函数外面，顶部或头文件中）
float g_gold = 0.0f; // 当前金币（用float方便后续小数收益累加）
int g_level = 1; // 当前等级
float g_gold_per_second = 1.0f; // 每秒自动收益
float g_afk_progress = 0.0f; // 挂机进度（0.0f ~ 1.0f，对应ProgressBar的0% ~ 100%）
const float g_progress_max = 1.0f; // 挂机进度最大值（固定为1.0f，ImGui ProgressBar默认范围）// 原有头文件和宏定义不变
#define SDL_MAIN_HANDLED
#include <SDL.h>
#include <gl/GL.h>
#include "imgui.h"
#include "imgui_impl_sdl2.h"
#include "imgui_impl_opengl3.h"
步骤 2：实现 ImGui::Text —— 展示核心游戏数值
在原有ImGui::Begin("挂机游戏主面板")和ImGui::End()之间，替换原有简单文本，添加精准的数值展示，支持中文（前提是你已加载中文字体）。
核心代码（替换原有 UI 绘制部分）
// 3. 绘制ImGUI UI（核心：替换为基础组件展示）
ImGui::Begin("挂机游戏主面板"); // 创建一个窗口// 新增：用ImGui::Text展示核心数值（排版整齐，添加说明文字）
ImGui::Text("当前金币：%.2f", g_gold); // %.2f 保留2位小数，避免数值过长
ImGui::Text("当前等级：%d", g_level); // %d 展示整数（等级）
ImGui::Text("每秒收益：%.2f 金币/秒", g_gold_per_second);// 原有简单文本可保留或删除
ImGui::Text("Hello, 挂机游戏！");ImGui::End(); // 结束窗口绘制
关键说明
ImGui::Text 支持格式化输出，和 C 语言的printf语法一致，常用格式：
%d：整数（等级、建筑数量等）；%f：浮点数（金币、收益等），%.2f可控制保留 \(2\) 位小数，更美观；%s：字符串（后续可扩展角色名称等）；
文本会自动跟随窗口排版，无需手动调整位置，后续布局阶段再优化对齐。
步骤 3：实现 ImGui::Button —— 实现交互功能（收取金币、升级建筑）
ImGui::Button 的核心是：判断按钮是否被点击（返回值为 bool，点击时返回 true），点击后修改对应的游戏全局变量即可实现交互。
核心代码（添加到 Text 之后，End 之前）
// 新增：用ImGui::Button实现交互（换行分隔，排版更清晰）
ImGui::Spacing(); // 添加空白间距，分隔文本和按钮
ImGui::Separator(); // 添加分割线，优化排版
ImGui::Spacing();// 按钮1：收取金币（点击后，金币 += 10 * 每秒收益，简单逻辑）
if (ImGui::Button("收取金币")) {// 按钮被点击时执行的逻辑g_gold += 10 * g_gold_per_second;// 可选：重置挂机进度（收取后重新开始累计）g_afk_progress = 0.0f;
}// 按钮2：升级建筑（点击后，等级+1，每秒收益提升，需要消耗金币）
ImGui::SameLine(); // 让按钮在同一行显示（可选，优化排版）
if (ImGui::Button("升级建筑（消耗100金币）")) {// 先判断金币是否足够，避免负数if (g_gold >= 100.0f) {g_level += 1;g_gold_per_second += 0.5f; // 每级提升0.5金币/秒g_gold -= 100.0f; // 扣除升级消耗}
}
关键说明
- ``ImGui::Button("按钮文本")
返回true`仅在当前帧被点击时生效，逻辑执行一次，符合交互预期； ImGui::Spacing()：添加垂直空白间距，让 UI 更松散美观，避免组件拥挤；ImGui::Separator()：绘制一条水平分割线，分隔不同功能区域；ImGui::SameLine()：让下一个组件在当前组件的同一行显示（不换行），适合多个按钮并排；- 升级建筑添加了 “金币足够判断”，这是挂机游戏的基础逻辑，避免出现不合理的负数金币。
步骤 4：实现 ImGui::ProgressBar —— 展示挂机进度
ImGui::ProgressBar 用于展示进度条，核心参数是当前进度（0.0f ~ 1.0f），还可以添加额外文本说明进度含义。
核心代码（添加到 Button 之后，End 之前）
// 新增：用ImGui::ProgressBar展示挂机进度（先更新进度，再绘制）
ImGui::Spacing();
ImGui::Separator();
ImGui::Spacing();// 先更新挂机进度（每帧累加少量数值，模拟时间流逝）
// 0.001f 控制进度条填充速度，可根据需要调整
g_afk_progress += 0.001f;
// 限制进度在0.0f ~ 1.0f之间，避免溢出
if (g_afk_progress > g_progress_max) {g_afk_progress = g_progress_max;// 可选：进度满时自动增加金币（模拟自动挂机）g_gold += g_gold_per_second;g_afk_progress = 0.0f; // 重置进度，循环累计
}// 绘制进度条（核心：第一个参数是当前进度/最大值，第二个参数是进度条尺寸）
ImGui::Text("挂机自动收益进度：");
ImGui::ProgressBar(g_afk_progress / g_progress_max, ImVec2(0.0f, 0.0f));
// 可选：进度条右侧添加文本说明
ImGui::SameLine();
ImGui::Text("%.0f%%", g_afk_progress * 100); // 转换为百分比显示
关键说明
ImGui::ProgressBar的第一个参数必须是0.0f~1.0f的值，因此用 当前进度 / 最大值 做归一化处理；ImVec2(0.0f, 0.0f)是进度条的尺寸，两个参数都为 \(0\) 时，进度条会自动填充当前窗口的宽度，高度使用默认值，更适配 UI；- 进度条的更新逻辑放在绘制之前，每帧累加少量数值，模拟 “时间流逝”，进度满时自动增加金币，实现简单的自动挂机效果；
%.0f%%用于百分比显示，%%表示输出一个%符号（转义字符），%.0f不保留小数，更直观。
步骤 5：整合完整代码，编译运行验证效果
核心验证点
运行程序后，能看到清晰的金币、等级、每秒收益数值；
点击 “收取金币”，金币数值会立即增加，进度条重置；
金币≥100 时，点击 “升级建筑”，等级提升、每秒收益增加、金币扣除；
进度条会缓慢填充，满值后自动增加金币并重置，实现自动挂机；
中文正常显示，UI 排版整齐，无乱码、无报错。
后续小优化（可选，为下一阶段布局铺垫）
调整按钮尺寸：ImGui::Button("收取金币", ImVec2(120, 40))，第二个参数指定按钮的宽高，让按钮更美观；
给不足 100 金币时的升级按钮添加提示（比如红色文本），后续进阶交互阶段会详细讲解；
调整进度条颜色，ImGUI 默认样式即可，后续布局阶段可自定义样式。
基础组件阶段总结
核心是掌握 3 个组件的使用：Text（展示）、Button（交互）、ProgressBar（进度）；
关键逻辑是：全局变量存储游戏状态，组件操作修改全局变量，帧循环实时刷新 UI；
这个阶段完成后，你已经拥有了挂机游戏的核心雏形，下一阶段就是优化 UI 布局，搭建双窗口（主面板 + 设置面板）。
恭喜你即将完成基础组件阶段，运行成功后，就可以顺利进入《UI 布局》阶段啦！