変換関数：To Text (Int) と To Text (Double)

ToText(Int) と ToText(Double) の変換関数を使用して、ウィジェットに整数変数または浮動小数点変数を渡します。 「ToText」変換関数は、 整数 型または浮動小数点 float 型の変数を、ウィジェットに表示できる テキスト 型に変換します。 変数が非テキスト型のままでは、ウィジェットに表示されません。

以下の 2 つの例で、これら 2 つの変換関数の使用について説明します。

• To Text (Int) の例：プレイヤーが多数のベーコンを集めると、カスタム Tracker ウィジェットがプレイヤーの進行状況を追跡します。

• To Text (Double) の例：カスタム ポップアップ ダイアログ ウィジェットが、トリビア質問に対して予想される答えのポップアップを開きます。 時間切れになる前に答えが選択されなかった場合、カウントダウン タイマーを使用してタイマーを閉じます。

To Text (Int)

この例では、カスタム Tracker ウィジェット を作成して、プレイヤーが集めたベーコンの数を追跡します。 「 UI ポップアップ」ドキュメント の手順に従って ユーザー ウィジェット を作成し、ウィジェット名を「 Tracker_Widget 」に変更します。

ウィジェットの設定

Tracker_Widget を設定するには、以下に示す順に、次のウィジェットを [Hierarchy] パネルに追加します。

• オーバーレイ

• Image (Overlay の下にネストし、名前を「Background」に変更します。)

• Stack Box (Overlay の下にネストします。)

• Text Block (最初の Stack Box の下にネストします。これがユーザーの Tracker のタイトル "{Tracker Title}" になります。)

• Stack Box (最初の Stack Box の下にネストします。)

• 2 X Text Block (2 番目の Stack Box の下にネストします。 最初のテキスト ブロックの名前を「CurrentValue "{Current}"」に、2 番目のテキスト ブロックの名前を「Flavor Text "Bacon Collected"」に変更します。)

プレイヤーが集めた現在のベーコンの数を取り込むテキスト ブロックが必要です。 TrackerTitle テキスト ブロック を含めるように Tracker_Widget を設定すると、Name プロパティをビューモデルから 最新 のテキスト ブロックに渡すことができます。

同じようにウィジェットを設定する

プレイヤーがベーコンを集めると、ゲーム内のプレイヤーにはこのように見えます。

変換関数の設定

To Text (Int) 変換関数を使用すると、CurrentValue テキスト ブロックにより、現在のベーコンの数を Tracker の仕掛けに渡すことができます。

To Text (Int) 変換関数を設定するには、View Bindings を作成して、ウィジェットで設定した値を Tracker の仕掛け にバインドします。

1. [Window (ウィンドウ)] > [View Bindings (ビューバインディング)] を開きます。

   

2. ウィジェットで [CurrentValue] テキスト ブロックを選択し、[View Bindings] ウィンドウで [+Add Widget (+ウィジェットを追加)] をクリックします。

   

3. View Bindings の左側のボックスで、[CurrentValue] > [Text] を選択します。 これでテキストが、CurrentValue テキスト ブロックの Text プロパティに代入されるようになります。

   

4. 右側のボックスで、フィールド内をクリックして [Conversion Functions] > [To Text (Integer)] を選択します。 CurrentValue テキスト ブロックのバインディングに多数のフィールドが表示されます。

   各フィールドの機能の詳細については、「To Text (Int/Double) のプロパティ」セクションを参照してください。

   これで、値を取り込み、テキスト型の変数を返して CurrentValue テキスト ブロック の Text プロパティ に代入する、To Text (Integer) と呼ばれる変換関数が実行されます。

   

5. 値 の隣にある チェーン アイコン を選択して、[MVVM_UEFN_Tracker] > [Value] を選択します。

   

Tracker ビューモデル の 値 の変数が To Text (Integer) 変換関数に代入されます。 これにより、値の変数が Text プロパティとして出力され、次に、CurrentValue テキスト ブロックの Text プロパティに代入されます。

最終結果

新しいウィジェットを使用するには、Tracker の仕掛けをプロジェクトにドラッグしてから、以下の手順を実行します。

