unityで使える、トランジション画像といえば

For Youさんで公開されているようなグレースケールの画像を使って、

テラシュールブログで紹介されているような、時間経過で表示するアルファ値で表示するパターンが簡単

場面転換の演出に幅がでます。

今回は、独自のルール画像を作る方法を紹介します。

  • ルール画像とは?
  • 必要なソフト
  • 実装してみた。
  • 動画編集ソフトのトランジションに使ってみた。
  • サンプル
  • タテのサンプル
  • 横のサンプル
  • ニコニコの素材にあげてみた。

ルール画像とは?

こんな、白黒の画像を用意して描画反映する色の範囲で表示したりしなかったりするようにすると

 

「トランジション ルール画像」などで検索すると、たくさんの画像が手に入りますが

アプリのテーマに沿ったものが作りたい場合の作成方法考えてみました。

例えば、漢字のアプリの場面転換にはこんな感じのルール画像を作成

使ってみるとこんなかんじ。

 

トランジション画像の作り方

白黒の画像を作るにあたって、まず最初に思いつくのは、ぼかしを使うことでしたが、うまく形状にそって

グラデーションを入れることができなかったので、簡単に必要な階調を入れる方法を紹介します。

☆必要なソフト イラレ

☆使う機能 ブレンド

今回は、インムスのアップデートに向けて、野獣先輩のルール画像を作成したいと思います。

 

野獣先輩のシルエットを作成します ブラシでもペンでもいいので黒で塗りつぶします

野獣先輩シルエットをCtrl+c →ctrl+fで同じ場所にコピペします。

右クリック→変形拡大→600%で拡大→拡大した野獣先輩シルエットの塗りを白に変更

拡大した野獣先輩を再背面に移動

ここまでで下記の状態↓

 

大小2つの野獣先輩シルエットを選択して

オブジェクト→ブレンド→作成

下記のような画像ができる。

あとは、書き出し→ 透明なし マットを白にします。

 

 

これだけで独自のルール画像が作れちゃいます。

実装してみた

書き出した、ルール画像をunityのリソースに入れテクスチャーの設定を行う

画像をインスペクターで表示後

Texture Typeを Single Channelに変更  Alpha Source をFrom Gray Scaleに変更後 Applyをクリック

あとは、フェードカメラなどで使用する。

 

 

動画編集ソフトのトランジションに使ってみた。

せっかくなので プレミア やPowerDirectorで使ってみた。ソフトによっては、拡大縮小 マスクを使って独自に作成できるが

ルール画像を作っておくと使い回しが出来て便利です。

サンプル

簡単につくれるようになったので、何個か置いていく それぞれ FullHDサイズなんでイジってどうぞ。

 淫夢くんUC

 

某作者 縦

某作者 横

 

 

メタリックな彼の メタリックなゴーグル  横

メタリックな彼の メタリックなゴーグル  縦

 

 

ニコニコの素材にあげてみた。