dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

トレス動画は9VAeきゅうべえで作ると絵を描く枚数を減らせる

9VAeを使って動画をトレスする方法を説明します。イラストを動かす方法はこちら9VAeアンドロイド版でもPC版iPad/iPhone版でもつくれます。

f:id:dnjiro:20220214112113g:plain

他のアニメの作り方はこちら9VAeの質問はこちら

内容:

 

トレス動画は、動画をキャプチャし、全コマ手書きでトレスするのが基本です。以下の14秒の動画は、秒24コマなら、336コマも、絵をトレスする必要があります。

f:id:dnjiro:20200204141635g:plain

ところが、9VAeなら、キーフレームだけトレースし、中間は自動で中割りできます。この動画を6コマのトレスで作る方法を説明します。

■ 9VAeきゅうべえのダウンロード


9VAeきゅうべえの使い方

 

メモ: スマホの場合は、Bluetooth マウスやペンを使うと操作しやすいです。キーボードがあるとショートカットキーが使えます。

 

1.トレスしたい動画1カットからキーフレーム画像を選ぶ

最初の14秒の動画から以下の6枚の絵を選んでキャプチャしました。下の時間は選んだコマが再生される時間です。トレスを試してみたい場合はご使用ください。画像サイズは、280x210です。2秒トレスするのに2時間くらいかかります。

  1. f:id:dnjiro:20200204143602p:plain

    0秒
  2. f:id:dnjiro:20200204143718p:plain

    2秒
  3. f:id:dnjiro:20200204143759p:plain

    5秒
  4. f:id:dnjiro:20200204143831p:plain

    6秒
  5. f:id:dnjiro:20200204143907p:plain

    8秒
  6. f:id:dnjiro:20200204143939p:plain

    13秒

 

以下の 図のABCDEの順番に操作していきます。

 

2. キーフレームのコマを読み込み、再生時間を設定

f:id:dnjiro:20200204152730p:plain



  1. 絵・写真入力ボタン(上図A)をクリックし、最初のコマを入力(Android版の場合はこちらを参照)。もし画面サイズがあわなかったら、ページメニュー>ページ設定(スマホの場合は、ファイル>ページ設定)で画面サイズの縦横を画像サイズ(上のサンプル画像は280x210)に合わせてください。
  2. ページの右側の「+」(上図B)をクリック。メニューから「空白ページを作る」。新しいページができるので、順番にトレスする原画を入れてください。
  3. 原画をいれたらページの時間(上図C)を設定しましょう。この部分をクリックし、そこに入れた原画の再生時間から次の原画の再生時間までの時間を設定します。
  4. 再生ボタン(上図D)を押せば、原画が正しい時間に再生されます。この上にトレス画像を追加していき、なめらかに動く動画にかえていきます。

 

3.背景ページ作成し、最初の原画を背景ページに入れる

  1. 先頭ページの左側の「<」(上図E)をクリック。「背景ページを入れる」をクリック。先頭に背景ページができます。
  2. 2ページ(下図F)をクリックして2ページに移動
  3. 原画(下図G)をクリックして選択。図形を切り取るボタン(下図H)をクリック。原画がクリップツールに切り取りされます。
  4. 背景ページ(下図I)をクリックして移動
  5. 図形を取り出すボタン(下図J)をクリック。メニューから「ステージにもどす」をクリック。背景ページに原画がはいります。

f:id:dnjiro:20200204163554p:plain

 

4. 左の雲をトレス

  • 背景ページの原画の上を9VAeきゅうべえでなぞっていきます。
  • 9VAeは図形エディタなので、重なり順序が重要です。あとから重なりを変更できますが、なるべく背後にあるものからトレスしていきます。

 

  1. 2ページ(上図F)をクリックして2ページに移動。背景ページが見えます。
  2. わかりやすいように線の色(下図K)をクリックして、赤色にします。
  3. まず、左上の雲をトレスしてみましょう。画面左下の「+」(下図L)で画面を拡大できます。パソコンの場合、スペースキーを押しながら画面をドラッグすれば拡大位置を変更できます。スマホではピンチイン、ピンチアウト、2本指ドラッグが使えます。
  4. トレスは折れ線(下図M)を使ってみてください。
  5. 下図の△□で表示されている点が入力した点です。△がとがった点、□が曲がった点を表します。この2つは右側のパレットの「コーナー、カーブ」(下図N)または、シフトボタン(下図O)で切り替えられます。
  6. 折れ線入力では、最初に入力した点をクリックすれば図形入力がひとつ完了します。
  7. 間違えたときは、Undoボタン(下図P)で戻してください。点選択ボタン(下図Q)をクリックすれば下図のように入力した点が表示されるので、点を選んで位置を修正したり、△、□を変更できます。

