仮想キーボードのインタラクションを作成する

UMG で 3D 仮想キーボードを作成し、インタラクションする方法を説明します。

Choose your operating system:

Windows

macOS

Linux

プレイヤーが指定された文字を入力する 3D キーパッドや仮想キーボードの作成を検討しているならば、 WidgetInteraction コンポーネントと Widget コンポーネントを組み合わせて行うことができます。 Widget Interaction コンポーネントは、どのボタンがクリックされるか、および表示を処理するアクタの Widget コンポーネントに文字を送るプロセスを容易にします。

この操作ガイドでは、インタラクション可能なキーパッドを作成し、テキスト ボックスへのエントリを提供します。また操作ガイドの中で、フォーカス可能なウィジェットとそうでないウィジェットを決定します。 これは、別のボタンが押された時でもプレイヤーが数字を入力するテキストボックスがプレイヤー フォーカスを失わないために重要です、

このガイドの最後まで進むと、 3D ゲーム ワールド内で表示され、インタラクション可能なキーパッドとディスプレイを作成することができます。

このガイドの目的のために、 Blueprint First Person テンプレート プロジェクトを使用します。

1 - キャラクターを設定する

最初のステップは、Widget Interaction コンポーネントで文字を設定し、 UI を表示するアセットを作成します。

  1. Content > FirstPersonBP > Blueprints フォルダ内で FirstPersonCharacter ブループリントを開きます。

  2. アタッチされた WidgetInteraction コンポーネントを Sphere に追加します。 [Details (詳細)] パネルで、 Location をゼロにして、 [Show Debug (デバッグを表示)] にチェックを入れます。

    keypad01.1.png

    Widget Interaction コンポーネントは、プレイヤーが銃を向けている方向を指し示すようになり、それはデバッグ マーカーによってゲーム内で示されます。

  3. Event Graph で、 Right Mouse Button イベントを追加し、 Widget Interaction コンポーネントをドラッグします。

  4. Widget Interaction からピンを引き出して Press Pointer Key ノードと Release Pointer Key を追加します。両方のキーを Left Mouse Button に設定します。Right Mouse Button の Pressed ピンと Released ピンをそれぞれの Pointer Key ノードにつなぎます。

    Keypad02.jpg

    ウィジェットは、マウスの左ボタン クリックまたはタッチ コントロールを介してマウス / タッチのインタラクションに反応します。 Press Pointer Key 関数を使ってこれをシミュレートすることができます。この例では、 Right Mouse Button を使ってマウスの左ボタン クリックをシミュレートします。ただし、ゲームパッド ボタン、または Motion Controller Trigger を押して、Press Pointer Key 関数を発行することができます。

  5. コンテンツ ブラウザ Actor ベースの Blueprint クラス を 2 つ作成し、それぞれ「 Keypad 」と「 KeypadDisplay 」と名前をつけます。次に「 KeypadWB 」 と「 KeypadDisplayWB 」いう名前の Widget Blueprints を追加します。

    Keypad03.jpg

キャラクターがワールドのウィジェットとインタラクションできるようになりました。次に、インタラクティブなウィジェットを設定します。

2 - Widget ブループリントの設定

