企业官网建设流程全解析

raylib raylib raygui 实战入门 0→1：给 C 游戏接上可拖可点的设置面板

【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib

先纠正一下：raylib 的 raygui 实战入门 0→1 从 3 分钟跑通一个设置面板开始。

你的 C 游戏有窗口了，可一要做设置界面，要么手画矩形加手动命中检测，要么拖一整套重型 UI 框架。raylib 官方附带的单文件模块 raygui 用十几行代码解决：GuiSliderBar、GuiCheckBox一画就有，控件、状态、输入全打包，不用写事件回调。本文带你从 0 到 1 跑通 raygui 的用法。

为什么选 raygui：零回调的单文件 GUI

raygui 是 raylib 的即时模式 GUI 层，一个头文件塞了 25+ 个控件（滑块、下拉框、颜色盘、滚动面板），v5.0 起支持独立后端。对比传统 retained 模式组件库：你不再注册回调、绑定属性、管组件生命周期，而是把变量直接递给函数，函数画完顺手把本帧操作写回变量。省掉的是回调布线和所有权这两大块心智负担。

3 分钟跑通 raygui：最小可运行示例

先复制一份头文件：仓库里 examples/shapes/ 等每个示例目录都放着同一个raygui.h，拷一份进你的src/。

#include "raylib.h" #define RAYGUI_IMPLEMENTATION // 只在一个 .c 文件里定义，实现才编进程序 #include "raygui.h" int main(void) { InitWindow(640, 360, "raygui demo"); float volume = 60.0f; // 0~100 的音量 bool showHelp = true; while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); // 第 1 参是自己的 Rectangle，后两参是左标签与当前值 GuiSliderBar((Rectangle){ 40, 60, 240, 24 }, "Volume", TextFormat("%.0f%%", volume), &volume, 0.0f, 100.0f); // 只在用户点击的那一帧返回 true if (GuiCheckBox((Rectangle){ 40, 100, 20, 20 }, "Show help", &showHelp)) ShowTraceLog("help toggled", LOG_INFO); if (showHelp) DrawText("Drag the slider to change volume", 40, 150, 20, BLACK); EndDrawing(); } CloseWindow(); return 0; }

Linux 下gcc demo.c -lraylib -lm -lpthread -o demo即可（Windows 按 examples 目录的 Makefile 流程）。三句话：RAYGUI_IMPLEMENTATION全项目只定义一次；每个控件第一个参数都是它自己的Rectangle，坐标尺寸全靠它；控件返回"本帧是否被操作"，新值通过指针参数回写。

即时模式原理：为什么每帧都要重画

把 raygui 想成一个每帧都换新人的失忆服务员：他不记得你是谁，所以每帧重新问一遍——你带来的点单（变量）、盘子大小（控件矩形）；上完菜他告诉你这帧做了什么（返回值）。服务员没有记忆，点单是唯一真相，这就是即时模式：声明即渲染，控件本身不保存任何状态。边界也在这条线上：命中检测、绘制、值回写归 raygui；变量定义、坐标布局、业务逻辑全归你。

按目的选控件：raygui 滑块、复选框与下拉框

🎚️ 连续数值调节：raygui 滑块的用法

float fov = 45.0f; // 第 2、3 个文本参数是左标签和当前值，自己 TextFormat 好再传 GuiSliderBar((Rectangle){ 40, 80, 220, 20 }, "FOV", TextFormat("%.0f°", fov), &fov, 30.0f, 90.0f);

连续量用GuiSliderBar，min/max 是闭区间端点，value 是float*。

✅ 开/关切换：复选框与 Toggle 的一次性语义

bool paused = false; bool fullscreen = false; // 返回 true 的那一帧正是点击瞬间，适合触发一次动作 if (GuiCheckBox((Rectangle){ 40, 120, 20, 20 }, "Pause", &paused)) ShowTraceLog("pause toggled", LOG_INFO); // Toggle 是按钮形态的开关，适合当面板角落的状态指示 GuiToggle((Rectangle){ 40, 160, 120, 30 }, "Fullscreen", &fullscreen);

GuiCheckBox的返回值是一次性事件，做触发器；GuiToggle是常驻状态钮，只关心按钮本身亮没亮时可以不看返回值。

📋 多选项选择：raygui 下拉框的用法

bool zoneOpen = false; // 开合状态自己存，每帧回传 int zone = 0; // 选中项下标，从 0 开始 GuiDropdownBox((Rectangle){ 40, 200, 160, 30 }, "Easy;Normal;Hard", &zone, zoneOpen);

选项用分号拼成一个字符串；editMode那个 bool 是控件唯一的"临时记忆"，不自己存着回传，列表一松手就消失。

🍕 真实组合：官方示例里的 raygui 控制台

仓库饼图示例右侧是一整块 raygui 控制台：spinner 调切片数、复选框切显示模式、滑块控内环半径、GuiScrollPanel里每行一个滑块。

// 面板锚点推导出每个控件的 Rectangle（示意） const float px = 525.0f, py = 5.0f; GuiSpinner((Rectangle){ px + 95, py + 12, 125, 25 }, "Slices", &sliceCount, 1, 10, false); GuiCheckBox((Rectangle){ px + 20, py + 52, 20, 20 }, "Values", &showValues); if (showDonut) GuiDisable(); // 全局开关，整体禁用后续控件 GuiSliderBar((Rectangle){ px + 80, py + 142, 170, 30 }, "Inner Radius", NULL, &innerR, 5.0f, 195.0f); GuiEnable();

控件只负责"向用户要参数"，饼本身仍由你调DrawCircleSector画出来。完整源码见 examples/shapes/shapes_pie_chart.c。

raygui 避坑速查：5 个高频坑

• 下拉框一松手就消失 →editMode是入参状态，控件内部不存开合 → 声明一个bool自己维护，每帧原样回传。
• 两个重叠控件互抢点击 → raygui 用全局guiState共享本帧鼠标按压，先画出的控件先消费 → 用GuiLock()/GuiUnlock()锁住非活动层控件。
• spinner 只能点加减、不能打字 →GuiSpinner最后一个editMode传了 false，键盘输入被关 → 传 true 才允许直接键入数值。
• 窗口一拉大布局就错位 → 头文件 LIMITATIONS 明确无自动布局，坐标全是你硬编码 → 每帧从GetScreenWidth/Height反推锚点，控件相对锚点排布。
• GuiDisable()后界面没恢复 → 两者只单向切换全局状态，调用次数不平衡 → 成对调用，且注意条件分支里别多调一次GuiEnable()。

三步接入：拷贝、定义、编译

1. git clone https://gitcode.com/GitHub_Trending/ra/raylib，从 examples 任一目录拷raygui.h进你的src/。
2. 挑一个.c，在#include "raygui.h"之前写#define RAYGUI_IMPLEMENTATION；其余文件只#include。
3. 编译时链接 raylib，如gcc demo.c -lraylib -o demo；CMake/Makefile 工程照官方流程走。

设计哲学一句话：控件无记忆，每帧即声明——记住"每帧声明、变量为准"，界面删了重写都不心疼。下一步值得玩的：用GuiSetStyle和GuiLoadStyle换一套自定义配色字体，或者照饼图示例的"滚动面板 + 逐行滑块"模式给自己项目搭个数据编辑面板。

【免费下载链接】raylibA simple and easy-to-use library to enjoy videogames programming项目地址: https://gitcode.com/GitHub_Trending/ra/raylib