Unityのアドベンチャーゲーム制作アセットAdventure Creator を使って、手に取ったアイテムオブジェクトにピントを合わせるテストの後半、Part2になります。Part1はこちらです。
画面中央にアイテムが表示されて背景がピンボケする表現を試してみたいと思います。今回の参考画像は19世紀ヴィクトリア時代を舞台にした一人称視点のサイケデリックホラーゲーム”Layers of Fear “です。このゲームはUnityで制作されています。
画像:”Layers of Fear”
シーンに配置したアイテムをクリックした時、アイテムを画面中央に表示するための専用カメラをシーンに追加します。[AC Game Editor]ウィンドウ > [Scene]タブ > Scene prefabs > [SimpleCamera]ボタンをクリック。[SimpleCamera]パネルでNew prefab name: [ItemCamera]と入力して[Add new]ボタンをクリック。
この”ItemCamera”はクローズアップ表示するアイテムだけを表示するので専用のレイヤーを作成して設定します。[Hierarchy]ウィンドウ > _Cameras > _GameCameras > ItemCameraを選択。[Inspector]ウィンドウ > Layer > Add Layerを選択します。
再び[Hierarchy]ウィンドウで”ItemCamera”を選択。[Camera]コンポーネントの設定を次のように変更します。これで”Item”レイヤーに設定したオブジェクトだけがカメラに表示されます。
そしてFirst Person Playerプレハブのカメラの設定も変更します。[Camera]コンポーネント > Culling MaskからItemのチェックを外します。
ではどんな風に見えるか試してみましょう。アイテムオブジェクト(今回はHeadphonesプレハブ)を[Project]ウィンドウから[Hierarchy]ウィンドウにドラッグしてシーンに配置します。オブジェクトのLayerを[Item]に変更。Staticのチェックが入っていたので外しておきます。そして”ItemCamera”の前に移動します。
これでちゃんと表示されるようになりました。ついでにヘッドホンの角度を調整しました。
仕組みを整理しましょう。First Personカメラはシーン全体を表示してItemレイヤーのオブジェクトだけ非表示。アイテム用カメラ”ItemCamera”はItemレイヤーのオブジェクトだけを表示。ItemCameraはDepthの値が”0″なのでFirst Personカメラよりも手前に表示。ということになります。後はHotspotアクションで有効/無効を制御すれば上手くいきそうです。
Hotspotのアクション設定をするにはまずアイテム用カメラ”ItemCamera”の[Camera]コンポーネントの有効/無効を切り替えるためのスクリプトを作成します。これは以前の記事で紹介したコンポーネントの有効/無効を切り替える処理とほとんど同じです。コードは次の通りです。
using System.Collections; using System.Collections.Generic; using UnityEngine; public class ToggleCamera : MonoBehaviour { // コンポーネントを有効にする処理(SendMessegeで呼び出す関数) void TurnOn() { // Cameraコンポーネントを有効にする GetComponent<Camera>().enabled = true; } // コンポーネントを無効にする処理(SendMessegeで呼び出す関数) void TurnOff() { // Cameraコンポーネントを無効にする GetComponent<Camera>().enabled = false; } }
スクリプトができたらアイテム用カメラ”ItemCamera”に追加しておきましょう。
アイテム用カメラの有効/無効を切り替える方法としては、アイテム用カメラのプレハブを用意して、シーンに追加/削除する方法であればAdventure Creatorのアクションで制御できるみたいなのでまた別の機会にテストしてみたいと思います。
やっと準備が終わりました。それではアクションの設定に入ります。流れは次の通りになります。
まずはアイテム用カメラ”ItemCamera”の[Camera]コンポーネントを有効にするアクションを追加しましょう。[Hierarchy]ウィンドウ > _Interactions > Headphones: Useの右側にあるActionListアイコンをクリック。またはメニュー:Adventure Creator > Editors > ActionList Editorを選択。[ActionList Editor]ウィンドウが開いたら最初のアクションノードを次の通りに変更します。
次に右クリックのチェックアクションを追加します。最初のアクションノードの接続端子をドラッグしてノードを追加、次のように設定します。
Button name: フィールドで指定する名前はメニュー:Project Settings > Imputを選択して[Inspector]ウィンドウでマウス右ボタン”mouse 1″が割り当てられている名前を確認します。
次に右クリックで実行するアクション、アイテム用カメラ”ItemCamera”の[Camera]コンポーネントを無効にするアクションを追加しましょう。右クリックチェックのアクションノードで”If condition is met: “の接続端子をドラッグして新しいアクションを追加。次のように設定します。
次に、アイテムオブジェクトが表示されている時に背景がぼやけるように、PlayerプレハブのカメラにImage Effectを設定します。以前の記事で紹介した手順でAsset Storeから”Legacy Image Effects “をインポートしておきます。
そして[Project]ウィンドウでPlayerプレハブのカメラを選択します。[Inspector]ウィンドウ > [Add Component]ボタン > Image Effects > Blur > Blur (Optimized)を選択します。
デフォルトの設定のままでゲームを再生してみましょう。このようになります。
画面はピンボケですが、このまま操作できるのでヘッドホンをクリックするとクローズアップ表示されます。画面としてはこれが出来上がりの状態になります。
Image Effectを切り替えるためのスクリプトを作成します。先のCameraの切り替えスクリプトとほとんど同じです。コードは次の通りです。
using System.Collections; using System.Collections.Generic; using UnityEngine; // StandardAssetsのスクリプトは名前空間が定義されているので使用を宣言する using UnityStandardAssets.ImageEffects; public class ToggleBlur : MonoBehaviour { // コンポーネントを有効にする処理(Send messageで呼び出す関数) void TurnOn() { // BlurOptimizedエフェクトコンポーネントを有効にする GetComponent<BlurOptimized>().enabled = true; } // コンポーネントを無効にする処理(Send messageで呼び出す関数) void TurnOff() { // BlurOptimizedエフェクトコンポーネントを無効にする GetComponent<BlurOptimized>().enabled = false; } }[Project]ウィンドウでPlayerプレハブのカメラを選択。作成したスクリプトを[Inspector]ウィンドウにドラッグして追加します。[Blur Optimized (Script)]コンポーネントはチェックを外して無効にしておきます。
やっと終わりが近づいてきました。アイテム”Headphones”のHotspotアクションを選択して編集します。[Hierarchy]ウィンドウ > _Interactions > Headphones: Useを選択。名前の右側にあるアイコンをクリックして[ActionList Editor]ウィンドウを開きます。まずウィンドウの背景部分で右クリック:Add New Action を選択。Image Effectを有効にする作成したアクションを次のように設定します。
Object to affect: フィールドにはPlayerプレハブのカメラをドラッグして割り当てます。割り当てると自動的にIDが追加されて表示されます。
Image Effectを無効にするアクションも同じように作成しておきます。
作成したアクションを次のようにつなぎ変えます。拡大画像
アクションの流れはこのようになっています。
ということで、ここまでの内容をWebGLでビルドしてみました。Wキー前進、Aキー左移動、Sキー後退、Dキー右移動。右クリックで視点移動の切り替えができます。
ダウンロードサイズ:約32MB
アイテムをクローズアップ表示したものの、マウスドラッグで回転できないので3Dで表示する意味があまりない状態でちょっと残念ですが今回はここまで。オブジェクトをマウスドラッグで回転する仕組みは別の機会にテストしてみたいと思います。
カメラオブジェトを2つ使用してオブジェクトを描画する方法はこちらのページを参考にしました。
【Unity】特定のモデルにのみImageEffectがかからないようにする – テラシュールブログ