dnjiro’s 9VAe blog

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

CLIP STUDIO PAINT DEBUT /PROで25コマ以上のアニメを作る方法

クリップスタジオペイント(CLIP STUDIO PAINT) DEBUT/PRO は24コマのアニメーションしか作れません。フリーソフト9VAeきゅうべえと組み合わせて、何コマでも長いアニメーションを作る方法を説明します。作業時間15分くらいですパソコン版9VAeAndroid版 、(最新版Ver.0.7.3)からできます。iPhone/iPad版はVer.3.1以上。

 

f:id:dnjiro:20200728212258g:plain

 

クリスタ以外(FireAlpaca, Krita, GIMP, アイビスペイント)の例も後に書きました。コマ撮り写真でもできます。

9VAeを使った他のアニメの作り方はこちらをご覧ください

 

指定したフレームに音も入れられます。


CLIP STUDIO PAINT DEBUT で25コマ以上のアニメを作る。音を入れた例

 

 

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

iOS版はVer.3.1からできます。

 

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

  

1.CLIP STUDIO PAINT で絵を描く

ほかのソフトで連番画像を作った場合は、5からはじめてください。

  1. CLIP STUDIO PAINT のファイル メニューから「新規...」をクリック

    f:id:dnjiro:20200728132829p:plain

  2. 「うごくイラストを作る(上図A)」にチェック
  3. セルの枚数を「24」(上図B)に変更し、OKボタン(上図C)をクリック。タイムラインに24コマ表示されます(下図)。とりあえず絵をかきましょう。ここでは数字1を書きました。タイムラインの上(下図D)をクリックすると2コマめに移動します。

    f:id:dnjiro:20200728134751p:plain

  4.  24コマ、適当な絵をかきましょう。再生ボタン(下図E)をおすとアニメーションします。

    f:id:dnjiro:20200728135228p:plain

2.アニメーションを連番出力

  1. ファイルメニューから「アニメーション書き出し>連番画像...」をクリック。

    f:id:dnjiro:20200728141153p:plain

  2. 「参照」(上図F)で保存場所を設定。●iPad版の場合は「OK」ボタンのあと、「このiPad内>9VAe(Dangla/Pro)」を設定して保存すれば、9VAeフォルダの中にタイムライン名のフォルダを作成して保存します。
  3. 「詳細設定」の「種類」(上図G)を「PNG」に設定
  4. 開始番号(上図H)は「
  5. 枚数設定を「1」から「24」フレームで「OK」ボタン(上図I)。これで24コマ出力されます。
  6. ファイルメニュー、「保存」でここまでの作業を保存しておきましょう。

3.続きの24コマを描く

f:id:dnjiro:20200728142646p:plain

  1. タイムラインの1から23までをドラッグ(上図J)して選択、右ボタンメニューから「削除」をクリック。これで1から23フレームが削除されます。

    f:id:dnjiro:20200728143540p:plain

  2. 1フレーム(上図K)をクリックし、「新規アニメーションセル」ボタン(上図L)をクリック。24フレームが透けてみえるので、続きの絵(25番め)を描く。
  3. 2フレームをクリック、「新規アニメーションセル」ボタン(上図L)をクリックして絵を描く。これを24フレーム(48番め)まで続ける。

    f:id:dnjiro:20200728144847p:plain

  4. なお、タイムラインの下の「用紙レイヤ」を右ボタンでクリックし、「レイヤを削除」を実行すると、用紙が透明の連番PNGが出力できます。9VAe、Mac版は連番PNGの透明処理ができますが、Windows版は透明処理ができません。

4.開始番号を変更して続きを連番出力

  1. ファイルメニューから「アニメーション書き出し>連番画像...」をクリック。
  2. 「詳細設定」で種類を「PNG」に設定
  3. 開始番号「24」に変更
  4. 枚数設定を「1」から「24」フレームで「OK」ボタン。これで続きの24コマが出力され、連番画像が48コマ作成できました。
  5. ファイルをいったん保存しておきましょう。
  • このようにすれば、CLIP STUDIO PAINT DEBUT/PRO で何コマでも連番画像を作成できます。 

5.9VAeで連番画像を読み込み、秒数を設定

 

  1. 9VAeきゅうべえを起動

    f:id:dnjiro:20200728165820p:plain

  2. 画像入力ボタン(上図M)をクリック。CLIP STUDIO PAINTで連番出力した最初の画像を選んで入力。●パソコン版は、連番出力設定画面の上に表示されてるフォルダから最初の画像を選んでください。●iOS版は、メニューから「9VAeフォルダから」をクリックし、CLIP STUDIO PAINTで作成したサブフォルダを選んでください。
  3. 「連番入力イメージの確認」があるので「はい」をクリック。これで、9VAeに連番画像が入力されます。
  4. 画面には1枚しか表示されませんが、プレイボタン(上図N)をクリックすれば、アニメーションが見えるでしょう。★古いバージョンの9VAeでは、連番画像が1ページに1枚読み込まれるため9枚しか読み込めません。最新バージョン(0.7.3以上)を入手してください。
  5. ページの時間(上図O)をクリックし、「1秒長くする」をクリックすれば、2秒になります。2秒間で48フレームなので、秒24フレームのアニメーションになります。
  • ページを2秒に設定すれば、連番画像が2枚でも1000枚でも2秒で再生されます。
  • すぐ、動画出力したい場合は、■動画出力にすすんでください。
  • 編集画面では、パソコンの描画性能に応じて、コマが間引きされて再生されます。アニメ出力すれば正しく出力されます。

