実装したことの流れ

下記は、私が FF5 の敵を倒す演出を見て思って実装した内容。“らしい”かもしれませんが、実際どうなのかは知らないです。

敵を倒す。（エフェクト開始の基点のこと。ボタンの押下）
敵の色味を半透明の紫色に変更。
- 一定値以上の色（黒い線の部分）は色を半透明にするだけ。ピクセルを HSV の V（明度の黒っぽさ）で評価して、基準値以下は半透明にするだけとした。
- 半透明は一定値をすべてのピクセルにセットする。ただし、a の値が 0x00（透明）の部分は無視する。
指定秒数で、敵の透明度を更に下げる。
指定秒数で、敵のピクセルが少しずつ霧のようにとけて消える演出 ¹ をする。
- 同時に指定秒秒数で、透明度を更にさげて 0x00 にする。
エフェクトが完了したイベントを通知しておく。

こんな感じがよいのではないかと思いました。

紫色にするポイント

画像処理をする際は、ピクセルデータの配列にアクセスする必要があります。

Texture2D.GetPixels32

var color = TargetTexture2D.GetPixels32();
var width = TargetTexture.width;
var height = TargetTexture.height;

GetPixels メソッドを実行する際は、Assets のインポートデータの設定で「Read/Write Enabled」が有効になっている必要があります。（png ファイルなので Format もついでに指定してあげました）

f:id:shikaku_sh:20200220093054p:plain:h400 — 画像処理には必須の設定

ただし、この設定は注意が必要でインポートデータの使用するメモリー量が２倍になるみたいです。詳細は公式の「テクスチャ - Advanced settings」を参照すると以下のコメントがあります。なので、このサンプルのように比較的小さなサイズの画像を対象にしたほうが推奨のエフェクトといえるかもしれないです。

このボックスをチェックすると、スクリプト関数 (Texture2D.SetPixels、Texture2D.GetPixels、その他の Texture2D 関数など) からテクスチャデータにアクセスが可能になります。ただし、テクスチャデータのコピーが作成され、テクスチャアセットに必要なメモリ量が 2 倍になるため、絶対に必要な場合にのみこのプロパティーを使用してください。この機能は非圧縮テクスチャと DXT 圧縮テクスチャに対してのみ有効です。他のタイプの圧縮テクスチャを読み込むことはできません。このボックスは、デフォルトでは無効になっています。

for (int y = 0; y < _ImageHeight; y++)
{
    for (int x = 0; x < _ImageWidth; x++)
    {
        var c = _Pixels[(_ImageWidth * y) + x];

        // ピクセルが透明のとき
        if (c.a == 0x00) continue;

        // 明度
        var v = GetBrightness(c);
        var vp = v / 255.0F; // 明度の割合

        if (v > LineBrightness) // 線と区別するライン
        {
            // 紫色を基準に明度の割合を当てる
            c.r = (byte)(0xEE * vp);
            c.g = (byte)(0x66 * vp);
            c.b = (byte)(0xFF * vp);
        }

        // すこし薄くする
        c.a = DefeatedWhiteStart;

        _Pixels[(_ImageWidth * y) + x] = c;
    }
}

private byte GetBrightness(Color32 color)
{
    if (color.r >= color.g && color.r >= color.b) return color.r;
    if (color.g >= color.r && color.g >= color.b) return color.g;
    return color.b;
}