【MOHO Pro 13】アニメーション【学び直し5】

チュートリアル5章のまとめです。

チュートリアル5章 アニメーション より

チュートリアルもとうとう5章まで進みました。

オブジェクトの描画、塗りつぶし色の割り当て、ボーンの設定といった準備作業がすべて終わったら、いよいよアニメーション化です。

Mohoでのアニメーション化の基礎になるのは、キーフレームの概念です。

キーフレームとは、オブジェクト（ポイント、ボーン、またはレイヤー全体）を配置する時点のことです。

キーフレームでは、オブジェクトの位置とタイミングをMohoに指示します。

キーフレームは、オブジェクトが

動き始める → 動きを止める、または、方向を変える

などの、重要な瞬間に設定されます。

キーフレームとキーフレームの間の動きは、Mohoが自動的に作ってくれます。

フレームレート

キーフレームを追加するにあたって重要な「フレーム」という言葉ですが、チュートリアルでは詳しい説明がないので加えておきます。

Mohoでは、動画全体の構成を決めるための[プロジェクト設定]があります。

[プロジェクト設定]では、動画の画面サイズやフレームレートといった基本的な設定を行います。

「フレームレート」というのは、1秒間に表示される静止画（フレーム）の枚数です。（単位＝fps）

デフォルトではフレームレートが「24」になっているので、この場合は１秒間に24枚のフレームで構成されることになります。

つまり、1フレームにつき約0.042秒の計算になります。

逆に、（デフォルトのまま使っていれば）24フレームで1秒と理解して作業したほうが分かりやすいかもしれませんね。

最初の頃は「1フレームって何秒なの？」と思ったものですが、フレームレートの意味が分かれば、設定次第で違ってくることがわかります。

フレームレートの値を大きくすれば、より滑らかに動くアニメーションになりますが、その分、ファイル容量は大きくなります。

ちなみに、一般的なフレームレートは24fpsです。アニメーションであれば、これより大きな数値にすることは稀なようで、むしろ「8」や「12」といった数値でわざとカクカクした動きを作る場合もあるようです。

また、Mohoのデフォルトでは「終了フレーム」が「240」に設定されているので、そのまま使うと、10秒分のアニメーションを作る設定ということになります。

キーフレーム

キーフレームを作成するには、タイムラインウィンドウでキーフレームを発生させたい時点に「現在の時間」を設定（クリック）した後、動く対象に移動やサイズなどの変更を加えます。

例えば・・・

とすれば、挙げた腕を下におろすアニメーションになります。

フレーム10～20の間はMohoが自動的に動きを作ってくれるので、パラパラ漫画のように動くシーンをひとコマずつ用意しなくても、スムーズな動きが再現されます。

このようにキーフレームの設定を繰り返すことで、連続した動きを作っていきます。

Mohoプロジェクトでは、複数の種類の動きをアニメーション化することができ、それぞれの動きは、単独でも組み合わせても使用できます。

4章までのチュートリアルで既にキーフレームを触ってきているので、ある程度の基本は身についていると思います。

5章では、アニメーション化を行うのに役立つ実践的な機能を紹介しています。

作業前の確認事項： [フレーム0]はとっても大事

Mohoの作業では、タイムラインの一番左にあるフレーム「0」はとても重要です。

フレーム「0」の時は、作成モードになっています。この時点では、描画、ボーンの追加、または他のオブジェクトの作成だけを行います。

アニメーション化するのはフレーム「1」以降です。

フレーム1以降のタイムラインで作業をすると、それがアニメーション化されます。

すべてのオブジェクトの元の配置はフレーム0に保存されます。オブジェクトの元の形状や位置を変更したり、新しいオブジェクトを追加したりする場合は、フレーム0で行う必要があります。

「1」以降のフレームでオブジェクトに対して行った操作は、オブジェクトの元の形や位置に影響を与えることはありません。そのため、動きを設定する作業中に、予期しない形になってしまうなどの何かしらの失敗があったとしても、キーフレームを削除すれば元の描画に戻すことができます。

5-1 自動リップシンク

チュートリアル5-1では、Mohoのスイッチレイヤーを使って自動リップシンクを実行する方法を紹介しています。

