クリップスタジオペイントでアニメを作ろう・カメラワーク３ 背景を切り替える

　クリップスタジオペイントの２Ｄカメラを使えば、不透明度を変化させることもできます。
　今回は、２Ｄカメラを使って、背景を切り替えてみます。

・準備

　ファイルを新規作成し、アニメーションフォルダにキャラクターの動画、他に２枚の背景画を用意します。

■２Ｄカメラフォルダーを２つ作成する

上部メニューの［アニメーション］－［アニメーション用新規レイヤー］－［２Ｄカメラフォルダー］を選択すると、カメラフォルダー（カメラ１）が作成されます。

　今回は、２枚の背景それぞれにカメラワークをつけるので、カメラフォルダーをもうひとつ作成します。

　上部メニューの［アニメーション］－［アニメーション用新規レイヤー］－［２Ｄカメラフォルダー］を選択し、カメラフォルダー（カメラ２）を作成します。

■背景にカメラワークがつけられるようにする

　２Ｄカメラフォルダー（カメラ１）の中に、背景を描いたレイヤー（背景１）を入れます。
　もうひとつの２Ｄカメラフォルダー（カメラ２）の中に、もう一枚の背景を描いたレイヤー（背景２）を入れます。

　背景ですので、位置は、アニメーションフォルダーよりも下にしておきます。

１枚目の背景の不透明度の変更

■２Ｄカメラを使って１枚目の背景の不透明度を変更する

［タイムライン］パレットの最初のフレームに移動します。
　カメラ１の左側の［＋］ボタンをクリックすると、下に折りたたまれていた「不透明度」と「トラックラベル」という要素が出てきます。

　今回は、「不透明度」を変えますので、「不透明度」のところをクリックして選択します。

■ファンクションカーブ変更モードにする

［タイムライン］パレットの左上にある［ファンクションカーブ変更モード］ボタンをクリックします。

　ファンクションカーブ変更モードになります。

・表示をもとにもどしたいときは、もう一度、［ファンクションカーブ変更モード］ボタンをクリックします。

■始点のキーフレームを追加する

［タイムライン］パレットのカメラワークをつけはじめたい位置（今回は最初のフレーム）で、不透明度を選択した上で、［タイムライン］パレットの上部ボタンで［キーフレームを追加］します。

　始点のキーフレームが追加されました。
　オレンジの◆がキーフレームが設定された位置になります。左右に小さなオレンジのものがついています。

◇キーフレームの補間方法には、いくつか種類がありますが、今回は「滑らか」にしておきます。

■終点のキーフレームを追加する

［タイムライン］パレットのカメラワークをつけ終わりたい位置で、不透明度を選択した上で、［タイムライン］パレットの上部ボタンで［キーフレームを追加］します。

→終点のキーフレームが追加されました。

■キーフレームを移動する

　わかりやすいように、カメラ２は非表示にしておきます。

　今回は不透明度の変更ですから、だいたい１００（完全に不透明）から０（透明）の間で動かすことにします。

　キーフレームの印であるオレンジの◆をクリックして選択します。

→オレンジの◆が、青の◆になります。

　青の◆をドラッグして上下に動かします。
　左についている目盛りの ０（ゼロ）のところまで動かしてみましょう。

　始点と終点のキーフレームを結んでいたオレンジの細い線も、キーフレームに従って移動します。「滑らか」な曲線になっています。

　キャンバスのほうは、何も変化がないように思えます。

■確認する

　アニメーションを再生してみます。

　背景が滑らかに消えていくのが確認できます。

　ＧＩＦで書き出してみると、こうなります。

 

◎再生せずに確認したい場合は、［ツールプロパティ］パネルの［表示方法］で、「範囲内の画像を表示」にすれば、現在画像にしたときに表示される状態が、キャンバスに反映されます。

２枚目の背景の不透明度の変更

■２Ｄカメラを使って２枚目の背景の不透明度を変更する

　次は、２枚目の背景の不透明度を、２Ｄカメラを使って変更します。

　わかりやすいように、カメラ１は非表示にしておきます。

①［レイヤー］パレットで［カメラ２］のフォルダーをクリックして選択します。

②［タイムライン］パレットで、カメラ２の左側の［＋］ボタンをクリックすると、下に折りたたまれていた「不透明度」と「トラックラベル」という要素が出てきます。

　「不透明度」を変えますので、「不透明度」のところをクリックして選択します。

■ファンクションカーブ変更モードにする

［タイムライン］パレットの左上にある［ファンクションカーブ変更モード］ボタンをクリックします。

　ファンクションカーブ変更モードになります。

 ■始点と終点のキーフレームを追加する

