创建随 alpha 变化的雾效果

Question

我正在尝试在我正在开发的地图工具中实现 "fog-of-war"。

对于每个网格单元格，如果单元格是 "fogged"，则颜色设置为灰色乘以单元格的当前颜色。否则，单元格颜色将设置为单元格通常应为的任何颜色。

下面是我的 draw 函数。

for x = 0, (self.gridSize - 1) * self.scale, self.scale do
        for y = 0, (self.gridSize - 1) * self.scale, self.scale do
            local mouseX, mouseY = camera:mousepos()

            local curCell = self:getCell(x, y, true)
            local state = Grid:getState(x, y, true)

            if fog and curCell.fogged then
                local color = multiplyColors(curCell.color, {100,100,100,10})
                color[4] = 150
                if curCell:getState() == 1 then
                    love.graphics.setColor(color)
                else
                    love.graphics.setColor({100, 100, 100, 100})
                end
                love.graphics.rectangle('fill', x, y, self.scale, self.scale)
            elseif math.floor(mouseX / self.scale) == math.floor(x / self.scale) and math.floor(mouseY / self.scale) == math.floor(y / self.scale) then
                love.graphics.setColor(255, 0, 0, 30)
                love.graphics.rectangle('fill', x, y, self.scale, self.scale)

            elseif state == 1 then
                love.graphics.setColor(curCell.color)
                love.graphics.rectangle('fill', x, y, self.scale, self.scale)

            elseif state == 0 and self.bGridLines then
                love.graphics.setColor(100, 100, 100, 10)
                love.graphics.rectangle('line', x, y, self.scale, self.scale)
            end
        end
    end

这里是 multiplyColors 函数

function multiplyColors(c1, c2)
    local newColor = {}

    newColor[1] = math.floor((c1[1] * c2[1]) / 255)
    newColor[2] = math.floor((c1[2] * c2[2]) / 255)
    newColor[3] = math.floor((c1[3] * c2[3]) / 255)

    return newColor

end

虽然这会创建 an okay-looking effect，但我需要能够设置雾的不透明度。

例如，如果我将行 color[4] = 150 更改为 color[4] = 255，所需的输出应该是 something like this instead of what I actually get when changing that line. Likewise, changing the line to color[4] = 0 yields this (which admittedly looks sorta neat) instead of something like this.

这里是完整存储库的 link：https://github.com/camdenb/DnD-Map-Creator

谢谢！

Answer 1

在雾中获得不同不透明度级别的一种简单方法是通过在循环外写入来在整个屏幕上绘制雾：

love.graphics.setBackgoundColor(100, 100, 100) -- fog, everywhere

之后，如果单元格有雾，则使用较低的 alpha 值绘制它以暴露下面的雾。

   if fogged and curCell.fogged then
      local c = curCell.color
      -- you can change 100 for various amounts of fog
      -- 0 means all fog and 255 means no fog
      love.graphics.setColor(c[1], c[2], c[3], 100)
      -- more code to draw...
   end

您可能想尝试不同的混合模式。 LÖVE wiki 提供了一些示例，可以在将雾背景与在顶部绘制的单元格混合时获得不同的效果。

创建随 alpha 变化的雾效果

Creating a fog effect that varies with alpha

lua

blending

colors

love2d