2016.10.18
第10回目:Image Effectsを使って画面に変化を与える
今回は最終回です!Image Effectsを使ったサンプルを紹介します。
はじめに
今回はImage Effectsを使ったサンプルを紹介します。 Image EffectsはUnity Proで使用が可能だった機能ですが、Unity 5 Personalでも使用が可能になりました。 Image Effectsを使うと、画面にいろいろな画面処理効果を与えることができます。詳細については、下記のURLを参照してください。
http://docs.unity3d.com/ja/current/Manual/comp-ImageEffects.html
今回は「Bloom」という機能を使用します。「Bloom」はAssetやキャラクターを光らせる機能を持っています。Assetやキャラクターが光りはじめ、徐々に元の明るさに戻っていく処理を解説します。 今回のプロジェクト名は「ImageEffectSample」としておきましょう。
Asset Storeから必要なAssetをダウンロードする
今回はAsset Storeから「Import」する「Asset」は、下記の3個(無料)です。
"1. Unity-chan!" model(無料)
https://www.assetstore.unity3d.com/jp/#!/content/18705
2. Mecanim Locomotion Starter Kit(無料)
https://www.assetstore.unity3d.com/jp/#!/content/7673
3. Yughues Free Metal Materials(無料)
https://www.assetstore.unity3d.com/jp/#!/content/12949
検索欄に、「Yughues Free Metal Materials」と入力すると、該当するファイルの一覧が表示されますの、「Yughues Free Metal Materials」を選択してImportしてください(図1)。
図1 Yughues Free Metal MaterialsのImport画面
全てImportするとProject内に取り込んだAssetのフォルダーが作成されています(図2)。
図2 Project内に取り込んだAssetのフォルダーが作成された
舞台を作る
「Hierarchy」の「Create→3D Object→Plane」と選択して「Plane」を1個、同じく「Cylinder」を4個配置します。同じものを複数個配置する場合は、Hierarchyから「Cylinder」を選択し、マウスの右クリックで表示される「Duplicate」をクリックします。同じ位置に重なって「Cylinder」が配置されますので、「トランスフォームツール」の「移動」を使えば、複製を何個でも作成できます。配置した「Plane」には、「Project」の「Asset→Metal textures pack→pattern 12」フォルダーの「diffuse.tga」を適用します。4つの「Cylinder」には、「Assets→Metal textures pack→pattern 30」の「diffuse.tga」を適用します(図3)。
図3 「Cube」と「Cylinder」を配置し、Textureを適用した
ユニティちゃんの配置
「Project」の「Assets→UnityChan→Models」フォルダーにある、「unitychan.fbx」を「Plane」の中央に配置します(図4)。
図4 ユニティちゃんを配置した
「Mecanim」を使って「3D キャラクター」を動かす方法は、これまでにも解説していますので、ここでは簡単に解説しておきましょう。 「Hierarchy」から「unitychan」を選択し、表示される「Inspector」の「Animator」の「Controller」に「Locomotion」を指定します。 次に、「Add Component」から「Physics」→「Character Controller」と指定します。「Inspector」に表示された「Character Controller」の「Center」の「Y」に「1」と指定してください。 同じく、「Add Component」から「Scripts」→「Locomotion Player」と選択します。 以上の設定で、「unitycyan」はの「Plane」上を動き回れるようになります。
カメラの追従
「Hierarchy」から「Main Camera」を選択し、「Inspector」の「Add Component」から「Camera-Control→Smooth Follow」と選択します。「Inspector」に「Smooth Follow(Script)」が追加されますので、「Target」に、右横隅の「〇に・」のアイコンをクリックして、「Select Transform」を表示させて、「Scene」タブから「unitychan」を選択します。「Distance」には「5」、「Height」には「4」を指定して、少し上からの目線にしておきましょう。これもすでに解説済みですので詳細については省略します。
「Image Effect」を「Import」する
Unity 5のメニューの「Assets→Import Package→Effects」と選択します。「Import Package」の画面が表示されますので、「Import」をクリックします。 すると「Project」内に「ImageEffects」のフォルダーが作成され、「Scripts」フォルダー内に、いろいろなEffectに対応したスクリプトが格納されます(図5)。
図5 いろいろなEffectsに対応したスクリプトファイルの一覧
図5の中にある、Bloom.csファイルを、「Hierarchy」内の「Main Camera」の上にドラッグ&ドロップします(図6)。このBloomファイルはAssetやキャラクターを光らせることができるファイルです。
図6 「Bloom」ファイルを「Main Camera」にドラッグ&ドロップした
「Main Camera」に「Bloom(Script)」が追加されます(図7)。
図7 「Main Camera」に「Bloom」が追加された
スクリプトを記述する
「Main Camera」の「Add Component」から「New Script」で「BloomScript」を追加します。「Visual Studio 2015」を起動して、リスト10.1のコードを記述します。
リスト10.1 Assetやキャラクターが光りはじめ、徐々に元の明るさに戻るコード(BloomScript.cs)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | using UnityEngine; using UnityStandardAssets.ImageEffects; // ...(1) public class BloomScript : MonoBehaviour { private Bloom myBloom; // ...(2) private GameObject came; // ...(2) private float no; // ...(2) private float no2; // ...(2) void Start () { // ...(3) came = GameObject.Find( "Main Camera" ); no = 0.0f; no2 = 10.0f; } void Update () { // ...(4) myBloom = came.GetComponent<Bloom>(); // ...(5) if (no<=10.0f) // ...(6) { no += 0.05f; } if (no>=10.0f) // ...(7) { no2-= 0.05f; } if (no2<=0.0f) // ...(8) { no2 = 0.0f; } myBloom.bloomIntensity = no; // ...(9) myBloom.bloomIntensity = no2; // ...(9) } } |
...(1) ImageEffectsを扱うため、using ディレクティブでUnityStandardAssets.ImageEffectsアセンブリを参照しておきます。
...(2) Bloom型のmyBloom変数を宣言し、GameObject型の変数cameを宣言します。float型の変数noとno2を宣言します。
...(3) Start関数内では以下の処理を行います。 FindでMain Cameraにアクセスし変数cameで参照しておきます。変数noを「0」で、no2を「10」で初期化しておきます。 「0.0f」や「10.0f」の「f」はfloatを表します。
...(4) Update関数内では以下の処理を行います。
...(5) GetComponentで「Bloom」スクリプトにアクセスし、変数myBloomで参照します。
...(6) 変数noが「10」より小さいか同じであった場合は、変数noを「0.05」ずつ増加させます。
...(7) 変数noが「10」より大きいか同じであった場合は、変数no2を「0.05」ずつ減少させます。
...(8) 変数no2が「0」か「0」より小さい場合は、no2を「0」で初期化します。
...(9) 「Bloom」スクリプトのbloomIntensityに変数noの値と、no2の値を指定します。 これで、最初はAssetやキャラクターが光りはじめ、bloomIntensityの値が「10」になれば、光が減少していき、元の明るさに戻ります。
図8のように表示されます。
図8 Bloomが効いた状態でユニティちゃんが動いている
ここで、Unity 5メニューの「File→Save Scene as」から「ImageEffectsサンプル」という名前で保存しておきましょう。
実際に動かしてみたのが下記の動画です。
オブジェクトにBloom効果を持たせた動画
https://youtu.be/uPaC1gK4TQk
他に「Vortex」という画面を歪める効果や、「NoiseAndGrain」という、ノイズを入れる効果のあるスクリプトもあります。これらのスクリプトを「Main Camera」にドラッグ&ドロップして、各プロパティの値を設定します。各プロパティの解説はWeb上にはありませんので、各自がいろいろ設定して試してみてください。
おわりに
今回でUnity 5の連載は最終回です。いかがだったでしょうか?思った以上に簡単だったのではないでしょうか?C#のコード自体もあまり複雑なものは使用していませんので、理解しやすいと思います。簡単なことなら基本的にノンコーディングで実現できるのが、Unityの強みです。初心者にも入門しやすい敷居の低い3Dゲームエンジンではないでしょうか。是非トライしてみてください。
完