raygui 完整指南20 行代码做出 C 游戏的交互调试面板【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib用 raylib 原始图元画一个能拖的滑块要写 80 行。raygui 是 raylib 自带的单文件即时模式 GUI 模块同样的面板 20 行就够。本文带你跑通最小示例、选对控件、做完窗口自适应最后拼出一个完整的游戏调试面板。 先跑起来raygui 最小示例怎么跑两步就能把控件画到屏幕上拷贝头文件、定义一个宏。raygui.h 不单独成库raylib 仓库里每个 examples/ 模块目录都放了一份比如 examples/shapes/raygui.h、examples/audio/raygui.h挑一份拷进你的 src/ 即可。整个库就是这一个头文件唯一特殊的是前两行#define RAYGUI_IMPLEMENTATION只允许在一个 .c 文件里写其余文件直接 include。完整最小示例一个相机 FOV 滑块加一个线框开关就是一个调试场景的雏形。#include raylib.h #define RAYGUI_IMPLEMENTATION // 全项目只在这一个 .c 里定义 #include raygui.h int main(void) { InitWindow(800, 450, 最小示例); float fovy 45.0f; // 相机垂直视场角 bool wire false; // 线框模式开关 while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(BLACK); // 首参是控件自己的 Rectangle返回值本帧是否被操作fovy 回写新值 GuiSliderBar((Rectangle){ 40, 60, 240, 24 }, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f); GuiCheckBox((Rectangle){ 40, 100, 24, 24 }, 线框, wire); EndDrawing(); } CloseWindow(); return 0; }跑起来试试拖动滑块fovy变量实时跟着变点一下复选框wire翻转。不需要额外配置控件和变量之间没有中间层。原理一句话即时模式为什么敢每帧重画理解 raygui 的关键即时模式更像直播而不是录像。每一帧你都从头描述这一帧屏幕上该有什么60 FPS 就是一秒描述 60 次。GuiSliderBar这类调用不是创建一个滑块对象而是一次绘制函数把当前的fovy交给它它就在指定位置画一个滑块画完就走。控件本身不记事、不跨帧存活你的变量才是唯一真相界面只是变量的投影。每帧重画浪费吗单个控件的成本就是几条绘制调用没有对象实例化、没有内存管理、没有状态同步开销。换来两个传统 UI 拿不到的好处其一数据和界面永远不会不同步画面上永远是变量当前值其二任意时刻删掉某段布局代码控件立刻消失换场景不用做清理。代价是布局逻辑必须每帧重跑所以把它写成当前状态的纯函数放在绘制循环里任何位置都成立。 raylib 界面控件速查表按用途选控件下表所有控件的第一个参数都是它自己的 Rectangle位置 尺寸带指针参数的控件返回值都遵循同一个约定本帧是否被操作。控件用途关键参数注意点GuiSliderBar连续浮点调节float* 上下限两个文本参数是左右标签值要自己格式化GuiCheckBox布尔开关bool*仅在勾选/取消那一帧返回 trueGuiToggle状态按钮bool*视觉上是开关适合放面板角落GuiDropdownBox列表多选一int* editMode选项用分号隔开editMode 每帧回传GuiSpinner整数增减int* 上下限 editModeeditMode 规则同下拉框GuiProgressBar只读进度float* 上下限输入改不了值纯展示最重要的两条约定用 6 行代码说明白// 返回值 true 用户这一帧正在操作这个控件 // fovy raygui 把新值直接写回你的变量 Rectangle b (Rectangle){ 40, 60, 240, 24 }; if (GuiSliderBar(b, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f)) TRACELOG(LOG_INFO, FOV - %d, (int)fovy); // 一次性动作只在变化帧触发GuiCheckBox的返回时机一样勾选/取消勾选的那一帧为 true适合挂开关时播个音效这类一次性动作GuiToggle则当状态指示 点击切换的按钮。想看成组用法仓库里 examples/audio/audio_amp_envelope.c 用四个滑块调声音包络的 ADSR 参数是很好的参照。 缩放怎么适配让控件跟着窗口走坐标写死的界面窗口一拉就错位。解法是每帧从GetScreenWidth()/GetScreenHeight()反推锚点控件只相对锚点排布// 读到的是逻辑分辨率高分屏缩放开着时数值已是缩放后尺寸不用再乘 DPI int sx GetScreenWidth(), sy GetScreenHeight(); float ax sx - 280.0f - 16.0f; // 右缘锚点280px 面板 16px 边距 float ay sy - 180.0f - 16.0f; // 底缘锚点 GuiSliderBar((Rectangle){ ax 20, ay, 240, 24 }, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f);面板贴在右下角怎么拖窗口控件都跟手。如果你的游戏还有可拖拽的实体比如编辑器控制点每帧拿鼠标坐标减去控件 bounds 得到相对偏移就是现成的命中检测——examples/shapes/shapes_splines_drawing.c 里的样条编辑器就是这么做的。 完整案例游戏调试面板怎么搭零件齐了拼一个屏幕右下角的调试面板难度下拉框、FOV 滑块、线框开关、HP 进度条面板宽 260px锚点沿用上一节算法。bool open false; // 下拉框开合自己记住、每帧回传 int difficulty 1; // 0 简单 / 1 普通 / 2 困难 float fovy 45.0f, hp 80.0f; bool wire false; // px, py 是上一节算出的面板锚点 GuiLabel((Rectangle){ px, py, 260, 24 }, 调试面板); GuiDropdownBox((Rectangle){ px, py 28, 240, 28 }, 简单;普通;困难, difficulty, open); GuiSliderBar((Rectangle){ px, py 64, 240, 24 }, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f); GuiCheckBox((Rectangle){ px, py 100, 22, 22 }, 线框, wire); GuiProgressBar((Rectangle){ px, py 132, 240, 24 }, HP, TextFormat(%d, (int)hp), hp, 0.0f, 100.0f);三个细节值得注意下拉框的开合状态要自己存成 bool 并每帧回传松开手菜单就会收起来HP 由GuiProgressBar只展示拖不动适合当纯指示条difficulty是个 int游戏逻辑每帧直接读它去改敌人血量或生成率。分工很明确输入处理与控件渲染交给 raygui场景绘制、FPS 显示、相机更新是你的代码。❓ QAraygui 新手最常问的 6 个问题Qraygui.h 到底去哪拿仓库里就有。examples/ 下 shapes、audio、core、text、textures、models、shaders 各模块目录都放了一份例如 examples/shapes/raygui.h任意拷一份进项目即可内容相同。Q中文显示成方块内置字体不含 CJK 字形换字体就能解决GuiSetFont(LoadFontEx(fonts/cjk.ttf, 22, 0, 256));最后一个参数是字形数量设一次之后所有控件文字都用新字体。Q文字画到控件框外面了默认字号偏大、控件又给了小高度。两个动作GuiSetStyle(DEFAULT, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT_CENTER);垂直居中再GuiSetStyle(DEFAULT, TEXT_SIZE, 16);调小字号——examples/core/core_clipboard_text.c 用的就是这套组合。Q同帧操作了两个控件只有一个生效输入只有一个落点两个可编辑控件重叠或 editMode 同时为 true后面的会吃掉前面的。规矩是同一时刻屏幕上只留一个可编辑控件空闲时给 editMode 传 false 把它锁死。Q每帧 TextFormat 会有性能问题吗它会分配新字符串60 FPS 下分配器确实有压力。值很少变的文本缓存进 static char 缓冲区只在值变化时重算每帧都在变的比如滑块读数直接 TextFormat 反而最省事。Q哪些状态是我必须自己管的最常被忘的是下拉框开合 bool。raygui 有意不做状态保存所以开合、选中项、高亮这类跨帧的值都要有你自己的变量来装。 三步接入 raygui 与后续方向拿文件克隆 raylib 仓库git clone https://gitcode.com/GitHub_Trending/ra/raylib把 examples/shapes/raygui.h 拷进项目 src/ 目录。定宏挑一个 .c 文件在#include raygui.h上一行写#define RAYGUI_IMPLEMENTATION其余 .c 文件只 include、不写宏。编译链接gcc panel.c -lraylib -o panel多平台构建走仓库 src/ 目录下的官方 Makefile 或 CMakeraygui 不用额外配置。接下来两个方向值得花时间一是主题定制GuiSetStyle能细调单个控件的边框、字号、配色GuiLoadStyle可以整份加载主题文件换一套皮肤很快二是布局扩展raygui 的列表控件配合GetScrollWheel()就能做出可滚动的设置页260px 的面板装得下整局游戏的选项。【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 raygui 完整指南：20 行代码做出 C 游戏的交互调试面板
raygui 完整指南20 行代码做出 C 游戏的交互调试面板【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib用 raylib 原始图元画一个能拖的滑块要写 80 行。raygui 是 raylib 自带的单文件即时模式 GUI 模块同样的面板 20 行就够。本文带你跑通最小示例、选对控件、做完窗口自适应最后拼出一个完整的游戏调试面板。 先跑起来raygui 最小示例怎么跑两步就能把控件画到屏幕上拷贝头文件、定义一个宏。raygui.h 不单独成库raylib 仓库里每个 examples/ 模块目录都放了一份比如 examples/shapes/raygui.h、examples/audio/raygui.h挑一份拷进你的 src/ 即可。整个库就是这一个头文件唯一特殊的是前两行#define RAYGUI_IMPLEMENTATION只允许在一个 .c 文件里写其余文件直接 include。完整最小示例一个相机 FOV 滑块加一个线框开关就是一个调试场景的雏形。#include raylib.h #define RAYGUI_IMPLEMENTATION // 全项目只在这一个 .c 里定义 #include raygui.h int main(void) { InitWindow(800, 450, 最小示例); float fovy 45.0f; // 相机垂直视场角 bool wire false; // 线框模式开关 while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(BLACK); // 首参是控件自己的 Rectangle返回值本帧是否被操作fovy 回写新值 GuiSliderBar((Rectangle){ 40, 60, 240, 24 }, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f); GuiCheckBox((Rectangle){ 40, 100, 24, 24 }, 线框, wire); EndDrawing(); } CloseWindow(); return 0; }跑起来试试拖动滑块fovy变量实时跟着变点一下复选框wire翻转。不需要额外配置控件和变量之间没有中间层。原理一句话即时模式为什么敢每帧重画理解 raygui 的关键即时模式更像直播而不是录像。每一帧你都从头描述这一帧屏幕上该有什么60 FPS 就是一秒描述 60 次。GuiSliderBar这类调用不是创建一个滑块对象而是一次绘制函数把当前的fovy交给它它就在指定位置画一个滑块画完就走。控件本身不记事、不跨帧存活你的变量才是唯一真相界面只是变量的投影。每帧重画浪费吗单个控件的成本就是几条绘制调用没有对象实例化、没有内存管理、没有状态同步开销。换来两个传统 UI 拿不到的好处其一数据和界面永远不会不同步画面上永远是变量当前值其二任意时刻删掉某段布局代码控件立刻消失换场景不用做清理。代价是布局逻辑必须每帧重跑所以把它写成当前状态的纯函数放在绘制循环里任何位置都成立。 raylib 界面控件速查表按用途选控件下表所有控件的第一个参数都是它自己的 Rectangle位置 尺寸带指针参数的控件返回值都遵循同一个约定本帧是否被操作。控件用途关键参数注意点GuiSliderBar连续浮点调节float* 上下限两个文本参数是左右标签值要自己格式化GuiCheckBox布尔开关bool*仅在勾选/取消那一帧返回 trueGuiToggle状态按钮bool*视觉上是开关适合放面板角落GuiDropdownBox列表多选一int* editMode选项用分号隔开editMode 每帧回传GuiSpinner整数增减int* 上下限 editModeeditMode 规则同下拉框GuiProgressBar只读进度float* 上下限输入改不了值纯展示最重要的两条约定用 6 行代码说明白// 返回值 true 用户这一帧正在操作这个控件 // fovy raygui 把新值直接写回你的变量 Rectangle b (Rectangle){ 40, 60, 240, 24 }; if (GuiSliderBar(b, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f)) TRACELOG(LOG_INFO, FOV - %d, (int)fovy); // 一次性动作只在变化帧触发GuiCheckBox的返回时机一样勾选/取消勾选的那一帧为 true适合挂开关时播个音效这类一次性动作GuiToggle则当状态指示 点击切换的按钮。想看成组用法仓库里 examples/audio/audio_amp_envelope.c 用四个滑块调声音包络的 ADSR 参数是很好的参照。 缩放怎么适配让控件跟着窗口走坐标写死的界面窗口一拉就错位。解法是每帧从GetScreenWidth()/GetScreenHeight()反推锚点控件只相对锚点排布// 读到的是逻辑分辨率高分屏缩放开着时数值已是缩放后尺寸不用再乘 DPI int sx GetScreenWidth(), sy GetScreenHeight(); float ax sx - 280.0f - 16.0f; // 右缘锚点280px 面板 16px 边距 float ay sy - 180.0f - 16.0f; // 底缘锚点 GuiSliderBar((Rectangle){ ax 20, ay, 240, 24 }, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f);面板贴在右下角怎么拖窗口控件都跟手。如果你的游戏还有可拖拽的实体比如编辑器控制点每帧拿鼠标坐标减去控件 bounds 得到相对偏移就是现成的命中检测——examples/shapes/shapes_splines_drawing.c 里的样条编辑器就是这么做的。 完整案例游戏调试面板怎么搭零件齐了拼一个屏幕右下角的调试面板难度下拉框、FOV 滑块、线框开关、HP 进度条面板宽 260px锚点沿用上一节算法。bool open false; // 下拉框开合自己记住、每帧回传 int difficulty 1; // 0 简单 / 1 普通 / 2 困难 float fovy 45.0f, hp 80.0f; bool wire false; // px, py 是上一节算出的面板锚点 GuiLabel((Rectangle){ px, py, 260, 24 }, 调试面板); GuiDropdownBox((Rectangle){ px, py 28, 240, 28 }, 简单;普通;困难, difficulty, open); GuiSliderBar((Rectangle){ px, py 64, 240, 24 }, FOV, TextFormat(%d, (int)fovy), fovy, 20.0f, 120.0f); GuiCheckBox((Rectangle){ px, py 100, 22, 22 }, 线框, wire); GuiProgressBar((Rectangle){ px, py 132, 240, 24 }, HP, TextFormat(%d, (int)hp), hp, 0.0f, 100.0f);三个细节值得注意下拉框的开合状态要自己存成 bool 并每帧回传松开手菜单就会收起来HP 由GuiProgressBar只展示拖不动适合当纯指示条difficulty是个 int游戏逻辑每帧直接读它去改敌人血量或生成率。分工很明确输入处理与控件渲染交给 raygui场景绘制、FPS 显示、相机更新是你的代码。❓ QAraygui 新手最常问的 6 个问题Qraygui.h 到底去哪拿仓库里就有。examples/ 下 shapes、audio、core、text、textures、models、shaders 各模块目录都放了一份例如 examples/shapes/raygui.h任意拷一份进项目即可内容相同。Q中文显示成方块内置字体不含 CJK 字形换字体就能解决GuiSetFont(LoadFontEx(fonts/cjk.ttf, 22, 0, 256));最后一个参数是字形数量设一次之后所有控件文字都用新字体。Q文字画到控件框外面了默认字号偏大、控件又给了小高度。两个动作GuiSetStyle(DEFAULT, TEXT_ALIGNMENT, TEXT_ALIGN_LEFT_CENTER);垂直居中再GuiSetStyle(DEFAULT, TEXT_SIZE, 16);调小字号——examples/core/core_clipboard_text.c 用的就是这套组合。Q同帧操作了两个控件只有一个生效输入只有一个落点两个可编辑控件重叠或 editMode 同时为 true后面的会吃掉前面的。规矩是同一时刻屏幕上只留一个可编辑控件空闲时给 editMode 传 false 把它锁死。Q每帧 TextFormat 会有性能问题吗它会分配新字符串60 FPS 下分配器确实有压力。值很少变的文本缓存进 static char 缓冲区只在值变化时重算每帧都在变的比如滑块读数直接 TextFormat 反而最省事。Q哪些状态是我必须自己管的最常被忘的是下拉框开合 bool。raygui 有意不做状态保存所以开合、选中项、高亮这类跨帧的值都要有你自己的变量来装。 三步接入 raygui 与后续方向拿文件克隆 raylib 仓库git clone https://gitcode.com/GitHub_Trending/ra/raylib把 examples/shapes/raygui.h 拷进项目 src/ 目录。定宏挑一个 .c 文件在#include raygui.h上一行写#define RAYGUI_IMPLEMENTATION其余 .c 文件只 include、不写宏。编译链接gcc panel.c -lraylib -o panel多平台构建走仓库 src/ 目录下的官方 Makefile 或 CMakeraygui 不用额外配置。接下来两个方向值得花时间一是主题定制GuiSetStyle能细调单个控件的边框、字号、配色GuiLoadStyle可以整份加载主题文件换一套皮肤很快二是布局扩展raygui 的列表控件配合GetScrollWheel()就能做出可滚动的设置页260px 的面板装得下整局游戏的选项。【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考