自動リップシンクのアニメーションを設定する前に用意するものがあります。

自動リップシンクの設定には、[スイッチ]レイヤーを使います。

スイッチレイヤーは、グループレイヤーと同様に、複数のレイヤーをグループ化するために使用されます。

ただし、スイッチレイヤーで一度に表示できるのはサブレイヤーのうち1つだけです。この特徴を活かして、リップシンクアニメーションに利用します。

スイッチレイヤーの中には、それぞれ特定の音に対する口の形を入れておきます。

これで、Mohoが自動的に音声を分析し、キーフレームがスイッチレイヤーに設定されます。

練習用に、簡単なイラストを作ってみました。

とりあえず試してみたかったので、口の形は2種類しか作ってませんが、それでもしゃべってるように見えました。

記事にはgifアニメを使っているので音声はありませんが、MP4形式で保存したものは、ちゃんと音声と口がシンクロしてました。

5-2 音素リップシンク

チュートリアル5-2では、音素に基づいたリップシンクが紹介されています。

前の「5-1 自動リップシンク」では、音声の大きさに合わせて口が開閉しました。

「音素リップシンク」の場合は、音声と音素（口の形）を組み合わせて動かせるので、本当にしゃべっているような口の動きになります。

音素リップシンクでも、スイッチレイヤーを使います。

ただ、中のサブレイヤーには、各発音に対応する口の形を用意する必要があるので、数が増えます。

MOHOチュートリアルのサンプルでは「すべてのフレーズを話すために必要なすべての口の形状が含まれています。」と書いてありましたが、使うのは英語の音声なので、用意された口の形は23枚のベクターレイヤーでした。

22枚はアルファベットの発音用、1枚は口を閉じた形です。

チュートリアルではほとんど完成されたサンプルを使うので、音素データファイルも既存のファイルを使いました。

実際にオリジナルアニメを作成する場合の音素データファイルは、「papagayo」を利用してアニメーションデータファイルを作成する方法があります。