f:id:dnjiro:20200204171445p:plain

 

5.雲を複製して影を入力

 
  1. 選択ボタン(下図R)をクリック。選択枠を表示させます。
  2. 下のシフトボタン(下図S)をクリック。選択枠中心の「+」(下図T)をクリック。メニューから「複製する」をクリックします。シフトが押された状態で「複製する」を実行すれば、同じ位置に複製されます。パソコン版の場合はシフトキーを押しながら「複製する」をクリックしても同じです。
  3. 点選択ボタン(下図U)をクリック。点が表示されるので点をドラッグして移動させ、雲の影をつくります。

f:id:dnjiro:20200204180912p:plain

雲の影を入力した状態を下図に示します。

 

6. 雲の影の色、雲の色を設定、パレットに登録

  1. カラーパレットの色1(下図V)をクリック。「画面から色を選ぶ」をクリック
  2. 雲の影の色(下図W)をクリック。雲の影の色が塗られます。
  3. 登録ボタン(下図X)をクリック。雲の影がパレットに登録されます。
  4. 雲(下図Y)を選択
  5. カラーパレットの色1(下図V)をクリック。「画面から色を選ぶ」をクリック
  6. 雲の色(下図Z)をクリック。雲の色が塗られます。
  7. 影が登録されたパレット(下図a)をクリック。メニューから「追加登録する」をクリック。これで雲がパレットに登録されました。

f:id:dnjiro:20200204182731p:plain
 

7. 雲を複製し、別の雲をつくる

  1. 登録された雲(上図a)をクリック。メニューから「選択する」をクリック
  2. これで雲が選択されます。選択枠の中心の「+」をクリック。メニューから「複製する」をクリックこれで雲が複製されます。
  3. 登録された雲(上図a)をクリック。メニューから「追加登録する」をクリック
  4. 画面左下の「ー」(下図b)をクリックして倍率を下げます。
  5. 選択枠をドラッグして右側の雲の上に移動。
  6. 登録された雲(下図c)をクリック。メニューから「下と重ねる」をクリック。これで背景が透けて見えるようになります。
  7. 点選択ボタン(下図d)をクリックし、雲の形を背景に合わせます。
  8. 完成したら、もう一度複製し、上の雲を作ります。

f:id:dnjiro:20200204185328p:plain

 

8. 左下の家をトレス

  1. 左下の家をトレスしました。折れ線入力(下図e)を使って、家の向こう側の図形から入力していきます。
  2. 全部入力が完了したら、今度は手前の図形から順番に、塗り色(下図f)から「画面から色を選ぶ」を使って色をつけていきます。
  3. 完成したら家全部を選んで、登録パレットの「+」(下図g)をクリックしてパレットにまとめておきます。

f:id:dnjiro:20200204191620p:plain



9. 後ろの山をトレス

  1. 後ろの山をトレスしました。
  2. 入力が完了してから重なりを下にするボタン(下図h)を何回かクリックし、家よりも背後にしました。
  3. 下図は、登録パレットに登録したあと、ボタン(下図i)をクリックし「下と重ねる」設定して背景と重ねて見せています。

f:id:dnjiro:20200204193346p:plain

 

10. 後ろの髪、首、顎の下の影をトレス

f:id:dnjiro:20200204194444p:plain

 

11.服をトレス

  1. 服をトレスしました。
  2. 山が邪魔になるので、登録されたパレット(下図j)をクリックし「隠す」にして見えなくしました。

f:id:dnjiro:20200204195626p:plain

 

12.顔をトレス

  1. 顔をトレスしました。
  2. 邪魔になるパーツは、登録パレットから「隠す」設定して見えなくして作業します。
  3. 肌の色、髪の毛の下の影の色は画面から入力しました。

f:id:dnjiro:20200204200746p:plain

 

