给 C 游戏加设置面板raygui 即时模式 GUI 从 0 到面板的实战教程【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib游戏主体已经能跑了但你总想加一个能拖、能点的设置面板——音量、难度、显示模式点一下就有反应。raylib 是轻量跨平台的游戏库raygui 则是它附带的单文件即时模式 GUI 模块一个头文件就能把界面做出来。这篇 raylib raygui 教程带你走完从最小窗口到完整面板的全部流程。⭐ 为什么选 raygui传统 GUI 框架的路子装依赖、配构建、学事件模型、理解控件树面板还没画环境先折腾一晚上。raygui 是另一个量级。单文件整个模块就是一个raygui.h仓库examples/各模块目录下都有一份拷进项目src/就能用。无实例化开销控件不是被创建出来的对象。每帧调用函数的那一瞬间它才画出自己、读一次鼠标键盘、把结果写回你的变量——没有生命周期要管理也没有对象要销毁。与渲染循环天然贴合它就活在BeginDrawing()和EndDrawing()之间跟你的游戏绘制共用一套流程。结论如果面板只是几个滑块加几个开关raygui 的引入成本接近于零。 即时模式在做什么换个比方把界面当成街头小吃摊——摊主不备菜客人一招呼也就是每帧一渲染才现做一盘。做菜的配方就是你的 C 变量滑块该指在哪取决于volume当前是 60 还是 30复选框该不该打勾取决于soundOn是 1 还是 0。摊主不留库存上一帧卖出去的菜不会留在锅里下一帧照配方重新做一遍。这就是即时模式 GUI 的全部机制落到写代码上就是两条铁律每帧重新声明所有控件没有例外忘了哪个控件它就消失你的变量是唯一真相控件只负责渲染和回写不替你做记忆。好处也跟着来了不用保存控件状态不用手动同步删错了重写一遍就是。 第一步画出一个能点的界面最小可运行示例——一个滑块加一个复选框十几行就完事#include raylib.h #define RAYGUI_IMPLEMENTATION // 整个项目只在这个 .c 里定义一次 #include raygui.h int main(void) { InitWindow(640, 360, raygui 设置面板); float volume 60.0f; // 0~100滑块与它共享同一块内存 bool soundOn true; while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); // 返回非 0 表示这一帧被拖动过 GuiSliderBar((Rectangle){ 40, 60, 240, 22 }, 音量, TextFormat(%d, (int)volume), volume, 0.0f, 100.0f); // 返回 true 的那一帧正是点击勾选的瞬间 if (GuiCheckBox((Rectangle){ 40, 100, 22, 22 }, 启用声音, soundOn)) PlaySoundClick(); DrawText(TextFormat(soundOn %d, soundOn), 40, 150, 20, BLACK); EndDrawing(); } CloseWindow(); return 0; }要点只有三条RAYGUI_IMPLEMENTATION是把实现编译进来的开关全项目只在一个编译单元里写一次其余.c文件只写#include raygui.h否则会因重复定义报错。每个控件的第一个参数都是它自己的Rectangle位置和尺寸全由这个矩形说了算移动控件就是改坐标。函数返回值回答这帧有没有被操作参数指针负责把新值写回变量——两者配合就是即时模式的全部交互。结论把变量声明好、在绘制循环里逐帧声明控件界面就已经活了。 第二步把控件攒成设置面板面板就是同一套动作的堆叠。按交互目的分三类讲。连续数值滑块。音量、难度这类浮点量交给GuiSliderBar把值格式化后传给右参数显示float masterVol 0.8f; GuiSliderBar((Rectangle){ 40, 80, 220, 20 }, 主音量, TextFormat(%d%%, (int)(masterVol * 100)), masterVol, 0.0f, 1.0f);注意文本参数需要自己TextFormat拼好再传入raygui 不做格式化。开/关切换复选框与状态按钮。勾选切换那一帧返回true正好挂一次性动作GuiToggle则是按钮形态适合放面板角落当状态指示 点击切换用bool pauseMusic false; bool mute false; GuiCheckBox((Rectangle){ 40, 120, 22, 22 }, 暂停音乐, pauseMusic); GuiToggle((Rectangle){ 40, 160, 120, 30 }, 静音, mute);注意GuiCheckBox的true只出现在切换发生的那一帧想持续记住状态要靠变量本身。多选项选择下拉框。选项用分号拼成一个字符串选中项从 0 计数bool mapOpen false; // 开合状态由自己保存并回传 int zone 0; // 选中下标从 0 开始 GuiDropdownBox((Rectangle){ 40, 200, 160, 30 }, 简单;普通;困难, zone, mapOpen);这里必须强调开合的bool得自己存下来、每帧回传否则列表一松手就消失。想一次性看齐更多控件怎么协作仓库 examples 里有个现成参照examples/shapes/shapes_pie_chart.c。右侧整块面板里GuiSpinner调切片数、三个复选框切换显示模式、滑块控制内环半径滚动列表里每行一个切片滑块注意面板里的分工输入采集与控件渲染归 raygui画饼本身仍是自己的角度计算加DrawCircleSector——这条分界线在任何项目里都一样业务绘制永远是你自己的事。结论滑块管连续量、复选框和 Toggle 管开关、下拉框管离散选择三类攒齐一个完整的设置面板就成型了。 第三步让面板跟着窗口走硬编码坐标的界面窗口一拉就错位。做法是每帧从窗口尺寸反推锚点控件只相对锚点排布int sx GetScreenWidth(), sy GetScreenHeight(); int panelW 260; float anchorX (float)(sx - panelW - 16); // 右缘锚点 float anchorY (float)(sy - 200 - 16); // 底缘锚点 int level 1; GuiSliderBar((Rectangle){ anchorX 20, anchorY, panelW - 40, 20 }, 难度, TextFormat(%d, level), level, 1.0f, 5.0f);高分屏有一点要记牢GetScreenWidth()/GetScreenHeight()取到的是逻辑分辨率开了缩放之后已经缩好了别再手动乘 DPI 系数否则面板会飘到屏幕外面。如果界面里还有可拖拽的实体比如图中的曲线控制点命中检测就是每帧拿鼠标坐标减去控件的bounds做比较和 raygui 内部干的是同一件事。结论坐标永远从当前窗口尺寸反推窗口怎么拉面板都贴着边缘走。 故障自查Q标签文字画到了控件框外面原因内置默认字号偏大控件高度又只给了 20 左右文字自然撑出去。 改法GuiSetStyle(DEFAULT_TEXT_ALIGNMENT, TEXT_ALIGN_LEFT_CENTER);调对齐同时把控件高度加大几像素。Q中文显示成一个个方块原因内置字体不含 CJK 字形画不出来是字库问题不是编码问题。 改法加载自带中文字形的外部字体GuiSetFont(LoadFontEx(fonts/cjk.ttf, 22, 0, 256));。Q同一帧想操作两个控件只有一个生效原因同一帧重复声明了控件先声明的那个把操作吃掉了。 改法给这类控件加上editMode或互斥参数保证同一时刻只有一个处于可编辑状态。Q每帧TextFormat之后帧率有波动原因绘制循环里反复拼接字符串会产生频繁的堆分配分配器吃不消。 改法把结果缓存到静态char[32]只在数值真正变化时才重算。结论先对照这四组问答自查一遍能排除掉绝大多数界面小毛病。 合入现有工程4 条核对清单拿一份raygui.h仓库 examples/ 的 audio、core、models、shaders、shapes、text、textures 各模块目录下都有挑一份拷进项目src/。指定一个实现文件只在其中一个.c通常是main.c里写#define RAYGUI_IMPLEMENTATION其余源文件只保留#include。链接 raylibgcc demo.c -lraylib -o demoWindows 下是raylib.lib多文件项目按官方 Makefile / CMake 走同样流程即可。编译无重复定义报错、运行时控件能点能拖、值能写回变量三条都满足才算接入完成。结论头文件就位、宏落位、链接通过——三处对了界面就长进你的工程里了。raygui 的哲学就一句话控件不存状态变量为准。把这两点握稳往后可延伸的方向有两个——用GuiSetStyle配一套自定义配色与字号的专属主题或者翻 examples 里的完整用例看看别人怎么把布局撑满整块屏幕。【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考