SDL - 绘制'负面'圈子(战争迷雾)

时间:2012-11-30 23:41:35

标签: c++ sdl

我有800x600square我要画到屏幕上。我想在其中“剪切”圆圈(其中alpha为0)。基本上我是在地图上绘制这个整个矩形,所以在我绘制的这些'圆圈'中,你可以看到地图,否则你会看到灰色的正方形

1 个答案:

答案 0 :(得分:26)

所以,我假设你试图为你们其中一个游戏添加战争迷雾?

我几周前为当地一所大学制作了一个小型演示来展示A *寻路,所以我想我可以为你增加战争迷雾。结果如下:

初始地图

首先,您从完整可见的完整地图开始

Full Map

<强>雾

然后,我添加了一个表面覆盖整个屏幕(请注意我的地图比屏幕小,所以在这种情况下我只是在屏幕上添加了战争迷雾,但如果你有滚动,请确保它覆盖每个地图像素1:1)

mFogOfWar = SDL_CreateRGBSurface(SDL_HWSURFACE, in_Width, in_Height, 32, 0x00ff0000, 0x0000ff00, 0x000000ff, 0xff000000);
SDL_Rect screenRect = {0, 0, in_Width, in_Height};
SDL_FillRect(mFogOfWar, &screenRect, 0xFF202020);

然后,你需要绘制它...我在绘制游戏对象之后和绘制UI之前添加了这个调用

DrawSurface(mFogOfWar, 0, 0);

其中

void RenderingManager::DrawSurface(SDL_Surface* in_Surface, int in_X, int in_Y)
{
    SDL_Rect Dest = { in_X, in_Y, 0, 0 };
    SDL_BlitSurface(in_Surface, NULL, mScreen, &Dest);
}

哪个应该给你以下结果:

Everything Fogged

“打孔表面”

然后我创建了一个32位.png,看起来像这样(棋盘显示alpha)

Punch

渲染我的主角时,我添加了这个调用:

gRenderingManager.RemoveFogOfWar(int(mX) + SPRITE_X_OFFSET, int(mY) + SPRITE_Y_OFFSET);

偏移只是用精灵来打中心,基本上,我传递给RemoveFogOfWar的是我的精灵的中心。

删除战争迷雾

现在是战争之雾的肉。我做了两个版本,一个是永久删除战争迷雾,另一个是重置战争迷雾的版本。我的战争迷雾重置依赖于我的punch曲面有一个轮廓,其中alpha被重置为0,并且我的角色移动的像素比轮廓包含的帧数少,否则我会保留应用我的打孔的Rect我会在再次绘制新打孔之前重新填充它。

由于我找不到与SDL的“乘法”混合,我决定编写一个简单的函数,在打孔表面上迭代并更新战争表面雾上的alpha。最重要的部分是确保你保持在表面的范围内,因此它占用了大部分代码...可能有一些裁剪功能,但我没有费心检查:

