Unity First Person Exploration Kit:基本機能で簡単な脱出ゲームメイキング【アセットアドカレ2018】

今回は一人称視点の探索ゲームが制作できるアセット First Person Exploration Kit の基本機能を確認して簡単な脱出ゲームを作ってみたいと思います。

今回の記事は
Unity アセット真夏のアドベントカレンダー 2018 Summer!
に参加しています。

First Person Exploration Kit とは?

一人称視点のアドベンチャーゲーム開発キットで、アイテムを手にとって調べたり、様々な仕掛けが用意されています。

簡単な紹介はこちらの記事「Unity:アセットストアの2018年5月マッドネスセールで買ったアセットのまとめ」で紹介していますのでどうぞ!

YouTubeの動画でデモシーンの一通りのウォークスルーを見る事ができます。

First Person Exploration Kit の機能:基本

オンラインのドキュメント を確認してどんなことができるか確認してみましょう。
オンラインドキュメントの内容を抜粋して翻訳してみるとこのようになっています。

ギズモアイコンのカスタマイズ

First Person Exploration Kit フォルダ内には、「Gizmos」というサブフォルダがあります。このフォルダには、キットに付属のオブジェクトタイプの一部にギズモを描画する際に使用されるアイコンが含まれています。
原文:First Person Exploration Kit: Gizmo Icons

操作できるオブジェクトの作成

ピックアップオブジェクトは、プレーヤーが持ち上げ、持ち歩き、調査、落とす、戻すことができるオブジェクトです。
原文:First Person Exploration Kit: Creating a Pickup

[Project]ウィンドウ > Assets > FirstPersonExplorationKit > Resources > Pickups フォルダにあるプレハブオブジェクトを並べてみました。13種類のピックアップオブジェクトが用意されています。

ジャーナルの作成

ジャーナルは、プレイヤーが読むための一連のページを表示するインタラクティブオブジェクトです。例えば、ある書籍は、そのページの一部を画面上に表示して、プレイヤーが裏返すことができます。
原文:First Person Exploration Kit: Creating a Journal

オーディオダイアリーの作成

オーディオダイアリーは、オーディオファイルを再生し、オプションで画面上にタイトルを表示する、インタラクティブオブジェクトです。彼らはまた、インベントリに収集することができ、後で再び再生することができます。
原文:First Person Exploration Kit: Creating an Audio Diary

添付ノートの作成

添付ノートは、パッシブなやりとりによって他のタイプを補うために使用される特別なタイプのインタラクティブオブジェクトです。たとえば、ジャーナルや彫像、またはオブジェクトに関する背景や背景を提供する他のオブジェクトにメモを付けることができます。また、プレーヤーが見たオブジェクトのリマインダーとして機能することもできます。
翻訳原文:First Person Exploration Kit: Creating an Attached Note

パッシブオーディオダイアリーの作成

パッシブオーディオダイアリーは、添付ノートに似ていますが、オーディオと同じです。別のタイプのインタラクティブオブジェクトに解説またはオーディオコンテキストを追加することができます。たとえば、パッシブオーディオダイアリーをライトスイッチまたはジャーナルに追加することができます。
原文:First Person Exploration Kit: Creating a Passive Audio Diary

静的インタラクションの作成

静的インタラクションは、オブジェクトに説明を追加する手段を提供します。静的オブジェクトは、レティクルの下にインタラクションテキストを表示しますが、アクティブ化またはインタラクションはできません。これは物理的にラベルを付けなくても、何であるかをプレーヤに知らせたい場合に便利です。たとえば、アセットに含まれている付属の demoPainting プレハブを参照してください。
原文:Creating a Static Interaction

インベントリアイテムの作成

FPE InteractableInventory Item Script コンポーネントは、プレーヤーがさまざまな方法で収集して使用できるインベントリアイテムを作成する手段を提供します。
原文:Inventory Items and Inventory Consumers Overview

[Project]ウィンドウ > Assets > FirstPersonExplorationKit > Resources > InventoryItems フォルダにあるプレハブオブジェクトを並べてみました。6種類のピックアップオブジェクトが用意されています。

First Person Exploration Kit の機能:高度なインタラクション

基本的な機能とコンポーネントを組み合わせて次のような機能を作成することもできます。

基本的なトグルの作成(ライトスイッチ)

