Unityのアドベンチャーゲーム制作アセットAdventure Creator を使って、手に取ったアイテムオブジェクトにピントを合わせるテストの後半、Part2になります。Part1はこちらです。
クリックでオブジェクトをクローズアップして背景をぼかす Part2
画面中央にアイテムが表示されて背景がピンボケする表現を試してみたいと思います。今回の参考画像は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”レイヤーに設定したオブジェクトだけがカメラに表示されます。
- ClearFlags [Don’t Clear]
- Culling Mask [Item]
- Field ob View [45]
- Clipping Planes [0.1]
- Depth [0]
Playerプレハブのカメラ設定
そしてFirst Person Playerプレハブのカメラの設定も変更します。[Camera]コンポーネント > Culling MaskからItemのチェックを外します。
ではどんな風に見えるか試してみましょう。アイテムオブジェクト（今回はHeadphonesプレハブ）を[Project]ウィンドウから[Hierarchy]ウィンドウにドラッグしてシーンに配置します。オブジェクトのLayerを[Item]に変更。Staticのチェックが入っていたので外しておきます。そして”ItemCamera”の前に移動します。
アイテム用カメラとレイヤーの追加
[Game]ビューでみるとアイテム用カメラで表示しているヘッドホンが真っ黒です。これはシーンで使用しているライトをすべてベイクしたせいですね。アイテム用のライトを追加しておきましょう。シーンにDirectional Lightを追加して次のように設定しました。アイテム用カメラと同じようにCulling Mask でItemを選択します。
これでちゃんと表示されるようになりました。ついでにヘッドホンの角度を調整しました。
仕組みを整理しましょう。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のアクションで制御できるみたいなのでまた別の機会にテストしてみたいと思います。
アイテムのHotspotアクションの設定
やっと準備が終わりました。それではアクションの設定に入ります。流れは次の通りになります。
- アイテムをクリック
- アイテム用カメラ”ItemCamera”の[Camera]コンポーネントを有効にする
- 右クリック
- アイテム用カメラ”ItemCamera”の[Camera]コンポーネントを無効にする
まずはアイテム用カメラ”ItemCamera”の[Camera]コンポーネントを有効にするアクションを追加しましょう。[Hierarchy]ウィンドウ > _Interactions > Headphones: Useの右側にあるActionListアイコンをクリック。またはメニュー：Adventure Creator > Editors > ActionList Editorを選択。[ActionList Editor]ウィンドウが開いたら最初のアクションノードを次の通りに変更します。
- Action type: [Object] [Send messsage]
- Object to affect: [ItemCamera]
- Messsage to send: [Turn On]
次に右クリックのチェックアクションを追加します。最初のアクションノードの接続端子をドラッグしてノードを追加、次のように設定します。
- Action type: [Imput] [Check]
- Check type: [Button]
- Button name: [Fire2]
- If condition is not met: [Skip]
- Action to skip to: [1: Check]
Button name: フィールドで指定する名前はメニュー：Project Settings > Imputを選択して[Inspector]ウィンドウでマウス右ボタン”mouse 1″が割り当てられている名前を確認します。
次に右クリックで実行するアクション、アイテム用カメラ”ItemCamera”の[Camera]コンポーネントを無効にするアクションを追加しましょう。右クリックチェックのアクションノードで”If condition is met: “の接続端子をドラッグして新しいアクションを追加。次のように設定します。
- Action type: [Object] [Send messsage]
- Object to affect: [ItemCamera]
- Messsage to send: [Turn Off]
PlayerプレハブのカメラにImage Effectを設定
次に、アイテムオブジェクトが表示されている時に背景がぼやけるように、PlayerプレハブのカメラにImage Effectを設定します。以前の記事で紹介した手順でAsset Storeから”Legacy Image Effects “をインポートしておきます。
そして[Project]ウィンドウでPlayerプレハブのカメラを選択します。[Inspector]ウィンドウ > [Add Component]ボタン > Image Effects > Blur > Blur (Optimized)を選択します。
デフォルトの設定のままでゲームを再生してみましょう。このようになります。
画面はピンボケですが、このまま操作できるのでヘッドホンをクリックするとクローズアップ表示されます。画面としてはこれが出来上がりの状態になります。
PlayerプレハブのカメラにImage Effectを設定
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)]コンポーネントはチェックを外して無効にしておきます。
アイテムのHotspotアクションを編集してImage Effectの切り替えを追加する
やっと終わりが近づいてきました。アイテム”Headphones”のHotspotアクションを選択して編集します。[Hierarchy]ウィンドウ > _Interactions > Headphones: Useを選択。名前の右側にあるアイコンをクリックして[ActionList Editor]ウィンドウを開きます。まずウィンドウの背景部分で右クリック：Add New Action を選択。Image Effectを有効にする作成したアクションを次のように設定します。
- Action type: [Object] [Send messsage]
- Object to affect: [Player Camera]
- Messsage to Send: [Turn On]
- If condition is not met: [Skip]
- Action to skip to: [1: Check]
Object to affect: フィールドにはPlayerプレハブのカメラをドラッグして割り当てます。割り当てると自動的にIDが追加されて表示されます。
Image Effectを無効にするアクションも同じように作成しておきます。
- Action type: [Object] [Send messsage]
- Object to affect: [Player Camera]
- Messsage to Send: [Turn Off]
- If condition is not met: [Skip]
- Action to skip to: [1: Check]
作成したアクションを次のようにつなぎ変えます。拡大画像
アクションの流れはこのようになっています。
- アイテム用カメラ”ItemCamera”の[Camera]コンポーネントを有効にする
- Playerプレハブのカメラの[BlurOptimized]コンポーネントを有効にする
- マウス右クリックをチェックする
- マウス右クリックをチェックする
- マウス右クリックがあれば
- →アイテム用カメラ”ItemCamera”の[Camera]コンポーネントを無効にする
- →Playerプレハブのカメラの[BlurOptimized]コンポーネントを無効にする
- マウス右クリックがなければ
- →マウス右クリックのチェックに戻る
ということで、ここまでの内容をWebGLでビルドしてみました。Wキー前進、Aキー左移動、Sキー後退、Dキー右移動。右クリックで視点移動の切り替えができます。
ダウンロードサイズ：約32MB
アイテムをクローズアップ表示したものの、マウスドラッグで回転できないので3Dで表示する意味があまりない状態でちょっと残念ですが今回はここまで。オブジェクトをマウスドラッグで回転する仕組みは別の機会にテストしてみたいと思います。
参考Webサイト
カメラオブジェトを2つ使用してオブジェクトを描画する方法はこちらのページを参考にしました。
【Unity】特定のモデルにのみImageEffectがかからないようにする – テラシュールブログ
