【Unity講座_7時限目】Unityを使った会話画面の実装〜ギルド画面編〜

Unity講座

今回はUnityの無料AssetであるFungusを使って会話画面を実装していきます。会話画面が実装できると、ぐっとゲームらしくなると思いますので、是非最後まで頑張ってください。

ノベルゲームのような会話中心のゲームであれば「宴」や「Joker」が有名らしいです。もし興味のある方はそちらも調べてみてください。

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つの作成が基本になると考えています。

Fungusの基本要素
・SayDialog
・Character
・Flowchart

以下ではそれらを一つ一つ順に作成・設定していきます。

SayDialogの作成と設定

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を下記のように設定してみました。

ここで設定したTextやImageの大きさや色が、基本的に実際の会話ログでのオブジェクトの大きさや色に反映されます。

Characterの作成と設定

Characterでは会話ログを表示させた時に一緒に表示されるキャラクターを設定できます。表示位置は先に設定したImageの位置です。

STEP1:Characterの作成

それでは実際にCharacterを作成してみましょう。作成の方法は下図に示すとおりです。

STEP2:Character画像の設定

次はキャラクター画像の設定を行いましょう。先ずは下図を参考にヒエラルキーウィンドでCharacterを選択し、インスペクターウィンドのPortraitの▶︎ボタンをクリックして、Sizeを1に設定します。

続いてキャラクターの画像を用意します。今回は下記サイト様の無料素材を使用させていただきます。

素材提供元:三日月アルペシオ様
URL:http://roughsketch.en-grey.com
使用させて頂いた素材:リーン 顔グラフィック96×96

URL:http://roughsketch.en-grey.com/Category/21/

素材が用意できたら下図を参考にCharacterインスペクターウィンドのPprtraits Elecment0に用意した画像をドラッグ&ドロップして画像を設定して下さい。

STEP3:Character名の設定

最後に会話ログで表示される際の、キャラクター名を設定しておきましょう。方法としては下図のようにCharacterインスペクターウィンドのNameTextを変更します。

今回はPortraitSizeを1に設定しましたが、同じシーンで複数のキャラクターを登場させたい場合はSizeをそれに合わせて設定し、画像も複数登録して下さい。
CharacterインスペクターウィンドのNameColorを変更するとそのキャラクター名が表示された時の文字色を変更することができます。

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:会話ログ関連の微調整

会話ログを表示させてみるやや違和感を覚えます。私が感じた違和感は以下の2点です。

違和感がある部分
①会話ログが画面中央あたりに表示されている
(原因:キャラクターの画像と会話ログテキストが干渉しないような設定にしているためと推測される)
②キャラクターの名前が見づらい
(背景が白に対してキャラクター名のテキストも白であるため)

そこで下記のように設定を変更します。(詳細は下図参照)

設定変更内容
①SayDialogのインスペクターウィンドからFitTextWithImageをfalseにする
②CharacterのインスペクターウィンドからNameColorを黒に変更する

最後にもう一度Playボタンを押して会話を表示させてみて下さい。今回はうまくいったのではないでしょうか。

今回はアセットの導入とFungusの設定・使用などかなり濃い内容だったと思いますが、いかがだったでしょうか。

次回はいよいよスクリプトを使って、今まで作ってきたボタンなどを押した時の処理を実装していきます。ではまた次回お会いしましょう。皆さんお疲れ様でした。

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity講座
ソフィーのUnity講座

コメント