[Unity]Fungusを使ってRPG風会話イベントを作ろう！

この記事は[ITRC Advent Calendar 2020](https://adventar.org/calendars/5535)の16日目の記事です。
前の記事→[パケットキャプチャに入門してみる(OSPF編)](https://www.epsv.tech/?p=150)←ぽっしぶおつおつ～。
次の記事→[Neovimについてお話します]()←蒲生辰巳!NeoVim楽しみ！


こんにちは!@saba383810です。今回は簡単にノベルゲームのような会話イベントが作成できる「Fungus」についてまとめてみました！
ぜひ、楽しみながら自分好みのゲームを作ってみてください！

# 用意するもの
この記事では以下の素材を使用しますので先にダウンロードしてから本記事をお読みください。

- お好きなfbx素材(本記事では前回の記事で生成した***Tda式初音ミク・アペンドVer1.10***のfbxを使用します。)
- ***使用したいキャラの立ち絵***。(本記事ではゆきぢるしさんの[初音ミク立ち絵](https://booth.pm/ja/items/225456)を使用させてもらいます。)
- [Fungus](https://assetstore.unity.com/packages/tools/game-toolkits/fungus-34184)(記事内でインポートします！)
- ***操作キャラクター***(本記事ではUnity-chanを使用します。[公式サイト](https://unity-chan.com/)からダウンロードしておいてください。)


# Fungusとは
まずは今回使用するアセットについて紹介します。Fungusとは会話イベントを簡単に作成できるUnity Assetで***フローチャート***を使って視覚的に会話の流れを作成できるAssetです。いわゆる***ビジュアルスクリプティング***なのですが、***選択肢***や***立ち絵の表示***などのコマンドが豊富によういされているので、Unity初心者でも簡単に***ノベルゲーム***や、***脱出ゲーム***などの会話の部分を作成できます。
fungusは無料で、オープンソース化もされているので使ってみて損はないAssetだと思います。

# 環境構築

環境構築は簡単です。まずは自分が使用したいプロジェクトが開けたら***Window>AssetStore***でAsset Storeを開きます。
AssetStoreが開けたら、「***Fungus***」と検索し、以下のAssetをimportしましょう！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/e85f9b80-9bf1-588e-c561-4c01acaeff72.png)

環境構築はこれだけです。わーい！簡単だぁ！

---

あとは画像の準備をしていきましょう！

Unityで2D画像を使うにはtextureTypeをスプライトに変換しなくてはいけません。
なので、使用したい立ち絵をクリックしてInspectorのTextureTypeを***Sprite(2D and UI)***に変更してApplyをクリックしましょう！
![スクリーンショット 2020-12-15 161935.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/2ee34c65-008b-b938-f280-d58ba3f3a462.png)


# Fungusの使い方を知ろう！

## Flowchart Objectを作る。
最初はフローチャートのゲームオブジェクトをSceneに追加します。
メニューバーの***Tools>Fungus>Create>Flowchart***をクリックすると、キノコのマークのゲームオブジェクトが生成されます。
![スクリーンショット 2020-12-15 163021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/85b677b7-6b60-d2f7-765e-9a1d6d6c860b.png)

これが、会話イベントのフローチャートの内容を管理するためのゲームオブジェクトです！
## キャラクターの設定ををする。

次に、会話イベントに出てくるキャラクターの立ち絵などの設定をしていきます。
先ほどのflowchartと同じように***Tools>Fungus>Create***の中の***Character***を選びゲームオブジェクトを生成しましょう！
作成したオブジェクトにはCharacterスクリプトのコンポーネントがアタッチされているので、そこに名前や顔グラフィックを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/2a82a74b-5e54-193e-1833-1578100416f2.png)
とりあえず、***NameText***は「ミク」***Size***は「2」で二つの立ち絵を設定しました。ここは自分の好きなように設定してみましょう！
## 会話イベントを作る。
会話イベントを作成する準備はできたので、次はフローチャートを編集して会話イベントを作成していきましょう！
FlowChartのキノコのあるゲームオブジェクトを選択し、FlowchartScriptの中の***Open Flowchart Window***をクリックしましょう。
![スクリーンショット 2020-12-15 164630.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/f5113d19-a5b3-1a9a-ae0e-78fb0f6c4d21.png)

するとnewBlockというブロックが置いてあるflowchartの画面が表示されると思います。
新しいブロックを作りたい場合は画面を右クリックでAddBlockから作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/a59d31d2-acc5-b55e-a937-e19797f8639f.png)
ブロックをクリックするとInspectorに編集画面が表示されます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/ecc7232c-1d26-a7b1-a93a-d2566b79119d.png)

その中の***ExecuteOnEvent***ではブロックの開始のタイミングを設定できるのですが、まずはテストのために、***Game Started***(ゲーム開始時に実行)にしましょう！

また、Animatorと同じように、変数を作成することもできます。変数を使用してスクリプトから制御したい時などに便利ですね！

### コマンドを追加して画面に文字表示してみる。

ここまで設定ができたらコマンドをどんどん追加していって会話イベントを作っていくだけです。
Inspector下の「+」からコマンドを使いすることができるので徐に、「***Say***」と検索して***Say***コマンドを追加してみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/9894d6b7-c460-1c3a-d1af-9b3cf347e112.png)

するとコマンドの欄にsayが追加されると思うので、sayコマンドをクリックし、***Story Text***に「***Hello , Fungus!***」と入力して実行してみてください。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/5e028880-e02e-6dc2-38ad-25fefa231f04.png)

すると以下のように会話イベントが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/78471c93-17f2-f21d-63e9-1788f4d0ffcf.png)

