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

みつまめ杏仁

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

Lerpノードを使ったスコア表示

alweiさんのブログ Let’s Enjoy Unreal Engine を読んでいて、ふと思いついたので早速試してみたメモです。

 

f:id:hiyokosabrey:20160723001832p:plain

あの だらららーってなるヤツ。

 

まず数字のテクスチャから。

f:id:hiyokosabrey:20160721234201p:plain

サイズは 512x128で、一文字の大きさは 48x64です。

このテクスチャをインポートしてマテリアルを作ります。

UMGを使うのでマテリアルドメインを変更します。

数字の大きさは一定なので、TexCoordinateノードの初期値として

UTiling: 0.09375

VTiling: 0.5

を入力しておきます。

f:id:hiyokosabrey:20160721234822p:plain

数字を切り替えるには、U方向に移動するだけなので、スカラーパラメータ(OffsetU)を一つ。表示・非表示を切り替えるのに横着してOpacityの値を利用するので、もう一つスカラーパラメータ(Alpha)をつないでいます。

マテリアルもできたので、UMGの編集に移ります。

 

まずはキャンバスに、Imageパーツを6つ並べます。

f:id:hiyokosabrey:20160722003113p:plain

 マテリアルのパラメータ”Alpha”の初期値が 0.0 なので見えませんが、今回ゼロサプレスで表示するので問題なしです。

ちなみに、サプレスとはは「抑制」のことで、00123 みたいに大きい位の桁をゼロで埋めたりしません。ゼロで埋めるのは、ゼロフィルとかゼロパディングとか言います。

 

次にWidgetブループリントを編集します。

キャンバスに置いたImageパーツから、Get Dynamic Material ノードでマテリアル・インスタンス・ダイナミックを用意します。

f:id:hiyokosabrey:20160722225356p:plain

これを配列に積んでいきます。

f:id:hiyokosabrey:20160722225633p:plain

f:id:hiyokosabrey:20160722230037p:plain

配列にしておくと、あとでForloopのIndex値で取り出すときに便利だからです。

 

つぎに桁が増えるということは、10倍ずつ増えていくことになるので、10のべき乗を計算するマクロを用意します。

f:id:hiyokosabrey:20160722230411p:plain

べき乗を計算するPowerノードが用意されているのですが、Float型しか見付けることができなかったので、前後にキャストノードをつないで使っています。

Baseの値は10なので、 10の?乗ということになります。

 

このマクロを関数の中で使います。関数は数字を引数でもらって表示します。

f:id:hiyokosabrey:20160722231037p:plain

ForLoopWithBreakノードは、途中でループを止めることができる便利なノードです。

ゼロサプレスするので少ない桁数の時は不要なループを止めないとゼロフィルになってしまいます。

参考までに、ゼロフィルにする場合を載せます。

f:id:hiyokosabrey:20160722232204p:plain

シンプルでラクに作れますが、ゲームのリザルトとかキャラのパラメータ表示でたくさん数字が並ぶと見た目にしんどいので、なるべくゼロサプレスした方がいいです。

ゼロフィルにすると最大桁数が分かったりもするので、うまく使い分ける必要があります。

例えばRPGなんかのキャラのレベル表示で 01 と表示されているとMAX 99でカンストするのがすぐにわかってしまいます。かといって 001 と表示されると、ちょっとうんざりします。MAX 999 かもしれないからです。

 

関数が受け取った数字を、一の位から順番に取り出していくのですが、便利なのが

÷ のコンビネーションです。

例えば 98765 という数字を計算してみます。百の位を取り出すには

98765 / 100 = 9876

(Integer型なので小数点以下は勝手に切り捨てられます)

9876 % 10 = 6

(%は割った余りが計算できます)

 

この出てきた値に、テクスチャの数字一つ分のサイズ(48 / 512 = 0.9375)を掛けてやると欲しい数字のUV(ここではU値)が分かります。

右端につないでいるのはマクロです。

マクロの中身は↓のようになっています。

f:id:hiyokosabrey:20160722234341p:plain

Widgetは完成です。

 

表示テストしてみます。

レベルブループリントを編集してお馴染みの Create WidgetしてAdd to Viewportします。最後のPrintStringはオマケです。

f:id:hiyokosabrey:20160722234847p:plain

こういった実験用のレベルをたくさん作っていると、Playしたときに何押すんだっけ?ってなることがよくあるので。

線を減らしたくて、Create Widget の Return Value は変数化しています。

 

次にキーを押した場合の処理。

f:id:hiyokosabrey:20160722235522p:plain

タイムラインノードは、0.0 → 1.0 を 3秒で変化するようにしています。

ここでようやく Lerpノードの登場です。

Lerp は Linear Interpolate の略記で、日本語で線形補間の意味だそうです。

A と B に差があるとしてどの辺を取り出すか、を Alpha の値で指定できます。

f:id:hiyokosabrey:20160723000723p:plain

お風呂場などにあるレバーの角度で、お湯と水の加減ができる「混合栓」というやつをイメージしてもらうと分りやすいかと思います。

小数点なので、またInt型にキャストして、Widgetに用意した関数に渡します。

これで完成です。

Bの値をいろいろ変えて実験してみてください。

タイムラインノードで用意したアニメーション時間をかけて変化します。

f:id:hiyokosabrey:20160723001832p:plain

 

まあこの手の演出は、ボタン連打でサクサク表示できないとストレスになります。

でちょこっと改造。

タイムラインノードの直前に追加します。

f:id:hiyokosabrey:20160723002337p:plain

Inputノードの Releasedピンにつなぐと、キーを離したときに流れるので、キーを押している間はカウントアップしていて、手を離すと最終の数字を表示してタイムラインを止めます。

 

A に値を入れて、 Bを 0.0 にするとカウントダウンになります。

変数をうまく使って経験値の加算表示にも利用できそうです。

 

では ステキなカウントライフを。