意外と難しい会話イベントについて
どうも!二か国戦争の開発が絶賛停滞中の壁です!
次に追加しようとしているのが会話イベントです!
これがないとゲームにストーリー性が無くなってしまうので
自分の中では絶対必要な処理なんですよね
…しかし、意外にこれどうやって実装すればいいか分からない!
ということでどうやればいいか調べてみました
この記事は色々調べた結果をまとめた記事になっています
つまり、蛇足も含まれていると思いますがご了承ください
無料アセットなら「Fungus」がいいらしい
まず最初に無料アセットでいいのないのかな?って
調べてみたのですが、どうもUnityのアセットとしては
あんまりいいのが見つかりませんでした…
唯一よさそうなのがこの「Fungus」でしたが
こちらは既にアセットストアからダウンロードできなく
なっているようです
ただGitHubからダウンロードして使うことができるようなので
本当に簡単な会話シーンを作りたいだけの場合は
こちらを使用すればよさげですね
以下記事が詳しく記載されていてよかったので
興味ある方は以下からどうぞ

結論、自作する!
結構色々調べてみたのですが
自分のやりたい事を実現するには自作するしか
ないかなーと思いましたので、自作してみます
とりあえずテキストを表示してみよう
考えていてもしょうがないので
こういう時は出来るところからパパっと
実装していくのがいい!
ということでとりあえず会話パネルを作成して
テキストを表示できるようにしてみます
パネルを作成して固定のテキストを表示する
まずは会話表示用のパネルを作成します
Hierarchyウィンドウ上で右クリック→UI→Panel
で作成できます

作成したパネルの名前を「ConversationPanel」としました

このパネルにテキストを追加します
パネルの上で右クリック→UI→Text – TextMeshPro を選択します

ここで初めて知ったのですがTextMeshProというのが
Unityのデフォルトになったみたいですね
TextMeshProってなんやねんって思ったので調べてみたのですが
一言で言うと今までのTextのアップグレード版です(そりゃそうだ)
ということで今まで通りのTextの使い方出来るのでご安心を!
更に色々機能追加されてるよ、って感じですね
で、プロジェクトで初めてTextMeshProを追加したときは
以下のウィンドウが出るので「Import TMP Essentials」をクリックしてください
簡単にいうとTextMeshPro使うための情報を取ってくるけどいい?って聞いています

次に活性化される「Import TMP Examples & Extra」↓は
TextMeshProの使い方などの追加機能を取得するかどうかなので
それは取っても取らなくてもどっちでもいいです

で、作成されたTextのInspectorウィンドウのText Inputの値を変えれば
表示されるメッセージが変えられます
…って思ったのですが、TextMeshProが日本語フォント対応できていないので
自分で日本語フォントを追加しないといけません
以下記事がすごい簡潔によく分かりやすく記載されていましたので
こちらをみて日本語化してみてください

めんどくさい方は単純にLegacyのtextを追加するのでもいいかと思います

で、テキストのInspectorウィンドウでテキストを入力すると
Game画面でテキストが表示されます

スクリプトからテキストの値を変えてみる
じゃぁ次にスクリプト側からテキストの値を
変えれるようにしてみましょう
まず空のゲームオブジェクトを作成します
Hierarchyウィンドウ上で右クリック→Create Empty
で作成できます(名前をGameManagerとしました)

でこいつにAdd Componentでスクリプトを追加してあげればいいです。
とりあえず空のスクリプトを作成してそれを追加しましょう
Projectウィンドウ上で右クリック→Create→C# Script
で作成できます

名前はなんでもいいですが今回は「TextScript」としました

GameManagerにこいつを追加してあげます↓

で、中身を以下のようにしてみましょう
using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEditor.VersionControl;
using UnityEngine;
public class TextScript : MonoBehaviour
{
[SerializeField]
private TMP_Text messages;
// Update is called once per frame
void Update()
{
messages.color = Color.red;
messages.text = "スクリプトからテキストを変更しました!";
}
}
このスクリプトを要約すると
TextMeshProの変数を定義して
update関数内でそのtextを変更しています
9行目:TextMeshProの型はTMP_Textみたいです
TextMeshProの変数をmessagesという名前で定義しています
16行目:messagesのテキストを変更してあげています
これを記載できたらUnity画面に戻りましょう
で、GameManagerをクリックして
Inspectorウィンドウを開いてみると
スクリプトで定義したMessagesが表示されていますね

ここに作成したTextMeshProをドラッグ&ドロップしてあげます

これで準備が整いました!
スタートボタンをクリックしてゲーム開始してみましょう
テキストがスクリプトで設定した値に変更されました!

余談:会話文はResourcesから取得するほうがよさそうって思ったけど…
会話文のテキストって文章として長くなることが想定されるので
それはそれでテキストファイルとして保管して必要なタイミングで
そのテキストファイルを取得して会話文を表示する、ってした方が
いいんじゃないかと思い調べてみました
結論からいうとUnity上でテキストファイルなどをスクリプトから取得
するにはResourcesフォルダに格納して、そこから取得処理をする
っていうやり方があるみたいです。
しかし、公式を見るとResourcesフォルダを使うのは非推奨らしい…↓

メモリ管理とかなんかめんどくさいことが大変だから
使うなって書いてありました
まぁということでそれは使わないでやるしかないか…
どうやって実装しようか
色々探してみたら以下の動画がよさげでしたので
こちらを参考に作ってみようと思います!
ちなみにこちらの動画の1:35ぐらいまでは上記で記載したことと
ほぼ同じことを説明しているのでスキップしても大丈夫かと思います!
1:35~スクリプトについての説明になります
既に作成したTextScriptの内容を動画のものに変更しました
スクリプトの中身については動画をご確認いただければと思います!
で、スクリプトを作成したら上記パネルとText(TMP)をアタッチしてあげましょう

次にLineを設定してあげます
これは表示される会話テキストそのものになります

最後にText Speedを設定してあげましょう
これは1文字表示される間隔の時間です、ここでは0.1に設定しました

これで設定は終わったのでゲーム開始してみます!

開始するとLinesで入力した最初のテキストが表示され
画面クリックで次の会話が表示されます
で、最後のテキストが表示されたらパネルを非表示にしていますね
ここではしなかったですが文字が表示されている最中に
画面をクリックするとテキスト全文が表示されるようにもなっています
おわりに
一旦、簡単な会話システムを作成することができました!
もうちょっと機能を足してみたいので次に続きます!
続きは以下よりご覧いただけます!