２Ｄトップビューアドベンチャー 手順１４
最終更新：
orika_ex_miyako 2022年06月27日(月) 17:20:31履歴
３回に分けて、プレイヤーキャラと NPC(ノン・プレイヤー・キャラクター)との会話イベントの実装を行います。
まずは最初に今回の手順において NPC 用のゲームオブジェクトを作成します。
次の手順以降では宴アセットのインポートを行い、特定のボタンを押したら、宴アセットの会話イベントとリンクして、会話イベントが発生する制御を実装します。
実装する処理、および処理の考え方についてはかなり深い部分での学習になりますので、１回の学習で難しくても復習しながら進めていってください。
＜実装動画＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順１４ ーNPC の作成ー
新しい学習内容は、以下の通りです。
１７．NPC 用のゲームオブジェクトの作成と NonPlayerCharacter スクリプトの作成をし、設定を行う
１．設計
すべての手順を１回の実装で行う必要はありません。
処理の全体図を俯瞰的に管理して、その中に必要となる処理を１つずつ組み込んでいきます。
今回は最初に NPC 用のゲームオブジェクトを作成します。
こちらの準備をおこなった上でプレイヤーキャラが NPC の方向を向いて特定のボタンを押したら、Console ビューに会話イベントの状態を Debug 表示する制御を実装します。
Console ビューに Debug が表示できたら、処理が正常に動いていることが確認できます。
その上で、この Debug の部分にウインドウを表示する処理を実装していくようにします。
実装したい処理のゴール地点を設定し、そのゴールにたどり着くにはどのような処理を積み重ねていけばよいかを考えてみてください。
そして処理を逆算していく中で、どんな制御があればいいのか、という設計ロジックを組み立ていきます。
２．NPC 用の画像ファイルを用意する
NPC キャラとして利用したい画像ファイルを Unity へインポートしてください。
Textures フォルダ内に格納しておくと管理がしやすくなります。
フォルダ画像 Textures/NPC 内に格納
インポートした画像が１つのファイル内に複数まとまっている場合には、以前と同じように
Sprite Editor の機能を利用して、画像ファイルを分割してください。
分割する画像ファイルを選択し、インスペクターの設定のうち、Texture Type を Spriteに、Sprite Mode を Multiple に変更して、
Apply してから Sprite Editor を起動して分割します。
インスペクター画像(分割済)
この画像の分割に関しては常に同じ処理の流れになりますので、何回かやって覚えてしまいましょう。
３．ヒエラルキーに NPC 用のゲームオブジェクトを作成する
インスペクターした画像ファイルより、NPC 用のゲームオブジェクトを作成します。
画像ファイルを１つ、あるいは、同じ方向を向いている画像が複数ある場合にはそれらをまとめて選択してから、ヒエラルキーの上にドラッグアンドドロップしてください。
まとめて選択する方法は Ctrl キーを押しながら左クリックです。
どの方向を向いている画像ファイルでも構いません。今回は正面を向いている画像ファイルを３つ選択しています。
画像ファイルの選択
選択時のインスペクター画像
ヒエラルキーにドラッグアンドドロップすると、Create New Animation というウインドウが開きます。
Create New Animation ウインドウ
ファイル名を npc の名称_front.anim に変更して保存を選択してください。
例えば今回は犬のゲームオブジェクトを NPC としているので、dog_front.anim にしています。
正面以外のアニメの場合には、その方向の名称にしてください。
保存先には Animations フォルダを指定しています。その中にさらにフォルダ分けをして保存するようにすると管理しやすくなります。
このとき、anim ファイルと一緒に、Animator Controler ファイルも一緒に作成されて保存されます。
保存先フォルダ
ヒエラルキーに画像ファイルの最初のファイル名と同じ名称のゲームオブジェクトが作成されます。
(複数の画像の場合、自動的に先頭のファイル名を持つゲームオブジェクトになります)
ヒエラルキーでNPC 用のゲームオブジェクトを選択し、名前を画像に見合う名前に変更してください。
NPC_1 などでも構いません。今回は Dog にしています。
Sprite Renderer コンポーネントの Sorting Layer の設定を Collision に設定してください。
描画する際に、プレイヤーキャラよりも優先順位は低く、歩けるタイルよりは優先順位が高くなるようにするためです。
ヒエラルキー画像
NPC 用ゲームオブジェクト インスペクター画像
そのままゲームを実行してみてください。NPC がアニメーションを繰り返すはずです。(位置はどこでも構いません。)
４．NPC 用のゲームオブジェクトの設定を行う
ヒエラルキーでNPC 用のゲームオブジェクトを選択してインスペクターを確認します。
Transform コンポーネントの Position を Player と重ならない位置に変更してください。
あまり離れすぎるとデバッグが大変になりますので、適宜な位置にしてください。
Sceneビュー と Gameビュー画像
続いて、インスペクターの一番下にある Add Component ボタンを押して、Box Collider 2D コンポーネントを探して追加してください。
コライダーのサイズは (1, 1) のままでも問題ありませんが、調整していただいても構いません。
インスペクター画像
Sceneビュー画像
以上で設定は完了です。
５．NPC 用のレイヤーを作成して、設定を行う
NPC 用の新しい Layer を作成して、NPC 用のゲームオブジェクトに設定します。
ヒエラルキーの NPC 用のゲームオブジェクトを選択して、インスペクター上部にある Layer を選択します。
プルダウンメニューが開きますので、一番下にある Add Layer… を選択します。インスペクターの表示が Tags & Layers に切り替わり、Layer の編集が可能になります。
Layers を選択し、Layers 8 以降に NPC を登録してください。
Tags & Layers インスペクター画像(ここでは Layers 8 に登録しています)
再度、NPC 用のゲームオブジェクトを選択して、インスペクターの Layer を選択します。
プルダウンメニューに NPC が追加されていますので、そちらを選択します。
NPC 用ゲームオブジェクト インスペクター画像
以上でレイヤーの設定は完了です。
６．NonPlayerCharacter スクリプトを作成する
NPC 用ゲームオブジェクトを制御するためのスクリプトを作成し、NPC 用ゲームオブジェクトにアタッチします。
今後はこのスクリプトを利用して、会話イベントのウインドウを操作するようにしていきます。
NonPlayerCharacter.cs
スクリプトを作成したセーブを行います。
７．NPC 用ゲームオブジェクトに NonPlayerCharacter スクリプトをアタッチする
ヒエラルキーにある NPC 用のゲームオブジェクトに対して、NonPlayerCharacter スクリプトをドラッグアンドドロップしてアタッチしてください。
アタッチしたあとには必ず、対象となったゲームオブジェクトのインスペクターを確認して、アタッチされているかを確認してください。
インスペクター画像
NPC 用のゲームオブジェクトは完成です。
以上でこの手順は終了です。
次は 手順１５ −宴アセットの準備− です。
まずは最初に今回の手順において NPC 用のゲームオブジェクトを作成します。
次の手順以降では宴アセットのインポートを行い、特定のボタンを押したら、宴アセットの会話イベントとリンクして、会話イベントが発生する制御を実装します。
実装する処理、および処理の考え方についてはかなり深い部分での学習になりますので、１回の学習で難しくても復習しながら進めていってください。
＜実装動画＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順１４ ーNPC の作成ー
１７．NPC 用のゲームオブジェクトの作成と NonPlayerCharacter スクリプトの作成をし、設定を行う
新しい学習内容は、以下の通りです。
・
１７．NPC 用のゲームオブジェクトの作成と NonPlayerCharacter スクリプトの作成をし、設定を行う 
１．設計
すべての手順を１回の実装で行う必要はありません。
処理の全体図を俯瞰的に管理して、その中に必要となる処理を１つずつ組み込んでいきます。
今回は最初に NPC 用のゲームオブジェクトを作成します。
こちらの準備をおこなった上でプレイヤーキャラが NPC の方向を向いて特定のボタンを押したら、Console ビューに会話イベントの状態を Debug 表示する制御を実装します。
Console ビューに Debug が表示できたら、処理が正常に動いていることが確認できます。
その上で、この Debug の部分にウインドウを表示する処理を実装していくようにします。
実装したい処理のゴール地点を設定し、そのゴールにたどり着くにはどのような処理を積み重ねていけばよいかを考えてみてください。
そして処理を逆算していく中で、どんな制御があればいいのか、という設計ロジックを組み立ていきます。
２．NPC 用の画像ファイルを用意する
NPC キャラとして利用したい画像ファイルを Unity へインポートしてください。
Textures フォルダ内に格納しておくと管理がしやすくなります。
フォルダ画像 Textures/NPC 内に格納
インポートした画像が１つのファイル内に複数まとまっている場合には、以前と同じように
Sprite Editor の機能を利用して、画像ファイルを分割してください。
分割する画像ファイルを選択し、インスペクターの設定のうち、Texture Type を Spriteに、Sprite Mode を Multiple に変更して、
Apply してから Sprite Editor を起動して分割します。
インスペクター画像(分割済)
この画像の分割に関しては常に同じ処理の流れになりますので、何回かやって覚えてしまいましょう。
３．ヒエラルキーに NPC 用のゲームオブジェクトを作成する
インスペクターした画像ファイルより、NPC 用のゲームオブジェクトを作成します。
画像ファイルを１つ、あるいは、同じ方向を向いている画像が複数ある場合にはそれらをまとめて選択してから、ヒエラルキーの上にドラッグアンドドロップしてください。
まとめて選択する方法は Ctrl キーを押しながら左クリックです。
どの方向を向いている画像ファイルでも構いません。今回は正面を向いている画像ファイルを３つ選択しています。
画像ファイルの選択
選択時のインスペクター画像
ヒエラルキーにドラッグアンドドロップすると、Create New Animation というウインドウが開きます。
Create New Animation ウインドウ
ファイル名を npc の名称_front.anim に変更して保存を選択してください。
例えば今回は犬のゲームオブジェクトを NPC としているので、dog_front.anim にしています。
正面以外のアニメの場合には、その方向の名称にしてください。
保存先には Animations フォルダを指定しています。その中にさらにフォルダ分けをして保存するようにすると管理しやすくなります。
このとき、anim ファイルと一緒に、Animator Controler ファイルも一緒に作成されて保存されます。
保存先フォルダ
ヒエラルキーに画像ファイルの最初のファイル名と同じ名称のゲームオブジェクトが作成されます。
(複数の画像の場合、自動的に先頭のファイル名を持つゲームオブジェクトになります)
ヒエラルキーでNPC 用のゲームオブジェクトを選択し、名前を画像に見合う名前に変更してください。
NPC_1 などでも構いません。今回は Dog にしています。
Sprite Renderer コンポーネントの Sorting Layer の設定を Collision に設定してください。
描画する際に、プレイヤーキャラよりも優先順位は低く、歩けるタイルよりは優先順位が高くなるようにするためです。
ヒエラルキー画像
NPC 用ゲームオブジェクト インスペクター画像
そのままゲームを実行してみてください。NPC がアニメーションを繰り返すはずです。(位置はどこでも構いません。)
４．NPC 用のゲームオブジェクトの設定を行う
ヒエラルキーでNPC 用のゲームオブジェクトを選択してインスペクターを確認します。
Transform コンポーネントの Position を Player と重ならない位置に変更してください。
あまり離れすぎるとデバッグが大変になりますので、適宜な位置にしてください。
Sceneビュー と Gameビュー画像
続いて、インスペクターの一番下にある Add Component ボタンを押して、Box Collider 2D コンポーネントを探して追加してください。
コライダーのサイズは (1, 1) のままでも問題ありませんが、調整していただいても構いません。
インスペクター画像
Sceneビュー画像
以上で設定は完了です。
５．NPC 用のレイヤーを作成して、設定を行う
NPC 用の新しい Layer を作成して、NPC 用のゲームオブジェクトに設定します。
ヒエラルキーの NPC 用のゲームオブジェクトを選択して、インスペクター上部にある Layer を選択します。
プルダウンメニューが開きますので、一番下にある Add Layer… を選択します。インスペクターの表示が Tags & Layers に切り替わり、Layer の編集が可能になります。
Layers を選択し、Layers 8 以降に NPC を登録してください。
Tags & Layers インスペクター画像(ここでは Layers 8 に登録しています)
再度、NPC 用のゲームオブジェクトを選択して、インスペクターの Layer を選択します。
プルダウンメニューに NPC が追加されていますので、そちらを選択します。
NPC 用ゲームオブジェクト インスペクター画像
以上でレイヤーの設定は完了です。
６．NonPlayerCharacter スクリプトを作成する
NPC 用ゲームオブジェクトを制御するためのスクリプトを作成し、NPC 用ゲームオブジェクトにアタッチします。
今後はこのスクリプトを利用して、会話イベントのウインドウを操作するようにしていきます。
NonPlayerCharacter.cs
<= クリックすると開きます。
スクリプトを作成したセーブを行います。
７．NPC 用ゲームオブジェクトに NonPlayerCharacter スクリプトをアタッチする
ヒエラルキーにある NPC 用のゲームオブジェクトに対して、NonPlayerCharacter スクリプトをドラッグアンドドロップしてアタッチしてください。
アタッチしたあとには必ず、対象となったゲームオブジェクトのインスペクターを確認して、アタッチされているかを確認してください。
インスペクター画像
NPC 用のゲームオブジェクトは完成です。
以上でこの手順は終了です。
次は 手順１５ −宴アセットの準備− です。
コメントをかく