(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]

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


このエントリーをはてなブックマークに追加

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


はじめに

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

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


f:id:kan_kikuchi:20190125160509g:plain:w700


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



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





導入

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


f:id:kan_kikuchi:20190125132536j:plain


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


f:id:kan_kikuchi:20190125132547j:plain
f:id:kan_kikuchi:20190125160509g:plain:w700


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


動かない残像

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

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


f:id:kan_kikuchi:20190125160345j:plain


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

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

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


f:id:kan_kikuchi:20190125161441g:plain


動く残像

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

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


f:id:kan_kikuchi:20190125160455j:plain


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

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

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


f:id:kan_kikuchi:20190125161544g:plain


使い方

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

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


f:id:kan_kikuchi:20190125161908j:plain


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

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


f:id:kan_kikuchi:20190125161855j:plain


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


f:id:kan_kikuchi:20190125162559g:plain:w700


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


f:id:kan_kikuchi:20190125162539j:plain


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

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


f:id:kan_kikuchi:20190125162822j:plain


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

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


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

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


f:id:kan_kikuchi:20190125163042j:plain
f:id:kan_kikuchi:20190125163050j:plain


プログラムから操作

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


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

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

//AIE2Dを使う時に必要
using AIE2D;
StaticAfterImageEffect2DPlayer player = gameObject.AddComponent<StaticAfterImageEffect2DPlayer>();
player.CreateAfterImage(gameObject.GetComponent<SpriteRenderer>());


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

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


f:id:kan_kikuchi:20190125164158j:plain


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

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

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

f:id:kan_kikuchi:20190125165332g:plain:w700


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

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

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

f:id:kan_kikuchi:20190125165417g:plain:w700


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

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

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

f:id:kan_kikuchi:20190125165549g:plain:w700


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

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

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

f:id:kan_kikuchi:20190129105243g:plain


ちなみにver1.1から

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

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


f:id:kan_kikuchi:20190129105132g:plain


おわりに

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

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

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


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

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