Papagayo (http://www.lostmarble.com/papagayo/)

と記載されてますが、日本語の場合はどうするんでしょう？

しかも、日本語の場合は母音を発音する口の形を用意すれば、それなりに自然なしゃべりを再現できるんじゃないかと思います。

「あ、い、う、え、お」＋閉じた口＝最低6枚

とりあえず、チュートリアルでは音素リップシンク機能を確認することができました。

5-3 繰り返し

チュートリアル5-3では、アニメーションの一部を繰り返し、自動的に循環再生できる「繰り返し」機能を紹介しています。

繰り返しを終了する場合は、繰り返しを終了させたいタイミングで新しいキーフレームを追加します。

サンプルでは、信号機（？）の赤い点滅をアニメーションにしましたが、こうした単純な繰り返し動作を簡単に設定できると、効率よくアニメ作成ができますね。

5-4 アニメーションカーブ

チュートリアル5-4では、タイムラインのグラフモードを紹介しています。

タイムラインウィンドウで普段使っている[チャンネル]タブから、[モーショングラフ]タブに切り替えます。

グラフモードでは、グラフ上に値として描かれたアニメーションカーブを検証できます。このモードでは、加速、方向転換、その他の動きのプロパティを評価するのに役立ちます。

要するに、設定したアニメーションの動きの変化や速度を視覚的に検証しやすくするモードです。

例えば、回転を設定したボーンが、どんな速さで、しかもどの地点でどのくらいの角度に回転しているか？が、グラフにすることでわかりやすくなります。

下図は、チュートリアルのサンプルで使った画面です。回転設定したボーンのアニメーションカーブが表示されています。

横軸は時間、縦軸は回転角度を表しています。

このグラフを読み取ると、「最初の1秒でボーンが1.57度から1.05度まで回転し、続いて0.5秒未満で逆方向に回転する」という動きを表していることになります。

時間の流れとボーンの回転角度、そして速度感が視覚的に確認しやすいですね。

チャンネルアイコンをダブルクリックするとチャンネルが編集モードになって、直接キーフレームの設定が可能になります。

サンプルの場合、キーフレームを上下に動かして、グラフ縦軸の数値を見ながら回転角度を手動で設定するなどして、作業の確認をしました。

異なる設定をしたボーンの場合は、グラフの縦軸も動きに合わせた項目になります。

5-5 奥行きによるレイヤーの並べ替え

チュートリアル5-5では、Mohoの3D関係の機能を紹介しています。

Mohoでは、レイヤーを3次元的に動かして、正確な奥行きのシミュレーションを作成できます。

さらに、Moho にはレイヤーを奥行き順に並べ替えるオプションがあり、アニメーションの途中でレイヤーを前後に移動させることができます。

MOHO Pro 13 チュートリアル「5-5：奥行きによるレイヤーのソート」より

ちょっと何言ってるかわからない…というのが本音ですが、サンプルからアニメーションを使ってわかったのは、次のようなことでした。

サンプルでは、2次元的に作成したオブジェクトに対して奥行きを持たせて動かし、壁（四角形）の前後を3次元的にグルグルと回るアニメーションを作りました。（下図）

3次元的な設定の前には四角形の上で平面的に動いていた赤い円が、ある設定を行うことで奥行きのある3次元的なアニメーションに変わります。

チュートリアルだけでは理解が難しいと感じたので、順を追って3Dアニメーションになる様子をまとめておきます。

2つのレイヤーを準備しておく

3次元的な動きを再現するため、2つのレイヤーを作成しておきます。

上のレイヤーを、[レイヤーの変形]ツールを使って移動させて、移動アニメーションを設定しておきます。

サンプルでは、「フレーム24」で円形が四角形の右下に、「フレーム48」で四角形の左上に移動するように既にキーフレームが設定されていました。

奥行きの作成

次に、移動のアニメーションとは別に、奥行きの設定を行います。

奥行き設定の肝は、[レイヤーを変形]ツールを選択しているときのツールオプション「ポジション：Z」の値です。

[レイヤーを変形]ツールでレイヤーをドラッグする時、通常は2次元（平面）の移動なので、ポジションのXとYの値は変わっても、Zの値は「0」のままです。

Altキー＋ドラッグで、Z軸（奥行き）の移動になります。

サンプルでは、「フレーム12」でAlt＋下方向にドラッグして円を大きくし、「フレーム36」ではAlt＋上方向にドラッグして円を小さくしました。

この操作で、ポジションZの値に変化があって、正の値か、負の値か、の違いがあるはずです。

もちろん、オプションツールバーのZ値に直接数値を入力しても構いません。この場合、入力フィールドをポイントした状態でマウスホイールをクルクルすると、ワークスペース上の変化を見ながら数値を決められます。

ここまでは、アニメーションの再生時にレイヤー順序は守られているはずです。アニメーションを再生すると、円形オブジェクトは常に四角形の前で動いてる状況です。

奥行きによるレイヤーの順序

さて、円が3次元の移動をするときに、壁の向こう側を通っているように見せる必要があります。

通常はレイヤーの並び順＝重なり順なので、この順番を自動的に、かつ自然に入れ替える必要があります。

ここに、Z値が活かされます。

Mohoでは、Z値によってレイヤーごとに深度が異なることを読み取っています。

なので、あとは設定を変えるだけです。

[レイヤーをZソートする]を有効にすると、[レイヤー]パネルのレイヤー順を無視して、遠いものから近いものの順にレイヤーを描画するようにMohoに指示が出されます。

5-5-1 アニメーション化したレイヤーの順序

アニメーションレイヤーの順序付けを使って、オブジェクトを他のレイヤーの前または後ろに移動させるアニメーションを作成することもできます。

サンプルでは、グループレイヤーの中に3枚のレイヤーを用意し、それぞれにオブジェクト（円、星、四角形）を描画してあります。

グループレイヤーの[レイヤー設定]ダイアログを開き、[Zソート]タブにある[アニメーション化されたレイヤーの順序を有効にする]を有効にします。

タイムラインウィンドウで、現在の時間を変えながら各時点でレイヤーの順序を入れ替えるようにキーフレームを設定すると、アニメーション再生時に自動的にレイヤーの順序が入れ替わるようになります。

すぐには使う場面が思いつきませんが、こんなこともできるとインプットしておきたい機能です。

5-6 アクション

チュートリアル5-6です、アクションについて学びます。

Moho Proでアクションというのは、レイヤー（またはレイヤーグループ）に関連付けられた小さなアニメーションクリップです。

アクションを使用すると、繰り返し使用する動きに再利用できるアニメーションを作成できます。

チュートリアルでは、サンプルを使ってアクションの設定を実践しましたが、アクションそのものは既に用意されたもので、キーフレームに割り当てていく作業だけを体験しました。

アクションの作り方や登録方法には触れていないので、別の機会に調べてみようと思います。

5-8 3Dシーンの作成

途中に「チュートリアル5-1-1」があったせいか、「5-7」が無くて、「5-8」になります。

ここでは、Mohoで3Dシーンを構築し、移動させる方法を紹介しています。

Mohoは完全な3Dプログラムではありません。Mohoのレイヤーは3D空間に存在する2D平面です。しかし、これらの2Dレイヤーを適切に配置し、3Dカメラを使って移動させることで、リアルな3D環境を作成できます。

「チュートリアル5-5:奥行き」で登場したポジション「Z」。いわゆる「Z軸」を活用することで、3Dシーンを作っていきます。

また、[フェイスカメラ]機能を使うと、立体的な移動を実現できます。

最初にサンプルを開くと、のっぺりした平面的な風景が描画されています。（下図）

完成させた状態の3Dシーンが コチラ。

このシーンをカメラ目線で奥行きを感じながらグルングルンと動かすことができて、その様子をアニメーション化できます。

完成に近いサンプルから始めて、指定された値を入力するだけで立体画像とアニメーションが完成してしまうので、自分一人で最初から作るとなると自信ないです。

が、まずは、こういった動きも作ることができるということをインプットしておけばいいかなぁ～と思います。

5-9 基礎物理学

チュートリアル5-9では、基礎物理学の機能を学びます。

と言われても「何？」って感じですよね。

Mohoには、オブジェクト同士が衝突したり跳ね返ったりできる物理エンジンが搭載されています。その機能を紹介したチュートリアルになります。

Mohoプロジェクトには、物理​​法則の影響を受けないオブジェクトと、影響を受けるオブジェクトの両方を含めることができます。

この2種類を区別するため、物理法則が適用されるオブジェクトを同じグループレイヤーにまとめます。

レイヤー設定ダイアログに[物理]タブがあり、中の項目を設定していくだけで、下のようにボールが壁にぶつかって跳ね返る動きを再現できます。

5-10 フレーム別レイヤーによるアニメーションの制作

チュートリアル5-10では、[フレームバイフレームアニメーションレイヤー]機能を使って、フレーム単位でのアニメーションを作成する方法を紹介しています。

もう少し分かりやすく書くと、フレーム単位で動くアニメーションを、効率的に作成する機能です。

例えば、サンプルでは尺取虫が移動するアニメーションを作成します。尺取虫の動きをアニメーション化しようとすれば、同じ間隔で伸びたり縮んだりする動きの繰り返しになりますよね。

この状況を手動でキーフレーム追加するよりも、今回のチュートリアル内容を活用したほうが、ずっと効率的になります。

フレーム単位でアニメーションレイヤーを作成する方法は以下の2通りあります。

スイッチレイヤーを使う方法

ここまでのチュートリアルで勉強した「スイッチレイヤー」を使って、フレーム単位のアニメーションを作ることができます。

フレームバイフレームレイヤーを使う方法

「フレームバイフレーム」レイヤーを使って、フレーム単位のアニメーションを作ることもできます。

フレームバイフレームレイヤーを使うと、スイッチレイヤーで行う作業が省略できます。

新規でフレームバイフレームレイヤーを作成すると、Mohoは新しいスイッチレイヤーを作成し、フレームバイフレームアニメーション用に設定し、その中に最初のベクターレイヤーまたは画像レイヤーを配置します。

つまり、スイッチレイヤーを使う時に行っていた作業を、フレームバイフレームレイヤーなら自動で行ってくれる、という優秀なレイヤーなんです。

チュートリアル5-10では、こちらの「フレームバイフレームレイヤー」の使い方を実践します。

チュートリアルでは、ベクター描画ツールを使って「尺取り虫」を描き、クネクネと伸縮しながら歩くアニメーションを作ります。

フレームバイフレームレイヤーはグループフォルダーのような働きをしていて、この中にベクターレイヤー、または画像レイヤーが入ります。

サブレイヤーは、作業の中で自動的に作られていき、ここがスイッチレイヤーとは異なる所です。

レイヤーパネルの[新規レイヤー]をクリックして[フレームバイフレーム]を選択すると、レイヤー内に自動作成するレイヤーの種類を確認されます。ベクターレイヤーか画像レイヤーか、どちらか任意の種類を選択しましょう。

新規作成されたフレームバイフレームレイヤーの中には、選択した種類のサブレイヤーが収納された状態で[レイヤー]パネルの中に配置されます。

フレームバイフレームレイヤーを選択しているときは、タイムラインにフレーム単位コントロールボタンが表示されます。

このコントロールボタンを活用しながら、フレーム単位でアニメーションを作っていきます。

尺取虫が動くアニメーションを作ります。

• フレーム「0」を選択しておきます。
• レイヤーパネル[新規レイヤー]→[フレームバイフレーム]を選択します。
• 「Please Choose Frame By Frame Type」の確認メッセージが表示されたら、[Vector]をクリックします。
  • ベクターレイヤーを選択したので、フレームバイフレームレイヤーの階層内にベクターレイヤーが作成されます。
  • 階層を展開する必要はありません。
• ベースのイラストを描画します。
  • サンプルでは、尺取虫が伸び切った姿を描画します。
  • フレームバイフレームレイヤーを選択していれば、自動的にサブレイヤーに描画されるので、フレームバイフレームレイヤーを展開する必要はありません。（確認のために開いておくのはアリです）
  • 下のイラストはフレーム「0」で描く縮む前の尺取虫。フレームバイフレームレイヤー内のレイヤー1に収まります。
  • 
• 次のフレームを作成するため、[フレームの追加]アイコンをクリックするか、F5キーを押します。
  • [フレームの間隔]が「1」のままなら、新しいフレームは1フレーム進んだ時点に作成されます。
  • フレームバイフレームレイヤーの階層内に、自動的に新しいレイヤーが作成されます。
• タイムラインのコントロールボタンの横にある[オニオンスキン]機能をONにします。
  • オニオンスキンは、編集ウィンドウ内に前のフレーム内容を薄く表示する機能です。
  • 
• ここから、何段階かに分けて尺取虫が縮む様子を作成していきます。薄く見えるようになった前フレームのイラストを参照しながら、1フレームごとに描いていきましょう。
  • 1段階描いたら、F5キーを押してフレームを追加し、再びイラストを描いてフレームを追加する。これを繰り返して尺取虫が縮みきるまでを作成します。
  • フレームを追加するごとに、フレームバイフレームレイヤー内のサブレイヤーも増えていきます。
  • 
• 今度は、尺取虫が元の形に戻る様子を作っていきます。フレームを追加（F5）しながら、徐々に体の高さを低くしていきましょう。
  • 
• チュートリアルでは、尺取虫の模様を入れる作業や、アニメーションを繰り返す設定をして完成させますが、ここでは省略します。

以上が、フレームバイフレームレイヤーの使い方です。

徐々に変化するアニメーションを作成する時に便利な手法だと思いますが、そのためにはMohoでの描画スキルをアップする必要がありそうですね。

5-11 アニメーション化した形状（図形）の順序

チュートリアル5-11では、同じレイヤー内に配置した複数のオブジェクトを、重なり順に合わせて入れ替えるアニメーションの設定を紹介しています。

レイヤー内のオブジェクトの重なり順を変更する方法は、「チュートリアル2-5:形状の順序」を参照しましょう。

上の手順❸「アニメーションシェイプ順」を有効にしていれば、「フレーム指定→順序入れ替え」の作業だけで、サンプルのようなアニメーションが完成します。

まとめ

長い長い5章でした。しかも中身が濃い！

5章は項目ごとにページを分けることも考えましたが、5章の内容は「使い方」というより、便利な機能の紹介という感じだったので、本格的にアニメーションの作成を始めた時に1記事にまとめておいたほうが良いと思い、全てこのページに詰め込みました。

あらためて5章で紹介された機能の確認です。