2017.07.30使い古されて今更感ある内容ですが、ノベルゲームでよくあるトランジション演出についてです。トランジション演出というのは以下の画像のような場面転換で利用されるものです。今回はuGUIで実装しますが、考え方はどのような環境でも変わりません。画像さえ用意すれば......まとめ理屈これをプログラムで黒いメッシュを制御して......となるととてもめんどくさいです。古からこの演出には定石があります。それはこの動きを画像として用意するというものです。用意するものはこのような白黒画像です。上のgifアニメと比べるとわかりますが、白い部分から黒い部分に向けて画面が消えていきます。この画像を最前面にα画像として表示し、α値を時間に伴って増減させるだけです。最初はこの画像の全体が見えないので、αを-1させます。最終的には画像全体が見えるようになるのでαを+1させます。後はこの-1~+1の間を補間すれば上のgifのような演出になります。実装内容まとめ順に実装すべき内容を書きます。トランジション画像を最前面に表示するまずは画像が画面に出せなければいけません。uGUIではImageを使えば出ますが、白黒をαとして出したい上に、後々の演出をいれたいのでシェーダーは自作が必要です。時間によって画像のα値を増減する時間経過に伴ってα値を-1~+1する処理が必要です。時間を制御するスクリプトC#で時間に伴ってシェーダー定数を変更する処理が必要です。トランジション画像を最前面に表示するではまず画像を表示します。グレースケールで作ったトランジション画像をプロジェクトに追加します。インスペクターでuGUI用の設定を施します。Scaleを選択します。後はお好みで大丈夫です。これをImageに設定します。何とも言えない画像が表示されると思います。次にこれを表示する為のシェーダーを用意します。言っても、Unity特有のルールなんかも多いのでもともとあったuGUI用のシェーダーを改造したものです。"UI/Default"}マテリアルに指定された色と、テクスチャのαで描画するだけのものです。9割9分が決まり文句です。色を決める部分はfrag関数です。tex2Dでテクスチャの色を取得し、返り値(実際に描画される色)には_Colorのrgbとテクスチャのαを指定しています。_Colorはマテリアルに設定されているシェーダー定数です。(インスペクターでいじれるやつ)シェーダーはマテリアルに付けなければ意味がないので、これ用のマテリアルも用意します。使ったシェーダーをマテリアルに設定します。作ったマテリアルをImageに設定します。これで黒~透明の画像が表示されるようになりました。時間によって画像のα値を増減するさて、この画像のα値を時間によって増減させます。増減させる箇所はシェーダーのfrag関数のalphaの部分です。時間は0~1が渡されるとして、時間が0の時は-1、1の時は+1するように変更します。時間変数_Alphaを用意してfragでalphaに足してやります。"UI/Default"}変っている点は_Alphaを追加している部分とfrag関数のalphaに_Alphaの値を足している部分です。ちなみにsaturateは引数が0以下なら0に、1以上なら1にする関数です。1ということで、0なら-1、1なら+1になります。-1」されて0の完全透明に。+1」されて1の完全不透明になります。基本のシェーダーはこれだけで終わりです。後は演出の内容によって好きにカスタマイズしてください。時間を制御するスクリプトではこのシェーダーの_Alphaを0~1に変更するスクリプトを用意して動かしてみます。}}マテリアルは外部から設定できるようにしました。これをトランジション画像が設定されたImageに設定する事でアニメーションが行われます。中身は特に難しいこともなく、コルーチンで時間を増やしているだけです。ちなみに最後にちゃんと_Alphaに1を入れてやらないと時間の具合によっては中途半端な値になっていることがあります。これを実行するとちゃんと暗転します。基本はここまであとはαの変化の仕方を変えることで、直線的でない色の変化や、明転等が表現できます。先ほどは暗転を作りましたが、これでは最初のgifのように、暗くなった後明転して次場面が表示されません。いうわけで明転用シェーダを作ります。これもそこまで難しくありません。暗転とは逆に黒から白に向けて色が出るので、α値を逆にして、時間によってαが減ればいいわけです。"UI/Default"}シェーダーの名前とfrag関数しか変えていません。変更内容は先ほどのとおり、1からalphaを引くことでα値を逆にしています。その後、先ほどまで足していた_Alphaを引くようにしています。これで真っ暗から明転します。暗転あとに明転させると先ほどのgifのようになります。注意点として暗転と明転の間に場面を切り替える処理が必要です。今回はUnityEventで外部から設定できるようにしています。}}BeginTransitionで先ほどは暗転だけだったのが、その後に明転させています。間でUnityEventを発火しています。※UnityEventはインスペクターでGameObjectとそのメソッドを設定できます。今回はGameObjectの表示・非表示を切り替えるだけなので、特にスクリプトは用意していません。OnTransitionに転換前のImageがあるGameObjectを指定し、メソッドにSetActiveを指定。パラメータである下のチェックを外します。一つは転換後のImageがあるGameObjectを指定し、同様にSetActiveを指定。こちらは表示させるのでチェックを付けます。※もちろんもっと複雑な場面転換が必要なら適宜実装が必要です。画像さえ用意すれば......画像さえ用意すればなんでもできます。適当にフォトショップのグラデーションで作ったコレとかもできます。まとめ理屈は大して難しくなく、画面の一番手前に画像を一枚だすだけで良いというお手軽さが結構使い勝手が良いです。今回はuGUIでしましたが、普通のメッシュでも同じ理屈で出来ますし、ポストエフェクトとして実装する事も出来ます。do.関連記事ASP.NetASP.NetのApiControllerを自分で選択するASP.NetのApiControllerはシステムがURL等によって自動で選択してくれます。Pluginをデバッグする方法を解説します。言っても解説するほどのものでもないです。基本MSが解説しているココのとおりです。Plug...ASP.NetASP.Net触ってみたずっと気になってたASP.Netをさわってみました。Frameworkで動くウェブアプリケーションの環境です。Servletやapache...C#UnityのHierarchyのCreateに項目を追加するヒエラルキーのCreateボタンや、GameObjectを右クリックしたときに出る子供を作成する項目は実は自由に追加できます。これらに好きな項目を追加します。追加にはEditorのMenuItemを利用しま...C#【チュートリアル】uGUIとPhysics2Dでブロック崩しを作ってみるチュートリアルとして試しに作ってみました。比較的プログラムをあまりできない人向けにできる限り崩して書くようには気を付けます。画像が用意できない人向けに画像リソースは一切使わないようにしてます。※この記事はUnity...C#Unityのコルーチン機能を使うUnityにはコルーチンという便利な機能があります。コルーチン自体はUnity特有のものではありません。ツイートタイトルとURLをコピーしました。