VRゲームを作っています

ノベルゲームのバックログの作り方

こんにちは。今回はノベルゲームのバックログ機能の 作り方について記事にします。

こちらは

qiita.com

の19日目の記事となっており、普段は動画でYoutubeに投稿しています。

こちらの記事は動画からの書き起こしとなっております。

動画の方はこちらです。

youtu.be

 

それでは、早速作っていきます。
Googleスプレッドシートで制作したデータを CSV形式でダウンロードします。



このあたりについては主旨から外れるので 簡単に説明します。
Aの行に番号を、Bの行に表示するテキストを入れています。
今回表示する文章は青空文庫より 江戸川乱歩著「鏡地獄」をお借りしています。


UE5を開いたらまずBPで構造体を作ります。
名前はDT_Textにしておきます。



ダブルクリックで開きます。Textという名前のStrings変数を追加します。
ドラッグアンドドロップで先程のCSVを追加します。
Data Tableを指定するように求められますので先程作ったDT_Textを指定します。



新たにウィジットブループリントを作成します。名前はUI_Textです。



作業しやすいようにコンテンツウインドウを入れています。
キャンバスパネルを作り、背景を入れます。
今回の機能説明にはあまり必要のないパートなので飛ばしてくださって構いません。
ここまでできればテキストを追加します。
こんな感じになりました。

 




バインド機能により、表示するテキストを指定します。バインド機能を開き、新規バインディングを作成します。

新たに変数を追加します。

テキスト変数を作成します。名前はText。
後で変更しますが、
TextでもStringsでもどちらでも大丈夫です。
出来たらとりあえず繋いでおきます。



ボタンを追加し、ゲーム画面のどこかを押したら次のテキストを表示するようにします。
Zorderという、数字が高いほど手前に表示される設定項目があるので0以上の数字を指定します。



画面いっぱいに表示します。アピアランスを開き、Styleを指定します。
今回、特にボタンの形はなくていいので全てをNoneに指定します。
Hover,Clickedにも指定していきます。



これからイベントグラフでいじっていくので、わかりやすく名前を指定しておきます。



イベントタブのOn Releaseを押します。Clickedでもいいのですが、なんとなくでReleaseにしています。

我々は雰囲気でBPをいじっているのです。

右クリックから「データテーブルを取得」を選択します。

先程作ったデータテーブルからテキストを取り出します。

 

クリックしたら変数に1を追加して次の変数を取り出す方式で実装しようと思います。
Integer変数を追加します。

名前はTableRowNumberです。

こいつはこのままだとRowNameにつなぐことが出来ません。

そこで一度「To Strings」によりStringsに変換してから繋ぎます。

先程インポートしたCSVを指定します。

構造体を分割します。

Text変数をStringsにしました。これは本当にどちらでも大丈夫でしたのですが、読み込

むのがStringsなので何となくで変換しました。 変数をSetします。
先程Textにバインディングしたので、これで指定された文章が表示されるようになります。



レベルブループリントを開きます。

UIを表示させるためにCreateWidgetノードを追加します。

先ほど作成したUI_Textを指定します。
このままだと表示されないのでReturnNodeからAdd to Viewportを追加します。


もう一度UI_Textに戻り、TableRowNumber変数のデフォルト値を1にしておきます。

画面上でクリックしたら文字が表示されるようになります。

今のままでは文字が切り替わらないので、画面上でクリックするたびに変数に1を足してRowNameを加算してくことでテキストを表示出来るようにしましょう。

TableRowNumberのセットノードを追加します。

繋ぎます。

次に、TableRowNumberから加算ノードを追加します。

さっそくプレイしてみましょう。

これでクリックするたびに文字が切り替わるようになりましたね。


今のままだと文字が自動で改行しませんね。

デザイナー画面に戻り、テキストを選択した状態でラップタブの中の「AutoWrapText」にチェックを入れます。

