如何在Raylib中模糊已绘制的游戏菜单棋盘对象？

1. 初始化离屏渲染纹理 #

要单独模糊棋盘，首先需要将棋盘绘制到离屏纹理而非直接输出到屏幕，这样才能获取到独立的棋盘纹理对象用于后续处理。在窗口初始化完成后创建对应尺寸的RenderTexture：

RenderTexture2D boardTexture;

// 初始化阶段创建纹理，尺寸匹配你的棋盘绘制区域（示例为800x600）
boardTexture = LoadRenderTexture(800, 600);

2. 修改drawBoard函数，绘制到离屏纹理 #

调整原函数，将绘制目标切换为离屏纹理，同时替换全局清屏操作为纹理内部清屏：

void drawBoard(RenderTexture2D target, Color lineColor, Color boardColor){
    // 开始渲染到离屏纹理
    BeginTextureMode(target);
        // 清空纹理背景
        ClearBackground(boardColor);

        DrawRectangleV( (Vector2){294, 100}, (Vector2){7, 600}, lineColor);
        DrawRectangleV( (Vector2){494, 100}, (Vector2){7, 600}, lineColor);

        DrawRectangle(100, 294, 600, 7, lineColor);
        DrawRectangle(100, 494, 600, 7, lineColor);
    // 结束离屏渲染
    EndTextureMode();
}

3. 编写基础模糊Shader #

创建一个简单的高斯模糊片段着色器（保存为blur.frag），实现横向+纵向的双重模糊效果：

// blur.frag
#version 330

in vec2 fragTexCoord;
out vec4 finalColor;

uniform sampler2D texture0;
uniform vec2 screenSize;
uniform float blurStrength = 2.0;

void main()
{
    vec4 sum = vec4(0.0);
    vec2 offset = vec2(blurStrength / screenSize.x, 0.0);

    // 横向模糊采样
    sum += texture(texture0, fragTexCoord - 4.0*offset) * 0.05;
    sum += texture(texture0, fragTexCoord - 3.0*offset) * 0.09;
    sum += texture(texture0, fragTexCoord - 2.0*offset) * 0.12;
    sum += texture(texture0, fragTexCoord - offset) * 0.15;
    sum += texture(texture0, fragTexCoord) * 0.16;
    sum += texture(texture0, fragTexCoord + offset) * 0.15;
    sum += texture(texture0, fragTexCoord + 2.0*offset) * 0.12;
    sum += texture(texture0, fragTexCoord + 3.0*offset) * 0.09;
    sum += texture(texture0, fragTexCoord + 4.0*offset) * 0.05;

    vec2 offsetY = vec2(0.0, blurStrength / screenSize.y);
    vec4 sumY = vec4(0.0);

    // 纵向模糊采样
    sumY += texture(texture0, fragTexCoord - 4.0*offsetY) * 0.05;
    sumY += texture(texture0, fragTexCoord - 3.0*offsetY) * 0.09;
    sumY += texture(texture0, fragTexCoord - 2.0*offsetY) * 0.12;
    sumY += texture(texture0, fragTexCoord - offsetY) * 0.15;
    sumY += texture(texture0, fragTexCoord) * 0.16;
    sumY += texture(texture0, fragTexCoord + offsetY) * 0.15;
    sumY += texture(texture0, fragTexCoord + 2.0*offsetY) * 0.12;
    sumY += texture(texture0, fragTexCoord + 3.0*offsetY) * 0.09;
    sumY += texture(texture0, fragTexCoord + 4.0*offsetY) * 0.05;

    finalColor = (sum + sumY) / 2.0;
}

4. 主循环中应用模糊效果 #

加载Shader并设置参数，在主循环中先绘制棋盘到离屏纹理，再通过Shader模糊渲染到屏幕：

Shader blurShader;

// 初始化阶段加载Shader
blurShader = LoadShader(NULL, "blur.frag");

// 获取Shader参数位置，用于设置模糊参数
int screenSizeLoc = GetShaderLocation(blurShader, "screenSize");
int blurStrengthLoc = GetShaderLocation(blurShader, "blurStrength");

// 设置屏幕尺寸参数
Vector2 screenSize = { (float)GetScreenWidth(), (float)GetScreenHeight() };
SetShaderValue(blurShader, screenSizeLoc, &screenSize, SHADER_UNIFORM_VEC2);

// 设置模糊强度（建议取值1-5，值越大模糊程度越高）
float blurStrength = 3.0f;
SetShaderValue(blurShader, blurStrengthLoc, &blurStrength, SHADER_UNIFORM_FLOAT);

// 主循环
while (!WindowShouldClose())
{
    BeginDrawing();
        // 先清空菜单背景
        ClearBackground(RAYWHITE);

        // 1. 绘制棋盘到离屏纹理
        drawBoard(boardTexture, DARKGRAY, LIGHTGRAY);

        // 2. 使用模糊Shader绘制棋盘到屏幕
        BeginShaderMode(blurShader);
            // RenderTexture纹理是上下翻转的，需用DrawTexturePro修正坐标
            DrawTexturePro(boardTexture.texture, 
                (Rectangle){0, 0, (float)boardTexture.texture.width, -(float)boardTexture.texture.height}, 
                (Rectangle){0, 0, (float)GetScreenWidth(), (float)GetScreenHeight()}, 
                (Vector2){0, 0}, 0.0f, WHITE);
        EndShaderMode();

        // 绘制菜单其他元素（如按钮、文字，不会被模糊）
        DrawText("Game Menu", 300, 20, 40, DARKBLUE);
    EndDrawing();
}

// 释放资源
UnloadRenderTexture(boardTexture);
UnloadShader(blurShader);
CloseWindow();

关键注意事项 #

• RenderTexture的纹理默认上下翻转，必须通过DrawTexturePro将源矩形高度设为负数才能正确显示。
• 模糊强度需根据实际需求调整，过高的数值会导致画面失真。
• 若只需模糊棋盘区域而非全屏，可修改DrawTexturePro的目标矩形参数，仅绘制棋盘对应的区域。

内容的提问来源于stack exchange，提问作者Gabesz