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

みつまめ杏仁

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

Widgetで回転する数字カウンタを作ってみる 《改二》

UE4 UMG Widget UI

f:id:hiyokosabrey:20160125000909p:plain

交通量調査とかで使ってるカウンタは、ボタンを押すたびに一番右端の桁が回ります。

それが 9まで回って次の 0になると同時に、繰り上がってようやく隣の桁が一つ進みます。この仕組みが不思議で、子供のころよく見入ってました。ラジカセにはテープカウンタが付いてたんだよ~、って年がバレますね。

 

シンワ 数取器 手持型 B 75086

シンワ 数取器 手持型 B 75086

 

 著作権的にイメージ画像を貼るのどうしようと思ってたら、↑この手がありました。便利便利。Amazonに貢献してしまうのが少し悔しい気もしますが。

 

さて、デリゲート(Delegate)の仕組みを使ってカウンタを再現してみます。

関数を呼び出す度に数字が一つずつ進みます。桁が繰り上がるタイミングでこのデリゲートに働いてもらいます。

 

ではまず、一番基本のパーツになる子Widgetから。

今までのを改造しますが、一応軽く振り返る感じで前々回の記事を貼っておきます。

limesode.hatenablog.com

 テクスチャをインポートしてマテリアルを作り、子Widgetで関数"SetTextureOffset"を作るところまでが今回必要なとこです。

 

数字のテクスチャを動かすための準備をします。

f:id:hiyokosabrey:20160124230033p:plain

カウンタの数字用に整数型 で Number。

テクスチャのUV値で小数点を扱うので、Float型の変数を3つ用意。

数字一つ分の移動距離を持っておく Distance。(固定値 0.0859375)

マテリアルにテクスチャのV値を渡すための OffsetValue。

1フレームに進む移動量を持っておく OffsetSpeed。 今回は 1/10 文字分にしました。

 

ここでイベントディスパッチャー(EventDispatcher)を用意します。

編集エディタの左 MyBlueprintタブの中に Event Dispatchers という項目があります。

関数や変数と同じ要領で[+]ボタン押して追加します。

f:id:hiyokosabrey:20160124223915p:plain

名前を決めます。

f:id:hiyokosabrey:20160124224548p:plain

MoveUP にしました。確定したらダブルクリックしてみます。

f:id:hiyokosabrey:20160124224917p:plain

なんと、イベントディスパッチャーは読み取り専用で編集できません。

Detailタブにはパラメータ(引数)を設定するInputsの項目がありますが、引数は今回は使わないので、そっとしておいて次に進みましょう。

 

EventTickにテクスチャをスクロールする仕組みをつなぎます。

f:id:hiyokosabrey:20160124230946p:plain

スクロールの移動終了を判定するために GoalPoint という変数を用意しました。

OffsetValue が GoalPoint よりも小さい場合、OffsetSpeedを加算してOffsetValueの値を進めます。それを最後に反映させます。


 仕上げに、親のWidgetから呼び出してもらうための関数を作ります。

ちょっとややこしそうですが、GoalPointに次の移動先をセットしているだけです。

ここで、ようやくイベントディスパッチャー登場です。

f:id:hiyokosabrey:20160124230618p:plain

オレンジ色の囲みでハイライトしてるのがイベントディスパッチャーです。

左のリストからドラッグ&ドロップして配置します。Call を選択。

f:id:hiyokosabrey:20160124231917p:plain

Swtchノードは、無駄にピンを増やしたくなかったので、ちょっといじっています。

f:id:hiyokosabrey:20160124232348p:plain

これで子Widgetは編集完了です。 コンパイルして保存したら閉じます。

 

Widgetを編集します。

前々回の記事同様に、あらかじめ用意しておいた子Widgetをキャンバスに配置する方法で進めます。Paletteタブの中にある User Created の中から子Widgetを探してドラッグ&ドロップします。きっちり並べるよりも、すこし傾いていたりスキマをつくるとアナログ感が出ます。

f:id:hiyokosabrey:20160124233349p:plain

配置できたら編集モードをGraphに切り替えます。

 

まずは関数を作ります。これがリアルなカウンタについているボタン。トリガーになります。あとでレベルブループリンから呼び出してもらいます。

f:id:hiyokosabrey:20160124233923p:plain

キャンバスに配置した子Widgetは、Is Variable にチェックを付けると変数として扱えるのでここに Getノードとして置きます。1の位(右端の子Widget)だけです。

 

次にEventConstructに Delegateの仕組みをつないでゆきます。

スムーズに作業するためにはノードを置く順番が重要なので、番号を振ってみました。

f:id:hiyokosabrey:20160124235149p:plain

②は bind というワードで検索すると、 子Widgetの中に用意した イベントディスパッチャーが見つかるはずです。⑥も同様に数字を一つ進める関数を call というワードで検索すると見つけやすくなります。

 

残りの桁も同じようにしてつないでいきます。

f:id:hiyokosabrey:20160125000351p:plain

Widgetの編集は終わりです。コンパイルして保存しておきます。

 

最後にレベルブループリントを編集します。

f:id:hiyokosabrey:20160125001334p:plain

いつもどおりCreateWidgetで親WidgetをスポーンしてViewportに追加してます。

キーボードの P キーを押すと、親Widgetの関数を呼ぶようにします。

 

動かしてみましょう。ちゃんと繰り上がりが・・・

f:id:hiyokosabrey:20160125002003p:plain

ぽち

f:id:hiyokosabrey:20160125002010p:plain

やったー!なんとかサマになりました。

 

 この記事の頭に置いている画像は、実際に256回 Pキーを叩いてキャプチャしました。

 

まだまだネタ的、仕様的に改善の余地があったり、連打対策が必要だったりしますが、

回るカウンタは一旦この辺にしておこうと思います。

 

次回は、回らない数字演出でも。じゃらじゃらじゃら・・・ばん