创建随alpha变化的雾效果

Question

我正试图在我正在开发的映射工具中实现"战争之雾"。

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

下面是我的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

虽然这会创建一个看起来不错的效果，但我需要设置雾不透明度的能力。

例如，如果我将行color[4] = 150更改为color[4] = 255，那么所需的输出应该是这样的，而不是更改该行时实际得到的输出。同样，将行更改为color[4] = 0会产生这样的结果（诚然，这看起来有点整洁），而不是这样的结果。

以下是完整存储库的链接：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维基有几个例子可以在混合雾背景和在上面绘制的单元格时获得不同的效果。