Unityで2Dの残像を実装する【Unity】【アセット】

この記事でのバージョン
Unity 2018.2.17f1

はじめに

今回はUnityで2Dの残像を実装する事が出来るアセットAIE2D(AfterImageEffect2D)のご紹介です！

まぁ作ったの僕なんですども！ちなみにイメージは以下のような感じ。

なお、今回はこのAIE2DをBOOTHで無料配布しています。

また、背景や飛空艇の画像はぴぽやさんからお借りしました。

導入

まずはAIE2Dの導入からですが、他のアセット同様にインポートするだけでOKです。

後はSampleというシーンを再生してもらうと、なんとなく雰囲気はつかめるかと思います。

なお、サンプルを見てもらうと分かるように、AIE2Dには2種類の残像があります。

動かない残像

1つ目の残像が動かない残像であるStaticAfterImageEffect2D(Player)です。

サンプルだと上部に配置してある方です。

動かない残像を簡単に説明すると

「変化しない残像を通過箇所に置いていき、その残像は時間で消える」と言った感じ。

以下のように、サンプルをゆっくりにしてみると、より分かりやすいかもしれません。

動く残像

2つ目の残像が動く残像であるDynamicAfterImageEffect2D(Player)です。

サンプルだと下部に配置してある方です。

動く残像を簡単に説明すると

「本体の動きを遅れて再生する残像」と言った感じ。

これも以下のように、サンプルをゆっくりにしてみると、より分かりやすいかもしれません。

使い方

次にAID2Dの使い方ですが、SpriteRendererが付いてるオブジェクトにPlayerを付けるだけでOK。

(動かない残像ならStaticAfterImageEffect2DPlayer、動く残像ならDynamicAfterImageEffect2DPlayer)

あとはシーンを実行すれば自動で残像が生成&再生されます。

なお、残像は元のオブジェクト名+AfterImageEffectというオブジェクトの子に配置されています。

この残像は回転や拡大、画像のアニメーションにも対応してますし、

Flip(反転)にも対応しています。

また、Inspectorから各種パラメータの設定が行えますが、

Japaneseという項目にチェックを入れると日本語にする事も出来ます。

ちなみに、実行中でもパラメータの変更は適用される(残像が作り直される)ので、

シーンを実行し、残像を見ながら調整する事も可能です。

あとはオマケ的な感じで残像に使えそうなマテリアルのサンプルも付けておきました。

(全てUnityの既存のシェーダーを使用)

プログラムから操作

AIE2Dはプログラムから操作する事も可能です。

残像を作成したい場合はPlayerクラスのCreateAfterImageを実行すればOK。

この時、残像の元となるSpriteRendererを引数に設定します。

//AIE2Dを使う時に必要
using AIE2D;

StaticAfterImageEffect2DPlayer player = gameObject.AddComponent<StaticAfterImageEffect2DPlayer>();
player.CreateAfterImage(gameObject.GetComponent<SpriteRenderer>());

なお、CreateAfterImageではInspectorで設定可能な各種パラメータを設定することも可能です。

ただし、設定出来るのはCreate時のみで途中変更は出来ません。(色やマテリアルは出来る)

また、残像の表示を切り替えたい場合はSetActiveを使います。

(サンプルシーンだとReturn(Enter)キーを押した時の動作)

//残像の表示を切り替える
player.SetActive(!_player.IsActive);//playerはStaticAfterImageEffect2DPlayerかDynamicAfterImageEffect2DPlayer

さらに残像の色を変更したい場合はSetColor(List)Ifneeded、

(サンプルシーンだとKキーを押した時の動作)

//全ての残像の色を同じ色に変える
player.SetColorIfneeded(color);

//残像の色を別々の色に変える
player.SetColorListIfneeded(colorList);

さらに残像のマテリアルを切り替えたい場合はSetMaterial(List)Ifneededを使います。

(サンプルシーンだとLキーを押した時の動作)

//全ての残像のマテリアルを同じマテリアルに変える
player.SetMaterialIfneeded(material);

//残像のマテリアルを別々のマテリアルに変える
player.SetMaterialListIfneeded(materialList);

そして残像のオブジェクトを削除したい場合はDestroyAfterImageIfneededを使います。(ver1.1以降)

(サンプルシーンだとUキーを押した時の動作、サンプルは元のオブジェクトも一緒に削除)

//残像を削除する
player.DestroyAfterImageIfneeded();

ちなみにver1.1から

残像元のオブジェクトだけを削除した場合は消える所まで残像が表示されるようになりました。

(サンプルシーンだとYキーを押した時の動作)

おわりに

元々はもっとシンプルなものを作る予定だったのですが、せっかく記事にするのだからと

汎用的に使っていったら、結構しっかりしたものを作ってしまい、

それならアセットとして公開しようとなったのが今回紹介したAIE2Dだったりします。

なお、実際のプロジェクトで使ってみたわけではないので、バグがあるかもしれません。

もし何か見つけた場合は報告して頂けると幸いです。(すぐに直せるとは限りませんが……)

---