如何给 C 游戏加一个能拖能点的设置面板raygui 即时模式 GUI 完整指南【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib想给 C 游戏加一块能拖、能点的设置面板最省事的路径是 raylib 附带的 raygui——一个单文件的即时模式 GUI 层直接在你的游戏循环里画出控件。这篇 raygui 教程从把它编进项目讲起到锚定窗口边界的排布办法带你从零搭出一套 raylib C 游戏界面。 先看界面的骨架先把最常用的一个控件——滑块——钉在脑子里float brightness 0.7f; // 0~1 的亮度 GuiSliderBar((Rectangle){ 30, 70, 200, 24 }, 亮度, TextFormat(%.0f%%, (int)(brightness * 100)), brightness, 0.0f, 1.0f);就这几行已经是 raygui 的全部本质传一个Rectangle告诉它画在哪传一个指针让它把值写回去返回值告诉你这一帧用户碰没碰它。背后的原理下一节讲。 为什么几行代码就够用把屏幕想成一场直播每一帧清屏然后照着剧本把画面完整重画一遍。即时模式 GUI 里剧本是你手里的几个变量控件只是台上的演员——它们不背台词帧一结束就不存在了。60 FPS 时你等于每秒新造六十次滑块但控件没有任何实例化开销声明就是渲染。每帧你把变量的值交给控件控件渲染出来顺手把这帧用户的操作写回变量。变量是唯一真相界面只是它投在屏幕上的影子。跑起来一个最小界面#include raylib.h #define RAYGUI_IMPLEMENTATION // 全项目只在一个 .c 文件里定义 #include raygui.h int main(void) { InitWindow(480, 320, raygui 最小面板); float brightness 0.7f; bool musicMuted false; while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); GuiSliderBar((Rectangle){ 30, 70, 200, 24 }, 亮度, TextFormat(%.0f%%, (int)(brightness * 100)), brightness, 0.0f, 1.0f); if (GuiCheckBox((Rectangle){ 30, 120, 22, 22 }, 静音, musicMuted)) TRACELOG(LOG_INFO, 静音被切换); DrawText(TextFormat(musicMuted %d, musicMuted), 30, 170, 20, DARKGRAY); EndDrawing(); } CloseWindow(); return 0; }#define RAYGUI_IMPLEMENTATION只在项目里一个 .c 文件里写一次把实现编译进可执行文件其余文件直接#include raygui.h。每个控件的第一参数是它自己的Rectangle位置和尺寸全靠这一个参数。返回值表示本帧是否被操作滑块返回非 0 代表正在被拖动复选框返回true的那一帧正是点击瞬间。指针参数负责回写控件只改你传进去的变量界面本身不留任何记忆。️ 按想要的取值类型挑控件控件适配的数据一句话说明GuiSliderBar连续浮点左标签 右当前值整条拖动GuiCheckBox/GuiToggle布尔前者触发一次动作后者做状态指示GuiDropdownBox整数枚举选项用分号拼成一个字符串GuiSpinner有界整数上下步进带最小/最大值连续量滑块用法就是骨架里那 4 行第 2 参是左标签第 3 参是右端显示的值两个文本都得你自己TextFormat之后传入最后两个参是取值范围。开关复选框与状态按钮bool musicMuted false; GuiCheckBox((Rectangle){ 30, 120, 22, 22 }, 静音, musicMuted); // 点击瞬间返回 true GuiToggle((Rectangle){ 30, 160, 110, 28 }, 音乐, musicOn); // 按钮形态复选框只在勾/取消勾选的那一帧返回true适合触发一次动作播个音效、打个日志。GuiToggle是常驻按钮适合当状态指示 点击切换用摆在面板角落。枚举下拉框bool mapOpen false; // 开合状态必须自己存 int quality 0; // 选中项从 0 开始 if (GuiDropdownBox((Rectangle){ 30, 200, 150, 30 }, 低;中;高, quality, mapOpen)) mapOpen !mapOpen;选项用分号连成一个字符串即可。开合状态不归 raygui 管自己存一个bool每帧回传并在返回的那一帧翻转它否则下拉框一松手就消失。步进量spinner形如GuiSpinner((Rectangle){ 30, 240, 130, 28 }, 速度, speed, 1, 10, true)的单个调用中间是变量指针和最小/最大值最后一个true表示允许键盘直接输入。切片数、难度档这类小范围整数就用它。 给数据装一块真·控制台打开仓库 examples 里的 shapes_pie_chart.c一个 800×450 的窗口里画着饼图右侧整块就是 raygui 控制台——GuiSpinner调切片数1~10三个GuiCheckBox分别切换显示数值、百分比和甜甜圈模式GuiSliderBar控甜甜圈的内环半径底下还有GuiScrollPanel滚动列表里每行一条切片各带一个滑块。甜甜圈模式开启时它用一句GuiDisable()把内环滑块整个禁用。分工线很清楚输入采集与控件渲染归 raygui真正画饼的是你自己的DrawCircleSector加角度计算和ColorFromHSV。控件只负责问用户要参数业务绘制一个像素都不碰——这就是即时模式 GUI 的边界。 别把坐标写死窗口缩放时控件怎么跟着走硬编码坐标的界面窗口一拉就错位。实用做法是每帧从GetScreenWidth/Height反推锚点控件只相对锚点排布int sx GetScreenWidth(), sy GetScreenHeight(); int panelW 240; float ax (float)(sx - panelW - 16); // 右缘锚点 float ay (float)(sy - 160 - 16); // 底缘锚点 GuiSliderBar((Rectangle){ ax 18, ay, panelW - 36, 22 }, 难度, TextFormat(%d, level), level, 1.0f, 5.0f);取到的是逻辑分辨率开了高分屏缩放时它已经是缩放后的值别再手动乘 DPI 系数。游戏里若有可拖拽的实体编辑器控制点、手柄等每帧把鼠标坐标减去控件的bounds再做命中检测即可。仓库里的样条编辑器 shapes_splines_drawing.c 就是这套做法控制点自由拖动旁边的下拉框、滑块照常收参数。 出了问题先自救四个高频问答问中文显示成方块答内置字体不含 CJK 字形不是编码问题。换一张自带中文的字库即可GuiSetFont(LoadFontEx(fonts/cjk.ttf, 24, 0, 256));这一步在 raygui 中文乱码排查里优先级最高。问文字画到控件框外面了答默认字号偏大、控件height又只给了 20。用GuiSetStyle(DEFAULT_TEXT_ALIGNMENT, TEXT_ALIGN_LEFT_CENTER);调整对齐再把控件高度加大几像素。问每帧TextFormat拼字符串帧率有抖动答绘制循环里反复拼接会持续锤分配器。把结果缓存进静态char buf[32]只在值真正变化时重算一次。问同帧操作了两个控件只有一个生效答通常是同帧重复声明了控件操作被后来者吃掉。给控件加editMode互斥参数或干脆用GuiDisable()把另一个禁用保证同一时刻只有一个可编辑。接入你的项目三步跑起来拿源码git clone https://gitcode.com/GitHub_Trending/ra/raylib。raygui.h位于examples/各模块目录下shapes/、text/、textures/各有一份拷一份到你项目的源目录。挑一个 .c 文件在#include raygui.h之前写上#define RAYGUI_IMPLEMENTATION把实现编译进程序其余源文件只写#include raygui.h。编译链接gcc demo.c -lraylib -o demo。其余平台按官方 Makefile 或 CMakeLists.txt 的流程走把自己的 .c 文件加进去就行。raygui 的设计哲学一句话收束控件不保存状态每帧声明、变量为准——放心删了重写界面永远不会记仇。接下来值得花时间的方向用GuiSetStyle调出自家配色与字号的主题或者翻一遍 examples/ 目录看看更多 raygui 用例怎么把布局撑满整块屏幕。【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考