第10回目:Image Effectsを使って画面に変化を与える|Tech Book Zone Manatee

マナティ

入門Unity 5

第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

1. 2. についてはこれまでImportしたことがありますので、3. の「Yughues Free Metal Materials」についてのみ解説しておきます。

 

検索欄に、「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)
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ゲームエンジンではないでしょうか。是非トライしてみてください。

著者プロフィール

薬師寺国安事務所 薬師寺国安(著者)
薬師寺国安事務所代表。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット「PROJECT KySS」を結成。2003年よりフリーになり、PROJECT KySSの活動に本格的に参加。.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。現在はUnity5、UE4、ExcelVBAについて執筆活動中。
Microsoft MVP for Development Platforms‒Windows Platform Development (Oct 2014‒Sep 2015)。