企业官网建设流程全解析

30 行 C 代码跑通 raylib 即时模式 GUI：raygui 游戏参数面板实战

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

下面用 raylib 的 raygui 模块做出一个游戏参数面板：滑块、开关、下拉框直接改变画面里的图形。全文一个 30 行以内的 C 语言游戏界面示例，照着敲完就能编译运行，是初学 GUI 开发很好的起点（raygui 教程向）。

先看能做出什么

上面的截图里，右侧一块面板上的滑块在拖，左侧图形跟着变——这就是即时模式 GUI 的全部工作方式。每帧绘制循环里，你直接调用GuiSliderBar()这类函数，"画出控件"和"处理输入"是同一步；不画的时候控件就不存在，也不用维护控件状态树。保留模式框架得让你管理消息、回调和状态同步，这里没有。

三步跑通第一个 GUI

整个流程就三步，对应代码里的三段：

第一步：初始化。引入 raygui 的入口是头文件。在文件最前面写#define RAYGUI_IMPLEMENTATION，raygui 就把实现展开进来——单文件、无额外依赖，这正是即时模式 GUI 常用的集成方式。

第二步：声明控件数据。控件是即时重绘的，状态就放在几个 C 变量里，不需要任何注册或创建步骤。

第三步：每帧重绘。游戏循环里每帧调用一遍控件函数，raygui 根据鼠标输入更新你传入的变量。

完整示例（单文件，不超过 30 行）：

#include "raylib.h" #define RAYGUI_IMPLEMENTATION #include "raygui.h" #include <stdio.h> int main(void) { InitWindow(800, 450, "raygui first GUI"); float rectWidth = 200.0f; float roundness = 0.1f; bool filled = true; int colorChoice = 0; int colors[3] = { RED, BLUE, GREEN }; SetTargetFPS(60); while (!WindowShouldClose()) { BeginDrawing(); ClearBackground(RAYWHITE); GuiGroupBox((Rectangle){ 550, 10, 230, 150 }, "Panel"); GuiSliderBar((Rectangle){ 570, 40, 190, 20 }, "width", TextFormat("%.0f", rectWidth), &rectWidth, 50.0f, 450.0f); GuiSliderBar((Rectangle){ 570, 75, 190, 20 }, "roundness", TextFormat("%.2f", roundness), &roundness, 0.0f, 1.0f); GuiCheckBox((Rectangle){ 570, 110, 20, 20 }, "filled", &filled); GuiDropdownBox((Rectangle){ 570, 140, 190, 30 }, "red;blue;green", 3, &colorChoice); if (filled) { DrawRectangleRounded((Rectangle){ 60, 100, rectWidth, 180 }, roundness, 8, (Color)colors[colorChoice]); } else { DrawRectangleRoundedLines((Rectangle){ 60, 100, rectWidth, 180 }, roundness, 8, 4, (Color)colors[colorChoice]); } EndDrawing(); } CloseWindow(); return 0; }

编译方式就是普通 raylib 示例：cc gui_first.c -lraylib -lGL -lm -o gui_first（Windows 或平台差异略，仓库examples/下任意示例都可对照）。运行后拖一下滑块，左侧矩形的宽度和圆角实时跟着变。注意一个细节：GuiDropdownBox的三个选项用分号拼在一个字符串里，选中项是一个下标——这就是 raygui 控件的参数风格，位置用Rectangle，状态用指针。

五个高频控件逐个上手

滑块控件：调连续参数

float volume = 0.8f; GuiSliderBar((Rectangle){ 50, 200, 200, 20 }, "Volume", TextFormat("%d%%", (int)(volume * 100)), &volume, 0.0f, 1.0f);

第二个参数是左侧标签，第三个是右侧的实时数值（自己用TextFormat格式化），最后两个是取值范围。音量、缩放、难度这类连续值都交给它。

开关（复选框）：布尔值