Togglesは、TOGGLE Event Fire Typeを使用する特別な種類のActivateオブジェクトです。このパッケージで利用可能なさまざまなアクティベーションタイプの詳細については、一般的なアクティベーションタイプのドキュメントを参照してください。
原文:Creating a Simple Toggle (Light Switch)

シンプルなドアの作成

Simple Door オブジェクトタイプは、単純なスライドドアを作成する方法を提供します。Simple Door クラスは、ダブルドア、スイングドア、ガレージドアなど、他のタイプのドアにも拡張できます。FPE SimpleDoor スクリプトを使用するアセットには、2つのプレハブが含まれています。それらは demoSimpleDoorUnlocked と demoSimpleDoorLockedで、DemoPrefabs フォルダにあります。
原文:Creating a Simple Door

デモプレハブとして [Project]ウィンドウ > Assets > FirstPersonExplorationKit > Prefabs > DemoPrefabs に普通のドアと鍵の掛かったドアの2種類、 demoSimpleDoorLocked とdemoSimpleDoorUnlocked が用意されています。

基本的なプレイヤードックの作成(アームチェア)

ドックのやり取りは、プレーヤーがコンピュータ端末、椅子、またはアーケード機などの場所に「ドッキング」することを可能にします。ロックされた位置に加えて、プレイヤーは視界も制限されます。たとえば、コンピュータ端末を作成する場合、プレーヤはドッキング中に移動することができず、コンピュータ画面およびキーボードのみを見ることができるように制限されます。
原文:原文:Creating a Basic Player Dock

イベントトリガーの作成

イベントトリガーは、プレイヤーがトリガーボリュームに入ったときにスクリプトのシーケンスまたはアクションを作成するために使用されます。イベントは、イベントを使用してインスペクタで定義されるため、好きなだけ単純または複雑にすることができます。その例には、アセットとデモに含まれている demoTriggers プレハブを参照してください。
原文:Creating a Basic Event Trigger

別シーンへの通路の作成

別シーンへの通路は、プレイヤーがシーンを変更する方法を作成するために使用されます。これはプレーヤーの出口を検出するためのBox Collider(Trigger)と、入り口として動作する子トランスフォームで構成されています。プレーヤーが玄関を使用して出ると、指定されたシーンがロードされ、プレーヤーはロードされたシーンの玄関の入り口に置かれます。
原文:oorways and Levels Overview

カットシーンの作成

CutScenesは、FPE Interaction Manager ScriptのBeginCutscene()およびEnd Cutscene()関数の呼び出しを通じて使用できます。
原文:Cutscenes Overview

シーンのセットアップ

オンラインドキュメントの Getting Started に書かれている下記の手順を参考にして新規シーンを作成します。

  1. 新しいUnityシーンを作成する
  2. メインカメラを削除する
  3. プレーヤが歩くための平面や立方体などのジオメトリを追加する
  4. FPECoreプレファブのインスタンスを追加する
  5. シーンを実行する
  6. インタラクションを追加するには demoSoup や demoAppleなどの提供されているデモプレハブの一部をシーンに配置する
  7. シーンをもう一度実行してオブジェクトを操作する

ビルドセッティング

作業を始める前に WebGLでビルドするために Build Settings の設定を変更します。

部屋の作成

今回のシーンは Unity公式アセットのモデリングツール ProBuilder を使用して作成。
ProBuilder

全体が10m四方のサイズで南東にドアのある小部屋のある間取りを作りました。

ライトセッティング

今回は室内シーンになるのでSkybox Material は外し、Environment Lighting の影響は無しにしています。
ライトは Area Light を複数配置して部屋全体を照らし、Realtime の Directional Light を1つ配置しました。

家具の配置

First Person Exploration Kit に含まれている shelf を配置します。
[Project]ウィンドウ > FirstPersonExplorationKit > Models > shelf を選択。このように配置しました。

オブジェクトは 固定なので Static にチェックを入れておきます。

プレファブ FPECore をシーンに追加

[Hierarchy]ウィンドウ > Main Camera を選択して削除。シーンにプレファブ FPECore を追加します。
[Project]ウィンドウ > FirstPersonExplorationKit > Prefabs > FPECore を選択して[Hierarchy]ウィンドウにドラッグ&ドロップでシーンに追加。
プレファブ FPECore を選択して[Inspector]ウィンドウでコンポーネントを確認するとこのように各種ゲームシステムのプレハブが割り当てられています。

動作確認

一旦ここで動作確認をしてみます。プレイヤー視点で見るとこんな感じです。