ここからアニメーション作成に役立つ9VAeの機能をいくつか説明しましょう。

6.画面サイズを画像にあわせる方法

 9VAeの画面サイズを、画像に合わせるには次のようにします。

  1. ページメニュー(スマホ版の場合はファイルメニュー)から「ページ設定」で、縦横サイズを変更できます。
  2. 画像を選んで、選択枠中心の「+」(上図P)をクリック。メニューから「ステージの大きさにする」を実行。これで、画像が画面全体にレイアウトされます。

7.動きグラフで速度を調整

f:id:dnjiro:20200728174909p:plain

  1. 画像を選んで、右側の登録+ボタン(上図Q)をクリックすれば、登録パレットに画像が登録されます。
  2. 登録されたパレット(上図R)をクリック。メニューから「ゆっくり動き出すグラフ」をクリック。
  3. ページの時間(上図S)をクリックし、4秒ぐらいにしてプレイボタン(上図T)で再生してみてください。最初はゆっくり、だんだん速く再生されることがわかります。グラフの点(上図U)を移動したり、点を追加して、自由に動きを調整できます。

8.指定したフレームに音をいれる

 フレームを指定した処理もできます。10と書いたフレームに音を入れてみましょう。

  1. ページの右側の「+」(上図V)をクリック。メニューから「続きのページを作る」を実行。これで、1ページの内容が2ページにコピーされます。(下図)
  2. 画像を選択し、選択枠の中心の「+」(下図W)をクリック。メニューの「連番()ー()」をみてください。2ページに表示される連番画像の開始番号と終了番号が表示されています。この項目をクリックしてください。
  3. 開始番号と終了番号を指定する画面が表示され、数値(−1、−1)がはいっているはずです。−1は自動設定で、各ページの時間と画像の枚数から、そのページで再生される番号が計算されます。
  4. 開始画像を「9」、終了を「−1」に設定してください。連番画像 0000 に1を描いたので、9を指定すると「10」と描いた画像 0009 が見えます(下図)

    f:id:dnjiro:20200728180137p:plain

  5. ここに音を入れてみましょう。音を入れるボタン(上図X)をクリック。メニューから「効果音を入れる」をクリック。好きな音のファイルを選んでください。MP3、WAVファイルが指定できます。ここでは、パソコン版の「example」フォルダ>「simple01」の中にある「guitar-f.mp3」を入れました(上図Y)。(スマホ版では、ヘルプメニュー>リミックスをいったん保存すれば、9VAeフォルダの中に guitar-f.mp3ができます。)
  6. 2ページの時間(上図Z)をクリックし「6秒」にしました。
  7. これでアニメーションは全体が10秒、先頭から4秒後に、0009 の画像が表示され、同時に音(guitar-f.mp3)が鳴ります。最初の4秒は、0000から0008 までの画像が動きグラフによって、だんだん速くなります。4秒から10秒は、0009 から 0047(最後)まで均等に表示されます。
  8. もし最後のコマを2秒間表示させたければ、さらに続きのページを作成し、連番開始番号に「47」を設定し、ページの時間を2秒にすればよいです。全体の再生時間を10秒にしたければ、2ページの時間を2秒減らします。1ページに文字を入れれば、4秒間文字が表示されます。

 このように、タイムラインなしで簡単にアニメーションが調整できます。

  • 編集画面では、パソコンの描画性能に応じて、コマが間引きされて再生されます。アニメ出力すれば正しく出力されます。

9.リンク切れの修復

  •  連番画像を9VAeに読み込むと、先頭の画像以外は、連番画像が保存されたフォルダの場所しか記憶しません。9VAeのデータだけ他のパソコンに移動すると、画像がリンク切れになり、下のように赤く表示されます。
  • f:id:dnjiro:20200728202131p:plain

    この場合、新しいパソコンに連番画像を複製し、つぎのようにしてリンク切れを修復します。
  1. 連番の最初の画像を選択。選択枠中心の「+」をクリック。メニューから「絵・写真の変更」をクリック。連番画像がはいったフォルダの最初の画像を選んで「OK」をクリックすれば、リンク先が修復されます。
  2. パソコン版では、9VAeファイルは連番PNGと同じフォルダに保存し、連番画像といっしょに管理するとよいでしょう。

