1

假设您有两个图像 A 和 B，以及第三个灰度图像 T。A 和 B 包含几乎所有内容，但我们假设它们是游戏中的两个场景。

现在，假设 T 包含菱形梯度。作为灰度，它从外部的黑色变为内部的白色。

随着时间的推移，让我们假设 256 没有进一步详细说明“刻度”以匹配灰度，A 应该过渡到 B，从而产生钻石擦拭效果。如果 T 包含一个较小的矩形梯度网格，则就像图像的每个部分本身都进行了矩形擦除。

如果您曾经使用过 RPG Maker 或大多数视觉小说引擎，您可能会认识到这个概念。

问题当然是如何做到这一点。我知道它涉及 A 和 B 之间的每像素混合，但这就是我所得到的。

为了额外的好处，软边缘呢？

而现在，结论

最终实验，基于 eJames 的代码

来自最终实验的样本——向上挥动，50% http://helmet.kafuka.org/TransitionsSample.png

4

2 回答 2

4

T 图像中的灰度值表示时间偏移。您的擦除效果将在每个像素的基础上基本上按如下方式工作：

for (timeIndex from 0 to 255)
{
    for (each pixel)
    {
        if (timeIndex < T.valueOf[pixel])
        {
            compositeImage.colorOf[pixel] = A.colorOf[pixel];
        }
        else
        {
            compositeImage.colorOf[pixel] = B.colorOf[pixel];
        }
    }
}

为了说明，想象一下在 的几个值下会发生什么timeIndex：

  1. timeIndex == 0(0%)：这是过渡的开始。此时，合成图像中的大部分像素将是图像 A 的像素，除了 T 中对应的像素是完全黑色的。在这些情况下，合成图像像素将是图像 B 的像素。

  2. timeIndex == 63(25%)：此时，图像 B 中的更多像素已进入合成图像。T 值小于 25% 白色的每个像素将从图像 B 中取出，其余的仍然是图像 A。

  3. timeIndex == 255(100%)：此时，T中的每个像素都会否定条件，因此合成图像中的所有像素都将是图像B的像素。

为了“平滑”过渡，您可以执行以下操作：

for (timeIndex from 0 to (255 + fadeTime))
{
    for (each pixel)
    {
        blendingRatio = edgeFunction(timeIndex, T.valueOf[pixel], fadeTime);
        compositeImage.colorOf[pixel] =
                    (1.0 - blendingRatio) * A.colorOf[pixel] + 
                    blendingRatio * B.colorOf[pixel];
    }
}

的选择edgeFunction取决于你。这产生了从 A 到 B 的线性过渡：

float edgeFunction(value, threshold, duration)
{
    if (value < threshold) { return 0.0; }
    if (value >= (threshold + duration)) { return 1.0; }

    // simple linear transition:
    return (value - threshold)/duration;
}
于 2009-11-08T19:09:20.393 回答
1

我会说你从图像 A 开始，然后在每一步 I 中，你在 T 小于 I 的每个位置使用图像 A 的像素，否则使用图像 B 的像素。

对于软边缘，您可以定义另一个参数 d，并计算像素 P，如下所示：

对于每个点 (x,y)，您可以在以下三个选项之间做出选择：

  • I < T(x,y) - d 那么该点等于 A 的点
  • T(x,y) - d <= I < T(x,y) + d 然后让 z = I - (T(x,y) -d) 点等于 A(x,y)(1 -z/(2d)) + B(x,y)(z/(2d))
  • I < T(x,y) + d 则该点等于 B 的点

这会产生线性边缘，当然您可以在任意数量的边缘函数之间进行选择。

于 2009-11-08T19:08:25.793 回答