　カメラ２についでも、キーフレームを追加して、不透明度を変えていきます。

◇キーフレームの補間方法には、いくつか種類がありますので、今度は「等速」にしてみます。

［タイムライン］パレットのカメラワークをつけはじめたい位置で、不透明度を選択した上で、［タイムライン］パレットの上部ボタンで［キーフレームを追加］します。

①始点のキーフレームが追加されました。
　オレンジの◆がキーフレームが設定された位置になります。今度は「等速」のため、左右の小さなオレンジはありません。

［タイムライン］パレットのカメラワークをつけ終わりたい位置で、不透明度を選択した上で、［タイムライン］パレットの上部ボタンで［キーフレームを追加］します。

②終点のキーフレームが追加されました。

■キーフレームを移動する

　キーフレームの印であるオレンジの◆をクリックして選択します。

→オレンジの◆が、青の◆になります。

　青の◆をドラッグして上下に動かします。
　今回は、始点のキーフレームを、左についている目盛りの ０（ゼロ）のところまで動かします。

　始点と終点のキーフレームを結んでいたオレンジの細い線も、キーフレームに従って移動します。
　カメラ１のときは、「滑らか」だったので、曲線でしたが、カメラ２は「等速」ですので、直線になります。

　キャンバスのほうは、何も変化がないように思えます。

■確認する

　アニメーションを再生してみます。

　背景が現れてくるのが確認できます。

　ＧＩＦで書き出してみると、こうなります。

■２つのカメラとも表示して確認する

　非表示にしておいたカメラ１も表示します。

　アニメーションを再生してみます。

　１枚目の背景が滑らかに消えていき、２枚目の背景が等速で現れてくるのが確認できます。

　ＧＩＦで書き出してみると、こうなります。

◎表示している時間を重ね合わせるなどすれば、複数の背景をなめらかに切り替えることもできます。

クリップスタジオペイントでアニメを作ろう・カメラワーク２ 2Dカメラを連続して動かす

　クリップスタジオペイントの2Ｄカメラは、キーフレームを追加していくことで、複雑な動きで動かすことができます。
　今回は、 2Ｄカメラを連続して動かしてみます。

• 準備

■新規アニメーションファイルを作成する

　今回は、作画サイズを上下倍にし、フレームレート24　再生時間120　フレーム数1始まり　5秒間のアニメを作るように設定して、新規ファイルを作成します。

■動かす絵を描く

　今回は、３フレームに１枚、８枚で１秒になるように絵を描くことにします。

　まず、フレーム１の１枚目のセルに、最初の絵を描きます。

　次に、フレーム4に移動し、新規アニメーションセルを追加して、二枚目の絵を描きます。

　オニオンスキン有効化しておくと前後のセルの絵を薄く表示できるので描きやすくなります

■セルの一括指定

今回は、４枚の絵の繰り返しで、１枚の絵を３フレーム使い、最後まで繰り返すことにします。

　繰り返しで、歩くように見える絵を描いたら、
［アニメーション］－［トラック編集］－［セルを一括指定］します。

　最後まで繰り返す設定にすれば、最後まで同じ動きが繰り返されます。

→タイムラインに、繰り返す絵が、一気に指定できます。

　再生して、動いているか確かめておきます。

　問題なく動くようなら、色もつけておきます。

■背景を描く

　別に、新規ラスターレイヤーを作成し、背景を描きます。レイヤー名は、「背景」としておくとわかりやすいです。
　背景は、アニメーションフォルダーよりも下の方の位置にしておきます。

（今回は、カメラワーク機能の説明のため、まわりをとりまくように配置してあります）

　準備はここまでです。
　次は、準備した絵に、カメラワークをつけていきます。

• 2Ｄカメラで連続したカメラワークをつける

■カメラフォルダーを作成する

［アニメーション］－［アニメ－ション用新規レイヤー］－［２Ｄカメラフォルダー］で、２Ｄカメラフォルダー（カメラ１）を作成します。

　２Ｄカメラフォルダーは、アニメーションフォルダーやセルの画像を変形せずに、アニメーションにカメラワークをつけるためのものです。

■背景にカメラワークがつけられるようにする

　２Ｄカメラフォルダー（カメラ１）の中に、背景を描いたレイヤーを入れます。
　背景ですので、位置は、アニメーションフォルダーよりも下にしておきます。

■カメラワークをつける

◎移動開始のキーフレームを設定する

　［タイムライン］パレットで、最初のフレームに移動します。
［ツール］から、［操作］を選ぶと、キャンバスに、拡大・縮小・回転ができるハンドルのついた青い枠が現れます。

