9VAeを使って動画をトレスする方法を説明します。9VAeきゅうべえアンドロイド版でもPC版、iPad/iPhone版でもつくれます。ここで説明したトレス作業には２から数時間かかります。他のアニメの作り方はこちらをご覧ください
トレス動画は、動画をキャプチャし、全コマ手書きでトレスするのが基本です。例えば以下の１４秒の動画は、秒２４コマなら、３３６コマ、絵をトレスする必要があります。
ところが、9VAeを使えば、キーフレームだけトレースし、中間のコマは自動補間させることで、絵をトレスする枚数を大幅に減らすことができます。 この動画ならたった６コマのトレースで再現できます。
■ 9VAeきゅうべえのダウンロード
フリーソフト9VAeきゅうべえは以下からダウンロードできます。
１．トレスしたい動画１カットから８コマ以内のキーフレーム画像を選ぶ
上の14秒の動画キャプチャから以下の６枚の絵を選んでキャプチャしました。下の時間は選んだコマが再生される時間です。トレスを試してみたい場合はご使用ください。画像サイズは、２８０ｘ２１０です。
-
０秒
-
２秒
-
５秒
-
６秒
-
８秒
-
１３秒
２. キーフレームのコマを読み込み、再生時間を設定
- 絵・写真入力ボタン（上図A）をクリックし、最初のコマを入力。もし画面サイズがあわなかったら、ページメニュー＞ページ設定（スマホの場合は、ファイル＞ページ設定）で画面サイズの縦横を画像サイズ（上のサンプル画像は２８０ｘ２１０）に合わせてください。
- ページの右側の「＋」（上図B）をクリック。メニューから「空白ページを作る」。新しいページができるので、順番にトレスする原画を入れてください。
- 原画をいれたらページの時間（上図C）を設定しましょう。この部分をクリックし、そこに入れた原画の再生時間から次の原画の再生時間までの時間を設定します。
- 再生ボタン（上図D）を押せば、原画が正しい時間に再生されます。この上にトレス画像を追加していき、なめらかに動く動画にかえていきます。
３．背景ページ作成し、最初の原画を背景ページに入れる
- 先頭ページの左側の「＜」（上図E）をクリック。「背景ページを入れる」をクリック。先頭に背景ページができます。
- ２ページ（下図F）をクリックして２ページに移動
- 原画（下図G）をクリックして選択。図形を切り取るボタン（下図H）をクリック。原画がクリップツールに切り取りされます。
- 背景ページ（下図I）をクリックして移動
- 図形を取り出すボタン（下図J）をクリック。メニューから「ステージにもどす」をクリック。背景ページに原画がはいります。
４. 左の雲をトレス
- 背景ページの原画の上を9VAeきゅうべえでなぞっていきます。
- 9VAeは図形エディタなので、重なり順序が重要です。あとから重なりを変更できますが、なるべく背後にあるものからトレスしていきます。
- ２ページ（上図F）をクリックして２ページに移動。背景ページが見えます。
- わかりやすいように線の色（下図K）をクリックして、赤色にします。
- まず、左上の雲をトレスしてみましょう。画面左下の「＋」（下図L）で画面を拡大できます。パソコンの場合、スペースキーを押しながら画面をドラッグすれば拡大位置を変更できます。スマホではピンチイン、ピンチアウト、２本指ドラッグが使えます。
- トレスは折れ線（下図M）を使ってみてください。
- 下図の△□で表示されている点が入力した点です。△がとがった点、□が曲がった点を表します。この２つは右側のパレットの「コーナー、カーブ」（下図N）または、シフトボタン（下図O）で切り替えられます。
- 折れ線入力では、最初に入力した点をクリックすれば図形入力がひとつ完了します。
- 間違えたときは、Undoボタン（下図P）で戻してください。点選択ボタン（下図Q）をクリックすれば下図のように入力した点が表示されるので、点を選んで位置を修正したり、△、□を変更できます。
５．雲を複製して影を入力
- 選択ボタン（下図R）をクリック。選択枠を表示させます。
- 下のシフトボタン（下図S）をクリック。選択枠中心の「＋」（下図T）をクリック。メニューから「複製する」をクリックします。シフトが押された状態で「複製する」を実行すれば、同じ位置に複製されます。パソコン版の場合はシフトキーを押しながら「複製する」をクリックしても同じです。
- 点選択ボタン（下図U）をクリック。点が表示されるので点をドラッグして移動させ、雲の影をつくります。
雲の影を入力した状態を下図に示します。
６. 雲の影の色、雲の色を設定、パレットに登録
- カラーパレットの色１（下図V）をクリック。「画面から色を選ぶ」をクリック
- 雲の影の色（下図W）をクリック。雲の影の色が塗られます。
- 登録ボタン（下図X）をクリック。雲の影がパレットに登録されます。
- 雲（下図Y）を選択
- カラーパレットの色１（下図V）をクリック。「画面から色を選ぶ」をクリック
- 雲の色（下図Z）をクリック。雲の色が塗られます。
- 影が登録されたパレット（下図a）をクリック。メニューから「追加登録する」をクリック。これで雲がパレットに登録されました。
７. 雲を複製し、別の雲をつくる
- 登録された雲（上図a）をクリック。メニューから「選択する」をクリック
- これで雲が選択されます。選択枠の中心の「＋」をクリック。メニューから「複製する」をクリックこれで雲が複製されます。
- 登録された雲（上図a）をクリック。メニューから「追加登録する」をクリック
- 画面左下の「ー」（下図ｂ）をクリックして倍率を下げます。
- 選択枠をドラッグして右側の雲の上に移動。
- 登録された雲（下図ｃ）をクリック。メニューから「下と重ねる」をクリック。これで背景が透けて見えるようになります。
- 点選択ボタン（下図ｄ）をクリックし、雲の形を背景に合わせます。
- 完成したら、もう一度複製し、上の雲を作ります。
８. 左下の家をトレス
- 左下の家をトレスしました。折れ線入力（下図ｅ）を使って、家の向こう側の図形から入力していきます。
- 全部入力が完了したら、今度は手前の図形から順番に、塗り色（下図ｆ）から「画面から色を選ぶ」を使って色をつけていきます。
- 完成したら家全部を選んで、登録パレットの「＋」（下図ｇ）をクリックしてパレットにまとめておきます。
９. 後ろの山をトレス
- 後ろの山をトレスしました。
- 入力が完了してから重なりを下にするボタン（下図ｈ）を何回かクリックし、家よりも背後にしました。
- 下図は、登録パレットに登録したあと、ボタン（下図ｉ）をクリックし「下と重ねる」設定して背景と重ねて見せています。
１０. 後ろの髪、首、顎の下の影をトレス
１１．服をトレス
- 服をトレスしました。
- 山が邪魔になるので、登録されたパレット（下図ｊ）をクリックし「隠す」にして見えなくしました。
１２．顔をトレス
- 顔をトレスしました。
- 邪魔になるパーツは、登録パレットから「隠す」設定して見えなくして作業します。
- 肌の色、髪の毛の下の影の色は画面から入力しました。
１３．左目をトレス
- 左目をトレスしました。
- 瞳は円ボタン（下図ｋ）、眉毛は折れ線ボタン（下図ｌ）で入力しました。
- 顔は、登録パレット（下図ｍ）を「隠す」設定にして、見えなくしています。
１４．左目を複製し、右目に形を合わせる
- 右目は左目を複製し、変形して作成しました。
- 画面から色を取得してつけました。
１５．髪の毛をトレス、線の色を黒、または、なしに変更
- 髪の毛をトレスしました。
- トレス作業中、邪魔になるパーツは登録パレットで「隠す」設定にして作業しました。
- トレスした髪の毛は「＋」ボタン（下図ｎ）をクリックし登録パレットに登録しました。
- その後、各図形を選択し、線の色（下図ｏ）をクリックし黒色にするか、線の種類（下図ｐ）をクリックし「なし」に設定しました。
- 最後に登録パレットの設定をリセットするボタン（下図ｑ）をクリックし、「隠す」設定を解除した状態が下図です、
１６．背景の画像を次のキーフレームの画像と入れ替える
- 背景ページ（上図ｒ）をクリックして背景に移動
- 画像をクリックして選んで、切り取りボタン（上図ｓ）をクリック。画像が記憶ツールに移動します。
- ２ページ（上図ｔ）をクリックして２ページに移動
- 取り出しボタン（上図ｕ）をクリック。メニューから「ステージに戻す」をクリック。画像が２ページに戻ります。
- ３ページ（上図ｖ）をクリックして３ページに移動
- 画像をクリックして選んで、切り取りボタン（上図ｓ）をクリック。画像が記憶ツールに移動します。
- 背景ページ（上図ｒ）をクリックして背景に移動
- 取り出しボタン（上図ｕ）をクリック。メニューから「ステージに戻す」をクリック。３ページの画像が背景に入ります。
- ３ページ（上図ｖ）をクリックして３ページに移動。背景が背後に見えます。
１７．２ページのトレス画像を３ページにリンクコピー
- ２ページ（上図ｗ）をクリックして移動。
- 編集メニュー＞選択する＞全て（スマホの場合は「編集メニュー＞すべて選択」）。
- 次のページにリンクコピーするボタン（上図ｘ）をクリック。これで２ページの図形が全て３ページにリンクコピーされます。リンクコピーされた図形は、変形したときに途中の形が自動補間されます。
- ３ページにコピーされた原画は不要なので、３ページの原画をクリックして選択し、削除ボタン（上図ｙ）をクリック。これで、３ページに２ページの図形がコピーされ、下に背景の原画が見える状態になりました。
- 下図では、登録パレット（下図ｚ）をクリックし、「下と重ねる」にチェックを入れています。
１８．雲の形を原画に合わせて変形
- 雲以外の登録パレット（下図A）をクリックし、「隠す」にチェック。パレットが見えない場合「＜＞」ボタン（下図B）で表示させることができます。
- 雲の登録パレット（下図C）をクリックし「下と重ねる」にチェック。これで雲だけが原画と重なって見えます。
- 雲の登録パレット（下図C）をクリック。メニューから「選択する」をクリック。これで雲が選ばれます。
- 点選択ボタン（下図D）をクリック。雲の点が表示されるので、原画に合わせて変形していきます。
- １点ずつ移動することもできますし、下図のように複数の点を選んで、選択枠の辺のハンドル（下図E）をドラッグしてまとめて引き伸ばすと効率よく変形することができます。
１９．家を原画に合わせる
２０．服、首、背景の山を原画に合わせる
２１．顔を原画に合わせる
- 顔を原画に合わせます
- 拡大して、ていねいに点の位置を調整していきます。
- 点の一部を選んで、もう一度点選択ボタン（下図F）をクリックすれば、その点を含んだ図形の点だけ表示されるので、修正しやすくなります。
- 点の数がたらなくて形が合わせられない場合は、点追加ボタン（下図G）をクリックすれば点を追加できます。
- プレイボタン（下図H）を押して動きを確認しながら調整してください。２ページの原画を選んで、重なり順序を下げるボタン（下図I）をシフトキー（下図J）といっしょにクリックすれば、原画が一番下になり、２ページから３ページまでトレスした図形がなめらかに動きます。
２２．３ページにあって、２ページにない雲を複製して作る
- ３ページの上の雲は、２ページにはなかったので、３ページの雲を複製してつくります（下図□△）。
- 追加する雲ができたら、選択ボタン（下図K）をクリックし、シフトボタン（下図L）をクリックし、２ページにもある雲（下図M）を左からドラッグして追加選択します。これで、新しく追加した雲と、２ページにリンクした雲の両方同時に選択した状態にします。
- 前のページにリンクコピーするボタン（下図N）をクリック。これで、新しく追加した雲がいっしょに選択した２ページにある雲に合わせた位置にコピーされます。
２３．ここまでトレスした結果
ここまでトレスした結果は、以下のように２秒のアニメーションになります。０秒の原画をトレスし、２秒の原画にあわせて変形したわけですが、これで、２秒分、すなわち秒２４コマなら４８コマ分トレスしたことになります。
あとの作業のポイントをまとめると次のようになります。
- リンクコピー（上図O）を使ってトレスした図形を次の原画にコピーする
- 原画は背景ページに移動させる
- 登録パレットの「下と重ねる」「隠す」を有効に使う
- 画面を拡大し、背景にあわせて点を移動させる
- 図形の一部の点を選び、点選択ボタンをクリックすれば、その図形の点だけ表示されるので有効に使う
- 点が少なくて形が修正できないときは、点の追加を使う
今回説明していないテクニックもあげておきます。
- うまく補間できない場合、中間ページを作成して修正できます。
- 正確な回転、パスにそった動きは、アニメキャストを使います。
- 背景が動かない口パクは動きグラフをつかえば少ないコマで表現できます。
- １つの図形が２つに別れるといった場合、０秒のページをいれて別の図形（リンクしていない図形）に切り替えます。
２４．アニメGIF出力
- ファイルメニュー＞「アニメGIF出力」でアニメGIFが作成できます。
- パソコン版の場合、最初に保存場所、ファイル名を指定します。デスクトップなど、わかりやすい場所に作成してください。
- Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
２５．9VAeきゅうべえでトレス動画を作る利点
9VAe上で原画をトレスするのはそれなりに時間がかかりますが、
- 最初の絵のトレスには時間がかかるが、２枚目以降はコピーして変形するので手間がかからなくなる。
- 後からいくらでも細かい修正ができる。
- 完成した後で、秒間のコマ数、再生画面サイズを自由に調整できる。
- トレスしたキャラクタに、新しい表情や新しい動きをつけるのが簡単。作成したアニメーションが次の素材として有効利用できる。
- 次の表にあるように、いろんなフォーマットで動画クリップを出力できる。
といったメリットがあります。
9VAeをつかえば短い動画クリップがすぐ作れる
- 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
- もっと長いアニメや動画を作ることもできます。以下をご覧ください。
9VAeきゅうべえ：長いアニメを作る方法 - Qiita
9VAeきゅうべえに関する問い合わせ
△が右上隅の場合、周囲のタイルとの重なりがまったくないので、つなぎ目が目立つ場合があります。△を内側に移動させると重なり部分ができ、その間をなめらかに接続するためつなぎ目が目立たなくなります。