無事に自動で改行するようになりましたね。


ではやっと今回の主題であるバックログ機能の実装に 取り掛かりましょう。

新たにCanvasPanelを追加します。

こちらも後でイベントグラフでいじるので名前をCanvasPanel_BackLogにしておきます。
先程やったみたいにアンカーとかサイズをいじって画面いっぱいに灰色の画面が広がるようにします。
Zorderなどもいじって一番上に灰色の画面が来ているようにします。新たにScrollBoxを追加します。ここにバックログを入れていきます。
中央に置いておきましょう。


このバックログを表示させるためのボタンも作ります。
ではさっそくイベントの「OnRelease」にノードを入れていきます。
まずはFlipFlopノードで押したら表示、非表示を切り替えるようにします。

先程作ったCanvasPanel_BackLogをグラフに追加します。

もし表示されていないという方がいらっしゃいましたら、一度デザイナーパネルに戻り、詳細パネルで名前を入れるところの右にあるIs Valiableにチェックを入れてくださると表示されるようになります。



ではでは、FlipFlopで表示非表示を切り替えましょう。

次にSetVisibilityノードにそれぞれ繋ぎます。

 

次にテキストだけのウィジットブループリントを作成します。

名前はUI_BackLogです。

前回と同じようにキャンバスパネルを挿入します。

好みの形にテキストボックスを作成します。

グラフに移動してStrings変数を作成します。


名前はText。

Textを選択してバインディングしておきます。

UI_Textのイベントグラフに行ってカスタムイベントを作成します。

名前はCreateBackLogです。

ウィジェットを作成ノードを追加します。

先ほど作成したUI_BackLogウィジェットを指定します。

ReturnNodeを変数にしておきましょう。

一度消して配列にします。

配列に作成したウィジットを追加していきます。

Addノードを追加します。

上記のようにノードを追加したら配列がどんどん溜め込まれていきます。


今回は作成していませんが、何個ログが溜まったかがわかるようになるので、例えば30個たまったら自動的に削除することも出来ます。


次に先程追加した変数Textをセットします。
Textからピンをカスタムイベントノードに伸ばします。ScroolBox_BackLogをイベントグラフに追加します。
AddChildノードを追加します。
それぞれピンで繋いでいきます。これで作成された「UI_BackLog」にテキストが入力され、スクロールボックスに追加されていきます。

作成したカスタムイベントCreateBackLogを繋ぎます。

テキストノードを繋いでおきます。

コンパイルしてさっそく試してみましょう。

とりあえずクリックしまくります。無事にバックログが出来ていますね!

 

スクロールバーを押したらマウスが非表示になってしまうので

一度レベルブループリントに行ってマウスを表示されるようにしましょう。GetPlayerControllerからShow Mouse Cursorノードを入れてチェックします。

これで快適にスクロールバーを動かせるようになりました。

今度は消す方法です。

新たにカスタムイベントを作成します。

名前はResetBackLogです。

テキストが全部表示されたら消えるようにします。

こちらはかなり簡単です。


まずは貯めた配列UI_BackLogを消します。

次に貯めたChildを消します。
ClearChildノードに繋ぎます。

イベントの方は出来上がったので実際に繋いでいきます。

CreateBackLogイベントの後ろの方に追加しましょう。

TableRowNameの数字でBranchの条件を設定します。

今回は全部で37列ありますので、数字が37になったら全部消しします。

イコールノードを追加して37と入力。

ResetBackLogイベントを繋ぎます。

TrueにResetBackLogイベント、FalseにCreateBackLogを繋ぎます。

↑画像のイコールノードはTableRowNameに繋いであります。

 

早速試してみましょう。

バックログが作成されています。あとはひたすら37回クリックしていきます。

37回クリックが終わったのでバックログを表示して確認してみます。無事に消えていますね!

これでバックログ機能については終わりです。

色々やってみていい感じのバックログを実装してみてください。