13.左目をトレス 

  1. 左目をトレスしました。
  2. 瞳は円ボタン(下図k)、眉毛は折れ線ボタン(下図l)で入力しました。
  3. 顔は、登録パレット(下図m)を「隠す」設定にして、見えなくしています。

f:id:dnjiro:20200204202232p:plain

 

14.左目を複製し、右目に形を合わせる

  1. 右目は左目を複製し、変形して作成しました。
  2. 画面から色を取得してつけました。

f:id:dnjiro:20200204202921p:plain

 

15.髪の毛をトレス、線の色を黒、または、なしに変更

  1. 髪の毛をトレスしました。
  2. トレス作業中、邪魔になるパーツは登録パレットで「隠す」設定にして作業しました。
  3. トレスした髪の毛は「+」ボタン(下図n)をクリックし登録パレットに登録しました。
  4. その後、各図形を選択し、線の色(下図o)をクリックし黒色にするか、線の種類(下図p)をクリックし「なし」に設定しました。
  5. 最後に登録パレットの設定をリセットするボタン(下図q)をクリックし、「隠す」設定を解除した状態が下図です、

f:id:dnjiro:20200204213002p:plain

 

16.背景の画像を次のキーフレームの画像と入れ替える

  1. 背景ページ(上図r)をクリックして背景に移動
  2. 画像をクリックして選んで、切り取りボタン(上図s)をクリック。画像が記憶ツールに移動します。
  3. 2ページ(上図t)をクリックして2ページに移動
  4. 取り出しボタン(上図u)をクリック。メニューから「ステージに戻す」をクリック。画像が2ページに戻ります。
  5. 3ページ(上図v)をクリックして3ページに移動
  6. 画像をクリックして選んで、切り取りボタン(上図s)をクリック。画像が記憶ツールに移動します。
  7. 背景ページ(上図r)をクリックして背景に移動
  8. 取り出しボタン(上図u)をクリック。メニューから「ステージに戻す」をクリック。3ページの画像が背景に入ります。
  9. 3ページ(上図v)をクリックして3ページに移動。背景が背後に見えます。

f:id:dnjiro:20200204220542p:plain



 

17.2ページのトレス画像を3ページにリンクコピー

  1. 2ページ(上図w)をクリックして移動。
  2. 編集メニュー>選択する>全て(スマホの場合は「編集メニュー>すべて選択」)。
  3. 次のページにリンクコピーするボタン(上図x)をクリック。これで2ページの図形が全て3ページにリンクコピーされます。リンクコピーされた図形は、変形したときに途中の形が自動補間されます。
  4. これで、3ページに2ページの図形がコピーされ、下に背景の原画が見える状態になりました。
  5. 下図では、登録パレット(下図z)をクリックし、「下と重ねる」にチェックを入れています。

 

f:id:dnjiro:20200205064837p:plain

 

18.雲の形を原画に合わせて変形

  1.  画面左下のシフトボタンをクリック(もしくはキーボードのシフトキーを押しながら)雲の登録パレット(下図A)をクリック。メニューから「全部隠す」にチェック。これで登録された図形が全部見えなくなります。
  2.  画面左下のシフトボタンをもう一度クリック(もしくはキーボードのシフトキーをはなして)雲の登録パレット(下図A)をクリック。メニューから「隠す」のチェックをはずす。これで雲だけ見えるようになります。
  3. 雲の登録パレット(下図C)をクリックし「下と重ねる」にチェック。これで雲が原画と重なって見えます。
  4. 雲の登録パレット(下図C)をクリック。メニューから「選択する」をクリック。これで雲が選ばれます。
  5. 点選択ボタン(下図D)をクリック。雲の点が表示されるので、原画に合わせて変形していきます。
  6. 1点ずつ移動することもできますし、下図のように複数の点を選んで、選択枠の辺のハンドル(下図E)をドラッグしてまとめて引き伸ばすと効率よく変形することができます。

f:id:dnjiro:20200205072628p:plain

 

19.家を原画に合わせる

f:id:dnjiro:20200205075711p:plain

 

20.服、首、背景の山を原画に合わせる

f:id:dnjiro:20200205082045p:plain

 

