NiVE2をインストールしてみたけど、「手も足も出ない」状態の人が、「難しいことはいいから、とにかく素材を動かせるようになる」ことが目標です。
【第8回のポイント】
- アンカーポイントと回転
- 親子関係
※画像はクリックで拡大表示します。
まずはNiVEを起動して前回までのプロジェクトファイルを開きます。
前回Aメロのシーンを作り、キーフレームの基本的な使い方を解説しました。
今回はBメロのシーンを作っていきますが、ここが本講座の最後の山場です。
Bメロのシーンまでの解説でその他のシーンはほぼ作れますので、あと一息頑張ってください。
【今回作成するシーン】※音は入っていません
ご覧いただくとお分かりいただけると思いますが、このシーンはほぼ、同じ動きの繰り返しでできています。
この動きの1サイクルは46フレームあります。まずはこの1サイクルを作っていきます。
コンポジションにレイヤーを配置する
まずはコンポジションを新たに作成し、その中で1サイクル分の動きを付けていきます。アイテムパネルの空いているところを[右クリック]→[コンポジションの作成]を選びます。
「コンポジションの設定」というウィンドウが開きます。
長さ:
先ほど「1サイクル46フレーム」と書きましたが、あまり短すぎるとタイムラインが扱いづらくなるので、とりあえず10秒ほど長さを取りました。(後で変更します)
名前:
「ボール」としました
他の設定は特に変えていません。
このシーンで個別に動いているパーツは「ボール」、「頭部」、「右腕」、「左腕」です。
さらに腕は、肘の関節でパーツが分かれており、それぞれ個別に動いています。
このシーンを作るのに用意した素材は、左図の通りです。
Aメロでは素材を2つしか使わなかったので、いきなり多くなった気がしますね…。
【2013.03.10追記】
こうした透過PNGの素材を作る手順を解説した記事を作りました。
よろしければご参考ください。
●Photoshop編
●GIMP編
先ほど作成したコンポジションに、これらの素材を配置します。
ですがその前に、画面が黒いと見づらいので、「平面 白[640,348]」のカラーイメージをコンポジションに仮置きしておきます。
また、歌詞を表示させる黒い帯も仮置きしておいた方が、他のレイヤーの配置などがしやすいと思います。(この二つのレイヤーは、最後に消します)
カラーイメージを仮置きしたら、素材をコンポジションに入れます。
レイヤーはコンポジションの中央に配置されるので、ひとつひとつのレイヤーのトランスフォームから位置を調整し、図のように一枚の絵に見えるように配置していきます。前後関係を考え、手前になるものをレイヤーの上に配置していきます。
※用意した素材が大きく、画面に収まり切らないためトランスフォームのスケールを調整しレイヤーの大きさも弄っていますが、後で拡大表示に耐えられるようわざと大き目に素材を作っています。スケールの使用については、次回解説します。
レイヤーを回転・移動させる
まずはボールの動きから付けていきます。このボールは、くるくると回りながら上昇していますので、「位置」と「回転」を操作する必要があります。
この動きは、14フレーム目から始まります。
インジケータを00:13fに合わせ、ボールレイヤーの「位置」と「回転」の横にある時計のアイコンをクリックし、キーフレームを作成します。(左図参照)
【フレームの数と目盛りの関係】
「14フレーム目から動きが始まる」と言ったのに、インジケータを00:13fに合わせる理由は、コンポジションの1フレーム目は00:00fだからです(インジケータをタイムラインの先頭に移動させるとお分かりいただけると思います)。
2フレーム目が00:01f、3フレーム目が00:02fとなるので、14フレーム目は00:13fになります。
次に、46フレーム目(01:15f)に移動し、「位置」の値を変更してボールを画面の上にあげます。
次に「回転」を90°と入力します。
これで、00:13fから01:15fにかけて、ボールレイヤーが90°回転しながら上昇する動きができます。
【レイヤーの回転】
「回転」の項目は「0×0°」という表記になっていますが、左の数字は回転数です。1なら1回転(360°)です。
「1×30°」とした場合、390°ということになります。
また、回転の方向はマイナスを入力することで、反時計回りにすることができます。
「0×-90°」と入力すれば、反時計回りに90°回転させることができます。
関節の動きを作る
【レイヤーは、アンカーポイントを基準に回転します】
それでは、頭部から動きをつけていきます。
頭部のレイヤーの「アンカーポイント」の値を調整し、首の付け根あたりがアンカーポイントになるようにします。
…アンカーポイントを変更したことで首が離れてしまいました。
「位置」の値も調整し、胴体とつなげてあげます。
インジケータを00:13fに移動させ、「回転」の横の時計アイコンをクリックしてキーフレームを作ります。
01:15fへ移動し、「回転」を「7°」と入力します。
これで、ボールの上昇を追うようにキャラクターの顔が傾く動きができました。
腕の関節も、同じように動きを付けます。
左図では、各レイヤーのアンカーポイントの場所を、青いマークで示しています。(NiVEではアンカーポイントが赤で表示されるため見づらかったので、手描きで青いマークを入れました)
01:15fのキーフレームに設定した、各レイヤーの回転の値は次の通りです。
手前の上腕(左図右上)…-13°
手前下の腕(左図左上)…-19°
奥の上腕(左図右下)…-15°
奥の下の腕(左図左下)…-19°
これで腕がゆっくりと降りていく動作が完成…ではありません。
残念ながら、これだけでは問題があります。
肩の関節を回転させることにより、01:15fで上腕レイヤーの肘の位置が変わってしまい、続く下の腕のレイヤーと肘がズレてしまいました。
親子関係を設定する
上腕の回転に連動して、下の腕を移動させるには、二つのレイヤーに親子関係を設定します。
【親レイヤーと子レイヤーの関係】
子レイヤーは、親レイヤーの動きに相対して動きます。
親レイヤーは、子レイヤーが動いても影響を受けません。
親レイヤーに相対して動くというところがポイントです。
レイヤーの親子関係は関節の動きに使用するだけでなく、考え方次第で色々と面白い動きを実現できますので、是非覚えていただきたいと思います。
それでは設定していきます。
まず、タイムラインのインジケータを00:00fへ移動させます。
これは、親子を設定したとき、現在インジケータの示すところが相対関係の基準になるからです。
次に、「ボール_腕奥_2」というレイヤー(奥の下腕のレイヤーです)の、「―1:なし」と書かれているところをクリックし、「―8:ボール_腕奥_1」(上腕のレイヤーです)を選択します。
これで下の腕のレイヤーの親が、上腕のレイヤーに設定されました。
同様にして、手前の腕も親子関係を設定します。
左図は、親子関係の設定前と設定後の、01:15fの画面です。
上腕の動きに連動して、下の腕がちゃんとついてきていることがわかります。
今回はこれで終わりです。
次回は、Bメロのシーンを作る続きになります。
次回は、Bメロのシーンを作る続きになります。
第九回へ→
講座目次へ→
はじめまして
返信削除この素材で腕とかを動かすときは画像をソフトで切り抜くんですよね?
なにかいいソフトとかいいサイトないでしょうか
探してもなかなか見つからなくて。。。。
>匿名さん コメントありがとうございます。 絵を描いてから切り抜くより、初めから動かす箇所を決めて、動く部分を別々に書き出しした方が良いと思います。 やり方ついては、このコメント欄で説明するのが難しいので近いうちに記事を書くようにしますね。 申し訳ありませんが、しばしお待ちいただくようお願いいたします。
返信削除