UMGで移動アニメーションを作る場合、Position と Translation の２種類があって、表示された見た目には違いがないように感じますが、それぞれ仕様が違うので私は使い分けて使っています。
今回はその使い分けについての私なりの解釈をぐだーと書いてみます。
下図は、UMGのキャンバスに置いたImageパーツのDetails（詳細）タブ。
まず先に書いてしまうと、
- Position は レイアウト用
- Translation はアニメーション用
として捉えています。
実際に使ってみると判るのですが、ポイントは座標の扱い方が違うという点です。
Position は Anchor を基準としたキャンバスパネル内の絶対位置である「居場所」を指定します。一方 Translation は今いる場所からの プラスマイナスした位置という「移動量」を指定します。コトバの意味としても、辞書を見ると translate には「場所」をイメージさせるような訳がなく「翻訳」の他に「変形」という和訳がありました。
カテゴリも Render Transform ですしね。
なので、覚え方としては、
- Position で指定した場所から Translation で指定した分だけ変形
となります。
「移動」と書かずにあえて「変形」と書いたのは、UMGでは移動も変形として扱っているからです。
3Dモデルで考えると解りやすいのですが、まずモデルには中心（Center）があって、そこから離れた位置に各頂点（Vertex）があります。この各頂点はモデルの中心からの相対位置でデータ化されています。Transform は形状を変形させることになり、変形することは頂点が移動することを意味します。例として頂点４個の四角いメッシュでイメージ図を作ってみました。
UMGやFlashのような2DベースのGUI制作に慣れ親しんでいると、この「頂点」があるというイメージは感覚的に身に付けるのは難しいかもしれませんね。
ちなみに
キャンバス内でレイアウトを触っていると、値が変化するのは、Position の方で、Translation は、0.0 のままです。
ブループリントで位置を触る場合
位置を変えることができるノードは２つあります。
Position の方は Canvas Slot 型に キャストしてやる必要があります。
Image_22 というのはUMGでテキトーに置いたImageパーツです。
変数には Canvas Panel Slot型というのがあるので、ブループリント内で繰り返しPosition を触る場合は、変数化しておくと便利です。
で、結局のところ・・・
移動アニメーションは基本的に Translation で行うと扱いがラクになります。
UMGのキャンバスでのレイアウトの変更や調整がやりやすいからです。
例えばフレームインしてくるアニメーションの場合、まず最終表示位置にパーツを並べて位置を決定します。そのあとで、Translation でそこから表示開始位置まで移動するのをアニメーションキーで登録します。この時の値は、いくらか離れた位置を開始位置にして、終了位置は必ず 0.0 になります。開始位置のキーは、単に移動量を表わすことになりとてもシンプルです。
後で、レイアウト上の問題が発生してこの最終表示位置をキャンバス内で修正したとしても、調整レベルであればアニメーションキーの修正は必要ありません。これが結構メリットになります。
座標の扱いについてまとめると
- Position は キャンバスに対しての 絶対座標
- Translation は 相対座標 または Position からの オフセット位置
ということになります。
UMGのAnimationでは Translation で動きをつけ、ブループリント では Position を使って配置する、といった使い方が便利でよく使う手です。
今回は以上です
Position と Translation の使い分けで、迷っておられる方があれば、ぜひ参考になればうれしいです。
ではでは ステキな移動アニメーションライフを！
