mieki256's diary



2017/06/13(火) [n年前の日記]

#3 [moho] Mohoで3Dっぽいカメラワークをしてみるテスト

Moho Pro 12 のチュートリアルpdfに従って、3Dっぽいカメラワークでアニメを作る手順を試したり。一応、使い方をメモ。

実験用画像として、木の画像と地面の画像を用意した。どちらも CC0 / Public Domain ってことで。

_tree4.png
_ground.png

画像を読み込む。 :

ファイル → 新規、でファイルを新規作成して、レイヤーウインドウ上でイメージレイヤーを追加。ファイル選択ダイアログが開くので、木の画像と地面の画像を読み込む。元々あったベクターレイヤーは削除。

こんな感じになった。
3dscene_ss_01.png

後から木をたくさん作りたいので、木の画像レイヤーはグループレイヤーに入れてまとめておきたい。グループレイヤーを追加する。
3dscene_ss_02.png

グループレイヤーに、木の画像レイヤーをドラッグアンドドロップ。
3dscene_ss_03.png

グループレイヤーに、木の画像レイヤーが登録された。
3dscene_ss_04.png

地面を作る。 :

地面に相当する画像レイヤーを3D的に回転させて地面を作る。

地面の画像レイヤーを選択して、「レイヤーをX/Y回転」ツールを選ぶ。件のツールを選ぶと、上のほうに、X軸回転とY軸回転の値を入力する欄が出現するので、X回転に-90(度)を指定。これで、地面相当の画像レイヤーになった。
3dscene_ss_05.png

地面の高さを少し下げて、カメラから地面として見えるようにする。「レイヤーを変形」ツールを選択。上のほうで各種入力欄が出てくるので、Y値を-0.25にする。更に、このままだと地面としては小さ過ぎるので、拡大縮小値に、X=5、Y=5、Z=5を設定して大きくしてやる。
3dscene_ss_06.png

本当に地面っぽくなったのか、目視で一応確認する。「軌道」ツールを選んでキャンバス上で左ボタンドラッグしてやると、3Dっぽい表示になって、地面っぽくなってることが確認できる。
3dscene_ss_07.png

表示を元に戻す。「表示をリセット」ボタンをクリックするか、メインメニューの、表示 → リセット、を選ぶ。これでいつもの2Dっぽい見た目に戻る。
3dscene_ss_19.png

木の見た目を調整。 :

木の画像レイヤーの見た目を調整してやる。

木の画像レイヤーを選んでから、「レイヤーを変形」ツールを選ぶ。大きさや位置等をお好みで調整。コツとしては、自分の目の高さが、キャンバスのちょうど真ん中あたりなのだと考えて…。木の幹のどのあたりが目の高さになるかを想像して、そこがキャンバスの真ん中あたりに位置するように、てなことを意識しつつ縦方向の位置を調整してやるとイイ感じになる。できれば、その際のY値を覚えておくと、後で他の木の位置を調整する際も、ちょっと楽になる時があったりするかもしれない。
3dscene_ss_08.png

木の画像レイヤーの、X値とZ値を変更して、木が立ってる位置を調整する。チュートリアルpdfでは、-3〜+3の範囲で調整するとイイ感じ、みたいなことが書いてあった。
3dscene_ss_09.png

木が必ずカメラを向くように設定。 :

木の画像レイヤーを、 _ビルボード として動くように設定してやる。

木の画像レイヤーをダブルクリックして、レイヤー設定を表示。一般タブ → フェイスカメラ → ピポットY軸、を選ぶ。これで、木の画像レイヤーが、いつでもカメラのほうを向くように設定できた。
3dscene_ss_10.png

木を増やす。 :

木の画像レイヤーを複製して増やす。

コレ、チュートリアルpdfを眺めた限りでは、一枚一枚手作業で増やすのだけど。ちょっと作業としてはアホらしいなと。スクリプト等でドバーッと増やすわけにはいかんのだろうか。

とりあえず、木の画像レイヤーを右クリックして、「レイヤーを複製」を選んで複製する。あるいは、レイヤーウインドウの上のほうに複製ボタンがあるので、ソレをクリックして複製してもいい。
3dscene_ss_11.png

複製したら、「レイヤーを変形」ツールを選んで、X値とZ値を変更して位置を変更してやる。見た目が2枚になった。
3dscene_ss_12.png

この作業を繰り返して、木の画像レイヤーを増やす。チュートリアルpdfでは計12枚にしていたので、ソレに倣ったり。
3dscene_ss_13.png

ところで、このままでは木の画像レイヤーの優先順位が、レイヤーの並びに従ってしまうため、例えば奥にあるはずの木が手前に表示されてしまったりして、見た目的に都合がよろしくない。

そこで、木が登録されてるグループレイヤーの設定を変更して、Zソートで自動的にレイヤー順が変化するように設定してやる。

グループレイヤーをダブルクリックして、レイヤー設定を表示する。「Zソート」タブ → レイヤーをZソートする、にチェックを入れる。
3dscene_ss_14.png

これで、各レイヤーの優先順位がZ値で変化するようになった。レイヤー名の並びを眺めると、自動で変化してることが分かる。
3dscene_ss_15.png

カメラを3D的に動かす。 :

カメラを3D的に動かしてアニメを作成する。

1フレーム目に変更してから、「カメラをトラック」ツールを選ぶ。キャンバスをクリックすると、キーフレームが作られる。
3dscene_ss_16.png

任意のフレームに変更して、「カメラをトラック」ツールでカメラ位置を変える。
  • 「カメラをトラック」ツールは、キャンバス上で左ボタンドラッグすることで、上下左右にカメラ位置を変更できる。
  • また、Alt + 左ボタンで上下ドラッグすると、Z方向(手前・奥)に移動することもできる。
  • あるいは、上のほうに、X,Y,Zの入力欄があるので、そこに数値を打ち込んでカメラ位置を変更しても良い。

「カメラのパン/チルト」ツールを選んで、カメラの向きを変化させる。キャンバス上でドラッグすれば向きが変わるが、Shift + ドラッグで、横方向のみ、あるいは縦方向のみに制限をつけながら向きを変えることもできる。
3dscene_ss_17.png<br>

ある程度キーフレームを指定したら、上から眺めてカメラの軌道を確認する。「軌道」ツールを選んでキャンバス上でドラッグすると、斜め上から眺めた見た目になる。その状態で、「カメラをトラック」ツールを選んで、上のほうのオプションの「パスを表示」にチェックを入れると、カメラがどのように動くのか、軌道が水色の線で表示されて確認できる。
3dscene_ss_18.png

出力結果。 :

てなわけで、こんな出力結果が得られたリ。



たしかに、3Dっぽいカメラワークが実現できた。

しかし…。こういうカメラワークの映像を作りたいなら、3DCGソフトを使ったほうが早くて確実なのではと思えてきたりもして…。

以上です。

過去ログ表示

Prev - 2017/06 - Next
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project