クリップスタジオでアニメを作ろう・マスクでワイプ

 

　クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）は、動画編集のアクセントとしても、いろいろと使えます。
　以前は、２Ｄカメラを使ってトランジションの一種のワイプを作ってみましたが、今回は、画像に直接マスクを使用してワイプしてみます。

■準備

　二枚の画像ＡとＢを用意します。

　新規アニメーションファイルを作成し、二枚の画像を読み込み、Ｂを上になるようにしておきます。

■マスクの作成

●マスクに使う画像の準備

　新規レイヤーを作成し、マスクに使う形を作ります。
　今回は、ギザギザした線を引いておきます。色や道具は何でもかまいません。
　今回は、線ににじんだ感じをつけるために、クレヨンを使ってみました。

◎注意

　マスクが、書き出される部分を完全に覆う必要があるので、必ず、余白の部分に描画して下さい。余白が小さくて描きにくい場合は、キャンバス基本設定で広さを変更します。

 ●選択範囲からマスクを作成する

 「自動選択」ツールを使って、キャンバス中央が入る部分を選択します。

　画像Ｂを選択し、「選択範囲をマスク」を適用します。
　マスク作成に使ったレイヤーは非表示にするか消してしまいます。

 

  　→マスクされた部分が見えなくなり、下にあった画像Ａが見えます。

■マスクにキーフレームを設定する

●設定

　レイヤーパレットでマスクを適用したレイヤーを選択し、「レイヤーマスク」→「マスクをレイヤーにリンク」のチェックをはずします。

　タイムラインの最初のフレームに移動、「レイヤーのキーフレームを有効化」します。

　今回は、一定の速度で動かしたいので、キーフレーム補間は、「作成するキーフレーム：等速」にしておきます。

　タイムパレットでマスクを選択し、「レイヤー移動」ツールを使用し、キャンバスを一度クリックすると、最初のフレームにキーフレームが設定され、キーフレームを示す◆が表示されます。

●開始位置にキーフレームを設定する

 　タイムラインで、ワイプを開始したい位置のフレームまで移動します。
　もう一度、「レイヤー移動」ツールを使用し、キャンバスを一度クリックすると、フレームにキーフレームが設定され、キーフレームを示す◆が表示されます。

　タイムラインで、移動を終了するフレームに移動します。

●終了位置にキーフレームを設定する

　タイムラインで、マスクを選択した状態で、「レイヤー移動」ツールでマスクを移動させ、画像Ｂ全体が表示される位置まで動かします。
　動かし終わると、フレームにキーフレームが設定され、キーフレームを示す◆が表示されます。

■完成

　こんなアニメができあがりました。

 

 

 

クリップスタジオでアニメを作ろう・虫眼鏡のようなサーチ

 
 

 　クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）は、動画編集のアクセントとしても、いろいろと使えます。
　今回は、のぞき穴・虫眼鏡・サーチライトのようなサーチを作ってみます。

■準備

　画像Ａ（探される側）と、黒い画像Ｂを用意します。

■マスクの作成

　「選択範囲ツール」で「楕円形選択」にし、丸い選択範囲を作ります。
　虫眼鏡の穴やサーチライトの光に相当する部分になります。

　レイヤーパレットで画像Ｂを選択し、右クリックし、「レイヤーマスク」→「選択範囲をマスク」して、マスクを適用します。

　→穴ができました。

 

 

 ■キーフレームを適用する

　レイヤーパレットでマスクを適用したレイヤーを選択し、「レイヤーマスク」→「マスクをレイヤーにリンク」のチェックをはずします。
　タイムラインの最初のフレームに移動、「レイヤーのキーフレームを有効化」します。

 
　タイムラインで、（レイヤー名）Ｂ：変形となっている左の「＋」をクリックして展開します。
　さらに、タイムラインで、マスクの左の＞をクリックすると、さらに下に設定できるパラメータがあります。

 

 　タイムラインで「マスク位置」、ツールバーで「レイヤー移動」ツールを選択します。
　動かしたいフレームに移動し、動かしてキーフレームを作成していきます。

同じように、「マスク拡大率」「マスク回転」「マスク回転中心」は「操作」ｰ「オブジェクト」でオブジェクト操作ツールを選択して変更を加えて、キーフレームを作成していきます。

■完成

 

 

 

 

クリップスタジオでアニメを作ろう・動画の変形三分割トランジション

 

 

　クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）は、動画編集にもいろいろと使えます。
　今回は、変形三分割トランジションを作ってみます。

■準備

 　画像ＡとＢを用意します。今回は、こんな感じのものにしました。

 

■画像ＡからＢへのトランジション作成

●上方へのトランジション作成

　画像Ａが表示されてから上方に移動して消え、画像Ｂが下から上昇してきて目標の位置で止まるアニメーションを作ります。

　画像Ａを選択した状態でタイムラインの最初のフレームに移動し、「レイヤーのキーフレームを有効化」ボタンをクリックします。（画像Ｂは非表示にしておきます）

　タイムラインのＡのところに「変形」と表示され、画像Ａが編集できないように、編集ロックされます。

　レイヤー移動ツールを選択します。
　画像Ａの最初の位置で、一度キャンバスをクリックすると、タイムラインにキーフレームを示す◆が表示されます。

　タイムラインで、画像Ａの移動を開始する位置まで移動し、もう一度キャンバスをクリックしてキーフレームを作成します。
　さらに、タイムラインで、画像Ａの移動を終了する位置まで移動します。
　レイヤー移動ツールで、画像Ａを移動終了位置まで動かすと、そこにもキーフレームが表示されます。
（今回の移動終了位置は上方、基準フレームの外まで動かします）

　→画像Ａが下から上へと移動するようになりました。

　画像Ｂを表示し、選択します。
　タイムラインで「レイヤーのキーフレームを有効化」し、タイムラインの移動を開始する位置、移動終了位置に移動し、、画像Ｂをレイヤー移動ツールで移動してキーフレームを追加します。

　→画像Ａが下から上へと移動し、画像Ｂも下から中央へと移動するようになりました。

●左右へのトランジション作成

　画像ＡおよびＢをコピーします。
　タイムラインにあるキーフレームも一緒にコピーされますので、レイヤー移動ツールで移動開始位置、終了位置を直して、画像Ａが左へと移動して消え、右から画像Ｂが現れて中央で止まるようにします。

→できあがりました。

　同様に、画像ＡおよびＢをコピーして、タイムラインのキーフレームにおけるキャンバスでの位置を直し、画像Ａが右へと移動して消え、左から画像Ｂが現れて中央で止まるようにします。

→できあがりました。

●ムービーとして書き出し

　このままだと編集ロックされていて、マスクが適用できませんので、作成した、上へ、右へ、左への三つのアニメーションを、いったん、ムービーとして書き出します。
　画像ＡおよびＢだけ表示して。他は非表示にします。

「ファイル」→「アニメーション書き出し」→「ムービー」で書き出します。

　同様に、画像ＡのコピーおよびＢのコピー、画像Ａのコピー２およびＢのコピー２だけをそれぞれ表示して書き出すことで、三つのムービーができあがります。

■三分割トランジション

●三つのムービーの読み込み

　新規ファイルを作成します。

「ファイル」→「読み込み」→「ムービー」で、先ほど作成した三つのムービーを読み込みます。

　他のレイヤーは消しておきます。

●マスクの作成

　次の場面に切りかえるのに使いたい形を考えて、新しいレイヤーに描きます。
　今回はＹ字形の三分割線を描きます。
　選択範囲を決めるためのものですので、色は適当で大丈夫です。線は細くしておきます。

　新規レイヤーを作成し、Ｙの形になるように、「図形ツール」で線を引きます。

「自動選択ツール」で、三分割された一区画を選択します。
　選択範囲を反転します。

　レイヤーパネルで上に移動するムービーを選択し、右クリックして「レイヤーマスク」→「選択範囲をマスク」します。

 

　→下側がマスクされ、三分割された上側だけが見えるようになりました。

　同様に、三分割された他の二つの部分についてもマスクを作成し、それぞれのムービーにマスクを適用して、右に移動する部分は右側だけ、左に移動する部分は左側だけが表示されるようにします。
　隙間ができるようであれば選択範囲を拡大縮小して調整し、Ｙの字形を描いたレイヤーは非表示にします。

　ムービーとして書き出します。

■完成

　こんなアニメができあがりました。

◎追記

■別の方法

　一度、ムービーに読み出さなくてもマスクを適用できる方法もありました。

　画像ＡからＢへのトランジションを作成したあと、ムービーに書き出しをせず、Ｙ字形の三分割線を描いてマスクを作成します。

●マスク範囲の作成

　Ｙの形になるように、「図形ツール」で線を引き、「自動選択ツール」で、三分割された一区画を選択します。

●キーフレームの無効化

　マスクを適用したいレイヤーを選択し、再度「キーフレームを有効化」ボタンを押して、一度、キーフレームを無効化します。

　キーフレームについていた◆が消えます。
　レイヤーの編集ロックが解除され、編集可能になります。

●マスクの適用

　レイヤーを右クリックし、「レイヤーマスク」→「選択範囲外をマスク」でレイヤーにマスクを適用します。

●キーフレームの再有効化

　マスクを適用したレイヤーを選択し、再度「キーフレームを有効化」ボタンを押して、もう一度、キーフレームを有効化します。

　同様に、他のレイヤーにもマスクを適用すれば、同じアニメが完成します。

素人でも簡単に使えるアフターエフェクト クリスタ、Live2Dとの違い

 　使いこなせれば、どんなイメージも自由自在に作れるといううわさのアフターエフェクト（AE）ですが、初歩的な使い方はそれほど難しくありません。素人が、ちょっと手を出してもなんとかなるレベルでした。（2Dアニメに限っての話です）

■アフターエフェクトで素人ができること

　アフターエフェクト（Aftereffects）というのは、Adobe社の有料ソフトで、アフターエフェクトという名前でわかるように、すでにできている絵や文字などに、後から（アフター）効果（エフェクト）をつけるソフトです。

　使いこなせれば、どんなイメージも自由自在に作れると言われていますが、素人でも、手軽にアニメーション動画作成を楽しむことができました。

◎絵や文字を動かしてアニメーションにする

　クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）でも、できることではありますが、アフターエフェクトの方が、直感的で簡単でした。

　最初と最後の位置や変形度合いを指定して間を補間する補間アニメーションです。
　ここから何秒でこう動かす、というのがきちんとイメージできていれば、ものすごく簡単です。

◎初歩的なエフェクトをつける

　ついでに、輪郭をにじませるブラーなどのエフェクトをつけたり、光や水玉や花などを散布したりというエフェクトをつけることもできます。
　これも、基本操作だけであれば、素人にも、それほど難しくありません。

■アフターエフェクトが苦手なこと

◎絵を描く

　もとの絵がない場合、アフターエフェクト では、細やかな絵を描くことはできませんので、文字や幾何学模様などを使うことができるだけです。

◎いわゆる動画を使ったアニメーション

　絵（動画）を一枚ずつ描いて動かしていくアニメーション（リミテッドアニメーション）は、アフターエフェクトは苦手です。
　逆に、動画を描いて動かして作ったアニメーションに効果をつけるのには適しています。

◎イメージ不足

　どう動かすかのイメージが固まっていない場合も、アフターエフェクトは手も足も出ないに等しいですので、最初に、何を、どのぐらいの時間で、どこからどこまで、どんな風に動かすかというイメージをきちんと固めておく必要があります。
　だいたいのイメージが決まっていれば、位置や時間などの試行錯誤は簡単にできます。

◎PCにある程度のスペックが必要

　この位置でこうなるというような確認はできるのですが、即時プレビューはありませんので、書き出しをしてから確認をすることになります。
　また、複雑なことをさせるとソフト自体がかなりの重さになりますので、PCにある程度のスペックがないと、イライラのもとになります。

■クリスタとアフターエフェクトで作れるアニメーションの違い

　クリップスタジオペイントは、もともとがイラストレーションやマンガを描くためのソフトですので、とにかく、一枚一枚の絵が描きやすく、それをパラパラとつなげて作るアニメーション（リミテッドアニメーション）が得意です。逆に、アフターエフェクトは、それは苦手です。

■Live2Dとアフターエフェクトで作れるアニメーションの違い

　Live2Dは、絵（特にキャラクター）をパーツ分けして部分部分を動かしていくのに特化したソフトです。
　また、他のソフトとの連携機能も大きく、ライブという名前がついているように、WEBカメラなどで入力した情報をもとに、ライブで動かすこともできます。

　アフターエフェクトでも、すべてのパーツを読み込んで動かす事は可能ですが、細かいパーツを重ねて動かすとなると非常に重くなり、同じ事をするのであればLive2Dの方が適しています。また、アフターエフェクトには、ライブで動かす機能はありません。

■初心者が簡単に作った動画

　電子書籍の広告のためにPVを作りました。
　使用するすべてのパーツがそろっていること（権利関係もすべて、きちんと許可を得ましょう）、どう動かすかがはっきりしていること。
　この2つがきちんとしていれば、素人でも、初歩的機能であれば、簡単にアフターエフェクトを使うことができます。

Zoomにキャラクターで参加する

　在宅ワークやバーチャル飲み会、読書会などなど、Zoomでミーティングをする機会も増えました。
　そこで、せっかく作ったキャラクターがZoomでも使えないか、試してみました。

 　今回は、Live2D＋FaceRig ではなく、キャラクターアニメーター（Adobe Character Animator）を使います。 今回説明するのは、Windows での方法になります。

 ■準備

 　キャラクターアニメーター（Adobe Character Animator）と、Zoom がインストールされていて、正常に使える状態であることを前提にしています。

 　キャラクターアニメーターで使うキャラクター（パペットと呼ばれています）を用意しておきます。

 　今回は、自作のキャラクターを使いますが、最初からキャラクターアニメーターに準備されているキャラクターでもいいと思います。
 　背景も、好きなものを準備して下さい。

 ■NDIツールの入手

　今回は、キャラクターアニメーターからの信号をライブでzoomに出すという方法を使います。 　まず、NDIツールを手に入れます。

　NDI（ネットワーク・デバイス・インターフェイス）というのは、NewTek社によって開発された、ビデオを簡単にストリーム配信できるようにする規格だと思って下さい。

　NDIツールは、こちら（https://ndi.tv/tools/）で手に入ります。無料です。

 　ページの下の方まで行くと、ダウンロードできるパネルがあります。

　ここから、Windows版のNDIツールを、ダウンロードして、インストールします。

 ■キャラクターアニメーターの設定

　キャラクターアニメーターから、ライブ出力でzoomにデータを出すので、まずは、キャラクターアニメーターから、NDIに出力するように設定を変更します。

　キャラクターアニメーターを開きます。

　上部メニューの［編集］から、［環境設定］を選びます。

　環境設定パネルが開くので、ライブ出力を選びます。

 

「Mercury Transmit を有効にする」にチェックを入れます。
　下の「ビデオデバイス」から「NDI output」を選び、［OK］をクリックします。

　これでキャラクターアニメーターからNDI出力されるようになりました。

■PCのNDI仮想入力をオンにする

　パソコンの左下にある検索窓に、「virtual」もしくは「virtual input」と入力します。①

「virtual input」をクリックします。②

　パソコンの左下、タスクバーに「NDI Virtual Input」というアイコンができます。

「NDI Virtual Input」アイコンを右クリックすると、使用可能なパソコンが表示されますので、キャラクターアニメーター（Adobe Character Animator）を使っているパソコン選び、「Adobe Character Animator」を選択します。

　これで、 パソコンのNDI仮想入力がオンになりました。

■Zoomで確認する 

　Zoomを起動します。

　確認のために、ミーティングを開始します。

　下のメニュー［ビデオの開始］の右の ^　から、入力を切り替えます。
 「NewTek NDI Video」を選びます。

「ビデオの開始」でビデオを出せば、キャラクターアニメーターで使っていたキャラクターがZoomに出力されます。
　しゃべってみると、動きもキャラクターアニメーターのときのままです。

　これで、 Zoomに好きなキャラクターで参加することができました。

 ◎キャラクターアニメーターを終了させて、下のメニュー［ビデオの開始］の右の ^　から、入力するカメラを切り替えて、Webカメラにもどせば、また自分の顔が映ります。

キャラクターアニメーターを試してみました Live2Dと比較

■アドビ　キャラクターアニメータ－（Adobe Character Animator)を試してみました

　今回は、アドビ　キャラクターアニメータ－（Adobe Character Animator)を使って、リップシンクなど表情変化するアニメを作ってみました。
　Live2D＋FaceRigと同様に、リアルタイムで音声と動きのついたアニメを作ることができますので、使いこなせれば、VTuber（Vチューバー）デビューも夢ではありません。

　キャラクター作成には、クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）を使用、フォトショップ形式（ＰＳＤ）で保存して、キャラクターアニメータ－に読み込み、必要に応じて補正し、ハンドル、ボーンを少し設定して、動かしてみました。

　音声が聞き取りにくいのは簡単なヘッドセットを使用しているためですので、ご容赦下さい。カメラの認識は、 問題ないと思います。

■初めて使用してみて、アドビ　キャラクターアニメータ－とLive2Dとの比較