void RenderingManager::RemoveFogOfWar(int in_X, int in_Y)
{
    const int halfWidth = mFogOfWarPunch->w / 2;
    const int halfHeight = mFogOfWarPunch->h / 2;

    SDL_Rect sourceRect = { 0, 0, mFogOfWarPunch->w, mFogOfWarPunch->h };
    SDL_Rect destRect = { in_X - halfWidth, in_Y - halfHeight, mFogOfWarPunch->w, mFogOfWarPunch->h };

    // Make sure our rects stays within bounds
    if(destRect.x < 0)
    {
        sourceRect.x -= destRect.x; // remove the pixels outside of the surface
        sourceRect.w -= sourceRect.x; // shrink to the surface, not to offset fog
        destRect.x = 0;
        destRect.w -= sourceRect.x; // shrink the width to stay within bounds
    }
    if(destRect.y < 0)
    {
        sourceRect.y -= destRect.y; // remove the pixels outside
        sourceRect.h -= sourceRect.y; // shrink to the surface, not to offset fog
        destRect.y = 0;
        destRect.h -= sourceRect.y; // shrink the height to stay within bounds
    }

    int xDistanceFromEdge = (destRect.x + destRect.w) - mFogOfWar->w;
    if(xDistanceFromEdge > 0) // we're busting
    {
        sourceRect.w -= xDistanceFromEdge;
        destRect.w -= xDistanceFromEdge;
    }
    int yDistanceFromEdge = (destRect.y + destRect.h) - mFogOfWar->h;
    if(yDistanceFromEdge > 0) // we're busting
    {
        sourceRect.h -= yDistanceFromEdge;
        destRect.h -= yDistanceFromEdge;
    }

    SDL_LockSurface(mFogOfWar);

    Uint32* destPixels = (Uint32*)mFogOfWar->pixels;
    Uint32* srcPixels = (Uint32*)mFogOfWarPunch->pixels;

    static bool keepFogRemoved = false;

    for(int x = 0; x < destRect.w; ++x)
    {
        for(int y = 0; y < destRect.h; ++y)
        {
            Uint32* destPixel = destPixels + (y + destRect.y) * mFogOfWar->w + destRect.x + x;
            Uint32* srcPixel = srcPixels + (y + sourceRect.y) * mFogOfWarPunch->w + sourceRect.x + x;

            unsigned char* destAlpha = (unsigned char*)destPixel + 3; // fetch alpha channel
            unsigned char* srcAlpha = (unsigned char*)srcPixel + 3; // fetch alpha channel
            if(keepFogRemoved == true && *srcAlpha > 0)
            {
                continue; // skip this pixel
            }

            *destAlpha = *srcAlpha;
        }
    }

    SDL_UnlockSurface(mFogOfWar);
}

然后,即使在角色移动后,keepFogRemoved = false也给了我这个

fog of war

这与keepFogRemoved = true

fog of war permanent

<强>验证

重要的部分是确保你不要在像素缓冲区之外写字,所以请注意负偏移或偏移会使你超出宽度或高度。为了验证我的代码,我在点击鼠标时添加了对RemoveFogOfWar的简单调用,并尝试了边角以确保我没有“一个一个”的问题

case SDL_MOUSEBUTTONDOWN:
    {
        if(Event.button.button == SDL_BUTTON_LEFT)
        {
            gRenderingManager.RemoveFogOfWar(Event.button.x, Event.button.y);
        }
        break;
    }

备注

显然,你不需要32位纹理来“冲击”,但这是我能想到的最清晰的方式来向你展示如何做到这一点。可以使用每像素1位(开/关)来完成。您还可以添加一些渐变,并更改

if(keepFogRemoved == true && *srcAlpha > 0)
{
    continue; // skip this pixel
}

类似

if(*srcAlpha > *destAlpha)
{
    continue;
}

保持这样的平滑混合:

enter image description here

3国战大雾

我想我应该添加这个...我添加了一种方法来创建一个3状态的战争迷雾:visibleseenfogged

为了做到这一点,我只是保持我最后“打击”战争迷雾的SDL_Rect,如果alpha低于某个值,我将其钳制在该值。

所以,只需添加

即可
for(int x = 0; x < mLastFogOfWarPunchPosition.w; ++x)
{
    for(int y = 0; y < mLastFogOfWarPunchPosition.h; ++y)
    {
        Uint32* destPixel = destPixels + (y + mLastFogOfWarPunchPosition.y) * mFogOfWar->w + mLastFogOfWarPunchPosition.x + x;
        unsigned char* destAlpha = (unsigned char*)destPixel + 3;

        if(*destAlpha < 0x60)
        {
            *destAlpha = 0x60;
        }
    }
}
mLastFogOfWarPunchPosition = destRect;
在战争迷雾被“打了”的循环之前,我得到了类似于星际争霸游戏中的战争迷雾:

3 state

现在,由于“看见”的战争雾是半透明的,你需要调整你的渲染方法来正确剪辑雾中的“敌人”,所以你看不到它们但你仍然看到地形

希望这有帮助!