21.顔を原画に合わせる

  1. 顔を原画に合わせます
  2. 拡大して、ていねいに点の位置を調整していきます。
  3. 点の一部を選んで、もう一度点選択ボタン(下図F)をクリックすれば、その点を含んだ図形の点だけ表示されるので、修正しやすくなります。
  4. 点の数がたらなくて形が合わせられない場合は、点追加ボタン(下図G)をクリックすれば点を追加できます。
  5. プレイボタン(下図H)を押して動きを確認しながら調整してください。2ページの原画を選んで、重なり順序を下げるボタン(下図I)をシフトキー(下図J)といっしょにクリックすれば、原画が一番下になり、2ページから3ページまでトレスした図形がなめらかに動きます。

f:id:dnjiro:20200205134958p:plain


22.3ページにあって、2ページにない雲を複製して作る

 

  1. 3ページの上の雲は、2ページにはなかったので、3ページの雲を複製してつくります(下図□△)。
  2. 追加する雲ができたら、選択ボタン(下図K)をクリックし、シフトボタン(下図L)をクリックし、2ページにもある雲(下図M)を左からドラッグして追加選択します。これで、新しく追加した雲と、2ページにリンクした雲の両方同時に選択した状態にします。
  3. 前のページにリンクコピーするボタン(下図N)をクリック。これで、新しく追加した雲がいっしょに選択した2ページにある雲に合わせた位置にコピーされます。

 

f:id:dnjiro:20200205152834p:plain



 

23.ここまでトレスした結果

ここまでトレスした結果は、以下のように2秒のアニメーションになります。0秒の原画をトレスし、2秒の原画にあわせて変形したわけですが、これで、2秒分、すなわち秒24コマなら48コマ分トレスしたことになります。

f:id:dnjiro:20200205142052g:plain

あとの作業のポイントをまとめると次のようになります。

  1. リンクコピー(上図O)を使ってトレスした図形を次の原画にコピーする
  2. 原画は背景ページに移動させる
  3. 登録パレットの「下と重ねる」「隠す」を有効に使う
  4. 画面を拡大し、背景にあわせて点を移動させる
  5. 図形の一部の点を選び、点選択ボタンをクリックすれば、その図形の点だけ表示されるので有効に使う
  6. 点が少なくて形が修正できないときは、点の追加を使う

 

今回説明していないテクニックもあげておきます。

  1. うまく補間できない場合、中間ページを作成して修正できます。
  2. 正確な回転、パスにそった動きは、アニメキャストを使います。(例1例2
  3. 背景が動かない口パクは動きグラフをつかえば少ないコマで表現できます。(例3例4
  4. 1つの図形が2つに別れるといった場合、0秒のページをいれて別の図形(リンクしていない図形)に切り替えます。

24.アニメGIF / 動画(MP4)出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。
  • パソコン版の場合、最初に保存場所、ファイル名を指定します。デスクトップなど、わかりやすい場所に作成してください。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

25.9VAeきゅうべえでトレス動画を作る利点

9VAe上で原画をトレスするのはそれなりに時間がかかりますが、

  • 最初の絵のトレスには時間がかかるが、2枚目以降はコピーして変形するので手間がかからなくなる。
  • 後からいくらでも細かい修正ができる。
  • 完成した後で、秒間のコマ数、再生画面サイズを自由に調整できる。
  • キャラクタパーツだけ取り出したり、差替えたり(下例)、いろんな応用展開ができる。
  • 下の表にあるように、いろんなフォーマットで動画クリップを出力できる。

といったメリットがあります。

 

9VAeトレスの例:?VAの出撃シーンをトレスしてキャラクタを差替え

f:id:dnjiro:20200426085334g:plain

 44秒キーフレーム80枚。9ページ以上のアニメを作る方法はこちら

 

9VAeをつかえば動画クリップがすぐ作れる 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力
iMovie
PowerDirector
グリーンバック動画 先頭に背景ページをいれ、緑色の四角を入れる
AviUtl 連番PNG 背景を透明にして出力

 

9VAeは他のアプリと比較して以下の特長があり、素材作成に適しています。
 
9VAeきゅうべえ
他のアプリ
方式
図形のすべての点の対応関係をもったベクトル方式
タイムラインに画像を並べるビットマップ方式
修正
形を後から自由に修正できる
画像を描き直す
補間
変形した形はなめらかに変化する
形の補間はできない
データ量
中間がないので小さい
何枚も画像が必要で重い
階層化
9VAeの中に30階層まで
9VAeがはいる。全て編集できる
できても1階層
中身は同時に編集できない

 

9VAeきゅうべえに関する質問