プレイヤースタート位置の設定

ゲームを再生すると プレイヤーは シーンの原点に配置されるのでこれを調整しましょう。
[Hierarchy]ウィンドウ > Create Empty を選択。名前を PlayerStart に変更。
[Inspector]ウィンドウ > [Add Component] をクリック。検索ボックスに FPE を入力して 一覧から FPE Player Start Position を選択。

[Scene]ビューに緑色の球体が表示されます。このオブジェクトの位置がゲームスタート時のプレイヤー位置になります。今回は南西のかべ付近をスタート位置にしました。

オブジェクトの設定

オブジェクトを配置するにあたり、あらかじめ変更する箇所があるので確認しましょう。

ピックアップオブジェクトのハイライト表示

ピックアップオブジェクトは コンポーネント FPE Interactable PickupScript (Script) の設定でカーソル(画面中央のレティクル)が重なるとハイライト表示されますが、今回はこれを無効にしておきます。

さらにインタラクションテキストのフィールドも空白にしておきます。

小さいピックアップオブジェクトの床抜け防止

カードキーや鍵といった小さいピックアップオブジェクトは床のメッシュコライダーをすり抜けてしまうので部屋の床に Box Collider を追加しました。

ライトプローブを有効にする

用意されているピックアップオブジェクトのプレハブはほとんどライトプローブが無効になっているので、今回使用するシーンに合わせて有効にします。

オブジェクトの配置

シーンにピックアップオブジェクトと収集オブジェクトを配置します。

ピックアップオブジェクトの配置

部屋のシェルフにオブジェクトを配置。いくつかのオブジェクトは床に置いてみました。

鍵オブジェクトの作成と配置

部屋を脱出するためのドアを開ける鍵オブジェクトを配置します。
これはゲームを開始する度にランダムな位置に配置(隠す)するために、こちらの記事 Unity:リプレイの度にオブジェクトをランダムな位置に発生させる で紹介している方法を使用しました。

まず、[Hierarchy]ウィンドウ > [Create] > Create Empty を選択。名前をSpawner に変更。
Spawner にこの記事で紹介したスクリプト RandomSpawner を作成して割り当てます。

スクリプトの中でオブジェクトを生成する部分を下記のとおり一部を書き換え、生成座標をオフセットしています。

今回のシーンでは段ボール箱のプレハブ demoCardboardBox のインスタンスに ReSporn タグを設定しました。ゲームが開始されるとすべてのインスタンス demoCardboardBox を配列に格納。1つのインスタンスがランダムに選択されて鍵オブジェクトの生成場所になります。

スクリプトの編集が完了したら ReSporn フィールド に プレハブ Simple Key を割り当てます。これは[Project]ウィンドウ > Assets > FirstPersonExplorationKit > Resources > InventoryItems > demoSimpleKey を複製して改造しました。

ドアオブジェクト

デモシーンで使用されているプレハブを改造して鍵がかかったドアを制作します。
[Project]ウィンドウ > Assets > FirstPersonExplorationKit > Prefabs > DemoPrefabs > demoSimpleDoorLocked を改造して使用します。

プレハブ構造の確認

まずはプレハブの構造を確認しておきましょう。
demoSimpleDoorLocked –ドアの開閉制御 Scriptコンポーネント
┣ Jamb – ドア枠のメッシュオブジェクト
┣ JambLong – ドア枠のメッシュオブジェクト
┣ playerBlocker – ドアのコライダーオブジェクト
┗ SlidingPart – 戸板のメッシュオブジェクト
 ┣ DoorHandle – 鍵解除の制御 Scriptコンポーネント
 ┣ HandleMesh – ドアハンドルのメッシュオブジェクト
 ┣ DoorwayInteractionBlocker – ドアハンドルのクリックを防ぐコライダー
 ┗ Quad – 戸板に表示されている鍵アイコングラフィック

メッシュオブジェクトの置き換え

まず、ドア枠のメッシュオブジェクトは不要なので削除します。次に戸板とドアハンドルを Pro Builder で作成したメッシュオブジェクトに置き換えます。ドアのサイズは高さ2.5m、幅1.5mに設定しました。

コンポーネントの編集

SlidingPart に含まれているコライダー DoorwayInteractionBlocker ですが、開いたドアをクリックしてもドアが閉まらないようにするため、インタラクションテキストの表示をコントロールするためのものだと思います。今回は無くても問題なさそうなので削除することにします。
FPESimpleDoor (Script)コンポーネント> Player Interaction Blocker フィールドをクリアします。

