ゲーム開発を試してみようと思い立ち、Unreal Engine 5をインストールして開発する過程で調べてみた部分を備忘録的に投稿します。アクションゲームに実装されている「武器の選択メニュー」のような円形メニューを作成してみました。
よくある武器の選択メニュー
実際のゲームで実装されているメニューは装飾されたり追加機能が盛り込まれていますが、今回は簡単な実装になるようにしています。
今回は、準備段階としてマテリアルの作成を紹介します。
円形になるマテリアル
最初にウィジェットのパーツを丸くするための「マテリアル」を作成していきます。
1.［コンテンツドロワー］を開いて空いている場所でマウスの右クリックして表示されたメニューで［マテリアル］を選択します。
2. 追加された［マテリアル］の名前を “M_Hover” に変更します。
3.［M_Hover］を開いて［詳細］画面の［マテリアル｜Material Domain］一覧から［User Interface］を選択します。
4.［Brend Mode］一覧から［Translucent］を選択します。
5. ［M_Hover］ノードの［最終カラー］ピンを伸ばして表示された画面で “Constant” を検索して追加します。
6. 表示されたノードの［Value］の値を “1.0” に変更します。
7.［イベントグラフ］の空いている場所でマウスの右クリックして、表示された画面で “SphereMask” を検索して追加します。
8.［SphereMask］ノードが追加されます。
9.［SphrereMask］ノードの［A］ピンを伸ばして表示された画面で “Constant2Vector” を検索して追加します。
10. 追加されたノードの［X］と［Y］を “0.5” に変更します。
11.［SphrereMask］ノードの［B］ピンを伸ばして表示された画面で “TextureCoordinate” を検索して追加します。
12.［SphrereMask］ノードの［Radius］ピン部分を右クリックします。
13. 表示されたポップアップメニューの［パラメータへ昇格］を選択します。
14. 追加された［Radius］ノードの［Default Value］の値を “0.5” に変更します。
15. 同様に［Hardness］ピンもパラメータへ昇格して、追加された［Hardness］ノードの［Default Value］の値を “0.99” に変更します。
16.［SphereMask］ノードの実行ピンを［M_Hover］ノードの［オパシティ］ピンに接続します。
17.［プレビュー］画面が白い丸が表示されます。
ここまでの作業でウィジェットのパーツに、白い丸を表示するマテリアルが出来上がりました。
色変更したマテリアルを追加
作成したマテリアルを複製して、色変更したマテリアルを追加していきます。
1. 作成した［M_Hover］を選択します。
2. マウスの右クリックで表示されたポップアップメニューで［複製］を選択します。
3. 追加された［マテリアル］の名前を “M_Unhover” に変更します。
4.［M_Unhover］を開いて［M_Unhover］ノードの［最終カラー］ピンに接続した［Constant］ノードのValueを “0.1” に変更します。
5. プレビュー画面の円形がグレーに変更されます。
今回紹介する作業は、ここまでです。次回は、マテリアルを設定したウィジェットを作成していきます。
まとめ
今回も長い手順になりましたが、Unreal Engineでアクションゲームで見かける武器交換などをする円形のメニューを表示する機能を作る手順について書きました。
今回はウィジェットに、円形画像を表示するマテリアルを作成しました。
Unreal Engineのゲーム開発で武器交換などに利用されている円形メニューを表示させたい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。
