Unreal Engine

【UE5】Interior Configurator Tutorial Part 2｜ゲームエンジンでボタンにアイコンとテキストを追加

こんにちは、皆さん！今回は、ゲームエンジンでボタンにアイコンを追加し、キーボードでタスクバーを開閉する方法について解説します。最終的には、ボタンにアイコンが表示され、タブキーを押すことでタスクバーが現れ、再度タブキーを押すと消える仕組みを実装します。

手順1: アイコンの準備とインポート

  1. アイコンフォルダの作成
    • configuratorフォルダ内に新しいフォルダを作成し、iconsと名前を付けます。
  2. アイコンの選択とインポート
    • オレンジと白のアイコンを選択し、ドラッグ&ドロップでゲームエンジンにインポートします。
  3. 設定の変更
    • アイコンを選択し、ミップ全般設定をSimpleAverageに設定、Texture GroupをUIに変更します。
    • Compression Settings（圧縮設定）をUser Interface2D(RGBA)に設定し、保存して閉じます。
  4. 他のアイコンも同様に設定
    • 他のアイコンも同様に設定を変更し、すべて保存します。
    • 他のアイコンを全て選択し、右クリック->アセットアクション->プロパティマトリクスで選択内容を編集
    • ミップ全般設定をSimpleAverageに設定、Texture GroupをUIに変更、Compression Settings（圧縮設定）をUser Inter face2D(RGBA)に設定し、全て保存

手順2: アイコンをボタンに追加

  1. ウィジェットの編集
    • BP Mainウィジェットに戻り、ボタンにアイコンを追加します。
  2. アイコンの設定
    • 最初のボタンを選択し、Work Iconを選びます。
    • Appearance StyleのNormalタブのImageセクションで、アイコンを挿入します。
  3. ホバー時の設定
    • Hoverタブでオレンジアイコンを挿入し、Pressedタブでも同じオレンジアイコンを使用します。
  4. ボタンのサイズ調整
    • ボタンが正方形になるようにスペーサーを調整します。
  5. 他のボタンも同様に設定
    • すべてのボタンに同様の手順でアイコンを設定します。
  6. プレイして確認
    • プレイして「F11」を押すとフルスクリーンになります。

手順3: テキストの追加と調整

  1. テキスト表示の設定
    • ボタンにマウスをホバーするとテキストが表示されるようにします。
    • Vertical BoxにWidget Switcherを追加し、その中にHorizontal Boxを配置します。
  2. テキストのスタイル設定
    • Horizontal Boxにテキストを配置し、テキストの色をオレンジに変更します。
    • パディングを調整し、複製して色やフォントを変更します。
  3. ウィジェットのスイッチ設定
    • Widget Switcherを変数に設定し、ボタンをホバーした際にテキストが表示されるように設定します。
    • Switcher>Active Widget Indexを「1」とする
  4. 他のボタンにも適用
    • 最初のボタンと同じ手順で、他のボタンにもテキスト表示機能を追加します。

最終確認

すべての設定が完了したら、コンパイルして保存し、テストを行います。これで、すべてのボタンにアイコンとテキストが正しく表示され、ホバー時にテキストが表示されるはずです。お疲れ様でした！

参考動画

-Unreal Engine
-