2019年3月14日木曜日

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カメラでも十分に認識してくれますが、音が悪いので、オーディオインターフェイスなども用意したいところです。








 








2019年2月8日金曜日

クリップスタジオペイントでアニメを作ろう・カメラワーク1 2Dカメラ機能の基本

 クリップスタジオペイント(CLIP STUDIO PAINT、クリスタ)ですが、2018年11月29日のバージョンアップから、アニメーション機能が大幅にアップデートされました。

 まず目立つのは、2Dアニメへの「演出」機能が追加されたことでしょう。 
 追加できる演出は、画像の移動、回転、拡大・縮小、不透明度の変更など。

 また、タイムラインに効果音、BGMなどのオーディオファイルも追加できるようになったり、先行プレビューとして、自動彩色機能、EX版のみですが、「東映アニメーション デジタルタイムシート」との連携機能も追加されています。

 レイヤー移動による演出機能もありますが、今回は、 2Dカメラによる演出の、簡単な使い方を紹介します。

■準備


 新規アニメーション(またはうごくイラスト)を作成し、アニメーションフォルダーを2つ、フォルダーの中にセルを用意し、絵を描きます。
 今回は、わかりやすいように片方は赤い星の絵、片方は青い星の絵にし、動きもつけてありません。

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


 上部メニューの[アニメーション]から、[アニメーション用新規レイヤー]を選択します。


出てくるサブメニューから[2Dカメラフォルダー]をクリックします。


 [レイヤー]フォルダーや[タイムライン]パレットを確認すると、「カメラ1」という名前のフォルダーができています。これが、2Dカメラフォルダーです。
 2Dカメラフォルダーは、アニメーションフォルダーやセルの画像を変形せずに、アニメーションにカメラワークをつけるためのものです。

■カメラフォルダーの中に入れる


 カメラワークをつけたいアニメーションフォルダーやセル(レイヤー)をドラッグして、カメラフォルダーの中に入れます。



 アニメーションフォルダーの方に、カメラフォルダーを入れることはできません。


■操作ーオブジェクトを選択




①カメラを選択します。

②ツールバーから、[操作]を選択します。

③サブツールバーから、[オブジェクト]を選択します。
 [ツールプロパティ]がいろいろ出ますが、今回は、そのままにします。

④キャンバスの方には、移動や変形の時に使う四角い枠のツールが出ています。

■起点となるキーフレームの作成


 タイムラインの、起点となるフレームに移動します。

 タイムラインにある[キーフレームを追加]の脇の▼から、キーフレーム補間の種類を選択します。


 [キーフレームを追加]をクリックします。


 キーフレームが追加されました。
 キーフレームが設定された位置には、◆が表示されます。


■終点となるキーフレームの作成


 終点となるフレームの位置に移動します。


 枠を動かして、変形・回転などをつけます。


 枠を動かすと、カメラ移動後の位置が表示され、終点位置のキーフレームが作成されます。
 始点の位置との間に線も表示され、どのように動いたかがわかるようになっています。

[再生/停止]ボタンで動きを見てみましょう。

[ファイル]→[アニメーション書き出し]→[アニメーションGIF]で書き出すと、こんなアニメーションになります。



 ■カメラに写っている部分の確認


 2Dカメラフォルダーは、アニメーションフォルダーやセルの画像を変形せずに、アニメーションにカメラワークをつけるためのものですので、起点のキーフレームのときの枠の中が、起点のタイミングでカメラに写っている部分ということになります。

 また、終点のキーフレームの時の枠の中が、終点のタイミングでカメラに写っている部分ということになります。

 確認のために、青い星の描いてあるアニメーションフォルダーの方も、カメラフォルダの中に入れてみます。


 
  この状態で、[ファイル]→[アニメーション書き出し]→[アニメーションGIF]で書き出すと、こんなアニメーションになります。



 カメラフォルダーの中に入っているものだけにカメラワークがついているのがよくわかります。





2018年4月30日月曜日

iPad版のクリップスタジオペイントでアニメを作ろう14 iMovieで編集4、テーマ音楽、そして完成

■テーマ音楽を入れる


 音がないのもさみしいので、今回は、あらかじめ入っているテーマ音楽を入れましょう。もちろん、録音したり、自分で作った曲を入れることもできます。

 左上の設定マーク①をクリックします。

[プロジェクト設定]ウィンドウから[テーマ]の「明るい」を選択、テーマ曲を[ON]、黒からフェードインも[ON]にしてみます。
 設定が完了したら[プロジェクト設定]ウィンドウの外をタップすれば設定完了です。


 できあがったら、左上の[完了]をクリックします。


 タイトルを変えましょう。
 タイトル部分をクリックするとキーボードが出るので、新しいタイトルを入力します。


 さらに、下のメニューから[共有]を選んで設定すれば完成です。


 できあがりました。





