【VTuberにオススメ】FaceRig+GadgetXLive2D+OBSでゲームパッド連動のやり方
どうも、カワナミです。
気がつきゃ前回の更新から１年以上経ってたんですね。時の流れが早い…。
この１年間でLive2Dのお仕事をいただいたり、専門学校で講師をさせていただいたりといろいろありました。10月からは会社を辞めて個人でやっていこうと思います。
さて、近頃のVTuberブーム、すんごいですね。私もそろそろ現実の肉体を捨て魂になりたいと思ってるところです。
比較的導入しやすいということもあり、FaceRigとLive2Dで肉体を得ているVTuberさんもよく見かけます。今回はそんなVTuberさんにオススメのゲームパッド（Xbox 360 Controller for Windows）連動のやり方をご紹介しますよ。
先に結果を見せちゃうとこんな感じです。
ゲームパッド連動できたあああああうおおおおおおおお
— カワナミ (@kw_nmnm) 2018年8月24日
がねーしゃさんのGadgetXLive2Dのおかげで非アクティブウィンドウ関係の懸念も払拭！！！！圧倒的感謝しかない！！！！ pic.twitter.com/7CWObwK8i9
では、行ってみましょう～
もくじ
はじめに
おおまかな仕組み
上記動画のだいたいの仕組みはこう。
仕組みはこんな感じ…FaceRigとGadgetXLive2DをOBS上でクロマキー合成してます。ゲームパッドは押したボタンごとにLED部分が光るようになどなど、サンプルからちょびっと改造してます。ゲーム実況されるVTuberの方々、是非オリジナルデザインのゲームパッドを持ってほしい！ pic.twitter.com/6iyV5NikU3
— カワナミ (@kw_nmnm) 2018年8月25日
顔をトラッキングしたバストアップ（FaceRig）と、ゲームパッドの入力に合わせて動く手元（GadgetXLive2D）を配信・録画用ソフト（OBS）上で重ねています。とっても単純。
FaceRigについて
知ってる方も多いとは思いますが、FaceRigはWebカメラで映した顔をトラッキングし、自分の顔とキャラクターの顔を同期させることができるすんごいソフトウェアです。Steamで1,500円くらい(2018/8/30現在)。リーズナブル！
追加のモジュールを買うことで、Live2Dモデルを導入し同期させることができます。400円くらい(2018/8/30現在)。
FaceRig用のLive2D制作・導入方法やノウハウなどはまとめてくださってる方がいらっしゃいますので割愛しちゃいます。解説してくれてるVTuberさんも結構いるのでは。私は主に、ナナメさんのブログを参考にして制作しました。まうちゃんかわいいです。
今回は、FaceRigでLive2Dモデルが動くようになったところまでできていることを前提として解説していきます。
GadgetXLive2Dについて
GadgetXLive2Dは、がねーしゃさん（@Ganeesya）制作の生配信向けソフトウェア。
Live2Dとゲームパッドの連動はもちろん、キーボード・マウスや、ペンタブ、音声とも連動できちゃうすんばらしい代物です。感謝感謝…。上記動画の説明文から無料でダウンロードできます。
「ParamGetter」というソフトで各デバイスの入力を受け取り、「GadgetXLive2D」側に渡してLive2Dを動かすという仕組みだそう。なので、実際に使用する時は「ParamGetter」と「GadgetXLive2D」を同時に起動しておく必要があります。
今回連動させるゲームパッドはXbox 360 Controller for Windows。ごく一般的なゲームパッドです。それ以外の機種だと別でプラグインを入れる必要があるらしいのですが、プログラミングポンコツ丸にはよくわからず…。申し訳ないです。
Live2Dモデルの制作
何はともあれ、連動させるLive2Dモデルがなければ話は始まりません。GadgetXLive2Dの動画やサンプルデータはほぼ全身を作ったモデルですが、今回胸から上部分はFaceRigを使いますので手元のみのモデルを作ります。
Live2Dのモデリングのやり方はここでは解説しませんので、調べてみてください。公式さんのチュートリアル動画もオススメですよ。私もだいたいいっつもTwitter見てますので、ご質問いただければできる範囲でご協力します！できる範囲でね！
Live2D Cubism 3 マニュアル | Live2D Manuals & Tutorials
素材を作る
手元だけの素材を作っていきます。コントローラーとそれを持った手をシコシコ描きます。
▲下３分の１くらいは見切れます。手首まででちょうどいいかと。
カラーリングをキャラクターと合わせてみたりカスタマイズしたり…いっそ全然違う形のオリジナルデザインにしちゃってもOKです。オリジナルコントローラー持ってゲームしてる子良くない？良いよね？かわいい！！！！
描き終わったらパーツ分けをします。今回は表面のボタン（A,B,X,Y）を押すと裏面のLEDが光るようにしたかったので、光パーツも描いてあります。
▲手は左右反転して流用するので片側だけ。ボタンを押し込みたい場合は、押し込んだボタンが隠れるよう被せ用パーツも分けておきましょう。
モデリング
素材ができたらモデリングです。ゲームパッドのここをこう動かしたらこう動くぞウヘヘと想像しながら作ります。
１つの動き（左スティックを水平方向に倒す、Aボタンを押す）につき１パラメータ（コントローラーが左右に倒れる、緑に光る）、といったように作ると良いです。
▲AとBを同時に押すと、赤と緑のLEDが同時に光るから黄…など、パラメータの重ね合わせでもいろいろ表現できます。
GadgetXLive2D用に作る際は、
- 組み込みデータ書き出しの際に旧バージョンにコンバートするので、Cubism3特有の機能（グルー機能など）を使わないこと
- マイナスのパラメータを作らないこと（"0,1,2"や"0,1"で統一）
の２点を守ると後述の実装がやりやすいかもしれません。あんまりプログラミングに詳しくないので「かもしれません」としか言えませんが…。
▲スティックを水平方向に倒したときに動かすパラメータ。「-1,0,1」ではなく、「0,1,2」にしてデフォルトを1にしておくと良し。
モデリングしながら、パラメータIDもどこが動くのかわかるよう整えておきましょう。Cubism3だと「ParamAngleZ」とかですが、旧バージョン仕様の「PARAM_ANGLE_Z」といった形式にこの時点で変えてしまっても良いかもです。
もし3仕様のIDで作ったとしても、モデリング＞モデルのIDを変換でコンバートできるので大丈夫。
▲IDのコンバート機能。旧仕様にしなかった場合にGadgetXLive2Dで不具合が起こるかどうかは確認してませんが、念の為。
あとからパラメータIDを使うので、一覧をスクショしてすぐ見れるようにしとくと便利です。
▲わかりやすいID名を心がけましょう。
書き出し
moc3形式ではなく、旧バージョンのmoc形式で書き出しましょう。ファイル＞組込み用ファイル書き出し＞mocファイル書き出し（2.1用）を選択します。書き出し前にテクスチャアトラスの生成をお忘れなく。
▲model.jsonも一緒に書き出すようチェックを入れます。新機能を使っていなければこのまま書き出して問題ない…はず。
GadgetXLive2Dへの実装
「はじめに：GadgetXLive2Dについて」で紹介した動画の説明文リンクから飛び、GadgetXLive2Dフォルダ内の「GadgetXLive2D」「ParamGetter」、サンプルモデルフォルダ内の「gamepadsample」の最新版をダウンロード・解凍しましょう。
▲2018/8/30現在だとこの３つ。
試運転とひっかかりポイント
まずはサンプルモデルで試運転をしてみます。GadgetXLive2DとParamGetterを起動し、GadgetXLive2Dでgamepadsampleフォルダ内のgamepad.model.jsonを読み込んで試してみましょう。左下の「model addload」を押すと読み込みダイアログが出ます。
▲こんな感じ。動画にも読み込み方法の説明があります。
試運転までにちょっとひっかかりポイントがあるので、以下を参照してください。
・ParamGetterで入力を受け取ってくれない！
ParamGetterを起動したものの、そもそもゲームパッドが表示されないぞ…という場合。内部の諸々がWindowsのセキュリティに引っかかってる可能性があります。
ParamGetterフォルダ内の.dllと拡張子のついたファイルのプロパティを片っ端から開き、一番下のセキュリティを許可していきましょう。
▲この部分。おのれWindows。
許可し終わったらParamGetterを再起動します。「gamepad」という欄が出ていればOK。チェックを入れると入力に合わせて右の「x=00000,y=00000…」の数値が変わります。
▲やったぜ！！！！
・サンプルモデルが動かない！
GadgetXLive2DとParamGetterを起動してゲームパッドをカチカチしてもモデルが動いてくれない…という場合。サンプルモデル内のコードを直す必要があります。
gamepadsampleフォルダ内のgamepad.luaを開きましょう。テキストエディタで開けます。この中に、連動にまつわる設定が詰まっています。
▲これ。開くといっぱいアルファベットと記号が並んでいます。
この中の「if not oldbuttons then」のあとに「oldbuttons = {}」と追記して上書き保存。もう一度GadgetXLive2Dを起動してみましょう。他に原因がなければうまくいくはず。
▲この部分。間違って他の文章をいじらないように注意。
ちょびっと改造
試運転でサンプルが動いたら、いよいよ自作モデル実装です。
サンプルモデルの斜め横向きと違い今回は真正面向きなので、少しゲームパッドの動きが変わってきます。そのため、サンプルからちょびっと改造する必要があります。
まずはmoc形式で書き出したLive2Dモデルを１つのフォルダにまとめておきましょう。以下のような構成ですね。
・（モデル名）フォルダ
├（モデル名）.1024 or 2048 or 4096 フォルダ
│ └texture_00.png
├（モデル名）.moc
└（モデル名）.model.json
次に、サンプルであるgamepadsampleフォルダ内のgamepad.luaをコピペしてこのフォルダ内に入れます。この時名前を（モデル名）.luaにしておきましょう。
移し終わったら（モデル名）.luaファイルをテキストエディタで開き、一番下の部分を少し書き換えていきます。
書き換える部分と、それぞれの文章のだいたいの意味は以下の通り。プログラミングポンコツ丸が多分こうであろう…と判断した意味ってだけなので、厳密に言えば間違ってるかもしれません。すみません。
▲多分こうだと思う。多分。
Live2Dモデル制作時に撮っておいたパラメータID一覧のスクショを見つつ、こんな感じに書き換えます。よくわからない時は…真似してみてください。
▲Live2D側でマイナスのパラメータがあるとここの書き換えが面倒になりそうなので、前述で注意点としました。
書き換えが終わったら上書き保存をしてGadgetXLive2Dを起動し、試運転の時と同じように（モデル名）.model.jsonを読み込みましょう。思い通りの連動をしてくれれば実装完了です！
▲これだけでもう楽しい！！！！
重ねるための準備
思う存分カチカチし終わったところで、FaceRigと重ねるための準備をします。といってもやることは２つだけ。
まずは、左上のバーを移動して背景色を変えましょう。今回はクロマキー合成と言って、指定した色部分を透明にする合成方法を使ってFaceRigと重ねます。指定色は緑にするのが一般的です。
▲緑のバーのみぐいっと100%に。もし自作モデルに似たような緑が使われている場合は別の色にしましょう。青とか。
最後にスペースキーをぽちっとすると、UIが消えてくれます。これで合成の準備完了です。
▲モデルのみが表示されてる状態に。
OBS・FaceRigの準備
ここまでくればあと少し！OBSとFaceRigの準備をします。
OBS
OBS（Open Broadcaster Software）をインストールしましょう。その名の通り、無料で使える生配信・録画用のソフトです。多機能で無料でいいのか不安になります。最近の世の中は施しが手厚いな。
ここでは必要最低限の設定方法しか書かないので、初期設定など細かな使い方は下記のページなどをどうぞ。
FaceRig
FaceRigを起動し、こちらも背景をクロマキー用のものにします。GadgetXLive2Dで準備したのと同じような一面緑になるやつですね。FaceRigで出した背景をそのまま配信や録画で使いたいぞという方はしなくてもOKです。
GadgetXLive2Dと同じく、似たような緑部分があるキャラクターの場合は、被りのない色で塗りつぶした背景にしてください。そうしないとお天気予報で放送事故起こしたガチャ○ンみたいになります。
▲ここで背景を変えられます。見当たらない時は、上側一番右の「アドバンスUIに変更する」を押すと出てきます。
緑以外の背景にしたい場合は以下のページを見て、別の色で塗りつぶした背景画像を読み込みましょう。
それと、上にある「ブロードキャストに切り替え」を押しておきます。ブロードキャストとは書いてありますが、勝手にオンラインで映像が垂れ流しになったりとかはしないのでご安心を。
▲このアイコン。間違って一つ左隣のアイコンを押すと現実と虚構の狭間に巻き込まれて死にます。
合☆体
OBSのインストール・FaceRigの準備が終わったら融合召喚のターンです。ドロー！
OBSを起動し、「ソース」の枠内を右クリックして、追加＞映像キャプチャデバイスを選択します。名前をつけてOKを押すとダイアログがでてきますので、デバイスを「FaceRig Virtual Camera」にします。
▲FaceRigの画面がキャプチャされて出てきます。大きさや位置は直接いじれますので、良きように。
追加したFaceRigソースの名前を右クリックし、フィルタを選択しましょう。エフェクトの「＋」から「クロマキー」を追加すると、指定した色部分が透明になります。緑にしているなら、追加したそのままでだいたい大丈夫です。別の背景色にしているならその色を指定しましょう。FaceRig側の背景をそのまま使いたい場合はフィルタ追加はしなくていいです。
▲クロマキー合成が無料でできるってすごい。
FaceRigの画面を無事設置できたら次はGadgetXLive2Dです。こちらは追加＞ウィンドウキャプチャでGadgetXLive2Dを選択し、ソースを追加しましょう。追加後に背景をクロマキーで抜きます。
▲この辺りから高笑いしましょう。アーハハハ！俺は天才だ！
手の大きさと位置が合うように配置すれば完成です。もう何も怖くありません。ゲーム画面を横に置いて配信したり録画したりしましょう。
▲たぐいまれなる臨場感を君も手に入れよう！積みゲー消化も捗る！
さいごに
ゲームパッドを持った手を重ねてゲームしてる感を出す、というアイデアはGOROmanさんのこちらの記事から得たものでした。
こちらではUnityでFaceRig画面にゲームパッドの絵を重ねていたので、ゲームパッド側もLive2Dにして連動させれば良くね？と思いLive2DSDK周りを調べていたのですが、ポンコツにはさっぱりわからず。
Twitterでヒンヒン嘆いていたところ、がねーしゃさんがGadgetXLive2Dを紹介されているのを見つけ、KOREDA！となった次第です。本当にありがとうございます。嘆いてみるもんです。
この記事が誰かのお役に立てれば幸いです。ホラーゲーム実況好きなのでみんなホラゲやろうぜ。
それではまた～
