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

レベルに現れるキーパッドとキーパッド表示ウィジェットを作成します。

Windows
MacOS
Linux
このページ中

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

ステップ

  1. KeypadDisplayWB を開き、その階層にある Canvas PanelSize Box でラップされた TextBox と置き換えます。

    Keypad04a.png

  2. この Size Box を、Desired on Screen に設定し、WidthHeight100x50 にオーバーライドします。

    Keypad04.png

  3. この Text BoxHint Text1212 に設定し、Font Size28 に調整します。

    Keypad05.png

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

  4. KeypadWB を開き、この 階層 を設定して以下のように 012 というテキストを持つ 3 つのボタンを作成するようにします。

    Keypad06.png

    階層の各ボタンで F2 を押して、どのボタンであるかを示すように名前を変更することができます。

  5. テキストが上にある 2 つの Button を持つ 2 つめの Horizontal Box を追加します。テキストのひとつは Del でもうひとつは Ent に設定されています。

    Keypad07.png

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

  6. Ctrl キーを押しながら、各ボタンを選択し、それぞれに対して [Is Focusable] オプションを False に設定します。

    Keypad08.png

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

  7. グラフ で、それぞれのボタンに OnClicked Events を追加します。

    Keypad09.png

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

    Keypad10.png

  9. Alt キーを押しながら CharToSend をドラッグし、OnClicked Events に接続し、変数を以下のように設定します。

    Keypad11.png

  10. Ctrl キーを押しながら WidgetInteraction をドラッグし、そこから Send Key Char そして、 CharToSend Event と OnClicked Event を接続します。

    Keypad12.png

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

  11. Del OnClicked Event から、WidgetInteraction 変数で Backspace に設定された Press and Release Key を使用します。

    Keypad13.png

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

    Keypad14.png

最終結果

Widget ブループリントがキーパッドとキーパッドのディスプレイを表示するように設定されました。次に、これらを Widget コンポーネントとして Actor ブループリントに追加し、レベル内で表示させます。 次のステップの終わりまで到達すると、システムをテストし、ゲームプレイ中に両方のエレメントとインタラクションできるようになります。

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信