iPad版のクリップスタジオペイントでアニメを作ろう13 iMovieで編集3 タイトルを入れる

■タイトルを入れます


 タイトルの後ろに流す部分をカットして作成します。長さが短いときは、下のメニューから[速度]を選んで[フリーズ]などで調整します。
 下のメニューから[T]タイトル を選びます。

 どのような位置に入れるかを選択します。
 今回は[標準]にしてみます。


 左上のプレビュー画面で「タイトルを入力」となっている部分をタップすると、キーボードが出ますので、タイトルを入力します。


 iPadでは、文字の色などは変更できないようです。
 白い文字ですと、背景になる部分の色によっては見えにくくなりますので、フィルタで少し見えやすくしましょう。タイトル部分用に黒っぽい背景などをつくっておいてもいいですね。

 フィルタをかけるには、フィルタをかけたいカットを選択して、下部メニューから[フィルタ]を選び、出てきたフィルタの中から選択します。



◎右上の[×]をクリックするとプレビュー画面が広くなります。









iPad版のクリップスタジオペイントでアニメを作ろう12 iMovieで編集2 ムービーのカット

■ムービーを分割(カット)する


 真ん中の白い線がカットしたい部分にくるようにします。
 編集タイムラインのムービーは、指でスライドすることで左右に動かすことができます。

 カットしたいムービーを選択すると、下に操作パネルが出ます。

 [分割]をクリックします。


 ムービーがカットされました。


 部分的に削除するには、削除したい部分を選択して、右下の[削除]をクリックします。

 削除されました。


 もう一度、右上で挿入したいムービーを選択し、ポップアップウィンドウから[+]を選んで追加すると、下の編集タイムラインに追加されます。


 つなぎ目の部分①をクリックします。

 下に編集メニューが出てきますので、[なし]にすると、重ね合わせたりせず、そのままムービーがつながります。

 もう一度、[分割]し、よけいになった部分を[削除]すれば、火の輪くぐりを二回繰り返すことができます。



 このほか、カットの切り替えのときに重ね合わせたり、スライド、ワイプ、フェードといった編集を加えることができますので、いろいろ試してみるといいでしょう。






iPad版のクリップスタジオペイントでアニメを作ろう11 iMovieで編集

■ムービーの編集-iMovieを起動する


 書き出しが終了したら、動画編集です。編集は、iPad版のCLIP STUDIO PAINT(クリスタ)ではできません。

 編集に、今回は、最初からiPad に入っている iMovie を使います。

 紫の中に白い星、その真ん中にビデオの絵がついたアイコンのアプリです。




 タップして、iMovie を起動します。


  上部メニューで[プロジェクト]-[プロジェクトを作成]をクリックすると、[新規プロジェクト]ウィンドウが開きます。


[ムービー]を選択します。

 左側のメディアのところから[ビデオ]を選択すると、さきほど[ビデオ保存]したムービーが右側に出ますね。
 下にある[ムービーを作成]をクリックします。

 右の[メディア]から[ビデオ]を選択し、[すべて]か[最後に追加した項目]から、先ほどのムービーを選びます。
 黄色い枠で囲まれたら選択できています。

 選択した状態で、ポップアップウィンドウの[+]をクリックします。


 下の編集タイムラインにビデオが読み込まれました。①
 上にはプレビューが出ます。②


 再生ボタン③を押して、流して見てみましょう。

 再生ボタンを押すと、下に位置が示され、左上にムービーが再生されます。

 あっさりしすぎているようなので、火の輪くぐりの部分を二回繰り返すなど編集を入れて強調することにします。

◎使い方にはヘルプがありますので、わからなかったら上部メニューの[?]からヘルプを出しましょう。






iPad版のクリップスタジオペイントでアニメを作ろう10 ムービーの書き出し

 iPad版のCLIP STUDIO PAINT(クリスタ) を使って、数カット程度のアニメを作っている過程です。
 まずは数秒でいいので、とにかく完成させ、使い方、流れを覚えます。
 線画、彩色まで済んで仕上がったら、[再生/停止]ボタンを使って、流して確認します。
 違和感のあるところがなければ、書き出しましょう。

 上部メニューの[ファイル]-[アニメーション書き出し]から今回は[ムービー]を選びます。






 ひらいたウィンドウでファイル名をつけて[保存]をクリックします。


[ムービー書き出し設定]ウィンドウで、元々の設定のまま、幅1280 高さ720 フレームレート24 で設定し、[OK]をクリックします。


 ムービーファイルが書き出されました。


 このままだとiPad版のCLIP STUDIO PAINT(クリスタ)アプリ内部でしか使えませんので、これを[共有]設定で他からも使えるようにします。

 今回は、左下、[ビデオを保存]します。