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

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

わりと本気のコンボカウンター 《UMG編》

UE4 UI UMG Widget マテリアル

わりと本気です。コンボカウンターです。ということで前回の続きで用意したマテリアルをUMGにセットしていきます。

 

limesode.hatenablog.com

レイアウトする

f:id:hiyokosabrey:20161009215321p:plain

Widgetブループリントを作ったらさっそくパーツを配置していきます。

全体の位置調整用にCanvasPanelをひとつ追加します。

f:id:hiyokosabrey:20161008191027p:plain

DetailsタブのSize to Contentにチェックを付けておきます。

f:id:hiyokosabrey:20161008191442p:plain

これは中身に応じてサイズを変えるという仕様になります。

 

続けてImageパーツをこのキャンバスの子供として追加します。

999の3桁まで表示するので3つ、HITsの文字に1つ、下敷きに1つ。全部で5つを追加して並べます。名前も変更します。Digit は「桁」のことです。

f:id:hiyokosabrey:20161008192242p:plain

DetailsタブのAppearance > Brush > Image から、それぞれのマテリアルをセットします。

f:id:hiyokosabrey:20161008192624p:plain

テクスチャに仕込んだ大きさに合わせてサイズを設定したら、いい感じに並べつつ、ZOrderの数値で重なりを調整します。

f:id:hiyokosabrey:20161008192341p:plain

配置は完了。

 

アニメーションをつける

次にアニメーションを作成します。

今回用意したのは5つ。

f:id:hiyokosabrey:20161008193231p:plain

動かすのは、Slot ではなく、Render Trasform を動かします。

f:id:hiyokosabrey:20161008194018p:plain

f:id:hiyokosabrey:20161008194026p:plain

自由にアニメーションを付ければOKです。

遅くても 0.25 秒以内がオススメ。

例えば最初の登場アニメーションはこんな感じです。→ [ _IN_Hits ]

f:id:hiyokosabrey:20161008194922p:plain

透明な状態から不透明にしつつ移動してきます。

これを毎回やるとちょっとウザイので、2回目以降のアニメーションを用意しています。→ [ _UP ]

 

今回退場は透明にしてフェードアウトさせました。

実はここが今回手こずった部分です。

f:id:hiyokosabrey:20161008200202p:plain

パーツをすべて透明にするのですが、このアニメーションを再生すると、コンボ数が1桁の場合でも、10と100の位の数字が現れてしまうのです。

かといって、桁数に合わせて同じような退場アニメーションを何個も作りたくない。

というわけで前回のマテリアルに仕込んだスイッチが役に立つのです。

 

UMG編はここで終了です。

次回はブループリント編です。