このステップでは、インタラクティブな UI Widget のレイアウトを作成し、ボタンをクリックすると何が起こるかをスクリプティングします。

  1. KeypadDisplayWB ブループリントを開いて、 キャンバス パネル を削除します。Hierarchy で TextBox のある Size Box をします。

    keypad04a.1.png

  2. この Size Box に対して、プレビューを Desired on Screen に設定し、 Width Height 100x50 にオーバーライドします。

    Keypad04.png

  3. この Text Box Hint Text 1212 に設定し、 Font Size 28 に調整します。

    keypad05.1.png

    例えば、このプレイヤーはキーパッドを使って 1212 というテキストを入力し、エントリが成功したことを示さなければなりませんが、お好きな値を使用することができます。

  4. KeypadDisplayWB ブループリントを コンパイル して、 保存 します。

  5. KeypadWB ブループリントを開いて、 キャンバス パネル を削除します。それぞれ「 0 」、「 1 」、「 2 」という文字のついた 3 つのボタンで Hierarchy をセットアップします。

    Keypad06.png

    階層の各ボタンの上で F2 を押して、各ボタンの名前を変更することができます。

  6. テキストを含む 2 つの Button を含む 2 つめの Horizontal Box を追加します。テキストは片方を「 Del 」、もう片方を「 Ent 」に設定します。

    Keypad07.png

    キーパッドには、数字ボタンが 3 つ、そしてエントリの削除 ( Del ) またはコミット ( Ent ) の 2 つがあります。

  7. Ctrl キーを押しながら各ボタンを選択し、 [Is Focusable] オプションのチェックを外します( False に設定します。

    Keypad08.png

    この設定が機能するには、インタラクションする他のウィジェットが Keypad Display ウィジェットからフォーカスを奪わないようにします。これらを true の設定のままにすると、あるボタンをクリックした時に Keypad Display からフォーカスが奪われて、そのボタンにシフトします。キー押下と値を Keypad Display に渡さないようになります。

  8. イベント グラフ で、それぞれのボタンに OnClicked イベントを追加します。

    Keypad09.png

  9. 2 つの Variable を作成します。 CharToSend という String 型と、 WidgetInteraction という WidgetInteraction コンポーネント です。

    Keypad10.png

  10. Alt を押しながら CharToSend を各 OnClicked イベントにドラッグします。変数値を前に設定したボタンのテキスト値、つまり「 0 」、「 1 」、「 2 」に設定します

    Keypad11.png

  11. Ctrl を押しながら、 WidgetInteraction をドラッグします。ピンを引き出して Send Key Char ノードを追加します。 CharToSend 変数と OnClicked イベントにつなぎます。

    Keypad12.png

    ここでは、 Send Key Char 関数を使用します。Slate の Text Box は、直接送られるキーを取得しないからです。例えば、 A キーが押した時、Slate 関数はキーが押されたことを認識せず、A を送りません。代わりに Slate 関数は Send Char をリッスンするので下位レベルのシステム オペレーティング コードが、A キーが押されたときに Shift が押されたか、または A が押されたときに Caps Lock がオンになっているかを判断することができます。

  12. Del OnClicked Event から、 WidgetInteraction 変数を使用して Backspace にキーを設定します。 WidgetInteraction 変数を Press and Release Key ターゲットにつなぎます。

    Keypad13.png

  13. EnterPressed という Event Dispatcher を作成し、それを OnClicked(Ent) から呼び出します。

    Keypad14.png

  14. KeypadWB ブループリントを コンパイル して、 保存 します。

Widget ブループリントがキーパッドとキーパッドのディスプレイを表示するように設定されました。

3 - Actor ブループリントを設定する

次に、Keypad アクタのスクリプト処理を開始する前に Keypad and Keypad Display アクタを設定する必要があります。

  1. KeypadDisplay ブループリントを開きクラスを [Draw at Desired Size] に設定した [KeypadDisplayWB] を追加し Draw at Desired Size にチェックを入れます。

    keypad15.1.png

    [Draw at Desired Size] は、レンダー ターゲットを Widget ブループリント内で必要なサイズに簡単に自動的にマッチさせる方法です。

  2. KeypadDisplay ブループリントを コンパイル して、 保存 します。

  3. Keypad ブループリントを開き、クラスを KeypadWB に設定した Widget コンポーネントを追加し Draw at Desired Size にチェックを入れます。この Widget コンポーネントの [Window Focusable] オプションのチェックを外します。

    keypad16.1.png

    このコンポーネントによって、Keypad Display ウィジェットからフォーカスが外されないようにするため、チェックを外す必要があります。

  4. WidgetInteraction コンポーネントを追加し、 Enable Hit Testing のチェックを外します (false に設定します)。

    keypad17.1.png

Widget Interaction コンポーネントによって、プレイヤー キャラクターで WidgetInteraction コンポーネントへの参照を得る必要がなくなります。カーソルを乗せても影響しないように Hit Testing を無効にすることができます。

WidgetInteraction コンポーネントは作成時にデフォルトで Virtual User Index 0 に設定されており、すべてのコンポーネントは Virtual User Index ID を使用して通信します。プレイヤー キャラクターの WidgetInteraction コンポーネントも Virtual User Index 0 を使用するので、参照の取得と同じことになります。

4 - Keypad アクタをスクリプト化する

この最後のセクションでは、Widget ブループリントを Widget コンポーネントとしてアクタに追加し、プレイヤーが Enter ボタンをクリックすると何が起こるかを定義しします。コードが正しければ Success と画面に表示され、コードに誤りがあれば Wrong Code と表示されるようにゲーム内のテストも設定します。

  1. Keypad Blueprint イベント グラフで、 Event Begin Play から引き出して Cast to KeypadWB ノードを追加します。その後で、 Widget コンポーネントを追加し、ピンを引き出して Get User Widget Object を追加します。Return Value Cast Object** ピンにつなぎます。

    Keypad18.png

  2. As Keypad WB ピンから Set Widget Interaction ノードを追加し、 Widget Interaction コンポーネントを追加し、 Set Widget Interaction につなぎます。

  3. As Keypad WB ピンを引き出して、 Assign Enter Pressed を呼び出します。これにより、 Enter Pressed Custom Event を作ります。

    Keypad19.png

    Enter ボタンをクリックすると、この Custom Event が呼び出されます。これを使って、正しいコードが入力されたかをチェックすることができます。

  4. Keypad Display Object Reference 変数を作成して TargetDisplay と名前を付けます。 Instance Editable にチェックを入れます。

    keypad20.1.png

  5. TextArray 」と呼ばれる Text 変数をします。ブループリントを コンパイル して Default Value 0 に設定します。

    keypad21.1.png

  6. Ctrl キーを押しながら、 TargetDisplay をドラッグして、 Widget User Widget Object を取得 (get) します。 Cast to KeypadDisplayWB ノードを追加して Return Value を Object につなげます。

    Keypad22.png

  7. As Keypad Display WB ピンから、 Editable Text Box GetText(Text Box) を取得します。Return Value から Equals ノードを追加します。 Goal Text をドラッグして Equals ノードにつなぎます。

    Keypad23.png

    Text Box の名前を変更している場合は、新しい名前でコンポーネントを検索します。

  8. Print String を持つ Branch を 2 つ追加します。文字列テキストを片方は Success (True)、もう片方は Wrong Code (False) に設定します。

    Keypad24.png

  9. Keypad ブループリントを コンパイル して、 保存 します。

  10. ビューポートで、 Keypad ブループリントと KeypadDisplay ブループリントをレベルにドラッグして、必要に応じて回転/配置します。

  11. Keypad アクタの [Details (詳細)] パネルで、 Target Display 変数をレベル内の KeypadDisplay に設定します。

    keypad25.1.png

  12. ビューポートを 保存 し、[Play (プレイ)] を選択してウィジェットとインタラクトします。

最終結果

キーパッド ディスプレイを使い、ディスプレイでポインターを合わせて右クリックしてフォーカスします。ボタンを右クリックして Send Key Char コマンドを発行し、その値をディスプレイに渡します。 右マウスボタンを使ってレベル内のこのウィジェットとインタラクションしますが、代わりにゲームパッドやモーション コントローラーのボタンの使用に切り替えることもできます。

この例では、正しいコードが入力されたか否かを単に画面に表示していますが、ドアを開く何らかのイベントを発行したり、敵や他のゲームプレイ関連のイベントをスポーンさせることもできます。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる