https://youtu.be/JL7NjYg2AsE
トークは
・上から埋まっていく
・新しい会話トークは常に下に表示する。
・画面が埋まると古い会話トークが消えて、新しい会話トークが下に表示される。
1.構造体の作成 00:30 
構造体はプロジェクトで使用する変数を整理・管理しています。
右クリック＞ブループリント＞構造体
構造体を作成します。
ファイル名を「st_TalkData」にします。
「+」変数を追加ボタンで
変数を追加していきます。
ユーザの名前 変数名UID Text型
会話トーク内容 TalkBody Text型
顔画像 Icon Texture 2D型
表示場所（左or右）isLeft Boolean型
会話トーク内容のTalkBodyを開いて
複数行テキストを有効にします。
isLeftにチェックを入れます。
思わずタブを消してしまった！場合は、
焦らず
上部のツールバーのウィンドウから
構造体とデフォルト値タブを表示できます。
右クリック＞ブループリント＞構造体
構造体を作成します。
ファイル名を「st_TalkData」にします。
「+」変数を追加ボタンで
変数を追加していきます。
ユーザの名前 変数名UID Text型
会話トーク内容 TalkBody Text型
顔画像 Icon Texture 2D型
表示場所（左or右）isLeft Boolean型
会話トーク内容のTalkBodyを開いて
複数行テキストを有効にします。
isLeftにチェックを入れます。
思わずタブを消してしまった！場合は、
焦らず
上部のツールバーのウィンドウから
構造体とデフォルト値タブを表示できます。
2.データテーブルの作成 02:05
トーク内容のデータテーブルを作成します。
右クリック＞その他＞データテーブル
「行構造を選択」で
作成した構造体「st_TalkData」を選択します。
ファイル名を「dt_TalkDataTable」にします。
「行の名前」を半角数字「1」を入力
行エディタでデータを入力していきます。
「+追加」で行を増やしていきます。
「行の名前」を半角数字「2」を入力
右クリック＞その他＞データテーブル
「行構造を選択」で
作成した構造体「st_TalkData」を選択します。
ファイル名を「dt_TalkDataTable」にします。
「行の名前」を半角数字「1」を入力
行エディタでデータを入力していきます。
「+追加」で行を増やしていきます。
「行の名前」を半角数字「2」を入力
3.会話トークパーツ用ウィジェットの作成 03:27
トーク用のパーツであるウィジェットを作成します。
右クリック ＞ ユーザーインターフェース ＞ ウィジェットブループリント
User Widgetをクリックします。
ファイル名を「wb_TalkParts」にします。
右クリック ＞ ユーザーインターフェース ＞ ウィジェットブループリント
User Widgetをクリックします。
ファイル名を「wb_TalkParts」にします。
3-1.デザイナー 03:45
ファイルを開きます。
3-1-1.CanvasPanel 03:50
パネル ＞ CanvasPanelをドラッグアンドドロップします。
もう一つ
パネル ＞ CanvasPanelをドラッグアンドドロップします。
名前を[CanvasPanel_Talk]にします。
CanvasPanel_Talk のIs Variableを有効にします。
位置Xは0で
位置XYは0で
サイズはX400Y100にします。
トーク分の長さにSizeを合わしたいので、
Size To Contentを有効にします。
最初のCanvasPanelは、画面のサイズなので
Slot の項目がなく
Size To Contentが設定できないので
CanvasPanelをもう一つ用意する
もう一つ
パネル ＞ CanvasPanelをドラッグアンドドロップします。
名前を[CanvasPanel_Talk]にします。
CanvasPanel_Talk のIs Variableを有効にします。
位置Xは0で
位置XYは0で
サイズはX400Y100にします。
トーク分の長さにSizeを合わしたいので、
Size To Contentを有効にします。
最初のCanvasPanelは、画面のサイズなので
Slot の項目がなく
Size To Contentが設定できないので
CanvasPanelをもう一つ用意する
3-1-2.背景��(トークbody) 04:20
一般 ＞ Imageをドラッグアンドドロップします。
名前を[Image_Talk]にします。
その横のisVariableを有効にします。
色の変更をしたいので有効にします。
右上のFillScreenをDesiredにします。
アンカーは全体を選択します。
左オフセットを70にします。
Size To Contentを有効にします。
アピアランス＞Brush＞Imageで画像を選択します。
名前を[Image_Talk]にします。
その横のisVariableを有効にします。
色の変更をしたいので有効にします。
右上のFillScreenをDesiredにします。
アンカーは全体を選択します。
左オフセットを70にします。
Size To Contentを有効にします。
アピアランス＞Brush＞Imageで画像を選択します。
3-1-3.背景��(くちばし) 04:54
一般 ＞ Imageをドラッグアンドドロップします。
名前を[Image_Talkmouth]にします。
その横のisVariableを有効にします。
色の変更をしたいので有効にします。
位置Xは60で
位置XYは0で
サイズはX30Y16にします。
名前を[Image_Talkmouth]にします。
その横のisVariableを有効にします。
色の変更をしたいので有効にします。
位置Xは60で
位置XYは0で
サイズはX30Y16にします。
3-1-4.UID 05:22
一般 ＞ TextBlockを配置きます。
TextBlockの名前を[TextBlock_UID]にします。
その横のisVariableを有効にします。
位置Xは00で
位置XYは60で
サイズはX60Y15にします。
もしくは、Size To Contentを有効にします。
Font Size 9
アピランス＞Color and Opacityを
FFC600FFにします。
輪郭指定で
輪郭サイズを「1」にします。
輪郭色をFF4900FFにします。
TextBlockの名前を[TextBlock_UID]にします。
その横のisVariableを有効にします。
位置Xは00で
位置XYは60で
サイズはX60Y15にします。
もしくは、Size To Contentを有効にします。
Font Size 9
アピランス＞Color and Opacityを
FFC600FFにします。
輪郭指定で
輪郭サイズを「1」にします。
輪郭色をFF4900FFにします。
3-1-5.Size Box 06:09
パネル ＞ Size Boxを[Image_Talk]の上にドラッグアンドドロップします。
位置Xは80で
位置Yは10で
Size To Contentを有効にします。
トーク内容によって変わるので有効にします。
位置Xは80で
位置Yは10で
Size To Contentを有効にします。
トーク内容によって変わるので有効にします。
3-1-6.トークテキスト 06:36
一般 ＞ TextBlockをSize Boxの上に置きます。
白で見えないので、
アピランスのColor and Opacityを黒色にします。
TextBlockの名前を[TextBlock_TalkBody]にします。
その横のisVariableを有効にします。
フォントサイズ16
Paddingを10にします。
隙間ですね。
白で見えないので、
アピランスのColor and Opacityを黒色にします。
TextBlockの名前を[TextBlock_TalkBody]にします。
その横のisVariableを有効にします。
フォントサイズ16
Paddingを10にします。
隙間ですね。
3-1-7.Icon（顔画像） 07:06
一般 ＞ Imageをドラッグアンドドロップします。
名前を[Image_Icon]にします。
その横のisVariableを有効にします。
位置Xは0で
位置XYは0で
サイズはX60Y60にします。
アピアランス＞Brush＞Imageで画像を選択します。
名前を[Image_Icon]にします。
その横のisVariableを有効にします。
位置Xは0で
位置XYは0で
サイズはX60Y60にします。
アピアランス＞Brush＞Imageで画像を選択します。
3-2.ブループリント 07:31
グラフに移動します。
Create Widget した時に
トークパーツ用ウィジェットに情報を渡してVerticalBoxに追加します。
Create Widget した時に
トークパーツ用ウィジェットに情報を渡してVerticalBoxに追加します。
3-2-1.UID 07:42
変数名v_UID Text型を作成します。
変数の横の「+」をクリックして
変数名と型を指定します。
その際、
インスタンス編集可能(Instance Editable)と
スポーン時に公開(Expose on Spawn)を有効にします。
一度コンパイルします。
TextBlock_UIDを配置します。
それからSetText(Text)ノードをつなぎます。
このファイルが読み込まれたら実行するので、
イベントConstructノードにつないでいきます。
変数v_UIDをSetText(Text)ノードのInTextピンにつなぎます。
3-2-2.TalkBody（トーク内容） 08:34
変数名v_TalkBody Text型を作成します。
変数の横の「+」をクリックして
変数名と型を指定します。
その際、
インスタンス編集可能(Instance Editable)と
スポーン時に公開(Expose on Spawn)を有効にします。
一度コンパイルします。
TextBlock_TalkBodyをGetで配置します。
それからSetText(Text)ノードをつなぎます。
このファイルが読み込まれたら実行するので、
イベントConstructノードにつないでいきます。
変数v_TalkBodyをSetText(Text)ノードのInTextピンにつなぎます。
イベントConstructノードにつなぎます。
前のSet Textノードにつなぎます。
変数の横の「+」をクリックして
変数名と型を指定します。
その際、
インスタンス編集可能(Instance Editable)と
スポーン時に公開(Expose on Spawn)を有効にします。
一度コンパイルします。
TextBlock_TalkBodyをGetで配置します。
それからSetText(Text)ノードをつなぎます。
このファイルが読み込まれたら実行するので、
イベントConstructノードにつないでいきます。
変数v_TalkBodyをSetText(Text)ノードのInTextピンにつなぎます。
イベントConstructノードにつなぎます。
前のSet Textノードにつなぎます。
3-2-3.Icon（顔画像） 09:19
変数名v_Icon Texture2D型を作成します。
変数の横の「+」をクリックして
変数名と型を指定します。
その際、
インスタンス編集可能(Instance Editable)と
スポーン時に公開(Expose on Spawn)を有効にします。
一度コンパイルします。
Image_Iconを配置します。
それからSet Brush From Textureノードをつなぎます。
変数v_IconをSet Brush From TextureノードのTextureピンにつなぎます。
イベントConstructノードにつなぎます。
前のSet Textノードにつなぎます。
変数の横の「+」をクリックして
変数名と型を指定します。
その際、
インスタンス編集可能(Instance Editable)と
スポーン時に公開(Expose on Spawn)を有効にします。
一度コンパイルします。
Image_Iconを配置します。
それからSet Brush From Textureノードをつなぎます。
変数v_IconをSet Brush From TextureノードのTextureピンにつなぎます。
イベントConstructノードにつなぎます。
前のSet Textノードにつなぎます。
3-2-4.isLeft（右側トークの背景色を指定） 09:58
右側のトークの時は背景色を変更します。
変数名isLeft Boolean型を作成します。
変数の横の「+」をクリックして
変数名と型を指定します。
その際、
インスタンス編集可能(Instance Editable)と
スポーン時に公開(Expose on Spawn)を有効にします。
一度コンパイルします。
Branchノードを配置します。
変数isLeft GetノードをConditionにつなぎます。
Image_TalkとImage_Talkmouthを配置します。
それからSet Brush Tint Colorノードを配置します。
Tint ColorピンよりMakeSlateColorノードを配置します。
Specified Colorで色を指定します。
00FF38FF
Set Brush Tint ColorノードをBranchノードのFalseにつなぎます。
イベントConstructノードにつなぎます。
3-2-5.右側表示の反転 11:16
右側の時はトークを反転させます。
Set Render Scaleノードを配置します。
これは縦横の大きさを変更できるノードです。
横方向に「-1倍」すれば表示がすべて反転できます。
Targetがトークパーツ用ウィジェットすべてですので、
CanvasPanel_Talk のIs Variableを有効にします。
Canvas Panel_Talkをつなぎます。
Scaleピンを右クリックして「構造体ピンを分割」でX軸とY軸を分割します。
Y軸はそのままなので「1」倍を設定します。
X軸よりSelectノードを配置します。
Indexに変数is Leftを接続します。
OptionがFalse、Trueに変わるので。
Falseを「-1倍」に
True「1倍」に設定します。
このままだと
トーク内容とUID、Iconも反転してしまうので、
さらに反転させます。（反転の反転）
TextBlock_UID、TextBlock_TalkBody、Image_Iconをそれぞれ
Targetにつなぎます。
イベントConstructノードにつなぎます。
Set Render Scaleノードを配置します。
これは縦横の大きさを変更できるノードです。
横方向に「-1倍」すれば表示がすべて反転できます。
Targetがトークパーツ用ウィジェットすべてですので、
CanvasPanel_Talk のIs Variableを有効にします。
Canvas Panel_Talkをつなぎます。
Scaleピンを右クリックして「構造体ピンを分割」でX軸とY軸を分割します。
Y軸はそのままなので「1」倍を設定します。
X軸よりSelectノードを配置します。
Indexに変数is Leftを接続します。
OptionがFalse、Trueに変わるので。
Falseを「-1倍」に
True「1倍」に設定します。
このままだと
トーク内容とUID、Iconも反転してしまうので、
さらに反転させます。（反転の反転）
TextBlock_UID、TextBlock_TalkBody、Image_Iconをそれぞれ
Targetにつなぎます。
イベントConstructノードにつなぎます。
4.レイアウト用ウィジェットの作成 12:37
レイアウト用のウィジェットを作成します。
右クリック ＞ ユーザーインターフェース ＞ ウィジェットブループリント
User Widgetをクリックします。
ファイル名を「wb_Layout」にします。
右クリック ＞ ユーザーインターフェース ＞ ウィジェットブループリント
User Widgetをクリックします。
ファイル名を「wb_Layout」にします。
4-1.デザイナー 12:54
ファイルを開きます。
4-1-1.CanvasPanel 12:59
パネル ＞ CanvasPanelをドラッグアンドドロップします。
4-1-2.背景画��(携帯電話ボディ) 13:07
背景画を作ります。
一般 ＞ Imageをドラッグアンドドロップします。
名前を「Image_BG1」にします。
アンカーは、中央上に設定します。
位置X 0
位置Y 30
Size X: 650にして
Size Y: 1000にして
Alignment X: 0.5にすると中央に配置できます。
アピアランス＞Brush＞Image
背景画像を指定します。
一般 ＞ Imageをドラッグアンドドロップします。
名前を「Image_BG1」にします。
アンカーは、中央上に設定します。
位置X 0
位置Y 30
Size X: 650にして
Size Y: 1000にして
Alignment X: 0.5にすると中央に配置できます。
アピアランス＞Brush＞Image
背景画像を指定します。
4-1-3.背景画��(携帯電話画面) 13:45
もう一つImageをドラッグアンドドロップします。
名前を「Image_BG2」にします。
アンカーは、中央上に設定します。
位置X 0
位置Y 85
Size X: 550にして
Size Y: 900にして
Alignment X: 0.5にすると中央に配置できます。
アピアランス＞Brush＞Tint
819DBEFF
色を指定します。
名前を「Image_BG2」にします。
アンカーは、中央上に設定します。
位置X 0
位置Y 85
Size X: 550にして
Size Y: 900にして
Alignment X: 0.5にすると中央に配置できます。
アピアランス＞Brush＞Tint
819DBEFF
色を指定します。
4-1-4.Vertical Box 14:18
パネル ＞ Vertical Boxをドラッグアンドドロップします。
会話トークパーツ用ウィジェットを格納するBoxを作成します。
Vertical Boxは、縦方向ボックス ウィジェットは、
子ウィジェットを自動的に縦方向に配置できるレイアウトパネルです。
Vertical：垂直
名前を[Vertical Box]にします。
その横のisVariableを有効にします。
アンカーは、中央上に設定します。
位置Y 200
Size X: 450にして
Alignment X: 0.5にすると中央に配置できます。
Alignment：並べる、整列、配列
会話トークパーツ用ウィジェットを格納するBoxを作成します。
Vertical Boxは、縦方向ボックス ウィジェットは、
子ウィジェットを自動的に縦方向に配置できるレイアウトパネルです。
Vertical：垂直
名前を[Vertical Box]にします。
その横のisVariableを有効にします。
アンカーは、中央上に設定します。
位置Y 200
Size X: 450にして
Alignment X: 0.5にすると中央に配置できます。
Alignment：並べる、整列、配列
4-2.ブループリント 14:56
グラフに移動します。
カスタムイベント
addTolkBoxノードを作成します。
カスタムイベント
addTolkBoxノードを作成します。
4-2-1.データテーブルの読み込み 15:09
Get DataTable Rowノードを配置します。
DataTableピンに作成したデータテーブル「dt_TalkDataTable」を指定します。
データテーブルの行を指定する変数を作成します。
変数名counter Integer型を作成します。
コンパイルしてデフォルト値を「1」にします。
Row Nameピンに直接つなげないので
変数counterからTo stringノードを配置します。
To stringノードをRow Nameピンにつなぎます。
Out Rowピンを右クリックして構造体ピンを分割を選択します。
4-2-2.子ウィジェットの表示 15:58
Vertical Boxに、子ウィジェットである会話トークパーツ用ウィジェットが表示されるようにします。
Get DataTable Rowノードに、Create Widgetノードにつなぎます。
Classに会話トークパーツ用ウィジェット
「wb_TalkParts」を指定します。
Create Widgetノード内の変数v_Talk Bodyピンと
Get DataTable RowノードのOut Row Talk Bodyピンにつなぎます。
同じようにその他ピンもつないでいきます。
Get VerticalBoxを配置して、
Add Child to Vertical Boxノードを配置します。
それをCreate Widgetノードにつなぎます。
Get DataTable Rowノードに、Create Widgetノードにつなぎます。
Classに会話トークパーツ用ウィジェット
「wb_TalkParts」を指定します。
Create Widgetノード内の変数v_Talk Bodyピンと
Get DataTable RowノードのOut Row Talk Bodyピンにつなぎます。
同じようにその他ピンもつないでいきます。
Get VerticalBoxを配置して、
Add Child to Vertical Boxノードを配置します。
それをCreate Widgetノードにつなぎます。
4-2-3.子ウィジェット間の隙間 16:45
Vertical Box内の子ウィジェット間に隙間を空けます。
子ウィジェットの周囲に境界を張りたいので
子ウィジェットのReturnValueより
Set Paddingノードを配置します。
パディングは、側面周囲に作られる境界のことを指します。
例えば、上の画像のボックス ボタンでは、
Normal Padding はボタンの背景画像のボーダーのことです。
これを適用すると、ボタンのコンテンツがボタンのボーダーと共に点滅して表示されます。
Pressed Padding は、Normal Padding と同じですが、ボタン押下時に適用されるパディングを指します。
In Paddingピンより
Make Marginノードを配置します。
今回は上下にTop、Bottonに5.0を設定します。（好みで！）
4-2-4.左右の振り分け 17:16
子ウィジェットを左右に振り分けます。
Add Child ノードの Return ValueよりSet Horizontal Alignmentノードを配置します。
Horizontal：水平
Alignment：並べる、整列、配列
Set Paddingノードにつなぎます。
In Horizontal Alignmentのプルダウンリストには
Fill、Left、Center、Rightが選択できます。
このピンよりSelectノードを配置します。
SelectノードのOption 0と1のそれぞれで Fill、Left、Center、Rightが選択できるようになります。
Indexピンには型がいくつか選べるようになっています。
Get DataTable RowノードのOutRow IsLeftピンをSelectノードのIndexピンにつなぎます。
型を自動で選択してくれます。
OptionがFalse、Trueに変更されるので、
FalseピンにRightを指定、
TrueピンにLeftを指定します。
Add Child ノードの Return ValueよりSet Horizontal Alignmentノードを配置します。
Horizontal：水平
Alignment：並べる、整列、配列
Set Paddingノードにつなぎます。
In Horizontal Alignmentのプルダウンリストには
Fill、Left、Center、Rightが選択できます。
このピンよりSelectノードを配置します。
SelectノードのOption 0と1のそれぞれで Fill、Left、Center、Rightが選択できるようになります。
Indexピンには型がいくつか選べるようになっています。
Get DataTable RowノードのOutRow IsLeftピンをSelectノードのIndexピンにつなぎます。
型を自動で選択してくれます。
OptionがFalse、Trueに変更されるので、
FalseピンにRightを指定、
TrueピンにLeftを指定します。
4-2-5.次の行へ 18:09
最後に
変数Counterを1つ増やして終了します。
変数Counterを1つ増やして終了します。
4-2-6.会話トークの表示 18:35
特定のキーを押すと
レイアウト用ウィジェット「wb_Layout」の
カスタムイベントaddTolkBoxノードを呼び出すようにします。
Enterキーイベントノードを配置します。
カスタムイベントaddTolkBoxノードを配置します。
Enterキーイベントノードにつなぎます。
5.レベルブループリント 18:54
このレベルでレイアウト用ウィジェットが表示されるようにします。
レベルブループリントを開きます。
イベントBeginPlayノードにCreate Widgetノードにつなぎます。
Classにレイアウト用ウィジェット
「wb_Layout」を指定します。
Add To Viewportをつなぎます。
レベルブループリントを開きます。
イベントBeginPlayノードにCreate Widgetノードにつなぎます。
Classにレイアウト用ウィジェット
「wb_Layout」を指定します。
Add To Viewportをつなぎます。
6.古い会話トークの削除 19:32
画面が埋まると古い会話トークが消えて、新しい会話トークが下に表示されるようにします。
�…媛辰気譴觧劵Ε�ジェットの『高さ』を調べます。
�∋劵Ε�ジェットが追加されるたびに『高さ』を足します。
��『高さ』の合計がしきい値を超えたら画面が埋まったと判断。
�ど充┐気譴討い觝脳絨未了劵Ε�ジェットを削除します。
�ァ惺發機戮旅膩廚�ら削除した子ウィジェットの『高さ』を引きます。
�…媛辰気譴觧劵Ε�ジェットの『高さ』を調べます。
�∋劵Ε�ジェットが追加されるたびに『高さ』を足します。
��『高さ』の合計がしきい値を超えたら画面が埋まったと判断。
�ど充┐気譴討い觝脳絨未了劵Ε�ジェットを削除します。
�ァ惺發機戮旅膩廚�ら削除した子ウィジェットの『高さ』を引きます。
6-1.会話トークパーツ用ウィジェット 20:03
�…媛辰気譴觧劵Ε�ジェットの『高さ』を調べます。 20:06
トークパーツ用ウィジェット「wb_TalkParts」を開きます。
Force Layout Prepassノードを配置します。
イベントConstructノードにつなぎます。
Force Layout Prepassノードは、
ウィジェットのサイズをキャッシュします。
CanvasPanel_Talkのサイズが知りたいので、
Targetにつなぎます。
Get Desired Sizeノードを配置します。
ウィジェットの設定サイズを取得します。
CanvasPanel_TalkをTargetにつなぎます。
Break Vector 2Dノードをつないでいきます。
Break Vector 2Dノードは、2DベクターをXとYに分解します。
イベントディスパッチャーを設定します。
イベントディスパッチャーとは、
イベントをディスパッチャー(送信)するもので、イベントを他のブループリントのイベントから行えるようにしたものです。
イベントの続きを他のブループリントのイベントに渡すもの
イベントディスパッチャーの横の「+」で追加します。
名前を「ed_Height」にします。
詳細パネルのインプットの「+」で
変数名Height フロート型を追加します。
変数を追加します。
一度コンパイルします。
ドラッグアンドドロップして「呼び出す(Call)」で配置します。
Force Layout Prepassノードにつなぎます。
Break Vector 2Dノード[Yピン]をCall_ed_sendHeightノードの
Heightピンにつなぎます。
コンパイルして保存します。
6-2.レイアウト用ウィジェット 21:34
レイアウト用ウィジェット「wb_Layout」を開きます。
イベントディスパッチャー「ed_Height」をバインドします。
Create WidgetノードのReturn Valueより
Bind Event to Ed_Heightノードを配置します。
Create Widgetノードの直ぐ後ろにつなぎます。
イベントディスパッチャー「ed_Height」をバインドします。
Create WidgetノードのReturn Valueより
Bind Event to Ed_Heightノードを配置します。
Create Widgetノードの直ぐ後ろにつなぎます。
�∋劵Ε�ジェットが追加されるたびに高さを足します。 22:07
Bind Event to Ed_HeightノードのEventピンから
カスタムイベント「ev_Height」ノードを作成します。
変数名 AllHeight フロート型を追加します。
デフォルト値「0」
変数AllHeightは、子ウィジェットが追加されるたびに加算される『高さ』の合計です。
変数 AllHeight Setノードをカスタムイベント「ev_Height」につなぎます。
変数 AllHeightに子ウィジェットの高さ変数Heightを加算します。
『高さ』の合計 + 追加された子ウィジェットの『高さ』 = 『高さ』の合計
変数 AllHeight Getノードを配置して、
加算式「+」を追加します。
カスタムイベント「ev_Height」ノードのHeightピンを
加算式「+」につなぎます。
また、子ウィジェット間の隙間「10.0」も忘れずに足します。
加算式「+」を変数 AllHeight Setノードにつなぎます。
追加された子ウィジェットの『高さ』を覚えておく必要があるので、
変数名RmoveHeightCashe フロート型を配列で追加します。
変数RmoveHeightCashe・・・追加された子ウィジェットの『高さ』を一つ一つ記憶する変数
変数RmoveHeightCasheを配置します。
Add Item ノードをつなぎます。
追加された子ウィジェットの『高さ』に隙間の高さ「10.0」を足して
Add Item ノードにつなぎます。
変数RmoveHeightCasheはAdd Item ノード受け取った変数Height+隙間を
一つ一つ記憶してくれます
�Ｂ�された『高さ』の合計がしきい値を超えたら画面が埋まったと判断。 23:54
Branchノードをつなぎます。
高さの合計 変数AllHeightより
条件式大なり＞をつなぎます。
下のピンにしきい値「750」を指定します。
BranchノードのConditionにつなぎます。
Trueの場合
高さの合計がしきい値より大きい時は、最上位の子ウィジェットを削除します。
False
高さの合計がしきい値より小さい時は、最下位に子ウィジェットを追加します。
高さの合計 変数AllHeightより
条件式大なり＞をつなぎます。
下のピンにしきい値「750」を指定します。
BranchノードのConditionにつなぎます。
Trueの場合
高さの合計がしきい値より大きい時は、最上位の子ウィジェットを削除します。
False
高さの合計がしきい値より小さい時は、最下位に子ウィジェットを追加します。
�ど充┐気譴討い觝脳絨未了劵Ε�ジェットを削除します。 24:35
カスタムイベント「ev_removeTalk」ノードを作成します。
BranchノードのTrueにカスタムイベント「ev_removeTalk」ノードをつなぎます。
VerticalBoxを配置します。
VerticalBoxより
Remove Child Atノードを配置します。
Remove Child Atノードは、インデックスで子を除去します。
Indexピンは常に最上位の子ウィジェットを削除するので「0」を指定します。
�ァ惺發機戮旅膩廚�ら削除した子ウィジェットの『高さ』を引きます。 25:12
『高さ』の合計 - 削除した子ウィジェットの『高さ』 = 『高さ』の合計
変数AllHeight setノードをつなぎます。
削除した子ウィジェットの『高さ』はキャッシュしている変数より取得します。
変数RmoveHeightCashe Getノードを配置します。
変数RmoveHeightCashe GetノードよりGet Itemノードをつなぎます。
下のピンは「0」を指定します。
それを変数AllHeightから引きます。
変数AllHeight setノードにつなぎます。
削除した子ウィジェットの『高さ』をキャッシュから削除する必要があるので、
Remove Index ノードをつなぎます。
変数RmoveHeightCasheをつなぎます。
下のピンには削除インデックスを指定するので「0」を指定します。
『高さ』の合計がしきい値より小さくなるまで、
子ウィジェットの削除を繰り返します。
「750」
最下位に新しい子ウィジェットを追加します。
変数AllHeight setノードをつなぎます。
削除した子ウィジェットの『高さ』はキャッシュしている変数より取得します。
変数RmoveHeightCashe Getノードを配置します。
変数RmoveHeightCashe GetノードよりGet Itemノードをつなぎます。
下のピンは「0」を指定します。
それを変数AllHeightから引きます。
変数AllHeight setノードにつなぎます。
削除した子ウィジェットの『高さ』をキャッシュから削除する必要があるので、
Remove Index ノードをつなぎます。
変数RmoveHeightCasheをつなぎます。
下のピンには削除インデックスを指定するので「0」を指定します。
『高さ』の合計がしきい値より小さくなるまで、
子ウィジェットの削除を繰り返します。
「750」
最下位に新しい子ウィジェットを追加します。
7.サウンドの追加 26:35
会話トークが表示されたら音がなるようにします。
Set Horizontal Alignmentノードの後に
Play Sound 2Dノードを配置します。
Soundピンにサウンドウェーブを指定します。
Click_on_Button
コンパイルして保存します。
では、起動してみましょう。
Set Horizontal Alignmentノードの後に
Play Sound 2Dノードを配置します。
Soundピンにサウンドウェーブを指定します。
Click_on_Button
コンパイルして保存します。
では、起動してみましょう。
ざっくりまとめ 27:23
設定ファイル 27:56
- カテゴリ：
- ゲーム
- Unreal Engine