Amazon Sumerian Tutorial18:Timeline Basics

こんにちは、ナレコム前川です。

今回は、Amazon Sumerian の公式チュートリアルの Timeline Basics を進めていきたいと思います。

それでは、早速進めていきましょう。

1. シーン作成

まず、シーンの作成を行います。

ダッシュボードから Default Lighting を選択し、
シーン名を「Timeline Basic」にします。

2. シーン内の環境構築

ここでは、エンティティやアセットの追加・設定を行っていきます。

Sphere の追加

① Create Entity を選択し、Sphere を追加。

② Inspector パネルから Transform を展開。
③ Uniform Scale のチェックが入っているのを確認。
④ Scale を (10.8, 10.8, 10.8) に設定。

設定後の Sphere は以下のような感じです。

Drone の追加

① Import Assets から Drone を検索、追加。

② Assets パネルから drone.fbx(六角形アイコン)をドラッグ&ドロップ。

③ Inspector パネルの Transform から Y Translation を 5.6 に設定。

④ Drone エンティティの名前を「Drone Relative」に変更。

Empty エンティティの追加

① Create Entity を選択し、Entity を選択。

② Inspector パネルからエンティティ名を「Drone Center」に変更。

Hierarchy と Nesting の整理

① Entities パネルに移動。
② Drone Relative を Drone Center の子要素にする。
③ Drone Center を Sphere の子要素にする。

上のように要素に親子関係をつけることで、Drone Center もしくは Sphere が回転すると、
Drone が Sphere の周りを回転するように見えます。
※ 最下層の Drone Relative は周りに影響を与えることなく自転することができます。

Drone Center と Sphere をそれぞれ回転させてどのように動作するか確認してください。
回転させた後は、ctrl + Z でもとに戻すのを忘れないでください。

3. Timeline の追加

ここでは、Timeline の追加を行っていきます。

① Create Entity から Timeline を選択。

② Inspector パネルの Timeline コンポーネント内の Toggle Timeline をクリック。
※クリック後、Timeline Editor が開きます。

③ Drone Center と Drone Relative を Timeline にドラッグ&ドロップ。

上の画像のようになっているはずです。

4. Timeline の設定

ここでは、Timeline の機能を使って、設定を行っていきます。

はじめに、Drone Relative を選択し、Transform -> Translation の順に展開してください。
以下のような情報が見えるはず。

それでは、機能ごとの設定を行っていきます。

Keyframes

Keyframe は、Timeline の中でも主要な機能です。
この機能は、Transform の値と関連付けされたタイムスタンプの役割があります。

ここからは、Timeline でのアニメーションの作成方法について説明していきます。

① 再生ヘッドが 0s になっているのを確認し、Y のKeyframe ボタン(タイマーアイコン)をクリック。

※ ひし形◆のマークが出てくる。

② 再生ボタンをクリックし、実行。

Timeline の再生ヘッドが移動するのが確認できるかと思います。
しかし、2つ目の Transform の値を設定していないため、シーン自体は何も変化はありません。
そこで、2つ目の Keyframe を設定していきます。

③ 再生ヘッドを 4s までドラッグ。
④ Y Translation を 7.9 に変更。
※ 変更すると Keyframe が追加されます。

⑤ 最初に設定した Keyframe を 0s から 1s に移動。

⑥ 実行。

実行してみると、Timeline の時間に合わせてドローンが上がっていくのがわかると思います。

Easing

Easing は、加速や減速をゆるやかに行うように設定する機能です。
アニメーションの速度を調整します。

① 1s の位置にある Keyframe を 右クリック。
② Easing Function を Quadratic に設定。
③ Easing Type を In-Out に設定。

④ 同様の設定を 4s の Keyframe にも行う。

⑤ 実行。

最初の実行よりもドローンの動作開始から停止までの速度が緩やかになったのが確認できます。
いまいちわからないという方は、上の動画と比較してみてください。

5. 仕上げ

アニメーションの仕上げとして以下の設定を行っていきます。

① Drone Relative に 2つ の Keyframe を追加。
 ・Rotation, Y channel, 1s, -180.00
 ・Rotation, Y channel, 4s, 0.00

Editor は以下のようになります。

② 新しく追加した Keyframe の両方を Quadratic In-Out easing に設定。


③ Drone Center を展開し、以下の Keyframe を追加。
 ・Rotation, X channel, 3s, 2.88
 ・Rotation, X channel, 7s, 360

④ 追加した Keyframe 両方を右クリックから Cubic In-Out easing に設定。


これで、設定は終了です。

実行してどのような動きをするのか確かめてみてください。
ドローンが回転しながら上昇し、Sphere の周りを飛ぶのが確認できるはずです。

今回は以上です。
お疲れさまでした。

この記事を書いた人

aws-recipe-user