端の処理で差をつける！アイソメイラストのループアニメーションテクニック

アイソメイラストで作る架空の街のループアニメーションは見ていて飽きないですよね！

アニメーションをループさせる際、終わりと始まり、一回分の始点と終点を綺麗に繋げることでどこが切れ目なのかをよりわからなくし違和感なくシームレスに見せることができます。

この記事では、ループしたアニメーションを美しく繋げるためのテクニックや制作の際に考えていることを紹介します。

りびっつ

アニメーションの終点と始点を制作前に意識して考えておくことが重要です。

アイソメイラストのアニメーションの実例を用いた解説

上記はサンタたちの架空の街並みをアイソメイラストで表現し、アニメーションさせたものです。モーションとしては移動や不透明度などのシンプルな動きしか付けていませんが、メインビジュアルとしてリッチに見えます。こちらのアニメーションを用いて良い例と悪い例を解説します。

どうすればループアニメーションがシームレスに見えるかというコツを紹介します。

りびっつ

ストーリー上問題ないというのが前提です！

画面上から移動してフレームインさせるという方法です。

空飛ぶソリがフレーム外からピットインするといったアニメーションですが、ストーリーに破綻がないです。これがもしもフレーム内でふわっと現れてピットインするといったアニメーションだと違和感があります。

コツ1と同じ考え方ですが今度はフレームアウトさせるという方法です。乗り込んできたサンタがそのままふわっといなくなるより、ソリに乗ってちゃんと出勤しフレームアウトさせる方がストーリーとして自然です。

（ちなみに、地下空間にソリがストックされている設定なので、永遠にソリがスタンバイされても違和感がないように工夫してあります。）

画面外とはフレームアウトだけではなく設定上の街の地下も画面外（視覚外）となります。

お家から出てきて地下へと繋がる土管へと消え、さらにここでは画面右のサンタの衣装に着替えるストーリーへと繋げることでより自然なアニメーションとしました。

ビジュアル上どうしても開始位置からふわっと出現しないといけない場合は、オブジェクトで隠してしまいましょう。死角から現れることでより自然なアニメーションになりました。

目につく場所での違和感を減らすことで良いループアニメーションは仕上がります。ということは、目につく場所で出現したり、消滅するというのがループアニメーションでは違和感に繋がるということです。

事例を用いて説明します。

工場からのプレゼントがコンベアを流れて袋詰めされるというストーリの箇所は、袋に入った段階で透明になって消えるというアニメーションになっています。

制作した当時はこれでも充分と考えていました。工場からプレゼントが出てくるので出現に関しては問題ないですが、その場で消滅しているので少し違和感があります。

もし今修正をするなら、この箇所はプレゼントが袋に入った後に袋を閉じ後ろに並べるといったアクションを入れます。1手間分の工数はかかりますが、違和感が無くて良いでしょう。

最初からアニメーションありきでメインビジュアルを制作する場合は、アニメーションに合わせてビジュアルを柔軟に変更することでも対処可能ですが、アニメーションをループさせる場合は終点と始点をどう繋げるかといったことを念頭に制作するのがコツです。

ただしメインビジュアルに後からアニメーションを付ける場合はビジュアルが破綻しない無理のない範囲で行うのが良いでしょう。

CONTACT

お仕事のご依頼・ご相談はこちらからお気軽にお問い合わせください。