編集後の階層はこのようなっています。オブジェクト名は Room Door 2.5m に変更しました。

demoSimpleDoorLocked – ドアの開閉制御 Scriptコンポーネント
┣ playerBlocker – ドアのコライダーオブジェクト
┗ SlidingPart – 戸板のメッシュオブジェクト
 ┣ DoorHandle – 鍵解除の制御 Scriptコンポーネント
 ┗ HandleMesh – ドアハンドルのメッシュオブジェクト

実はドアの鍵を解除してドアを開けた後、鍵を捨てると再びドアがロックされて閉められなくなります。ゲームの進行上は問題ないと思いますが、ちょっと間抜けな感じなので改造した方が良さそうです。

表示テキストの日本語化

FPESimpleDoor (Script)コンポーネントではインタラクションテキストを編集できるので日本語に変更しておきましょう。

ドアハンドルのオブジェクト DoorHandle の FPEInteractableActivateScript (Script)コンポーネントにもインタラクションテキストがあるのでこちらも日本語に変更します。

プレハブとして登録してシーンに配置

編集が完了したら[Project]ウィンドウにドラッグ&ドロップでプレハブに変換。シーンにゲームシーンに配置します。
ゲームを再生してドアハンドルにカーソルを合わせるととこのようにメッセージが表示されます。

シーンに配置している Directional Light について、[Inspector]ウィンドウ > Light > Mode をMixed 設定した場合、エディタービュー表示では正しく表示されますが、WebGLでビルドすると、ドアのライトマップがおかしなことになりましたが Realtime モードにすると正しくなりました。

少し調べたところ、ProBuilder で作成したオブジェクトのUVマップが上書きされることに原因があるようですが、詳しくは改めて調査したいと思います。

メインメニューシーンについて

First Person Exploration Kit のアセットをインポートした際、Build Settings には複数のデモシーンが登録されていますが、これらを削除します。ただし demoMainMenu を残しておく、または複製して登録する必要があります。demoMainMenu シーンが無いとゲームを再生してもキャラクターが操作できませんでした。セーブシステムが関係しているのだと思います。

今回は [Project]ウィンドウ > Assets > FirstPersonExplorationKit > Scenes > demoMainMenu を複製してメニューシーンとして Build Settings に登録しました。

UIの解像度変更と日本語化

メインメニューの解像度変更、メニューテキストやインタラクションテキストを日本語に変更。フォントも日本語フォントに変更しました。

カスタマイズ

ここからは用意されているプレハブやコンポーネントを少しずつカスタマイズしてみます。

メニュー呼び出し割り当てキーの変更

標準ではEsc キーがオプションメニュー呼び出しのキー割り当てとなっていますが、WebGLでビルドしたゲームをWebページに埋め込むにはカーソルロックの解除と重複するためTab キーに変更します。

メニュー:Edit > Project Settings > Imput を選択。Menu > Positive Button フィールド内容を tab に変更します。

プレイヤーの移動速度とカメラボブの調整

デフォルトのプレイヤーキャラクターは狭い部屋では移動速度が速く感じるので、速度を遅くしました。さらにカメラボブ(上下の揺れ)の値とグラフを調整しました。

キャラクターのプレハブは[Project]ウィンドウ >Assets > FirstPersonExplorationKit > Prefabs > FPEPlayerController を選択。 [Inspector]ウィンドウ > FPE First Person Controller (Script) のプロパティを編集します。

部屋にマテリアルを設定

最後に、部屋のマテリアルが Pro Builder のデフォルトのままだと味気ないのでマテリアルを設定しました。テクスチャはUnityのアセットストアの無料テクスチャYughues Free Architectural Materials を使用しています。

脱出ゲーム「倉庫整理からの脱出」

ここまでの内容をWebGLでビルドしてみました。画像クリックで再生されます。

ゲーム紹介

  • 倉庫整理を頼まれた。鍵の掛かったドアがあり、倉庫のどこかに鍵があるらしいが…
  • サウンド出力:あり
  • ファイルサイズ:約30MB

まとめ

基本的なアイテム操作とセーブ機能が用意されているので、一人称視点の脱出ゲームを制作するにはちょうど良いアセットだと思います。

色々とカスタマイズができるので、引き続きゲーム制作や改造手順について記事で紹介したいと思います。