alweiさんのブログ Let’s Enjoy Unreal Engine を読んでいて、ふと思いついたので早速試してみたメモです。
あの だらららーってなるヤツ。
まず数字のテクスチャから。
サイズは 512x128で、一文字の大きさは 48x64です。
このテクスチャをインポートしてマテリアルを作ります。
UMGを使うのでマテリアルドメインを変更します。
数字の大きさは一定なので、TexCoordinateノードの初期値として
UTiling: 0.09375
VTiling: 0.5
を入力しておきます。
数字を切り替えるには、U方向に移動するだけなので、スカラーパラメータ(OffsetU)を一つ。表示・非表示を切り替えるのに横着してOpacityの値を利用するので、もう一つスカラーパラメータ(Alpha)をつないでいます。
マテリアルもできたので、UMGの編集に移ります。
まずはキャンバスに、Imageパーツを6つ並べます。
マテリアルのパラメータ”Alpha”の初期値が 0.0 なので見えませんが、今回ゼロサプレスで表示するので問題なしです。
ちなみに、サプレスとはは「抑制」のことで、00123 みたいに大きい位の桁をゼロで埋めたりしません。ゼロで埋めるのは、ゼロフィルとかゼロパディングとか言います。
次にWidgetブループリントを編集します。
キャンバスに置いたImageパーツから、Get Dynamic Material ノードでマテリアル・インスタンス・ダイナミックを用意します。
これを配列に積んでいきます。
配列にしておくと、あとでForloopのIndex値で取り出すときに便利だからです。
つぎに桁が増えるということは、10倍ずつ増えていくことになるので、10のべき乗を計算するマクロを用意します。
べき乗を計算するPowerノードが用意されているのですが、Float型しか見付けることができなかったので、前後にキャストノードをつないで使っています。
Baseの値は10なので、 10の?乗ということになります。
このマクロを関数の中で使います。関数は数字を引数でもらって表示します。
ForLoopWithBreakノードは、途中でループを止めることができる便利なノードです。
ゼロサプレスするので少ない桁数の時は不要なループを止めないとゼロフィルになってしまいます。
参考までに、ゼロフィルにする場合を載せます。
シンプルでラクに作れますが、ゲームのリザルトとかキャラのパラメータ表示でたくさん数字が並ぶと見た目にしんどいので、なるべくゼロサプレスした方がいいです。
ゼロフィルにすると最大桁数が分かったりもするので、うまく使い分ける必要があります。
例えばRPGなんかのキャラのレベル表示で 01 と表示されているとMAX 99でカンストするのがすぐにわかってしまいます。かといって 001 と表示されると、ちょっとうんざりします。MAX 999 かもしれないからです。
関数が受け取った数字を、一の位から順番に取り出していくのですが、便利なのが
÷ と % のコンビネーションです。
例えば 98765 という数字を計算してみます。百の位を取り出すには
98765 / 100 = 9876
(Integer型なので小数点以下は勝手に切り捨てられます)
9876 % 10 = 6
(%は割った余りが計算できます)
この出てきた値に、テクスチャの数字一つ分のサイズ(48 / 512 = 0.9375)を掛けてやると欲しい数字のUV(ここではU値)が分かります。
右端につないでいるのはマクロです。
マクロの中身は↓のようになっています。
Widgetは完成です。
表示テストしてみます。
レベルブループリントを編集してお馴染みの Create WidgetしてAdd to Viewportします。最後のPrintStringはオマケです。
こういった実験用のレベルをたくさん作っていると、Playしたときに何押すんだっけ?ってなることがよくあるので。
線を減らしたくて、Create Widget の Return Value は変数化しています。
次にキーを押した場合の処理。
タイムラインノードは、0.0 → 1.0 を 3秒で変化するようにしています。
ここでようやく Lerpノードの登場です。
Lerp は Linear Interpolate の略記で、日本語で線形補間の意味だそうです。
A と B に差があるとしてどの辺を取り出すか、を Alpha の値で指定できます。
お風呂場などにあるレバーの角度で、お湯と水の加減ができる「混合栓」というやつをイメージしてもらうと分りやすいかと思います。
小数点なので、またInt型にキャストして、Widgetに用意した関数に渡します。
これで完成です。
Bの値をいろいろ変えて実験してみてください。
タイムラインノードで用意したアニメーション時間をかけて変化します。
まあこの手の演出は、ボタン連打でサクサク表示できないとストレスになります。
でちょこっと改造。
タイムラインノードの直前に追加します。
Inputノードの Releasedピンにつなぐと、キーを離したときに流れるので、キーを押している間はカウントアップしていて、手を離すと最終の数字を表示してタイムラインを止めます。
A に値を入れて、 Bを 0.0 にするとカウントダウンになります。
変数をうまく使って経験値の加算表示にも利用できそうです。
では ステキなカウントライフを。