しんばりん日記

ue4を使ってのゲーム制作ブログです。間違いを指摘していただけると助かります!

UI表示してみる:UI作成(2)

今回は引き続き、UI表示をしていきます。

どのくらいためたかを示すレベルと、チャージのゲージを表示できたらいいなぁ。

 

ウィジェット側では0~1の値を受け取るイベントを作成し、

その値でゲージを調整します。Tickで値を渡し続け、離したときにリセットするイベントよべば多分いい感じになるかな?

 

というわけで、まずはゲージの作成から。

今回は画像を作成しないで、マテリアルだけで行います。

マテリアル関数には様々な関数が用意されており、それだけでもある程度あそべます。

今回は(個人的に)よくつかうグラディエント関数から、LinearGradientを使用します。

出力結果を見てみればお分かりかと思いますが、これはUなら横方向に、Vなら縦方向にグラデーションしているのがわかります。

f:id:sinvary:20190122011457p:plain

配置はこんな感じで。

LinearGradientだけではだめなので、ValueStepも使用しています。

こちらはGradientの値をもとに、MaskOffsetValuesの値と比べた結果をResultから出力しています。(多分)

これを、魔法アイコンと同様にはりつけます。

 

f:id:sinvary:20190122013010p:plain

ふつうに張り付けてもいいのですが、それだとゲージをためていない間が透明になったりするので一応何も張り付けていない画像を背景としておきます。

 

ゲージの値変更などは前回と同様なので割愛。

あとはコントローラーから値をもってきましょう。

f:id:sinvary:20190122015546p:plain

PlayerWidgetにてイベントを作成し、MainWidgetにてディスパッチャーを作成し、バインドしました。

こちらも前回と同様ですね。

MagicChargeのほうは、前回とちがって引数あり、としましたが違うのはそれだけです。

 

f:id:sinvary:20190122015853p:plain

Tickの処理を少し変更しました。

レベルアップ毎にカウントをリセットし、新たに用意したマジックレベルのカウントを上げていきます。

%は「あまり」を取得するものだと思っていましたが商も出力していたのでめんどいからとこの手段に。

f:id:sinvary:20190122020204p:plain

また、先ほど追加したMagicLevelをスポーン時に渡すようにしたのと、その直後にリセットするように修正しました。

 

ひとまず今日はこのぐらいで。

レベルぐらい表示してもいいですが、まあ明日ということで。

そのあとはゆっくりアニメーション作成でもしたいですね。いい加減にね。