1. Tracker の仕掛けの [Details (詳細)] パネルで、[HUD Widget] フィールド をユーザーの Track_Widget に設定します。

   トラッカーを使用してスコアの統計データを追跡し、レベル内のコレクティブル オブジェクトを使用してこの機能をテストできます。

プレイヤーがゲーム内でベーコンを集めるたびに、トラッカーは各ベーコンに設定されたスコア値を自動的に増やします。

To Text (Double)

この例では、「 UI ポップアップ 」ドキュメントの モーダル ダイアログ バリアント ワークフローを使用して、 Trivia_Widget と呼ばれるカスタム ポップアップ ダイアログ ウィジェットを作成します。 Trivia_Widget には、時間切れになる前に答えなければならないフォートナイトのトリビア質問が表示されます。

ウィジェットの設定

1. コンテンツブラウザ で右クリックして、コンテキスト メニューを表示します。

   

2. コンテキスト メニューから、[User Interface] > [Widget Blueprint] > [Modal Dialog Variant (モーダル ダイアログ バリアント)] を選択します。

   

3. ウィジェットを開いて、画像に表示されている順に、次のコンテナを [Hierarchy (階層)] パネルに追加します。

   1. オーバーレイ

   2. Image (画像)

   3. 3 X Stack Box

   Overlay には、親コンテナとしてウィジェット全体が格納されます。 次に、背景に Image ウィジェット、最後に複数のネストされている Stack Box を使用して、テキストやボタンなどのすべてのコンテンツを含めます。

   

4. 以下の画像のように、テキスト ブロック と ボタン を Stack Box に追加します。

   

   TimeLeft と TimeFlavorText のテキスト ブロックを Stack Box でラップすると、ポップアップ ダイアログ ビューモデルでのタイムアウトの残り時間変数へのビューバインディングにより、TimeLeft が動的に更新されます。

   

   既存の構造でウィジェットをコンテナでラップする必要があることが判明しても、ウィジェット全体をやり直す必要はありません。 ウィジェットを右クリックして、[Wrap With… (…でラップ)] または [Replace With… (…で置き換え)] を選択すると、コンテナ内に新しいパネルを簡単に追加できます。

   

5. 2x2 グリッド としてボタンを追加します。 ボタンは 2x2 グリッドにあるため、Stack Box ではなく、Uniform Grid Panel を使用します。 [Container_Buttons] を右クリックして、[Replace With…] > [Uniform Grid Panel] を選択します。

   Uniform Grid Panel では、グリッド パターンで子ウィジェットを簡単に整理できます。 また、各子のスロット パディングも簡単に設定できます。

   

6. [Hierarchy] で 各ボタン を個別に選択し、[Main Designer View] でボタンを強調表示します。

7. [Main Designer View] で、ボタンの周りの 矢印 をクリックして、特定の横列や縦列 (ボタンを配置したい場所) にボタンを移動します。

   以下の例では、ボタンは左右、および上下のレイアウトで配置されています。 ボタンは、Button1、Button2、Button3、Button4 に名前が変更されています。

   

8. [Details] パネルの [Child Layout] > [Slot Padding] で、Container_Buttons を 16px に設定します。

   ユーザー独自の設計に合わせてこの値を微調整します。

   

9. Content Stack Box で、後で閉ボタンとして使用する ミュート ボタン を追加します。

   

10. コンテンツが読みやすくなるように、コンテナ間にスペースを追加します。 それにはまず、スペースを入れたい場所に Image ウィジェットを追加し、[Details] パネルで以下のオプションを使用します。

    1. [Brush] > [Draw As] = [None]

    2. 画像サイズ (X と Y の値) = 35 (設計により増減可能)

    これは、パディングを使用せずに UI 要素間のスペースを処理し、簡単に管理できる方法です。

    

    

    

    画像として描画する

    なしとして描画する

11. ボタンのテキストを編集して、各ボタンを識別しやすくします。

    

12. フォートナイト で「 UI 」フォルダを開いて、 M_UI_Rectangle の マテリアル インスタンスを作成 し、トリビア ポップアップの背景マテリアルを作成します。

    

