Apple Engine

Apple, iPhone, iOS, その周辺のことについて

iPhone と Reality Composer で始める簡単 AR その17 - 基礎的なアニメーション編

今回は Reality Composer で実際にアニメーションをつくつてみる。

アニメーションに関しては前回で説明しているようにビヘイビアのアクションを使用し、
今回はシーン開始で動作するトリガーを使用しテキストのオブジェクトをアニメーションさせるアクション/アクションシーケンスを作成してみる。

 

試してみる

アンカーを選択

Reality Composer を起動。
「+」ボタンなどから新規作成し、アンカーを選択のウインドウを表示。 なんでも構わないが、今回はとりあえず「水平方向」を選択。

f:id:x67x6fx74x6f:20200309023952j:plain

 

テキストオブジェクトの作成

アンカー選択時に作成される立方体や文字を選択後長押しから「削除」で消し、 画面上部「+」ボタンからテキストを配置。

以下のように適当に設定。

f:id:x67x6fx74x6f:20200309024933p:plain

 

上に上がるアニメーションを追加する

「…」からビヘイビアを選択してビヘイビア設定のウインドウを表示し「+」ボタンから新規のビヘイビアを作成しタップ。

f:id:x67x6fx74x6f:20200309024036j:plain f:id:x67x6fx74x6f:20200309024051j:plain

 

タップすると「ビヘイビアを追加」が表示されるが、今回はテンプレートを使用しないため1番下のカスタムを選択。

トリガーを「シーン開始」に設定。

f:id:x67x6fx74x6f:20200309024409j:plain

 

アクションシーケンスのアクションを「移動/回転/拡大(相対)」にする。

f:id:x67x6fx74x6f:20200309024422j:plain

 

アクションを追加すると適用するためのオブジェクト選択を決める状態になっているため、先ほどつくったテキストオブジェクトを選択する。

そして、今回は以下のように Y 軸プラス方向に移動させる設定をする。

f:id:x67x6fx74x6f:20200309025024p:plain

 

非表示から表示するアニメーションも加える。

そのままだと上へ上がるだけなので、非表示から表示されるようにアニメーションをさせてみる。

ビヘイビアのウインドウのアクションシーケンスのアイコンか「+」ボタンを押すと「アクションを追加」が表示されるので「表示」を以下のように設定しアニメーションを行う。

f:id:x67x6fx74x6f:20200309025332p:plain

 

複数の文字を表示しアニメーションさせたい

f:id:x67x6fx74x6f:20200309031740g:plain

1文字アニメーションさせてもあれなので、複数アニメーションさせる。

テキストオブジェクトの設定を数分設定するのが面倒なので先ほどのテキストをコピー&ペーストする。

とりあえず、今回はビヘイビアの動きも引っ張りたいのでコピーする前に画面右の「…」からビヘイビア付きで複製のスイッチをオンにしてからコピー&ペースト。
必要分増やしたら再生してみると設定した文字が表示されるようになる。

 

順番に文字を出るようにする

f:id:x67x6fx74x6f:20200309025651g:plain

見た目的に一度に出るのは好きではないので順番に表示するように改良する。

アニメーションの流れ的には以下のような感じ。 最初のテキストオブジェクト以外は表示の待ち時間があり後の方は待ち時間が長くなる。

先ほどの同時に出るアニメーションの場合はビヘイビアはひとつで済むが順番に出る場合は個々でビヘイビアを設定する必要がある。
そのため、先ほどのビヘイビアの「表示」と「移動/回転/拡大(相対)」の影響を受けるオブジェクトを最初の文字だけにする必要がある。

その修正が終わったら同様のビヘイビアが分作成する。

最初の文字以外、表示されるまでの待ち時間が必要なため「待機」と「非表示」のアクションをグループにして追加。
設定値は下記参照。

f:id:x67x6fx74x6f:20200309040145p:plain

 

各文字の待機時間を2文字目から 0.3、0.6、0.9、1.2 に設定。
再生すると1文字ずつ表示されるアニメーションが行われる。

また、上の GIF 画像の様に上がった際にバウンドをさせるてみるとよいかも。
設定は下記の GitHub にあるサンプルファイルの rcproject を参照。

 

その他: 相対座標の利点

f:id:x67x6fx74x6f:20200309025853g:plain

今回、オブジェクトの座標をもとに相対的に +Y 座標に移動するため、オブジェクトの位置を変えたり回転をさせたりしても、そこから設定した +Y 座標分移動する。

AR の見え方の都合上、今より若干上に表示させたい時など絶対座標の場合はすべての座標値を変える作業が必要になってしまうが相対座標の場合は何も変える必要はない。

 

注意点

ちなみにシーン開始のトリガーで、開始時にシーン上で、最初にオブジェクトが何も表示されていない場合、.reality に書き出し QuickLook からのプレビューをしても再生が始まらないので注意。

何か表示されるものが必ず必要。
バグなのか使用なのか不明だが、最初に表示されるオブジェクトがない場合はプレビューできないのは理にかなっている気はする。

 

サンプルファイル

下記のリンクに行き、右側の緑のボタン「Clone or download」からリポジトリをクローンするか zip をダウンロード。 MoveRotateScale フォルダが今回のサンプルになる。

iPhone や iPadOS に Reality Composer がインストールされていれば、ダウンロードした zip を展開し rcproject を開いて中身を見ることができる。

github.com

 

まとめ

Reality Composer にはタイムライン的なものはないため、簡単なアニメーションでもわりと多くの設定をする必要がある。

元も子もないが、Blender などの 3DCG の DCC ツールが扱えるのであれば、USDZ 側で事前にアニメーションを設定した方が楽かと。

次回はオブジェクトの周りを回転させるアニメーションについて。