【UE4・UE5】数字のみを受け付けるテキストボックスを作る


はじめに

タイトルにある通り数字のみを受け付けるテキストボックスを解説します。
パスワードやキャラクターの年齢などで意図しない入力を除外できます。
数字以外にも、独自のデータテーブルを作成することで特定の文字列のみを受け付けるようにもできますので参考にしてみてください。

4.26.2で解説します。UE5以降アプデによりノード等が変わる可能性があることをあらかじめご了承ください。
またその場合はコメント等で共有していただけると幸いです。

前半からTPSサンプルをベースにウィジェット作成から解説しますので、
実装内容だけみたいぜッ!というかたは右の【除外文字の実装】の項目へ移動してください。

事前準備

プロジェクトTPSサンプルを新規作成し、ThirdPersonExampleMapを開きましょう。

①ウィジェットの作成

コンテンツの任意の場所にウィジェットブループリントを作ります。
今回名前をWBP_InputUIにしました。

作成したウィジェットブループリントを開き、
パレット→インプット→TextBoxを適当な位置にドラック&ドロップします。

いい感じにスケールや位置を調整します。

テキストボックスを選択状態でスクロールすると一番下にイベントという項目があります。
この OnTextChangedの+を押しましょう。

グラフに移動するのでそこにPrintStringノードにつなぎます。

②ウィジェットの表示

ThirdPersonCharacterのBPを開いて以下のようにノードを組みます。

これで実装完了です。
実行してみて入力できるかやってみましょう。

入力を行うと右上にログが出力されると思います。
編集するたびに文字列が更新されているのが確認出来たら除外文字の実装を行っていきましょう。

除外文字の実装

お待たせしました。本題です。
上記の工程をやっている方はWBP_InputUIのグラフ画面へ、
独自実装の方は変更するテキストボックスのOnTextChangedのイベントに実装します。

とりあえず以下のようにノードを組んでみましょう。

この状態で実行すると数字しか受け付けなくなります。

解説すると、入力された文字の一番最後の文字を取得しこの文字がIsNumberic(数字かどうか?)のノードで判定を行っています。
この判定で数字であれば文字列に加え、そうでなければ除外するように組んであります。

この判定条件を変更することで数字を除外したり独自のデータを用意することで
その文字以外が入力されたらorその文字が入力されたら除外することができます。
詳しくはIs~のノードで検索してみてください。

さいごに

今回は入力関連の実装を解説しました。
みなさんの開発の助けになればうれしいです。

今後UE4や5向けの記事をかいていく予定です。
皆さんの応援が投稿のモチベーションになりますので、
コメントやSNS等で共有などしていただけるとありがたいです。
それではよきゲーム開発を。