　ハンドルを使って、カメラを動かしはじめたい位置に、青い枠を移動させます。

　移動させると、しぜんにキーフレームが追加されています。キーフレームが設定されている位置は、タイムラインに、紫の四角がつきます。

・キーフレームは、移動をはじめたい位置や移動を終了させたい位置を指定するものです。
・キーフレームは、自分で位置を決めて追加したり削除することができます。

◇キーフレームの補間方法には、いくつか種類がありますが、今回は「滑らか」にしておきます。

◎移動終了のキーフレームを設定する

　［タイムライン］パレットでカメラの動きを止めたい位置のフレームに移動します。
　キャンバスで、カメラを止めたいところまで、青い枠を移動させます。

　移動させると、しぜんにキーフレームが追加されます。
　さらに、カメラがどこからどこまで移動したかを示す、細い線が、２つの青い枠の間に引かれます。

◎さらにキーフレームを追加する

　タイムラインで適当なフレームまで移動してから、カメラをさらに移動させ、キーフレームを追加していきます。
　カメラは回転することもできます。

　カメラの使い方次第で、かなり複雑な動きもつけることができます。

■完成、書き出し

　直したいところがあれば直し、できあがったら、書き出します。
　今回は、アニメーションＧＩＦにしてみます。

　このようなアニメができあがりました。

・背景の絵が描いてない部分までカメラに入っていると、その部分は白くなってしまうこともわかります。
　最初に、どのぐらいの範囲までカメラに入るかをしっかり考えて、作画サイズを決める必要がありますね。

Live2Dで作成したキャラクターのデータをFaceRigに組み込む方法

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

■Live2Dとは

　Live2Dというのは、だいたい、絵をパーツに分けて、動きをつけることができるソフトだと思って下さい。
　Live2Dは、公式の説明が詳しくてわかりやすいので、説明はそちらを見ていただくのが一番かと思います。
Live2D公式　https://www.live2d.com/ja/

　パーツごとに分けた絵を作成し、PSD形式で保存して読み込み、動きをつけていきます。
　絵を描くのには、私は、クリスタ（CLIP STUDIO PAINT）を使用していますが、レイヤー分けができてPSD形式で保存できるお絵かきソフトであれば、何を使ってもかまいません。

■FaceRigとは

　FaceRigというのは、主に3Dのキャラクターを、簡単にリップシンクなどをして動かすことができるソフトです。さらに、FaceRig Live2D Module　というものを追加すると、2Dのキャラクターも動かすことができるようになります。

 　FaceRigは、海外のソフトのため、若干ハードルはありますが、Steamに登録して、ダウンロードし、インストールするだけです。説明動画やスクリーンショットもありますので、およそどんなことができるのかわかると思います。


FaceRigの入手はこちら。　SteamのFaceRigのページです。

　通常価格：FaceRig　1480円　＋　FaceRig Live2D Module　398円　必要です。
　セールも時々あるそうです。

■前段階

 　お絵かきソフトと、 Live2DとFaceRigがインストールでき、正常に使えているのが大前提です。

　さらに、Live2Dのデータもできている状態での話になります。
　少女や少年、デフォルメキャラクターであれば、公式ページなどを参考に、パーツ分けして作成し、テンプレートに合わせ、必要に応じて修正を加える方法が、一番簡単かと思います。

　今回は、ここまではできている前提で、Live2DからFaceRigへのデータの受け渡しについての話になります。

■用意するデータ

　Live2Dで作成したキャラクターのデータをFaceRigに組み込む方法です。


　今回、やってみて何度か失敗をしたので、 2019年3月時点での更新情報として備忘録的に書いておくことにしました。

　Live2Dは、Cubism 3を使用しています。
　最新のCubism 3.3です。

現時点では、FaceRig側が最新のCubism 3.3にきちんと対応していないので、 Cubism 3.3であっても、 Cubism 2.1用のmocファイルにする必要があります。

■テクスチャアトラスの作成

 　Cubism 2.1用のmocファイルを書き出すためには、まず、テクスチャアトラスを作成します。

　上部メニューの　［モデリング］→［テクスチャ］→［テクスチャアトラス編集］をクリックします。
　または、

　赤矢印のボタン［テクスチャアトラス編集］をクリックします。

［新規テクスチャアトラス設定］ウィンドウが開きますので、Cubism 3のFree版の最大値である幅2048px、高さ2048px以下に設定して、OKを押します。

 ■mocファイルの書き出し

　次に、上部メニューから、［ファイル］→［組み込み用ファイル書き出し］→［mocファイル書き出し（2.1用）］を選択します。

