この記事は「恋愛・ホラー風ノベルゲーム」の作り方講座の第13回です。
前回でスプレッドシートのデータを読み込んで会話処理ができるシステムを構築しました。
前回の記事：
今回は会話データを読み込む際に文字色の変更、太字での強調、文字の大きさ変更などをタグ指定で行えるように改造します。
TextMeshProの文字色の変更を会話システムに導入する
RichTextを設定する
例えば、「Talk」オブジェクトの文字表示に使用している「TextMeshPro」の下の方にある「ExtraSetting」には「RichText」という設定項目があります。
初期値が「true」（チェックが入っている）なので、特に気にしなければ「true」になっているかと思いますが、「false」の場合は「true」にしておきましょう。
タグの追加を行ってみる
RichTextをオンにしておくと、テキストをタグで囲むことにより文字を装飾することができます。
下記のようなタグで囲むと太字にする、サイズを変える、色を変えるなどの装飾を実現できます。
（HTMLのタグに似ていますが、別のものです。）
上の画像では「<color=#0800FF>」という開始タグと「</color>」という終了タグで囲んだ部分の文字色を変更しています。
「<color=[カラーコード]>〜</color>」で囲んでいる「〜」部分の色が変わります。
この「カラーコード」というのは色を表すコードです。6文字の英数字の頭に「#」を付けます。
例えば「FFFFFF」は白です。
ちなみに太字のタグは「<b>〜</b>」です。
会話でタグを使う
ではこれまでに作成してきた会話でタグを使ってみましょう。
会話を作成したスプレッドシートの最初の部分
|
1 |
うーん。<color=#0800FF>今日の待ち合わせ場所</color>って<color=#0800FF>ここ</color>だったよな。 |
「今日の待ち合わせ場所」と「ここ」にタグ「<color=#0800FF>〜</color>」をつけました。
この状態で再生すると以下の動画のようになります。
今回作成した会話処理では一文字づつ文字を追加しています。そのため、タグの「<>」マークやタグ内の文字まで会話として表示され、タグが完成した段階で突然文字色が変わっています。
これでは良くないのでタグを表示せずに色を変える処理を作成していきましょう。
テキスト装飾処理の作成
まず先の動画をみると最初の「<color=#0800FF>」が出来上がったら消えて次の文字から青色になっています。
そしてその後青色の文字が続き、「</color>」のタグが完成したところで通常の色に戻ります。
この前提を踏まえて会話処理を修正してみましょう。
「TalkWindow.cs」の「TalkStart()」関数を変更します。
これで追加部分は完成です。
では確認してみましょう。
先ほど表示されていたタグの表示がなくなって文字色のみ変更できるようになりました。
この処理によって太字の「<b>〜</b>」など同じ形なら同じように表示できるはずです。
ただしこの修正により、文章中で「<」と「>」を使用してはいけないという制約が出てきます。
もしこうした文字を使いたい場合は例えばフラグを用意して機能のオンオフをする、他の文字に置き換える、など個々の用途によってカスタマイズするのもいいかと思います。
まとめと次回に向けて
今回でノベルゲームのメッセージ管理システムの構築もいよいよ終わりです。
強調文字や色変更などノベルゲームの会話文中で必要になる装飾表現をタグを用いて使うことができるようになりました。
次回はノベルゲームのセーブデータ、シナリオ進行度の管理システム、セーブデータのロードシステムなどを作っていきます。
次の記事：
コメント