在二维平铺地图上渲染战争雾

Question

我目前正在用lwjgl创建一个小的2D游戏。

我试着找出一种实现战争迷雾的方法。

我使用了alpha设置为0.5的黑色背景。

然后我添加了一个Square，为每个被点亮的平铺设置alpha为1，最终得到一个具有不同Alpha值的黑色背景。

然后我使用blendfunction渲染了我的背景：

glBlendFunc(GL_ZERO, GL_SRC_ALPHA)

这很有效，但现在我在添加透明部分的第二层时遇到了问题，并在它们上应用了战争雾。

我读过一些关于FrameBufferObjects的文章，但我不知道如何使用它们，也不知道它们是否是正确的选择。

稍后，我想用纹理/图像来照亮瓷砖，让它看起来更平滑。因此这些纹理可能会重叠。这就是我选择首先渲染战争雾的原因。

你有办法解决这个问题吗？

多亏了samgak。

现在我试着在每个深色的瓷砖上渲染一个深色的正方形，除了亮的瓷砖。我将每个瓦片划分为8x8的网格，以获得更多细节。这是我的方法：

public static void drawFog() {
    int width = map.getTileWidth()>>3; //Divide by 8
    int height = map.getTileHeight()>>3;

    int mapWidth = map.getWidth() << 3;
    int mapHeight = map.getHeight() << 3;

    //background_x/y is the position of the background in pixel
    int mapStartX = (int) Math.floor(background_x / width); 
    int mapStartY = (int) Math.floor(background_y / height);

    //Multiply each color component with 0.5 to get a darker look
    glBlendFunc(GL_ZERO, GL_SRC_ALPHA);
    glColor4f(0.0f, 0.0f, 0.0f, 0.5f);

    glBegin(GL_QUADS);
    //RENDERED_TILES_X/Y is the amount of tiles to fill the screen
    for(int x = mapStartX; x < (RENDERED_TILES_X<<3) + mapStartX 
                 && x <  mapWidth; x++){
        for(int y = mapStartY; y < (RENDERED_TILES_Y<<3) + mapStartY 
                   && y < mapHeight; y++){
            //visible is an boolean-array for each subtile
            if(!visible[x][y]){
                float tx = (x * width) - background_x;
                float ty = (y * height) - background_y;

                glVertex2f(tx,      ty);
                glVertex2f(tx+width, ty);
                glVertex2f(tx+width, ty+height);
                glVertex2f(tx,      ty+height);

            }
        }
    }
    glEnd();
}

除了一个小正方形外，我将可见数组设置为false。它可以很好地渲染，但如果我移动背景，除了可见的方块之外，整个屏幕都会变成黑色。

Answer 1

一种方法是最后渲染战争雾图层，在渲染所有其他图层之后，使用在所有其他图层顶部渲染的未带纹理的黑色正方形。

使用此混合函数：

glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA)

并设置逐顶点战争雾alpha，以便当其为1.0时黑色覆盖是透明的，当其为0.0时黑色覆盖完全为黑色。(如果您希望alpha具有相反的含义，只需交换参数即可)。

也可以使用具有不同alpha值的纹理，而不是纯黑色正方形，或者将正方形细分为4个或16个正方形，以实现更精细的控制。