［書き出し設定］ウィンドウで、「モデル設定ファイル(model.json）を書き出す」にもチェックを入れて、一緒に書き出します。
［OK］をクリックすると、

［キャラクター名］.2048　というフォルダに入ったテクスチャアトラス、moc形式のファイル、モデル設定ファイル(model.json）の3つが一気に書き出されます。

 ■物理演算ファイル

 　データ作成で注意すべき点は、最新のCubism 3.3では、物理演算設定が、Cubism Editor　からになっている点です。

 　上部メニューから、［モデリング］→［物理演算・シーンブレンド設定を開く］をクリックします。

　そして、物理演算設定を終えたら、メニューから、［物理演算］→［物理演算設定の書き出し］をクリックすると、物理演算設定ファイル（physics.json3)が書き出されるのですが、これはFaceRigでは対応がありません。physics.json　のファイルが必要です。

　このため、古いバージョンであるLive2d Cubism2の Live2d viewer が必要です。

　Live2d viewerをインストールする前に、さらに、Adobe AIR もインストールしておく必要があります。

　どちらも、Live2DCubism2　の公式マニュアルサイトであるこちらから入手できます。

　紫の枠の方のViewer　が、physics.json　を書き出せるタイプです。

 ［プロジェクト］→［追加］→［物理演算］で、physics.jsonというファイルができます。

　物理演算機能の使い方は、公式のマニュアルを参照して下さい。
　できあがったら、［プロジェクト］→［書き出し］→［物理演算］で書き出します。

 

　この書き出しをすると、

　mocファイルの表示が少し変わります。

 　詳しい違いはわかりませんが、どちらのmocファイルでもFaceRigでは、同じように表示されました。

■アイコン

　アイコン用の画像ファイルを作ります。
　縦256pix横256pixの正方形の、アイコン用の画像を作り、png形式で保存します。
　名前は、

ico_キャラクター名.png

　にしておきます。

■cfgファイル

　FaceRigでの設定に使う、configファイルです。
　最低限、「ここにあるデータはFaceRigのLive2Dのアバターで、名前は●●と言います」
　というのをFaceRig側に知らせるものです。
　さらに細かい設定も、いろいろできるのですが、絶対に必要なのは、

cc_names_キャラクター名.cfgという名前のファイルの中に、

set_friendly_name キャラクター名 'Live2D キャラクター名'

この一行だけです。
　あとは、

 set_avatar_skin_description キャラクター名 default 'キャラクターの説明文など'

というのを二行目に入れれば、キャラクターの説明を入れることなどもできます。
　保存時によく文字化けするので、可能であればUTF-8Nという形式で保存するといいのですが、Windowsのメモ帳では対応していません。
　フリーソフトの「TeraPad」などが対応していますので、気になるようなら使ってみて下さい。
　TeraPad（窓の杜）
　テキストデータ保存時に、

　上部メニュー［ファイル］→［文字/改行コード指定保存］を選択し、

開いたウィンドウで文字コード「UTF-8N」改行コード「LF」という形式で保存します。

　このほかに、cc_キャラクター名.cfg　というファイルを使って、細かい設定もいろいろできるのですが、今はとりあえずデータを受け渡して動かすだけなので、いじらないでおきます。
 　テキスト保存し、拡張子　.txt　を .cfg　に変更すればできあがりです。

■重要：キャラクター名をそろえる

　データファイルがそろったら、すべてのファイルのキャラクター名をそろえます。このとき、半角英数の小文字にしておくと失敗しにくくなります。
　そして、そろえたすべてを　キャラクター名　のフォルダにまとめます。

　suiko という名前のキャラクターであれば、

　このようにそろえて、

　このような名前のフォルダにまとめます。

 ■FaceRigのフォルダに挿入する

 　FaceRigの、アバターのデータが入っているフォルダに、ひとまとめにしたフォルダを挿入します。

［Steam] の入っているフォルダから、［SteamApps] →［common］→［FaceRig］→［Mod］→［VP］→［PC_Common］→［Objects］というフォルダを探していくと、中に、他のアバターの名前のフォルダが入っているのが見つかりますので、そこに、追加して入れておきます。
　

■成功！

　成功しましたか？
　成功すると、FaceRigのアバターに、あなたの作ったキャラクターが追加されるはずです。

　PCカメラで、目や口の動きを読み取り、表情が変化して、絵に命が吹きこまれたかのように、アニメーションします。

　試行錯誤の末に完成したので、感激しました。

　1000円ほどのWebカメラでも十分に認識してくれますが、音が悪いので、オーディオインターフェイスなども用意したいところです。