如何使用灰度轉換貼圖在兩個圖像之間轉換

想象一下，您有兩個圖像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

來源

2009-11-08 Kawa

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.

以「平滑」過渡的，你可以做到以下幾點：

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-08 19:09:20

恭喜！預先計算混合比率並使用直接位圖操作，可以使您的方法更快速。 – Kawa 2009-11-09 17:03:24

很高興聽到它:) – 2009-11-09 17:13:59

並感謝您發佈您的最終代碼。很高興看到這樣的答案得到付諸實踐，現在其他人可以從你所做的改進中學習。乾杯! – 2009-11-09 17:16:58

我說你開始像A，然後在我的每一步你使用圖像A的像素，每個位置其中T小於I，否則圖像B的像素。

對於軟邊緣可以定義另一個參數d，並計算出你喜歡這麼個像素P：

對於每個點（x，y）的您提供以下三個選項之間做出選擇：

我（x，y）-d然後該點等於A的點，則T（x，y）+ d然後令z = I - （T （x，y）-d）並且該點等於A（x，y）（1-z /（2d））+ B（x，y）（z /（2d））
我< T（X，Y）+ d那麼點等於B

這產生了直線邊緣的點，當然也可以用於邊緣的功能的任意數目之間選擇。

來源

2009-11-08 19:08:25

如何使用灰度轉換貼圖在兩個圖像之間轉換

回答

相關問題