【Unity】ゲームのちょっとした会話場面にFungusを使ってみる

f:id:coffee_ryo:20180711223526g:plain

アクションゲームでボスキャラとの戦闘前に会話を挟みたい

  • ゲームの操作を一時中断させることで休憩してもらい疲れないようにする
  • 強敵がくるという危機感や期待感を持ってもらう

という狙いで、会話シーンを作りたい。

会話シーンを作る手段としては考えたのは、

  • 自前スクリプト組む

  • ノベルゲームを作るためのAssetを使用する

Twitterで見かけたFungusというAssetのが良さそうだったのでこちらを使って見る。 ノベルゲーム開発で大活躍しそう。使い方備忘のため書き残しておく。 このAsset、無料です。

まずは会話ダイアログを出してみる

使っているUnityのバージョン

2018.1.0f2 Personal

AssetをInportする

assetstore.unity.com

Flowchartコンポーネントがアタッチされたオブジェクトを作成

メニューのToolsにFungusの項目が追加されているので、こちらから作成。

f:id:coffee_ryo:20180711194539p:plain

ヒエラルキーにきのこのマークが付いているオブジェクトが作られます。

f:id:coffee_ryo:20180711194728p:plain

FlowchartのWindowを確認

きのこマークが付いているオブジェクトのインスペクターをみて、「Open Flowchart Window」をクリック。

f:id:coffee_ryo:20180711195158p:plain

こんな画面が出ることを確認。あとで使います。

f:id:coffee_ryo:20180711195414p:plain

SayDialogコンポーネントがアタッチされたオブジェクトを生成

メニューのTools>Fungusから、SayDialogをCreate。

f:id:coffee_ryo:20180711195454p:plain

Gameビューを見てみると、会話ダイアログが作られます。

f:id:coffee_ryo:20180711195556p:plain

会話テキストを打ち込む

FlowchartのWindowで、「New Block」をクリックして選択。選択すると枠が緑色になる。

f:id:coffee_ryo:20180711211339p:plain

インスペクターの「+」マークを押して、Narrative>Sayをクリック。

f:id:coffee_ryo:20180711211730p:plain

「Commands」という項目に「Say」の項目が追加されます。

f:id:coffee_ryo:20180711212236p:plain

「Say」の部分をクリックして、「Story Text」に会話内容を入力。

f:id:coffee_ryo:20180711212619p:plain

ここまでで、▶︎実行をすると会話ダイアログに会話内容が表示されます。

f:id:coffee_ryo:20180711212857p:plain

キャラクターを表示させて会話させる

Characterコンポーネントがアタッチされたオブジェクトを生成

メニューのTools>Fungusから、Characterを2つCreate。
作成されたオブジェクトのコンポーネント上で、

  • キャラクター名→Name Text
  • 関連する会話ダイアログ→Set Say Dialog
  • キャラクターの画像→Portraits

を設定。

f:id:coffee_ryo:20180711215520p:plain

Stageコンポーネントがアタッチされたオブジェクトを生成

メニューのTools>Fungusから、Stageを2つCreate。Stageコンポーネントでは、キャラクターのデフォルトの位置を設定できるようです。1体のCharacterに対して1つのStageをつくるのがいいのかな?(あんまりわかってない)

f:id:coffee_ryo:20180711220106p:plain

Stageコンポーネントが取り付けられてある子オブジェクトに、デフォルトの位置と関連しているオブジェクトがあります。

f:id:coffee_ryo:20180711220131p:plain

今回はキャラクターが左右から入ってくるようにしたいと思ったので、「Defalut Position」に「Offscreen ●●」のオブジェクトを指定。

Flowchart Windowでキャラクターを出して会話させる

FlowchartのWindowで、「New Block」 をクリック、Narrative>Portraitを作成して、

  • Portrait Stage→先ほど作成したStageを指定
  • Display→Showのまま
  • Character→作成したCharacterを指定
  • Portrait→Characterコンポーネントの「Portraits」で指定した画像を選択
  • Move→チェックボックスをつける
  • From Position, To Position→キャラクターの移動開始位置、終了位置を指定
  • Wait Until Finished→アニメーションが完了したら次のCommandを行うか、すぐさま次のCommandを行うかのフラグ?

f:id:coffee_ryo:20180711221604p:plain

この状態で▶︎実行すると、左右からキャラクターが画面中央に移動しながら表示されます。

あとはNarrative>Sayしてどのキャラクターに会話させるか指定させテキストを打ち込み、 Narrative>Portraitして会話終了タイミングでキャラクターを左右にフェードアウトさせることでそれっぽくなります。 できたのがこちら。

f:id:coffee_ryo:20180711223526g:plain

会話処理を発火させる

FlowchartのWindowで、発火させる条件が指定できます。

f:id:coffee_ryo:20180711222837p:plain

または、スクリプトからFlowchartコンポーネントのExecuteBlockメソッドを使えば任意の場所で発火させることができました。

会話終了タイミングで処理を呼び出す

インスペクターの「+」で、Scripting>Invoke Eventでコマンド追加すれば、ButtonコンポーネントのOnClickのように実行するメソッドを指定できる。 これ以外でもできそうです。

f:id:coffee_ryo:20180711223437p:plain

その他

繰り返しますが無料です。すごい。