Question

想象一下，你有两个图像A和B，以及第三个灰度图像T.A和B几乎包含任何东西，但我们假设它们是游戏中的两个场景。

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

随着时间的推移，让我们假设256没有进一步阐述“滴答”以匹配灰度，A应该转换为B给出钻石擦拭效果。如果T代替包含一个较小矩形渐变的网格，那么就像图像的每个部分本身都做了一个矩形擦除。

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

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

为了增加额外的奖励，软边缘怎么样？

现在，结论

Final experiment, based on eJames's code

Sample from final experiment -- waves up, 50% http://helmet.kafuka.org/TransitionsSample.png

Answer 1

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的几个值会发生什么：

timeIndex == 0（0％）：这是过渡的开始。此时，合成图像中的大多数像素将是图像A的像素，除了T中的对应像素是完全黑色的情况。在这些情况下，合成图像像素将是图像B的像素。
timeIndex == 63（25％）：此时，图像B中的更多像素已进入合成图像。 T的值小于25％白色的每个像素将从图像B中获取，其余的仍然是图像A.

timeIndex == 255（100％）：此时，T中的每个像素都会取消条件，因此合成图像中的所有像素都将是图像B的像素。

< / LI>

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

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;
}

Answer 2

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

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

对于每个点（x，y），您可以选择以下三个选项：

我＆lt; T（x，y） - d则该点等于A
T（x，y）-d＆lt; = I＆lt; T（x，y）+ d然后让z = I - （T（x，y）-d）并且该点等于A（x，y）（1-z /（2d））+ B（x， y）的（Z /（2D））
我＆lt; T（x，y）+ d则该点等于B

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

如何使用灰度转换映射在两个图像之间转换

2 个答案: