クリップスタジオペイントプロとAnimeEffectsを組み合わせて3秒を超えるアニメを作る方法

アニメーション
スポンサーリンク

まえおき

クリップスタジオペイントプロの3秒ルール

クリップスタジオペイントプロ(以下プロ)のアニメーションには、24フレーム、8フレーム/sという仕様上の限界があります。(2021年7月現在)

8フレーム/sは、1秒間のコマ数のことで、フレームレートと呼ばれます。8フレーム/sの場合、24フレーム=24コマは、時間にすると3秒です。

​このレートを半分の4フレーム/s(1秒間に4コマ)にすれば、3秒から6秒へと再生時間を伸ばすことは可能です。ただし、アニメーションの動作はカタカタとなり、パタパタアニメのような滑らかさに乏しいものになってしまいます。

プロのアニメの最長時間は、実質的には3秒かなと思います。

予算があるならクリップスタジオペイントEXへのアップグレード

3秒(正確には25フレーム以上)を超えるアニメーションを作成するための手っ取り早い方法は、アプリケーションをアップグレードしてプロ → クリップスタジオペイントEX(以下EX)にすることです。EXならフレーム数、時間に制限はなくなります。​

アップグレードには当然ながら費用がかかりますが、この費用が高いか安いかは、作りたいアニメーションの内容によります。

シンプルなアニメーションで費用をかけないなら

クリップのほとんどが3秒以上で、またよりリアルな動きを実現したいのであれば、作業効率から考えてもEXへのアップグレードが最善かも知れません。

私が作りたかったアニメの用途はマンガ動画や動画絵本です。ひとつの場面は長くても30秒ほどであり、しかも、まばたきのような単純な繰り返し動作です。

動きのない静止画でも問題はないのですが、こうしたちょっとした動きがあるだけで、意外と見応えがあり、静止画とは一味も二味も違います。

大きな手間をかけることなく、こうした効果的な見せ方ができるのであれば、この程度の動きは付け加えたいという気持ちになります。そこで問題になるのは、プロの3秒ルールです。

クリップスタジオペイントプロとAnimeEffectsを組み合わせた3秒以上の簡単アニメの制作

この程度の動きさえあればよいので、EXへのアップグレードは行わず、アニメーションだけつけられるフリーもしくは安価な簡単アプリを組み合わせて作ってみようと考えました。もちろん、3秒以内であれば、プロで作ってしまった方が手っ取り早いかも知れません。

アニメーション専用のアプリは意外と多く、また、単機能だからかフリーか安価です。いくつかのアプリを試してみましたが、中でもAnimeEffectsの洗練されたユーザーインターフェイスと使いやすさは際立っています。​

クリップスタジオペイントでの作業プロセス

今回は、以下のようなロボットの目だけを交互に点滅させるサンプルアニメを作ってみます。

もっとも基本的なアニメーションで、この動作原理がわかれば、AnimeEffectsの設定方法はおおよそ把握でき、応用が利くと思います。

クリップスタジオペイントでの作画

今回のサンプルでは、基本となるロボットの絵に加えて、目を交互に点滅させるためのもう一枚のレイヤーを作りました。イメージサイズは、動画サイズのひとつである 1920 X 1080 (フルHD、1080p)としました。

基本イラスト + 「目の色2」レイヤー

アニメーションのために追加で作った絵は、この「目の色2」レイヤー一枚のみです。

基本イラスト
「目の色2」レイヤー

ご覧のように、基本イラストのロボットの左右の目の色と「目の色2」レイヤーの左右の目の色は逆転しています。また、「目の色2」レイヤーのドットの部分は透明を意味します。

クリップスタジオから出力するファイル

クリップスタジオから出力するファイルは、フォトショップのデータ形式になります。

ファイルー複製を保存ー.psd(photoshopドキュメント)…を選択し、適当なファイル名をつけて保存します。

AnimeEffectsでの作業プロセス

AnimeEffectsがすでにインストールされているものとして進めます。

AnimeEffectsのユーザーインターフェイスは非常にシンプルです。シンプルを通り越して殺風景とさえ感じる程です。これで本当にアニメーションのような複雑な動きを実現できるのだろうかと、ちょっと不安になります。ですが、ほとんどの機能は、必要に応じて出現します。

AnimeEffectsの立ち上げ直後のインターフェイス 

アニメーションの設定は、クリップスタジオペイントと同じでキーフレーム方式です。

キーフレーム方式とは、次のようなアニメーション生成方法です。最小単位の2キーの例です。

  • アニメーションの最初と最後の2つのイメージを用意します
  • 2つのイメージ間の時間を指定します
  • 最初から最後のイメージへと、どのように変化させるかを指定します

最初と最後のイメージ(フレーム)をキー(キーフレーム)と呼びます。

AnimeEffectsでの読み込み

どんなアニメを作るにしても、最初は、「プロジェクトの新規生成…」を選択し、「新規プロジェクト」を作ります。(※既存のプロジェクトは「プロジェクトを開く…」にて)

新規プロジェクトの設定

新規プロジェクト作成に当たり、ダイアログにていくつかの項目を設定する必要があります。

初期リソースには、プロで作ったPhotoshop形式のファイルを読み込みます。右のファイルアイコンのボタンを押すと、ファイルの選択画面が開きます。

また、最大フレーム数は、デフォルトでは600と入っています。アニメ制作時のフレームレートは60コマ/sで固定されていますので、600=10秒です。この時間は後でいかようにも変更できますので、とりあえずこのままで進めます。

キャンパスサイズは、「キャンパスサイズを指定する:□」にチェックを入れ、クリスタのイメージサイズに合わせて、幅1920 X 高さ1080 としました。

