読者です 読者をやめる 読者になる 読者になる

UE4初心者が頑張ってるブログ

Unreal Engine4を使用した開発メモ、及びそれに関連することについて不定期に書いています。

UE4 発光するゲージを作ってみる1

UE4 円形ゲージ Material UI Material Instance Widget MozPaca

もう今更書くこともないようなことですが、
自分用のメモとして残しておくことにしました。

まぁもともとはぎんりゅーさんからの相談がきっかけですが。
(グラデーションのUIって綺麗だよねぇ)

 

今回はグラデーションで誤魔化してみよう編です。
またいろいろやってみます。

 

UE4のバージョンは4.13.2を使用しています。

 

 

マテリアルを作る

コンテンツフォルダ内で右クリックからMaterialを選択し、
マテリアルを作ります。
名前はGaugeMaterialにしました。

f:id:MozPaca:20161119025525p:plain

 

マテリアルの設定は
User Interface

Translucent

でやります。

f:id:MozPaca:20161119025655p:plain

 

使用する画像を用意する

手元にPhotoshopがなかったのでFireAlpacaを使用しています。

f:id:MozPaca:20161119030018p:plain

ぱっと。

f:id:MozPaca:20161119030116p:plain

(FireAlpacaって円形のグラデーションできたんだ...)

ご自由にお使いください。

f:id:MozPaca:20161119030223p:plain

 

UE4にインポートしましょう

f:id:MozPaca:20161119030259p:plain

 

処理を書く

マテリアルの処理を書いていきます。

・全体図

f:id:MozPaca:20161119030325p:plain


・上

f:id:MozPaca:20161119030411p:plain

 

・下

f:id:MozPaca:20161119030425p:plain

ゲージの幅や、ゲージの進み具合をパラメータにしておきます。 

 

Material Instanceにする

作成したマテリアルを右クリック
Material Instanceを作成するをクリックします。

f:id:MozPaca:20161119030629p:plain

パラメータは適当に調節しました。 

 

Widgetを作成する

Widgetを作成し、Imageのブラシに先ほどの
Material Instanceを割り当てます。

f:id:MozPaca:20161119030556p:plain

大きさなどはお好みで

 

Widgetブループリントには
ゲージが増加する処理を書きます。

f:id:MozPaca:20161119030846p:plain

 

レベルに取り付ける

レベルブループリントを開き、

このように処理を書きます。

f:id:MozPaca:20161119030947p:plain

 

プレイする

www.youtube.com

途中から発光してるように見える?

最初にも書きましたが
また違うやり方を試してみます。

 

おまけ

え、日食?
これもしかしたらUI以外の方が使い道あるかも...

f:id:MozPaca:20161119035633p:plain