### キャラクターを表示させてみよう！

次は、キャラクターをsayコマンドで表示させてみましょう！
キャラクターを表示させるにはsayCommandの中のCharacterに表示させたいキャラクターを選択。そして、Chracterの下のPortraitに設定したい立ち絵を設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/eef0deb7-658b-4885-ef8c-5c9d5eba60ec.png)

すると下のように立ち絵が表示されると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/8c92fbb4-e339-1b65-7b99-5667c63c66cf.png)
本来なら顔グラを表示してあげたいのですが、素材がないので、立ち絵を表示させてみました。顔グラがある人は顔グラを選択してあげるといいですね！

ここまででFungusのなんとなくの使い方が分かったと思います。つぎは実際にゲーム内でキャラクターに話しかけたときに、会話イベントが表示されるようにしましょう！


# 3Dゲームに会話イベントを取り込もう！
キャラクターに触れたときに会話イベントを発生させる。

適当にキャラクターを動かせるプロジェクトを作成してください。sabaは前の鑑賞会の
プロジェクトにUnity-chanを入れて以下のように動かせるプロジェクトを用意しました。

![Videotogif (4).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/3f2e29ca-74bd-d677-3581-2c1e759fd2bb.gif)

## 触れたらイベントが始まるようにする
触れたらFungusの会話イベントが始まるようにして行きます。まずは当たり判定をつけなくてはいけないので、会話イベントを始めたいキャラクターにAddComponentで***BoxCollider***を追加しましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/beb0af01-327f-cbbd-e994-731aca022a84.png)

Colliderを追加出来たらイベントを発生させたい範囲に***EditCollider***で大きさを調整しましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/01cceed1-3fac-3914-2e22-f58bd6f1c5b2.png)

自分は少し大きめに設定してイベントを発生させようと思います。

---

次にスクリプトを書いていきます。話しかけたいキャラに以下のスクリプトを追加しましょう。

``` Hit.cs

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Hit : MonoBehaviour
{
    public Fungus.Flowchart flowchart = null;
    public String sendMessage = "";

    private void OnCollisionEnter(Collision other)
    {
        if (other.gameObject.CompareTag("Player"))
        {
            flowchart.SendFungusMessage(sendMessage);
        }
    }
}
```

プログラムが書けたら、以下の画像のように、Unity側のHitスクリプトのFlowchartにFLowchartのGameObjectをいれ、SendMessageに自分が呼び出したいFungusのmessageを入力しましょう！

![スクリーンショット 2020-12-15 200432.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/1aaccc3d-c22e-ef1d-ff19-13a516202960.png)


次に、動かすキャラクターのタグを「Player」に変更しましょう。


![スクリーンショット 2020-12-15 200852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/bde88778-4292-5ec3-799c-6d8b0c447010.png)

最後に、***Execute On Event***を***Message Received***にし、***Message***に呼び出したい値を入力したら完成です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/85492c7c-4702-7aa3-cb01-6ee9ea29cd8b.png)

(上の画像のようにCallMethodというコマンドを使うと自分が呼び出したいc#スクリプトを呼び出すことができますのでsceneを変えたい場合はぜひ。)

***完成したものがこちら***

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Fungusで会話イベント作ったやつです！ <a href="https://t.co/OXrGXtKXFA">pic.twitter.com/OXrGXtKXFA</a></p>&mdash; 三鳩のあ/saba (@mitsubatonoah) <a href="https://twitter.com/mitsubatonoah/status/1338828222205607938?ref_src=twsrc%5Etfw">December 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# まとめ
お疲れ様です！Fungusを使えば簡単に会話イベントを作成できることが分かったと思います。いろいろなゲームに会話イベントは使われているのでぜひfungus使ってゲーム作りを楽しんでください！本来なら、ゼロプログラミングで記事を書きたかったのですが、自分の知識ではできなかったので急遽変更させてもらいました。最後まで見ていただきありがとうございました。

# ライセンス
![imageLicenseLogo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422338/b1292b4e-bd16-cb2b-4ad0-bb2f288ffe15.png)

この作品は[ユニティちゃんライセンス条項](https://unity-chan.com/contents/license_jp/)の元に提供されています。

ユニティちゃんは上記のライセンスのもとに提供されています。


# 参考資料

 - [会話イベントの作り方1：Fungusの基本的な使い方](https://unity.moon-bear.com/dragons-and-knight/talk1-fungus/)
 - [UnityアセットのFungusをスクリプトから制御するTips](http://kinokorori.hatenablog.com/entry/2019/05/12/000000)