企业官网建设流程全解析

raygui 即时模式 GUI：15 行代码给 C 游戏界面加上能拖能点的控件

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

raygui 即时模式 GUI 是 raylib 附带的单文件界面库：一个 .h 文件拷进项目，几行 C 就能画出能拖、能点的滑块、复选框和下拉框，控件状态不用你存。

🚀 一、最小可运行示例：先让滑块动起来

别先谈原理，先把这 20 来行跑起来：窗口里会有一个跟着鼠标走的滑块，和一个点了就切换的复选框。

#include "raylib.h" #define RAYGUI_IMPLEMENTATION // 全项目只在一个 .c 文件里定义一次，把实现编译进该文件 #include "raygui.h" int main(void) { InitWindow(640, 360, "raygui 最小示例"); float volume = 60.0f; // 值存在变量里，控件只是它的"脸" bool soundOn = true; // 复选框与变量共享同一块内存 while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); // Rectangle 就是控件自己的位置尺寸；返回值 = 本帧有没有被操作 GuiSliderBar((Rectangle){ 40, 60, 240, 22 }, "音量", TextFormat("%d", (int)volume), &volume, 0.0f, 100.0f); if (GuiCheckBox((Rectangle){ 40, 100, 22, 22 }, "启用声音", &soundOn)) PlaySoundClick(); // 返回 true = 用户点击的那一帧 DrawText(TextFormat("soundOn = %d", soundOn), 40, 150, 20, BLACK); EndDrawing(); } CloseWindow(); return 0; }

要点：RAYGUI_IMPLEMENTATION只在一个 .c 文件定义一次，多定义会链接重复符号。

📋 二、每帧重绘的三条约定：变量即真相，返回值即事件

把界面想成档口卖面：师傅不记得你上一单点了什么，你每次递上菜单，他照单现做、把这一帧的成品端回来。raygui 控件就是那个师傅，你手里的变量就是菜单。记住三条可执行的约定：

1. 每帧重画—— 控件的"存在"只来自这一帧的GuiXXX()调用，不写就消失，没有创建/销毁一说。
2. 变量即真相—— 把变量的指针递进控件，控件回写的也是这个变量；想取值，读变量，别问控件。
3. 返回值即事件——GuiCheckBox等返回的 bool 是"本帧被操作了"，想触发一次性动作，就在返回 true 的帧里写动作。

60 FPS 下"每帧重做一遍滑块"听着浪费，但控件没有实例化开销，声明即渲染。

要点：只要守住"每帧声明、变量为准"，控件可以放心删了重写；三条破坏任何一条，就会出现残影控件和旧值。

🍽️ 三、点菜式选控件：滑块、复选框、下拉框各管什么

把控件库当菜单，按"用户要干什么"点菜：

滑块GuiSliderBar—— 用户连续拖：

float masterVol = 0.8f; // 连续量：主音量 0~1 // 第 2 参是左标签，第 3 参是当前值，记得自己 TextFormat GuiSliderBar((Rectangle){ 40, 80, 220, 20 }, "主音量", TextFormat("%d%%", (int)(masterVol * 100)), &masterVol, 0.0f, 1.0f); // 拖动期间 masterVol 已被回写成新值，直接拿来用

音量、透明度、难度系数这类连续量找它。

要点：当前值必须自己TextFormat好再传，否则用户只能盯着一格空白。

复选框GuiCheckBox与状态按钮GuiToggle—— 用户开/关切换：

bool pauseMusic = false; bool mute = false; // 返回 true 的帧 = 用户勾选/取消勾选的瞬间，适合触发一次性动作 if (GuiCheckBox((Rectangle){ 40, 120, 22, 22 }, "暂停音乐", &pauseMusic)) PlaySoundClick(); // 按钮形态：状态指示 + 点击切换，适合放面板角落 GuiToggle((Rectangle){ 40, 160, 120, 30 }, "静音", &mute);

要点：GuiCheckBox管"点了触发一次"，GuiToggle管"长期挂着的状态灯"。

下拉框GuiDropdownBox—— 用户多项选一：

bool listOpen = false; // 记住开合状态，下一帧继续传回，否则下拉框松手就消失 int zone = 0; // 选中索引从 0 开始 const char *zones = "简单;普通;困难"; // 选项用分号连成一个字符串 // 返回值 true = 用户这一帧重新选中了某项，zone 已是新索引 if (GuiDropdownBox((Rectangle){ 40, 200, 160, 30 }, zones, &zone, listOpen)) printf("切到难度 %d\n", zone);

要点：开合bool必须自己存着回传，这是下拉框唯一的状态债。

菜单是真的能点：examples/ 里饼图示例的右侧就是整块 raygui 控制台——spinner 调切片数、复选框切显示模式、滑块管内环半径、滚动列表每行一个滑块：

🪢 四、窗口自适应布局：锚点法让控件跟着屏幕跑

硬编码坐标像把画贴在墙中央，窗口一拉就歪。实用做法是每帧从GetScreenWidth/Height反推锚点，控件布局只相对锚点排布——像帐篷的风绳：绳扣永远系在角上，窗口怎么晃，控件跟着绳走。

int sx = GetScreenWidth(), sy = GetScreenHeight(); // 逻辑分辨率，勿再乘 DPI float anchorX = sx - 260.0f - 16.0f; // 右缘锚点：离右缘留 16px float anchorY = sy - 200.0f - 16.0f; // 底缘锚点：离底缘留 16px int level = 3; // 控件全部相对锚点排布，而不是写死屏幕坐标 GuiSliderBar((Rectangle){ anchorX + 20, anchorY, 200, 20 }, "难度", TextFormat("%d", level), &level, 1.0f, 5.0f);

取到的是逻辑分辨率，高分屏缩放已算在内，别再手动乘 DPI 系数。游戏里若有可拖拽的控制点（编辑器之类），每帧拿鼠标坐标减去控件bounds做命中检测——raygui 只画框、问输入，拖拽这段归你写：

要点：锚点法只解决"窗口被拉大"，"控件在窗口内被拖"必须自己写命中检测。

📦 五、接入工程三步：拷头文件、定义实现、链接 raylib

你的 C 语言游戏界面接入 raygui 只要三步：

1. 拷头文件：raygui.h在 examples/ 各模块目录下各有一份，挑一份放进你的src/。仓库没拉过就先git clone https://gitcode.com/GitHub_Trending/ra/raylib。
2. 定义实现：挑一个 .c 文件，在#include "raygui.h"之前写#define RAYGUI_IMPLEMENTATION；其余源文件只#include。再强调一次：全项目只定义这一次。
3. 链接 raylib：如gcc demo.c -lraylib -o demo，其余平台照 raylib 官方 Makefile / CMake 走同样流程。

🐛 六、常见怪象自查表：现象、原因、一行修复

跑起来之后接着玩：用GuiSetStyle换一套主题配色对齐你的美术风格，用GuiSetFont换上自定义字体，或者翻 examples/ 里更多 raygui 用例，看别人怎么把控件铺满一屏。

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