bool sfxOn = true; GuiCheckBox((Rectangle){ 50, 240, 20, 20 }, "SFX", &sfxOn);

一个bool加一句文案。注意位置参数只需 20x20 的框，标签自动画在右边。音效开关、调试显示这类二值状态用开关最直观。

下拉框：有限选项

int quality = 1; GuiDropdownBox((Rectangle){ 50, 280, 200, 30 }, "low;medium;high", 3, &quality);

选项仍是分号分隔的字符串，第三个参数是选项个数，返回的下标存在quality里。画质、语言、难度档位这类枚举值就用它，比一排按钮省地方。

按钮：事件型操作

if (GuiButton((Rectangle){ 50, 320, 150, 40 }, "Start Game")) { ResetLevel(); }

按钮不绑定状态，返回值表示"这一帧是否被按下"，典型用法就是if (GuiButton(...))触发一次性动作：开始游戏、确认、返回菜单。

分组框：给控件画个框

GuiGroupBox((Rectangle){ 40, 10, 260, 400 }, "Settings");

纯视觉控件：一个带标题的边框，把相关控件装进去。面板再多也不会乱，上面所有示例里的 "Panel"、"Settings" 就是它。

实战：拼一个实时参数面板

把上面五种控件组合起来就是实战部分。布局思路：右侧 230 像素宽的列作为参数面板，左侧留白给图形。面板里放宽度和圆角两个滑块、填充/描边开关、颜色下拉框；每帧根据这些变量重绘圆角矩形。

右侧就是同一套思路的官方示例：切片数量、百分比标签、甜甜圈模式，全部由 GUI 控件驱动。面板返回值一变，画面当帧就变，中间没有任何"通知图形层"的代码——这就是即时模式省心的地方。

仓库里现成的对照素材：

• examples/shapes/shapes_rounded_rectangle_drawing.c：滑块 + 开关控制圆角矩形
• examples/shapes/shapes_pie_chart.c：下拉框、开关驱动饼图
• examples/text/text_font_loading.c：字体加载的完整写法

⚠️ 踩坑提示

坑一：换台机器布局就散。800x450 下写死的坐标，在高分屏上控件挤成一团，小屏上直接出界。对策：面板位置相对屏幕算。

int panelX = GetScreenWidth() - 260; GuiGroupBox((Rectangle){ panelX, 20, 230, 400 }, "Settings");

面板内部控件可以相对panelX继续偏移，整块面板随窗口移动，跨平台 UI 布局基本就稳了。

坑二：中文全是方块。raylib 默认字体只带 ASCII 码位，控件里写中文会显示成方块或乱码。对策：用LoadFontEx加载含中文码位的字体，再用GuiSetFont交给 raygui，之后所有控件的文字都走这个字体。

Font zhFont = LoadFontEx("your_cjk_font.ttf", 32, NULL, 0); GuiSetFont(zhFont);

字体文件放哪都行，路径按你项目结构写即可；码位参数传NULL表示加载字体里全部字符。

下一步：资料与进阶清单

源码都在仓库里，按需翻：

• examples/shapes/raygui.h：raygui 完整 API 与注释
• examples/core/core_basic_window.c：最小的 raylib 窗口程序
• raylib 官方文档见 README 里的 raylib官网链接，各函数行为以官方文档为准

进阶清单（每条一句话，按顺序做收益最高）：

1. 主题：GuiLoadStyle("style.rgs")加载 .rgs 主题文件，一套配色换全界面无脑操作。
2. 复杂布局：面板内容超一屏就上GuiScrollPanel，滚动条 raygui 自带。
3. 多语言：文案抽成字符串表，配合LoadFontEx加载对应语言的字体文件。
4. 状态联动：用GuiEnable/GuiDisable按开关状态禁用关联控件，交互更严谨。

即时模式的 GUI 不神秘：声明变量、每帧调用控件、读回值，三十行就能跑起来；剩下的只是把面板越拼越熟练的事。

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