今回はUnityの無料AssetであるFungusを使って会話画面を実装していきます。会話画面が実装できると、ぐっとゲームらしくなると思いますので、是非最後まで頑張ってください。
Fungusの導入
STEP1：アセットストアへのアクセス
Fungusを導入するにあたり、先ずはアセットストアへアクセスします。Unityを起動した状態でWindowタブを選択し、AssetStoreを左クリックします。（下図参照）
STEP2：Fungusアセットの検索
すると下図の様にアセットストアにアクセスできるので、検索ウィンドに「fungus」と入力してEnterキーを押しましょう。
STEP3：Fungusの導入（import）
次に画面を下の方にスクロールしていくと下図のようにFREEのFungusが現れますので、左クリックを押します。
すると下図のような画面となりますので、Importボタンを左クリックします。
もし下図のような警告が出たら焦らずInstall/Upgradeボタンを押してください
最後に下図のようにImportボタンを押せばFungusがプロジェクトに導入されます。
なお、アセットストアの画面から画面編集状態に戻すには下図のようにSecneタブをクリックすればOKです。
これまでの作業によりFungusを導入しましたが、実際に会話ログを表示させるにはまだいくつかのステップを踏む必要があります。表示させたい内容等にもよりますが、私はFungusを使用する上で下記3つの作成が基本になると考えています。
・SayDialog
・Character
・Flowchart
以下ではそれらを一つ一つ順に作成・設定していきます。
SayDialogの作成と設定
SayDialogは会話ログの基本となる要素を規定しています。例えば以下のようなものです。
・会話ログの表示位置や文字の大きさ、会話を表示させる枠の大きさなど
・キャラクターの表示位置や大きさなど
STEP1：SayDialogの作成
それでは実際にSayDialogを作成してみましょう。作成の方法は下図に示すとおりです。
STEP2：SayDialogの大きさ、位置調整
SayDialogを作成しただけでは下図のように位置や大きさが画面と合っていません。
そこで、大きさ及び位置の調整を行います。
先ず下図のようにSayDialogをBackGroundImageの子要素にします
次にSayDialogの各種値を下記のような値に設定します（下図参照）
・アンカー:middle-center
・PosX:0,PosY:0,PosZ:0
・Width:1334,Height:750
・Scale X:1,Y:1,Z:1
続いて下図を参考に、SayDialogの子要素であるPanelの各特性値を下記のように設定します。
・アンカー:buttom-center
・PosX:-400,PosY:0
・Width:1050,Height:250
・PixelsPerUnitMul:5
その他、Panelの子要素であるNameText,Image,StoryTextなども皆さんのお好みに合わせて設定して下さい。例えば私はImageを下記のように設定してみました。
Characterの作成と設定
Characterでは会話ログを表示させた時に一緒に表示されるキャラクターを設定できます。表示位置は先に設定したImageの位置です。
STEP1：Characterの作成
それでは実際にCharacterを作成してみましょう。作成の方法は下図に示すとおりです。
STEP2：Character画像の設定
次はキャラクター画像の設定を行いましょう。先ずは下図を参考にヒエラルキーウィンドでCharacterを選択し、インスペクターウィンドのPortraitの▶︎ボタンをクリックして、Sizeを1に設定します。
続いてキャラクターの画像を用意します。今回は下記サイト様の無料素材を使用させていただきます。
素材が用意できたら下図を参考にCharacterインスペクターウィンドのPprtraits Elecment0に用意した画像をドラッグ＆ドロップして画像を設定して下さい。
STEP3：Character名の設定
最後に会話ログで表示される際の、キャラクター名を設定しておきましょう。方法としては下図のようにCharacterインスペクターウィンドのNameTextを変更します。
Flowchartの作成と設定
Flowchartは実際にゲーム画面に表示させる会話ログの内容やその時表示させるキャラクターを設定するものです。これを実装して初めてゲームを実行した際に会話が表示されるようになりますので、もう少しだけ頑張りましょう。
STEP1：Flowchartの作成
それでは実際にFlowchartを作成してみましょう。作成の方法は下図に示すとおりです。
STEP2：FlowchartWindowの表示
Flowchartが作成できたらフローチャートウィンドウを開きます。方法は下図を参考にして下さい。
STEP3：Flowchartの設定
次にフローチャートの設定を行いましょう。先程の手順でフローチャートウィンドが表示されたら下図のようにブロックを選択し、インスペクターウィンドを表示させます。
・BlockName：フローチャートウィンドに表示されるブロック中央に表示される、ブロックの名前です。
・Description：そのブロックがどのような意味があるのか等を自由記述する欄です。
（必ずしも記述する必要はありません）
・ExecuteOnEvent：そのブロックが実行されるタイミングを表します。初期状態ではゲーム開始（Playボタンが押された時またはそのシーンがロードされた時）に設定されています。
それでは上記ポイントを参考に会話表示用に設定を行いましょう。
今回は下記のように各特性値を設定することとします。
・BlockName:NormalConv
・Description:通常会話
・ExecuteOnEvent:GameStarted
STEP4：表示させる会話ログの設定
各種設定を行ったら実際に表示させる会話ログを設定しましょう。下図のようにFlowchartのインスペクターウィンドから＋ボタンを左クリックし、Narrative/Sayを選択します。
すると下図のようにCommandsの下にSayコマンドが表示されるので、それを左クリックして選択します。
次にSayCommandの詳細を設定します。下図を参考に以下のように特性値を設定してみて下さい。
・Character:Character
・Portrait:GuildStaff
（表示させるキャラクターの画像設定。前述の「Characterの作成と設定」で設定した画像の名前を選択）
・StoryText:ようこそ冒険者ギルドへ。（表示させたい会話ログ）
・FadeWhenDone:false（クリックしてもその会話ログを表示させたままにしておく設定）
STEP5：会話ログの再生
ここまでできたら一度会話ログを表示させてみましょう。下図のようにPlayボタンを押して、会話ログが表示されるかを確認してみましょう。
STEP6：会話ログ関連の微調整
会話ログを表示させてみるやや違和感を覚えます。私が感じた違和感は以下の２点です。
①会話ログが画面中央あたりに表示されている
（原因：キャラクターの画像と会話ログテキストが干渉しないような設定にしているためと推測される）
②キャラクターの名前が見づらい
（背景が白に対してキャラクター名のテキストも白であるため）
そこで下記のように設定を変更します。（詳細は下図参照）
①SayDialogのインスペクターウィンドからFitTextWithImageをfalseにする
②CharacterのインスペクターウィンドからNameColorを黒に変更する
最後にもう一度Playボタンを押して会話を表示させてみて下さい。今回はうまくいったのではないでしょうか。
今回はアセットの導入とFungusの設定・使用などかなり濃い内容だったと思いますが、いかがだったでしょうか。
次回はいよいよスクリプトを使って、今まで作ってきたボタンなどを押した時の処理を実装していきます。ではまた次回お会いしましょう。皆さんお疲れ様でした。
以上。
コメント