　以前、Live2Dを使用してみた時の使い勝手と比較してみます。
　初心者にとっての使い勝手になりますので、使い慣れている方だと、もっと別の感想になるかもしれません。

 ●導入

　Live2Dのときは、それだけではライブで動かせなかったため、FaceRigにデータを送って動かすため、データの作成などに、やや難しい点がありました。
　しかし、キャラクターアニメータ－は、パペット（モデル）を作成して、そのままシーンに読み込み、パフォーマンスを録画するだけ。

　自分でメッシュを割り付けたりしなくてよく、やりとりするためにデータを複数作成したり、まとめたりする必要がない分、簡単でした。

●キャラクターの作成

　キャラクターは、基本的に、以前作成したLive2Dのときのモデルを手直しして使いました。一番問題になったのは、目と口でした。
　キャラクターアニメーターは、単純な顔のキャラクターのモデルが多かったため、 どうすればいいのかがなかなかわからなくて、試行錯誤しました。


　いくつも、追加で作成しなくてはならない部分がありました。まず、まばたき（Blink）が別になっていたので別に作る必要がありました。口の形も、いくつも自分で作らなくてはなりませんでした。

　特に、口の形は、ニュートラル、Ｍ、Ｓ、Ｄ、Ｅe、Ａa、Ｕh、Ｏh、Ｒ、Ｗ-Ｏo、Ｆ、Ｌという、日本語だとなじみのない口の形を自分で作成しないといけないため、かなり苦労しました。
　さらに、スマイルと驚きの表情も、自分で設定しなくてはいけませんでした。

　ここは、カメラからの表情の読み取りで対応してくれるLive2Dの方が、ずっと簡単です。

●動き

　問題の、動きです。

　Live2Dよりも、目の動きなどが大雑把です。
　おそらく、もっと手間をかければ、もっと細かい動きも作れるだろうとは思いますが、基本的に、キャラクターアニメーターは、ライブで動かすことに特化し、大まかに動かすためのもの、と考えた方が良さそうです。

　また、ボーンは入れたものの、可動域設定などがなくて腕などの動きが不自然になったり、腕を長く伸ばせてしまったりと、不自然な点があれこれ出てしまいました。

●キャラクターの特別な動きなど

　シーンの中に何人ものキャラクターを入れたり、位置を変えたりといったことは、Live2D＋FaceRigでも、キャラクターアニメーターでも同じようにできます。

　また、キーを割り当てて特別な動き（顔を青ざめさせる、目をハート型にするなど）をさせることも、どちらでもできます。

●費用

　今回の、キャラクターアニメーターは、adobeの有料ソフトです。

　アドビ クリエイティブクラウド（Creative Cloud）コンプリートプランで使うことができます。クリエイティブクラウドは、サブスクリプション制となっており、年間プラン月々払いで5680円（税別）ほどかかります。

 　さらに安く使うには、学生・教職員向けのプランがあり、月々1980円（税別）から。

　Live2D＋FaceRigに比べて、お金がかかりますが、イラストレーターやフォトショップといったアドビのソフトを使っているなら、安く使えると思います。 

　キャラクターアニメーターだけで、そのまま配信もできるし、パフォーマンスを何度もやり直して、上手にできた部分だけを編集するといった機能もあります。

■まとめ

　今回は、アドビ　キャラクターアニメーター（Adobe Character Animator）を、試してみました。
　キャラクターアニメーターは、リアルタイムでキャラクターに動きをつけたり、配信したりする時に、使い勝手の良いソフトです。

　キャラクターアニメーターと、 Live2D＋FaceRigでは、データの作成や、データの移動に、それぞれ一長一短があります。
　比較的大まかな動きを簡単につけたければ、キャラクターアニメーター、細やかな動きにこだわりたければ、Live2D＋FaceRigの方が、より複雑なキャラクターの動きを作ることができそうです。

　Live2D＋FaceRig でも、キャラクターアニメーターでも、自分のスタイルに合った方を使いこなせれば、VTuber（Vチューバー）も夢ではないと思います。

クリップスタジオペイントでアニメを作ろう・手前にアニメのついたワイプでの場面切り替え

　ワイプで場面を切り替えることができたら、さらに、もうひとつ2Dカメラを追加し、それを一番上に持ってきます。

　一番上にしたカメラに、アニメーションフォルダを入れ、アニメーションを入れれば、手前にアニメのついたワイプで場面切り替えをすることもできます。