読み込んだファイルの表示

ファイルを読み込むと、イメージと共にイメージの下にあるターゲットドックにレイヤーが表示されます。

表示を見る限り、プロで設定したレイヤー構造と表示・非表示の状態がそのまま移管されたことがわかります。

AnimeEffectsでのアニメーションの設定

いよいよアニメーションの動作設定を行います。

​今回のアニメは、ロボットの左右の目が交互に点滅する動作なので、アニメ用に作った「目の色2」レイヤーを表示したり非表示にしたりします。

レイヤーの選択

動作させたいレイヤーを選択します。「目の色2」レイヤーをクリックして選択します。

すると、右のプロパティドックに大量のメニューが出てきます。

時間と動作の設定(時刻0秒)

設定したいアニメーションは、目の色2レイヤーに対して「表示」→「非表示」→「表示」と、表示、非表示を0.5秒ごとに繰り返す動作をさせたいと思います。アニメ動作の設定には「不透明度」を使います。

まず、「目の色2」レイヤーを選びます。この段階では、時間軸のカーソルは0の位置にあるはずです。

ここでプロパティドックに行き、「不透明度」の左にある[+]をクリックします。このクリック操作で、時刻0秒がキーフレームとして設定され、同時に「不透明度」の詳細設定メニューが出てきます。

まずはキーフレームの設定です。「目の色2」レイヤーの時刻=0に●(=キーの意味)がつき、キーフレームとして設定されたことがわかります。

次に「不透明度」の詳細設定メニューを見てみます。

イージング、割合と2つの項目がありますが、ここでは割合=1に着目します。割合=1は、100%のことで、「目の色2」レイヤーは不透明度100%、つまり「目の色2」レイヤーの配色がそのまま表示されていることになります。

時刻=0のロボットの目の状態です。向かって右側の目が黄色、つまり「目の色2」レイヤーが見えている状態です。

時間と動作の設定(時刻0.5秒)

続いて時刻=0.5秒の動作設定を行います。0.5秒後は、左右の目が反転した状態にします。

カーソルを0.5秒に合わせ、もう一度不透明度を選択します。

時間カーソルを0.5(秒)に移動する

今度は、割合を1→0に変更します。すると、「目の色2」レイヤーの不透明度は0%となり、レイヤーは透明(非表示状態)になります。要するに「基本イラスト」がそのまま見えている状態になります。

不透明度を選択して、割合1→0に変更

ここまでの設定で、0秒と0.5秒にキーがある状態になります。

時刻が0.5秒の時点では、ロボットの向かって右側の目はクロになっているのがわかります。「目の色2」レイヤーが透明になり、「基本イラスト」の目の色が見えている状態です。

基本的なアニメーション設定は以上です。

動作確認

ここで動作確認をしてみます。ターゲットドック右側にある再生ボタン類を使用すれば、この状態でのアニメーションが確認できます。

10秒間の繰り返し動作設定

1シーンを10秒とすると、時刻=0と0.5秒で設定したキーのペアが10個ならぶことになります。既存キーの複製はコピペでできます。

2つのキーをカーソルで囲み、右クリックで「キーをコピー」が選べます。

カーソルを1秒に移動させ、右クリックして「キーを貼り付け」を選択します。

2つのキーがペーストされます。

今度は4つのキーをコピーしてペーストすれば、一気に4秒分が貼り付けられます。そうして10秒まで貼り付ければ、10秒分のアニメーションができます。

実際の動作(スムーズな点滅)

この設定での動作はこんな感じです。(出力はGIFアニメ形式で、サイズを480X270 に縮小しています)

補間設定の変更

このアニメーションでは、目の点滅がアナログ的にスムーズに切り替わっていますが、これをデジタル的にパチパチと切り替わる動作に変更したいと思います。

色がスムーズに変化しているのは、不透明度のイージングの設定で「リニア」が選択されているせいです。「リニア」=「連続的な変化」を意味します。リニア指定で色がクロから黄色、黄色からクロへとスムーズに変化します。

これを、デジタル的、段階的に点滅させるには、不透明度のイージングの設定を「リニア」→「なし」に変更します。

この設定をすべてのキーに対して行います。最初の2つのキーを作り、コピーした方が早いと思います。

実際の動作(デジタル的な点滅)

動作はこんな感じです。

データ出力

最後にデータ出力を行います。動画ソフトに読み込ませる場合は、MP4か、MOV形式が一般的だと思いますが、今回は、GIFアニメで出力しています。ファイル名を指定し「保存」ボタンを押します。

続いて出力ダイアログが出てきます。画面サイズもデータ容量を小さくするために幅、高さ共に4分の1に縮小しました。フレームレートは30がデフォルトで入っていますがこのままとしました。

出力時には、変換の状況がポップアップウィンドウに表示されます。

まとめ

クリップスタジオペイントプロとAnimeEffectsとを組み合わせることで、25フレーム以上、8フレーム/sで3秒を超えるアニメーションを作成する一連のプロセスをご紹介しました。

できるだけイメージを用いて説明していますが、実際に自分で操作してみないとなかなか感覚がつかめないかも知れません。AnimeEffectsはフリーアプリなので、まずは気軽に導入してお使いになってみてください。

また、実際に評価したアニメーションソフトはほんのわずかです。AnimeEffects以上にイケてるアプリやお好みのアプリがあれば是非ご紹介いただけますと幸いです。

関連記事・リンク・サイト

4Kも無料の動画素材サイト【動画AC】

コメント

タイトルとURLをコピーしました