みつまめ杏仁

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

Widgetで追跡するカーソル

f:id:hiyokosabrey:20160108223933p:plain

 

昔Webページでマウストレイルの仕掛けが流行ったことがありました。

ボタンの見た目を切り替えるのにUMGで作ったアニメーションを使っているので、新しくフローティングカーソル(浮いた状態)を乗せてみます。

 

 前回までの記事『Widgetでタイル型のボタンを~』で使ったWidgetに追加します。

まず親Widgetにカーソルパーツを追加します。

編集モードを Designer に切り替えて、Paletteタブの中から、 Common > Imageを探してCanvasPanelに子供として追加します。

f:id:hiyokosabrey:20160108225012p:plain

次にテクスチャ画像を作って、Detailタブの Appearance > Brush でセットしてやります。

f:id:hiyokosabrey:20160108225017p:plain

f:id:hiyokosabrey:20160108224631p:plain

 ポジションを後からいじるので、Is Variable のチェックを忘れずに付けておきます。

とりあえず "floatCursor" と名付けました。

f:id:hiyokosabrey:20160108225747p:plain

表示優先(ZOrder)は、ボタンたちよりも手前に来るように設定します。

 

編集モードをGraphに切り替えます。

一瞬で目的地に着いてしまうと追跡とは言わないので、時間をかけて(わざと遅らせて)到着させます。移動することになるのでEventTickにつないでいきます。

EventTickはEventConstructと違って何度も繰り返し処理されるので、少しずつ座標を変えれば移動しているように見えます。

 

まずは、仕組みを軽く図で説明。

目的地までどれだけ離れているのかを調べます。

f:id:hiyokosabrey:20160109005441p:plain

目的地から現在地を引き算すれば、移動すべき量が分かります。

当然、現在地に移動量を足すと目的地に到着してしまうわけですが、ここはあえてちょっとずつ進ませることにします。移動量に掛け算します。25%くらいかなということで、0.25。

f:id:hiyokosabrey:20160109112230p:plain

25%の位置に進ませたら、次も同じように 残りの移動量を計算して0.25倍します。

でまた進めて、また0.25掛けて、また進めて・・・・とTickで繰り返します。

とにかく目的地に向かって移動量を毎度計算して、0.25掛けて進ませてというのを繰り返すだけです。

実際に動かしてみると分るのですが、徐々に減速しながら近づいていきます。目的地までの距離が移動するたびに縮まるので、その残り移動量に対して25%ということは一度に進む量も当然最初に比べて少なくなります。

 

で、ブループリントはこうなりました。

f:id:hiyokosabrey:20160109011749p:plain

 目的地は、変数 IndexFocus の値を使います。%(剰余)で ヨコ位置。ヨコのボタン数で割るとタテ位置が出ます。そこに、レイアウトで使った変数 StepXとStepYを掛けます。この変数はタテヨコの表示間隔を持っています。あとはカーソルキャラの中心点が左上だったりするので、補正してます。

現在地は、カーソル自身が表示されているポジションをゲットします。

Get Position というノードはキャンバススロットが対象なので、Imageパーツで作ったカーソルはいったんキャストしてやらないとつながりません。Slot as Canvas Slotノードをつなぎます。

で0.25を掛けてラストのSet Position ノードにつなげば完成です。

「減速率」というコメントを付けてるノードに 0.25 が入れてあるので、この値をいろいろ変えてみると動きの印象が変わります。大きい値にすると、キュッキュッと小気味よく動いて、小さな値にすると、まったりと動くようになります。

 

UE4のバージョンが 4.10になって、Vector2Dが扱いやすくなったのは地味にうれしい。