raygui 快速上手指南10 分钟给 C 游戏界面加上可拖可点的设置面板【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib给 C 写的游戏加一个能拖、能点的设置面板往往比画控件本身还麻烦命中检测、焦点切换、控件自绘一套下来几百行。raygui 是 raylib 附带的单文件即时模式 GUI 模块一个头文件就把按钮、下拉框、滑块、列表全部带上。这篇教程的目标10 分钟内跑通你的第一个界面再把常用控件逐个拆开最后收一个能跟着窗口自适应的音效设置页。为什么给 C 游戏加设置面板首选 raygui先算笔账手写一个能点的按钮你得处理鼠标进入、离开、点击三态再加上键盘焦点和文字对齐然后乘以控件总数。对比两条常见路线——保留模式的组件库要你维护整棵控件树和状态机换用其它即时模式库则要接渲染后端。raygui 走第三条路纯单文件、零额外依赖控件直接画在 raylib 的绘制循环里值写进普通 C 变量。代价是没有布局引擎位置尺寸全靠你给——后面会讲怎么补上这块。 即时模式心智模型每帧递一张新点菜单把界面想象成餐厅的传菜口。你每帧递一张全新点菜单上面写着所有变量的当前值后厨照单把控件画出来顺手把客人这次的操作写回你的变量画完这张单就作废。控件不留任何记忆变量才是账本。听起来像在空转其实声明就是渲染raygui 的控件没有实例、没有构造开销60 帧每秒重建全部控件和只重建一次在成本上没有区别。你唯一要守的规矩是——每帧按顺序声明所有控件值从变量来变化回变量去。第一个界面跑通的 5 分钟下拉框 步进器 列表先拿到头文件克隆仓库后从 examples/ 下任意模块目录拷一份raygui.h各目录内容一致到你项目里git clone https://gitcode.com/GitHub_Trending/ra/raylib下面这个最小工程演示三种控件共享三个普通变量的完整流程#include raylib.h #define RAYGUI_IMPLEMENTATION // 全项目只在一个 .c 文件里定义 #include raygui.h int main(void) { InitWindow(480, 360, raygui 第一个界面); int scene 0; // 下拉框选中项0 起 int count 50; // 步进器当前值 int scroll 0, picked 0; // 列表滚动位置与选中行 while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); GuiComboBox((Rectangle){ 40, 40, 220, 30 }, 草地;森林;沙漠, scene); GuiSpinner((Rectangle){ 40, 80, 220, 30 }, 对象数量, count, 10, 200, false); GuiListView((Rectangle){ 40, 120, 220, 180 }, 树木;石头;河流;矿石, scroll, picked); DrawText(TextFormat(scene%d count%d picked%d, scene, count, picked), 40, 320, 10, DARKGRAY); EndDrawing(); } CloseWindow(); return 0; }要点RAYGUI_IMPLEMENTATION只在一个源文件里定义其余文件裸#include raygui.h否则链接时符号重复每个控件第一参数永远是它自己的Rectangle没有自动布局位置尺寸你来定返回值负责本帧被没被碰指针参数负责把新值写回你的变量变量声明在循环外、活得比窗口久它们就是唯一的状态跑起来你可能会想——就这是的一个下拉框、一个步进器、一个列表这就是全部约定。⚙️ 常用控件逐个击破下拉框如何记住开合状态GuiDropdownBox(bounds, text, int *active, bool editMode)选项用分号拼在text里active存选中下标0 起第四个参数editMode表示现在是否展开。这个标志 raygui 不替你存得你自己拿一个bool每帧回传int difficulty 1; bool ddOpen false; if (GuiDropdownBox((Rectangle){ 40, 40, 160, 30 }, 简单;普通;困难, difficulty, ddOpen)) ddOpen true; // 返回非 0本帧点过它保持展开 else ddOpen false; // 没动它收起忘了这个bool下拉框一松手就消失——这是最高频的新手问题。区别一下上例的GuiComboBox不收editMode展开收起它自己管适合点开即选的场景。数值步进器如何卡住范围GuiSpinner(bounds, text, int *value, int min, int max, bool editMode)越界值自动夹回[min, max]最后一个editMode决定能不能点进输入框手敲数字false则只允许点箭头。int quality 80; GuiSpinner((Rectangle){ 40, 80, 160, 30 }, 画质, quality, 0, 100, true); // 下一帧直接用 quality不需要再读控件列表视图如何滚动和选中GuiListView(bounds, text, int *scrollIndex, int *active)选项同样分号分隔scrollIndex记第一行可见项的下标active记选中行两个值都被控件回写行数超出可视区时滚动条自动出现。int scroll 0, picked 0; GuiListView((Rectangle){ 40, 120, 200, 160 }, 纹理;网格;音频;脚本, scroll, picked);仓库里的文件浏览器示例就是这么搭的一个窗口加一个列表撑起整个界面实战做一个窗口缩放不散架的音效设置页硬编码坐标的界面窗口一拉就错位。实用做法是每帧从GetScreenWidth()反推锚点控件只相对锚点排布。下面这段演示面板贴住右缘 三个控件即时生效int channels 0; // 0立体声 15.1 27.1 bool surround false, ddOpen false; float master 0.8f; static char volText[32]; TextFormat(volText, 31, %d%%, (int)(master * 100)); while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); float ax GetScreenWidth() - 280.0f; // 锚点右缘向内 260 宽 20 边距 GuiGroupBox((Rectangle){ ax, 20, 260, 210 }, 音频设置); if (GuiDropdownBox((Rectangle){ ax 15, 60, 230, 30 }, 立体声;5.1;7.1, channels, ddOpen)) ddOpen true; else ddOpen false; if (GuiSliderBar((Rectangle){ ax 15, 100, 230, 20 }, 主音量, volText, master, 0.0f, 1.0f)) TextFormat(volText, 31, %d%%, (int)(master * 100)); // 被拖过才重算 GuiToggle((Rectangle){ ax 15, 140, 230, 30 }, 启用环绕声, surround); // 业务逻辑直接读 channels / master / surround已是最新值 EndDrawing(); }两个细节值得记住GuiSliderBar返回值非 0 的那一帧正好是滑块被拖动的一帧拿它当文本刷新时机比每帧TextFormat省掉反复分配字符串开了高分屏缩放的程序里GetScreenWidth()拿到的已是逻辑尺寸别再手动乘 DPI 系数。 排错速查中文显示成方块→ 内置字体不含 CJK 字形 →GuiSetFont(LoadFontEx(fonts/cjk.ttf, 22, 0, 256));文字挤出控件框→ 控件 height 小于当前字体的行高 → 加大Rectangle高度必要时GuiSetStyle(DEFAULT_TEXT_ALIGNMENT, TEXT_ALIGN_LEFT_CENTER);同帧点两个控件只有一个生效→ 后声明的控件抢走了这次输入 → 用状态做互斥同一时刻只声明一个可编辑的每帧TextFormat出现卡顿→ 绘制循环里反复分配字符串 → 结果存进static char[32]控件返回值非 0 时才重算接下来值得玩的方向换一套主题色把GuiSetStyle的颜色项过一遍或用GuiLoadStyle读.rsl文件给你的面板定出专属配色与字号控件超过一屏用GuiScrollPanel包一层把裁剪和滚动交给它的view参数翻真实用例examples/ 目录里带#include raygui.h的示例就有十几个文件浏览器和音频参数页都值得拆开抄一遍布局【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 raygui 快速上手指南：10 分钟给 C 游戏界面加上可拖可点的设置面板
raygui 快速上手指南10 分钟给 C 游戏界面加上可拖可点的设置面板【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib给 C 写的游戏加一个能拖、能点的设置面板往往比画控件本身还麻烦命中检测、焦点切换、控件自绘一套下来几百行。raygui 是 raylib 附带的单文件即时模式 GUI 模块一个头文件就把按钮、下拉框、滑块、列表全部带上。这篇教程的目标10 分钟内跑通你的第一个界面再把常用控件逐个拆开最后收一个能跟着窗口自适应的音效设置页。为什么给 C 游戏加设置面板首选 raygui先算笔账手写一个能点的按钮你得处理鼠标进入、离开、点击三态再加上键盘焦点和文字对齐然后乘以控件总数。对比两条常见路线——保留模式的组件库要你维护整棵控件树和状态机换用其它即时模式库则要接渲染后端。raygui 走第三条路纯单文件、零额外依赖控件直接画在 raylib 的绘制循环里值写进普通 C 变量。代价是没有布局引擎位置尺寸全靠你给——后面会讲怎么补上这块。 即时模式心智模型每帧递一张新点菜单把界面想象成餐厅的传菜口。你每帧递一张全新点菜单上面写着所有变量的当前值后厨照单把控件画出来顺手把客人这次的操作写回你的变量画完这张单就作废。控件不留任何记忆变量才是账本。听起来像在空转其实声明就是渲染raygui 的控件没有实例、没有构造开销60 帧每秒重建全部控件和只重建一次在成本上没有区别。你唯一要守的规矩是——每帧按顺序声明所有控件值从变量来变化回变量去。第一个界面跑通的 5 分钟下拉框 步进器 列表先拿到头文件克隆仓库后从 examples/ 下任意模块目录拷一份raygui.h各目录内容一致到你项目里git clone https://gitcode.com/GitHub_Trending/ra/raylib下面这个最小工程演示三种控件共享三个普通变量的完整流程#include raylib.h #define RAYGUI_IMPLEMENTATION // 全项目只在一个 .c 文件里定义 #include raygui.h int main(void) { InitWindow(480, 360, raygui 第一个界面); int scene 0; // 下拉框选中项0 起 int count 50; // 步进器当前值 int scroll 0, picked 0; // 列表滚动位置与选中行 while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); GuiComboBox((Rectangle){ 40, 40, 220, 30 }, 草地;森林;沙漠, scene); GuiSpinner((Rectangle){ 40, 80, 220, 30 }, 对象数量, count, 10, 200, false); GuiListView((Rectangle){ 40, 120, 220, 180 }, 树木;石头;河流;矿石, scroll, picked); DrawText(TextFormat(scene%d count%d picked%d, scene, count, picked), 40, 320, 10, DARKGRAY); EndDrawing(); } CloseWindow(); return 0; }要点RAYGUI_IMPLEMENTATION只在一个源文件里定义其余文件裸#include raygui.h否则链接时符号重复每个控件第一参数永远是它自己的Rectangle没有自动布局位置尺寸你来定返回值负责本帧被没被碰指针参数负责把新值写回你的变量变量声明在循环外、活得比窗口久它们就是唯一的状态跑起来你可能会想——就这是的一个下拉框、一个步进器、一个列表这就是全部约定。⚙️ 常用控件逐个击破下拉框如何记住开合状态GuiDropdownBox(bounds, text, int *active, bool editMode)选项用分号拼在text里active存选中下标0 起第四个参数editMode表示现在是否展开。这个标志 raygui 不替你存得你自己拿一个bool每帧回传int difficulty 1; bool ddOpen false; if (GuiDropdownBox((Rectangle){ 40, 40, 160, 30 }, 简单;普通;困难, difficulty, ddOpen)) ddOpen true; // 返回非 0本帧点过它保持展开 else ddOpen false; // 没动它收起忘了这个bool下拉框一松手就消失——这是最高频的新手问题。区别一下上例的GuiComboBox不收editMode展开收起它自己管适合点开即选的场景。数值步进器如何卡住范围GuiSpinner(bounds, text, int *value, int min, int max, bool editMode)越界值自动夹回[min, max]最后一个editMode决定能不能点进输入框手敲数字false则只允许点箭头。int quality 80; GuiSpinner((Rectangle){ 40, 80, 160, 30 }, 画质, quality, 0, 100, true); // 下一帧直接用 quality不需要再读控件列表视图如何滚动和选中GuiListView(bounds, text, int *scrollIndex, int *active)选项同样分号分隔scrollIndex记第一行可见项的下标active记选中行两个值都被控件回写行数超出可视区时滚动条自动出现。int scroll 0, picked 0; GuiListView((Rectangle){ 40, 120, 200, 160 }, 纹理;网格;音频;脚本, scroll, picked);仓库里的文件浏览器示例就是这么搭的一个窗口加一个列表撑起整个界面实战做一个窗口缩放不散架的音效设置页硬编码坐标的界面窗口一拉就错位。实用做法是每帧从GetScreenWidth()反推锚点控件只相对锚点排布。下面这段演示面板贴住右缘 三个控件即时生效int channels 0; // 0立体声 15.1 27.1 bool surround false, ddOpen false; float master 0.8f; static char volText[32]; TextFormat(volText, 31, %d%%, (int)(master * 100)); while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); float ax GetScreenWidth() - 280.0f; // 锚点右缘向内 260 宽 20 边距 GuiGroupBox((Rectangle){ ax, 20, 260, 210 }, 音频设置); if (GuiDropdownBox((Rectangle){ ax 15, 60, 230, 30 }, 立体声;5.1;7.1, channels, ddOpen)) ddOpen true; else ddOpen false; if (GuiSliderBar((Rectangle){ ax 15, 100, 230, 20 }, 主音量, volText, master, 0.0f, 1.0f)) TextFormat(volText, 31, %d%%, (int)(master * 100)); // 被拖过才重算 GuiToggle((Rectangle){ ax 15, 140, 230, 30 }, 启用环绕声, surround); // 业务逻辑直接读 channels / master / surround已是最新值 EndDrawing(); }两个细节值得记住GuiSliderBar返回值非 0 的那一帧正好是滑块被拖动的一帧拿它当文本刷新时机比每帧TextFormat省掉反复分配字符串开了高分屏缩放的程序里GetScreenWidth()拿到的已是逻辑尺寸别再手动乘 DPI 系数。 排错速查中文显示成方块→ 内置字体不含 CJK 字形 →GuiSetFont(LoadFontEx(fonts/cjk.ttf, 22, 0, 256));文字挤出控件框→ 控件 height 小于当前字体的行高 → 加大Rectangle高度必要时GuiSetStyle(DEFAULT_TEXT_ALIGNMENT, TEXT_ALIGN_LEFT_CENTER);同帧点两个控件只有一个生效→ 后声明的控件抢走了这次输入 → 用状态做互斥同一时刻只声明一个可编辑的每帧TextFormat出现卡顿→ 绘制循环里反复分配字符串 → 结果存进static char[32]控件返回值非 0 时才重算接下来值得玩的方向换一套主题色把GuiSetStyle的颜色项过一遍或用GuiLoadStyle读.rsl文件给你的面板定出专属配色与字号控件超过一屏用GuiScrollPanel包一层把裁剪和滚动交给它的view参数翻真实用例examples/ 目录里带#include raygui.h的示例就有十几个文件浏览器和音频参数页都值得拆开抄一遍布局【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考