1

2 つの画像 A と B と、3 番目のグレースケール画像 T があるとします。A と B にはほぼ何でも含まれていますが、これらがゲームの 2 つのシーンであると仮定しましょう。

ここで、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％）：これは移行のまさに始まりです。この時点で、Tの対応するピクセルが完全に黒である場合を除いて、合成画像のほとんどのピクセルは画像Aのピクセルになります。その場合、合成画像の画素は画像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から始めて、すべてのステップで、TがIよりも小さいすべての位置に画像Aのピクセルを使用し、それ以外の場合は画像Bのピクセルを使用します。

ソフトエッジの場合、別のパラメータdを定義し、次のようにピクセルPを計算できます。

すべてのポイント（x、y）について、次の3つのオプションから選択します。

  • 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 に答える