【Unity】Fungusでゲーム制作(1) 会話シーンを作る

# はじめに - Fungusとは何か
FungusはUnityのアセットの1つです。
いわゆるビジュアルスクリプティングを行うものの一種ですが、セリフやキャラクターの立ち絵の表示、選択肢による分岐といったコマンドが豊富に用意されており、**ノベルゲームや脱出ゲーム等であればプログラミングなしで作れる**のが特徴です。
それら以外のジャンルでも、例えば「RPGの会話シーンだけFungusで作る」といった使い方もできますし、やろうと思えばゲーム全体をFungusで組むことも可能です（実際アセットに含まれるサンプルゲームには簡単なシューティングなどもあります）。
Fungusは無料で使用でき、オープンソース化もされています。公式サイトは[こちら](https://fungusgames.com)です。

本ページではこのFungusの使い方について説明していきたいと思います。実際に手を動かしながら読み進めていくことを考えて書いております。画像や音楽といった素材については適宜ご用意下さい。
想定する読者層として、ゲームを作ってみたいけれどプログラミングやUnityにまだあまり親しんでいないという方を考えておりますので、各種の用語については適宜解説を入れていきます。ただし、Unityの基本的な操作方法（画面構成、素材の入れ方、GameObjectの配置、Asset Storeからアセットをインストールする方法）については習得していることを前提とさせていただきます。

**追記: 2021/10/19**
FungusはUnityのAsset Storeからダウンロードすることはできなくなりましたが、[GitHubのページ](https://github.com/snozbot/fungus)から引き続き入手できるようです。
画面右側の「Release」をクリックすると最新版のダウンロードページに行けるので、「Fungus.Compatibility_v3.13.7.unitypackage」（バージョンアップで名前が変わることがあります）をダウンロードしてください。
Unityを起動し、メニューバーの**「Assets」**から**「Import Package」**、**「Custom Package」**と選択し、ダウンロードしたファイルを選択すればFungusの使用準備が整います。

# 最初にすること
まずはノベルゲーム的な会話シーンを簡単に作るところから始めてみましょう。文章の表示、キャラクターの表示、背景の表示について取り扱います。
最初に**フローチャート/Flowchart**を作成します。Fungusではこのフローチャートがセリフの表示などの処理や、ゲーム中で使う変数を保持するようになっています。
FungusをインストールするとUnityのメニューバーに**「Tools」**というのが追加されます。その中の**「Fungus」**から諸々の追加や設定が行えるようになっています**（以後「メニュー」とあったら特に注記がない場合この中のものを指すものとします）**。
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/479014a5-dc11-a5d0-e4c0-d53ac4644dc5.png)
新しいシーンを用意してから、メニューの**「Create」→「Flowchart」**を選択してください。Hierarchyビューにきのこマークがついた「Flowchart」というGameObjectが追加されます。この中にフローチャートがあります。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/c80d2e8d-e1da-9ff1-c0f6-32ff1853e54c.png)
ついでメニューの**「Flowchart Window」**を選択するとFlowchartビューが開きます。先程追加されたフローチャートのGameObjectを選択するとこの中にフローチャートの全体図が現れます（下図右下）。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/a7416326-9416-cf3e-9ed7-8653fc896202.png)
Flowchartビューはドラッグして見やすい位置に移動させるとよいでしょう。本ページではInspectorビューの下にくっつけてあります。
# 文章を表示する
フローチャートは**Block/ブロック**というものの組み合わせで構成されており、各ブロックの中にセリフの表示などの**Command/コマンド**を並べて実行することになります。
先ほど表示したフローチャートの図の中に**New Blockと書かれた四角形**がありますが、これがブロックです。クリックしてみるとInspectorビューにブロックの情報が出てきます。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/f81d3597-ca76-1bb1-0ba4-b56f159b81a9.png)
Inspectorビューの上半分に**Block Name**という欄があり、ここでブロックの名前を変えられます。
一方下半分にある＋ボタンを押すとコマンドの一覧が出てきます。この中から**「Narrative/Say」**というのを選ぶのですが、コマンドの数が多くて大変だと思います。一覧にくっついているテキスト欄に目的のコマンド名を打ち込めば検索して出してくれます（あるいは＋ボタンを2回クリックするとプルダウンメニュー形式でも選べるようです）。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/a1bd7c56-70c1-fa86-6eb8-ab0e691ec4de.png)
Inspectorビューの上半分に戻り、**Commandsの欄**を見てみるとSayコマンドが追加されています（見えない場合はビューを下にスクロールしてみましょう）。このコマンドをクリックすると、今度はビューの下半分にその詳細が表示されます。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/d857506b-2f72-b862-cfaf-7159a74dd7b9.png)
このSayコマンドは文章やセリフを表示するためのものです。**Story Text欄**に好きな文章を打ち込んでみてください。
その後はUnityの画面の上の方にある再生ボタンを押してゲームを起動し、以下のように文章が表示されるのを確認してみましょう。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/f848c01f-31f5-3df5-4e73-4f429c417cb2.png)
**確認が終わったらもう一度再生ボタンを押して終了するのを忘れないで下さい。**終了しないままでもコマンドその他の編集はできますが、終了した後で開始前の状態に戻ってしまいます。
# キャラを表示する
Fungusではキャラクターのデータをシーンの中に配置しておくという形で管理しており、それを呼び出すことでキャラクターの名前や顔、立ち絵などを表示する仕組みになっています。
早速キャラクターを作ってみましょう。メニューの**「Create」→「Character」**を選びHierarchyに追加された「Character」を選択します。Inspectorビューが下図のようになります。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/435c80ea-919e-0848-82f4-5d600398e702.png)
まずは**Name Text欄**にキャラクターの名前を入れましょう。また**Name Color欄**では後で名前を表示する際の色を指定できます。
次に**Size欄**に数字を入れると、その数だけ立ち絵を設定するための欄が表示されます。それぞれの欄の右の丸を押すとプロジェクトに入っている画像の一覧が表示されますので、使いたいものを選択して下さい。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/ae1e8224-fafd-1960-084c-bdfa2dd22500.png)
これでひとまずキャラクターのデータができましたので、先ほどのフローチャートのブロック内にあるSayコマンドに戻りましょう。そして**Character欄**で先ほど追加したキャラクターを選択します。次に**Portrait欄**で立ち絵を選択します。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/e82b697e-6c74-182d-b645-2471a095406b.png)
これでゲームを起動すれば下図のようにキャラクターが表示されます。しかし立ち絵なのですからもっと大きく表示したいですね。次はその方法について紹介します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/6217ef49-db72-8d46-1a18-89ade8084209.png)
# ステージを作ってキャラをより大きく表示する
Fungusではキャラクターの立ち絵をどこに表示するかを管理するものとして**ステージ/Stage**というものを使います。メニューから**「Create」→「Stage」**を選択してステージを作ることができます。これについては今はまだ特にいじる必要はありません。
フローチャートに戻り、Sayコマンドを追加したときと同じ要領で今度は**「Portrait」**というコマンドを追加してみましょう。またその後コマンド一覧を見るとPortraitがSayより下になってしまっているはずなので、左側の＝をつまんでSayの上に入れ替えてください。
Portraitコマンドは立ち絵を表示したり消したりするためのものなので、セリフ表示の前に使う必要があります。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/0e648ded-d4ed-1d0d-b21f-3eac95576f24.png)
Portraitコマンドの**Character欄**で表示したいキャラを選択すると、**Portrait欄**と**At Position欄**が新たに現れます。前者では表示したい立ち絵、後者では表示位置を指定します（今回は「Left」にします）。
ゲームを起動して立ち絵が大きく表示されるのを確かめてみましょう。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/bfba9e45-daed-48b1-6d35-bdb3e79f2b3f.png)
Portraitコマンドには**Display**という欄もありましたが、これを「Show」ではなく「Hide」にすれば指定したキャラの立ち絵を消すコマンドになります。実際の会話シーンではPortrait(Show)で立ち絵を表示し、Sayで喋らせ、最後にPortrait(Hide)で立ち絵を消すという流れになると思います。
# 背景を表示する
Fungusでは、背景になる画像と**ビュー/View**という枠をあらかじめシーンの中に配置し、コマンドでカメラをビューめがけて動かすという形で背景の切り替えをします。
まずは何かしら背景に使いたい画像を用意し、シーンに配置してみましょう（そのままだとゲーム開始後いきなり中途半端に表示されてしまうのでカメラの範囲外に出しておくとよいでしょう）。
次にメニューの**「Create」→「View」**を選択するとビューができます（下図の真ん中あたりにある枠）。背景画像の上に乗るように動かして下さい。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/7fa02c9c-6b0e-250b-fdf4-845d688a1ea7.png)
ビューの上下にある白い四角をドラッグすると大きさを変えられるので、背景画像がすっぽり収まるように調整します。ここで**画面サイズを4:3にしたい場合はビューの真ん中の透明な範囲に、16:9にしたい場合は左右の緑の部分も含めた範囲に入るようにします。**これで背景の設定は完了です。
フローチャートに戻って、**Camera/Fade To View**コマンドを追加します。これは画面をフェードアウトさせてから、カメラを指定したビューの所に動かして背景を切り替えるものです。やはりコマンド一覧の最後尾に追加されるので、左の＝を掴んで一番上に入れ替えましょう。
Fade To Viewコマンドを選択し、**Target View欄**に先ほど追加したビューを、**Target Camera欄**にカメラ（Main Camera）をあてがいます。
ゲームを起動して背景が表示されるのを確認してみましょう。![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/e75fca41-5c0c-84c0-f2dc-2c412112d742.png)
今回は文章、キャラクター、背景の表示を行いました。これらを組み合わせていくことで簡単な会話シーンを作ることができるはずです。
次回は選択肢や変数・分岐といったものを追加し、よりゲームらしくしてみます。また演出を設けるコマンドについても解説する予定です。

[第2回へ進む](https://qiita.com/Kirikabu_ueda/items/f1e53bdf8775bb146ce3)