mieki256's diary

パースペクティブワープは、ベクター/イメージレイヤーを、パースをつけて変形させる機能。変形させたいベクター/イメージレイヤーとは別に、ベクターレイヤーを新規作成しておいて、そこに塗り潰した四角形を描いて、「このベクターレイヤーを変形指定に使うよ」と、変形したいレイヤーのプロパティで設定してやれば、パース変形をすることができる。

もっとも、Moho は以前からレイヤーに対して、3Dで移動したり回転させたりできたので、「パース変形？ 前からできてましたよね？」てな印象ではあるのだけど…。

ただ、回転角度を指定するのではなく、四角形の4つの頂点位置を調整して変形具合を指定できるあたりが、絵描きさんには分かりやすいのかもしれないなと…。例えば、手描きの動画に対して、一部分にテクスチャをパース変形させながら貼り込んでいく場合は、四角形の頂点で位置決めできたほうが楽なはず。宮崎アニメの「風立ちぬ」の計算尺のカットとか、ああいう感じで。

さておき。実際に使ってみる。

チュートリアルpdf上ではベクターレイヤーを変形させていたけれど、今回はイメージレイヤーを変形させてみることにした。変形させたいイメージレイヤーの上に、ベクターレイヤーを新規作成。レイヤー名は「mesh map」にしておいたけれど、分かりやすい名前なら何でもいいはず。



例えば、イメージレイヤーが下のような見た目だったら…。



先ほど新規作成したベクターレイヤー(mesh map レイヤー)上で、変形させたい部分を覆い隠すように、「塗り潰した」四角形を描いてやる。「シェイプを描画」ツールを選んで、四角形のアイコンをクリックして、「自動塗りつぶし」にチェックを入れて、キャンバス上で左ボタンを押しながらドラッグ。



mesh mapレイヤーのプロパティ設定を変更。「編集時に非表示」「このレイヤーをレンダリングしない」にチェックを入れる。



「このレイヤーを変形指定に使うよ」的な設定をする。変形させたいベクター/イメージレイヤーのプロパティ設定を開く。レイヤーウインドウ上で、目的のレイヤーをダブルクリックするか、レイヤーを選択してから、上のほうにある「…」アイコンをクリックすれば、そのレイヤーのプロパティが表示される。



ベクターレイヤーなら「ベクター」タブを、イメージレイヤーなら「イメージ」タブを選択。下のほうに「スマートワープレイヤー」という項目があって「なし」になっているはずなので、クリックして「mesh map」を選択してやる。ここで選択したレイヤーが、変形具合を指定するレイヤーになる。



mesh map レイヤーを選択して、タイムライン上の現在フレームを0フレーム以外(1〜最終フレーム)にしてから、四角形の頂点の位置を変更してやると、ベクター/イメージレイヤーがパースのついた状態で変形してくれる。0フレーム以外にしないと頂点位置を変更できないので注意。



そんなわけで、以下のようなアニメが作れました。




でもまあ、最初に書いた通り、レイヤーを3Dで移動したり回転させてもパース変形ができるので…。場面に合わせて、やり易いほうで作業すればいいのだろうなと…。

もっとも、3Dっぽく見せたいなら、blender等の3DCGソフトを使ったほうが良くね？ という気もする…。簡単なモデルを作って、テクスチャ貼って、モデルを動かすだけでも、イイ感じの映像になるよな…。

今までの Moho のメッシュ変形は、三角形ポリゴンで領域を分割して変形させていたらしいけど、四角形ポリゴンで分割して変形させることもできるようになった模様。それがクアッドワープ、なのだろう…。

使い方はパースペクティブワープと同じで、変形させたいベクター/イメージレイヤーとは別にベクターレイヤーを作って、そこに四角形を意識したメッシュを描画しておいて、そのメッシュで変形具合を指定していくらしい。

とりあえず、実際に試してみる。

変形したいベクター/イメージレイヤーの上に、ベクターレイヤーを新規作成。名前は「Quad Mesh」にしてみたけど、分かりやすい名前なら何でもいい。



Quad Meshレイヤー上で、「ポイントを追加」ツールを使って、四角形を意識しつつ、変形したい部分を覆い隠すように線を引いて形を描いていく。

• 「自動ウェルド」にチェックを入れて、既にあるポイントに自動で吸着するようにする。
• 「コーナーをシャープ」にチェックを入れて、直線で線が描かれるように指定。
• 後からスクリプトを使って自動で塗り潰しをするので、「自動塗りつぶし」「自動ストローク」のチェックは外しておく。

形が出来上がったら、スクリプトを使って塗り潰しをする。スクリプト → 描画 → Fill Quad Mesh、を選択。



自動で塗り潰しをしてくれた。もし、三角形や四角形以外の形があったらエラーを表示してくれるらしいので、その時は形を修正してスクリプトを実行し直す、のかな。たぶん。



Quad Meshレイヤーのプロパティを変更。「編集時に非表示」「このレイヤーをレンダリングしない」にチェックを入れる。



変形したいベクター/イメージレイヤーを選択して、プロパティを変更。「ベクター」または「イメージ」タブを選択。「スマートワープレイヤー」が「なし」になっているはずなので、クリックして「Quad Mesh」を選択。これで、Quad Meshレイヤー上の形に基づいて変形されるようになる。



Quad Mesh レイヤーを選択。タイムライン上で0フレーム以外にして、各頂点の位置を変更すると、変形ができる。



そんな感じで、こんなアニメが作れた。




四角形ポリゴンで変形すると、三角形ポリゴンで変形するより歪みが少なくなる場合があるらしいので、場面によって適切なポリゴン形状を選んで作業する、ということになるのかな…。たぶん。