UI表示してみる：UI作成（１）

これからもっと魔法のクオリティ（中身的な話）を上げていくうえで、現在何の魔法をどのくらいのレベルで射出しようとしているのかを明示したくなったので、

これを機に、UI作成をし始めようとおもいます。

キー入力で炎魔法氷魔法、レベル出し分けも可。デバッグするなら必須ですね。

今のところ画面に表示しようと思っているのは、

・自分HP

・魔法関係

・ボスHP

が最低限あればいいですね。

敵撃破数とかコンボはどっちでもいいですね。

コンボはあってもいいかもしれませんが。

あと銃も考えているっちゃ考えてはいるんですが...まは今はこんな感じで。

やり方としては、メインのウィジェットに必要なものをどんどん追加していく感じです。

ひとまずメインのウィジェットを作成します。

まぁ名前も適当にMainWidgetで。

次に、プレイヤー情報を表示するウィジェットも作成します。

こちらも適当に、PlayerWidgetで。

そして、炎と氷をイメージした自作アイコンをインポートします。

　

このままUIにいれて切り替えで表示でもいいのですが、せっかくなのでマテリアルを使用しましょう。

といっても、中身は特になにも特別なことはしていません。

今回のアイコンは半透明にする予定もありませんので、Maskedで十分ですね。

マスク用の画像もインポートしていますが、外側は黒（rgbが0）なのでそれを利用した数式でオパシティにつなげてもよさそうですね。

また、今回は魔法が２種類なのですが数分増やすのもあれなのでMaterial Instanceを作っておきました。

テクスチャは切り替えができるようにわかりやすいパラメーター名を指定しました。

さて、このマテリアルをPlayerWidgetに配置していきます。

パレットからimageを選択し、適当な大きさにして適当な箇所に配置して、

先ほど作成したマテリアルをセットすれば

こんな感じですね。二つ配置したのは現在使っている魔法と切り替え先の魔法を表示するためです。

次は、ボタン押下でアイコンを切り替える処理に移ります。

まずはConstructにて、マテリアルのパラメーターを調整するためにダイナミックマテリアルを作成します。

配置したマテリアルからGetDynamicMaterialを選べば完成です。

毎回作成するのは処理的によろしくないので、Constructにて一度だけ作成し、保持します。

そしたら、画像を切り替える処理を作成します。

先ほど作成したダイナミックマテリアルから、

SetTextureParameterValueにてテクスチャーを書き換えます。

boolにて炎か氷かを保持し、切り替えていますがイベントの引数にしてもいいですね。

今回はイベントで切り替えるようにしました。理由は特にありません。

これを、MainWidgetに配置し、処理を呼び出しましょう。

はい、イベントディスパッチャーです。

ここまで出来たら、[ウィジェットを作成]→AddViewPortするだけでできます。

作成した際、ウィジェットを保持し、魔法切り替え処理にてイベントを呼び出すのを忘れずに。

ひとまずこんな感じで。

次回は魔法のレベルができたらなと思います。