13. UMG からユーザー ウィジェットを開いて 背景画像 ウィジェットを選択し、[Brush] > [Image] フィールドで、作成したばかりのマテリアル インスタンスを選択します。

    

14. Content Stack Box で 32px のパディングを追加して、ポップアップを読みやすくします。

    

変換関数の設定

1. [Window (ウィンドウ)] > [View Bindings (ビューバインディング)] を開きます。

   

2. [Hierarchy] パネルから、TimeLeft テキスト ブロック ウィジェットを選択します。 [View Bindings] ウィンドウで、[+Add Widget (+ウィジェットを追加)] をクリックします。

   

3. 左側のボックスで、[TimeLeft] > [Text] を選択します。 これにより、何らかの値が TimeLeft の Text プロパティに代入されます。

   

4. 右側のボックスで、[CreativeModalDialogViewmodel] > [Remaining Time for Timeout (タイムアウトの残り時間)] を選択します。 次に、[Conversion Functions] > [To Text (Double)] を選択します。

   変数の上にカーソルを乗せると、この値が浮動小数値であることがわかります。 変換関数の To Text (Double) により、Double/ Float 値 を テキスト変数 に変換して UI で表示させることができます。

   

   [View Binding] ウィンドウに多数のフィールドが表示されます。

   これらのフィールドの詳細については、ドキュメントの「To Text (Int / Double) のプロパティ」セクションを参照してください。

5. 値 の隣にある チェーン アイコン を選択して、[CreativeModalDialogViewmodel] > [Remaining Time for Timeout] > [Select] を選択します。

   

タイムアウトの残り時間変数が To Text (Double) 変換関数に代入されると、浮動小数値が UI で読みやすいテキスト形式で出力されます。 ユーザーの UI には、ポップアップ ダイアログ ウィジェットが閉じるまでの正確な残り時間が表示されます。

最終結果

ポップアップ ダイアログ デバイスをプロジェクトにドラッグして、以下の手順を実行します：

1. ポップアップ ダイアログの仕掛けで、作成した Trivia_Widget に テンプレート オーバーライド クラス を設定します。

2. 「ダイアログのタイムアウトを使用」を確認します。

3. タイムアウトまでの時間を 6 秒 (または、ポップアップが表示されてから読み終えるのに十分な時間) に設定します。

これで、ポップアップ ダイアログ ウィジェットが表示されたときに、ポップアップ ウィンドウ内でタイマーが刻々と時を刻むようになりました。

To Text (Int/Double) のプロパティ

To Text (Int) 変換関数には使用できるフィールドが多数あります。 To Text (Double) は、特に指定のない限り、同じフィールドを共有します。

• Value - 変換関数に代入される整数変数。

• Always Sign - その値が正の値か負の値かを示す、正または負の符号をテキスト出力のプレフィックスに追加します。 値が正の場合、「+{Value}」としてテキストを出力します。 値が負の場合、「-{Value}」としてテキストを出力します。

• Use Grouping - 値がグループ化される (ただし、値が 1000 を超える場合は区切られる) かどうかを決定します。 グループ化のインジケータとして、ユーザーのコンピュータの文化的に高感度な設定を使用します。 オンにすると、「1,000」としてテキストを出力します。 オフにすると、「1000」としてテキストを出力します。

• Minimum Integral Digits - テキストで表示される最小の整数桁数。 デフォルト値は「1」です。 最小値を「1」より大きい数に設定した場合、最小整数桁数よりも少ない桁数の整数には「0」を表示します。 たとえば、最小整数桁数が「3」に設定されていて現在の値が「5」の場合、「005」としてテキストを出力します。

• Maximum Integral Digits - テキストで表示される最大の整数桁数。 デフォルト値は「354」です。 これにより、テキストが最大の整数桁数のみを表示するよう制限されます。

• Minimum Fractional Digits (To Text (Double) でのみ使用可能) - 小数点以下で表示される最小桁数。 デフォルト値は「0」です。

• Maximum Fractional Digits (To Text (Double) でのみ使用可能) - 小数点以下で表示される最大桁数。 デフォルト値は「3」です。

• Rounding Mode (To Text (Double) でのみ使用可能) - Float/Double 値を最も近い数に切り上げる方法を決定します。