■ 動画出力

  1. ここまでできたら「ファイルメニュー>名前を付けて保存」で名前をつけて保存しておきましょう。スマホ版では、「9VAe」フォルダに保存されます。

  2. 「ファイルメニュー>アニメGIF出力」または「動画出力(Mac/iPhone/iPad)」。

  3. 動画素材を作る場合、画面サイズは、幅を空白、高さを720、コマ/秒を30にするとよいでしょう。「OK」ボタンでアニメGIFまたはMP4動画を作成します。画面サイズやコマ数を大きくすると出力に時間がかかります。「背景を透明にする」にチェックを入れると出力に時間がかかります。

  4. Mac/iPhone/iPad の場合、直接、MP4動画を作成できます。

  5. Windows/Linux/Android/Amazon Fire の場合、変換サイト:Online GIF to MP4 Video converter - Ezgif.comでアニメGIF を MP4 動画に変換できます。Windows/Linux の場合、 APNG to MP4 Video converter - Ezgif.com を使えば、APNG をMP4 動画に変換できます。時間がかかりますがGIFよりきれいです。

ezgif.com でMP4動画を作成する

  1. アニメGIFまたはAPNGファイルを指定(背景は透明にしない)

  2. 「Upload!」をクリック > 「Convert GIF to MP4!」をクリック > 「Save」(フロッピーディスクアイコン)をクリック。MP4をダウンロードできます。

動画編集ソフト

動画編集ソフトを使えば9VAeで作成したアニメーションを動画に合成できます。

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4(Ezgifで変換)

Mac/iPhone/iPad

iMovie

MP4 または QuickTime(古いMac)

Android

PowerDirector

GIF

作り方

 

他のソフトをつかった連番画像の作り方

連番画像を作成できれば、どんなお絵描きソフトを使ってもかまいません。

FireAlpaca

  1. ファイルメニュー「新規作成」「OK」
  2. 表示メニューから「オニオンスキンモード」にする。
  3. 必要なコマ数だけレイヤを作成。(レイヤメニューから「追加」)
  4. 各レイヤに絵を描く
  5. 表示メニュー「自動再生」でアニメ再生
  6. ファイルメニュー「レイヤーを連番出力(オニオンスキンモード)」
  7. フォルダを指定すると連番出力できます

Krita

  1. ファイルメニュー「新規作成」
  2. 「カスタムドキュメント」「新規作成」
  3. ウィンドウメニュー「ワークスペース」「Animation」でタイムラインを表示します。
  4. タイムラインの0フレームを右ボタンでクリック。メニューから「空のフレームを作成」ここに1枚目の絵を描きます。
  5. タイムラインの次のフレームを右クリック「空のフレームを作成」2コマめを描きます。
  6. タイムラインの「レイヤ」の一番右側のボタン(0フレームの左側のボタン)をクリックすると、前後のキーフレームが透けて見えます(オニオンスキン)。
  7. これを繰り返して必要なコマ数の絵を描きましょう。
  8. プレイボタン(右向き三角)で再生します。
  9. フレームレートの数字(最初は24)を小さくすればゆっくり動きます。
  10. 終了フレーム(最初は100)を描いた絵の枚数にすれば、繰り返します。
  11. ファイルメニュー「アニメーション出力」。「Image Sequence」にチェック、「連番画像の保存場所」にどこに保存するか設定して「OK」で連番画像ができます。

 

GIMP その他、お絵描きソフトは1コマずつファイル名を連番にして保存

  1. GIMPのレイヤをつかってアニメーションを入力するには次のようにします
  2. 必要なコマ数だけレイヤを作成。(レイヤメニューから「新しいレイヤの追加」)
  3. レイヤ名の最後に「(replace)」を追加してください。
  4. レイヤに絵を描く
  5. フィルタメニュー「アニメーション」「再生」でアニメ再生。もしレイヤ名の最後に(replace)がないと、絵が書き加えられていくアニメーションになります。
  6. GIMPは、アニメGIF作成の機能がありますが、標準で、連番出力はないようです。ファイル名を順番に変えて1コマずつ保存してください。

 

アイビスペイントなど、スマホ版お絵描きソフトは9VAeサブフォルダに連番にして保存

  1. 9VAeスマホ版最新版(200703以降)には保存先にサブフォルダを作れるようになりました。9VAeファイルメニュー「名前をつけて保存」。「+フォルダ」を実行し、連番画像を保存するフォルダを作成します。
  2. AndroidならSimple File Managerのようなファイルマネージャーをつかって、「Pictures」フォルダから作成した画像を1コマずつ、9VAeのサブフォルダにコピー(または移動)。ファイル名を(0000, 0001, 0002..)といった続き番号に変更します(最後の.jpgや.pngなどの拡張子は残しておくこと)
  3. これで9VAeで連番読み込みができます。作成したアニメーションを同じサブフォルダに保存すればリンク切れが防げます。

 

9VAeを使った連番画像アニメーションの特長

  • 文字やイラスト、音、音楽を後から合成できます。
  • グラフで微妙な動き調整ができます。
  • フレーム数の感覚がない初心者でも簡単に作れます。

 

9VAeをつかえば動画が自作できる

  • 9VAeきゅうべえを使えば、 Openclipart や  FreeSVG など、フリーのSVGイラストをつかって踊るキャラクタ素材が作れます。動画作成にご利用ください。
  • もっと長いアニメを作ることもできます。以下をご覧ください。

9VAeきゅうべえ:長いアニメを作る方法 - Qiita

 

 

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