こんにちは、神吉です。
今回もFaceRigについてのお話です。
前回の記事で素材アップロードについて書いたんですが、
そういえばそもそもLive2Dモデルを追加する方法について書いてなかったなと思ったので書かせていただきます。
①Live2D側の準備
前回もご紹介した記事 Using models from Live2D Library in FaceRig を参考にしています。
■準備するファイル
最低限必要なのは、上記のmocファイルのセットをモデルファイルと同じ名前のフォルダに入れたものです。
あればいいものは
●FaceRigに読み込む再の設定ファイル(~.cfg)
●プレビュー用の画像ファイル
ですが、こちらについてはまだ把握し切れていないので後日追記します。
■mocファイルの書き出し方
※12/18現在FaceRigは2.0以前のmocファイルのみ対応しています。クリッピング等は使用できません。
1.ファイル→mocファイル書き出しを選びます。
2.書き出し設定が開くので設定を確認して書き出します。
SDK2.0になっていること、モデル設定ファイルを書き出すにチェックが入っていることを確認して保存します。
生成されたファイル(テクスチャフォルダ、moc本体、jsonファイル)を一つのフォルダにいれます。
②FaceRig側の準備
ファイルはSteamをインストールしたドライブ(PCによって違いますがたいていCかDあたりでしょう)の SteamLibrary/SteamApps/Common/Facerig/Mod/VP/PC_CustomData/Objects の中に、先ほど作成した「フォルダ」を入れます。
※ドライブを分けていない場合、ProgramFiles(X86)/Steam/SteamApps/Common/Facerig/Mod/VP/PC_CustomData/Objects
となっているかも。たぶんどっちか。
準備して起動すると無事読み込まれました。
顔アイコンがないですが、cfgファイルを別途作成して設定します。(後日追記予定)
■おまけ
ドキュメントによると、FaceRig上で反映されるパラメーターは以下の通りだそうです。
顔 XYZ(-30~30)
体 XYZ(-10~10)
呼吸(0~1) ←待機モーションは呼吸になるので、つけておくといいかも
目玉 XY(-1~1)
眼 開閉(0-1) ただし0.75以上で眼が開いた状態になります
目の変形(-1~1)パラメーター名はPARAM_EYE_FORM
まゆ 右左、上下、変形(-1~1)
口 開閉(0-1) 変形(-1~1)変形のパラメーター名はPARAM_MOUTH_FORM
※キャラ名.cfgというファイルを作ることで、キャラクターの名前やアイコン、キーボードショートカットのモーションを入れ替える事ができます。物理演算はjsonファイルのほうで設定します。こちらはまた後日追記します。
2015/12/18
2015/12/16
FaceRigワークショップに自作Live2Dモデルを追加する方法
こんにちは、神吉です。
今回はFaseRigという配信プラットフォーム用Webカメラアプリについてのお話です。
このソフトは、ウェブカメラの映像を解析して3Dモデル等のアバターにリアルタイムで表情を反映できるという、いわば「俺が嫁になる!」というすごいソフトです。今月のアップデートでLive2Dモデルが使えるようになり、自作モデルも使用可能ということでけっこう話題になっています。
自作モデルはこんな感じで割と簡単に入れることができます。(12/18追記)
ということで、さらに自作のLive2Dモデルをワークショップ(素材やさんみたいなところ)アップロードしてみんなに使ってもらえるようにする方法を書いてみようと思います。
基本的なsteamワークショップの使用方法については検索してみてください。
また、英語ですがこちらの記事も参考にどうぞ。
■公式のアップロード方法についての記事
[Official FaceRig Guide] Workshop Upload and Download Tutorial
■Faserig用のLive2Dモデルの準備の仕方
Using models from Live2D Library in FaceRig
必要なファイルは
○プレビュー用画像
○mocファイルと同名のフォルダ(この中に以下のファイルを入れます)
●テクスチャー用のファイル
●mocファイル
●jsonファイル
●cmoxファイル
になります。これを「Objects」というフォルダの中に入れます。
以上のファイルが用意できたら、Steamクライアントのライブラリ→ツールから FaceRig WorkShop Utility Kitをダウンロードして起動します。
Utility Kitの必要事項を埋めてアップロードします。
以上の手順を経てアップロードができました!
Libra[Live2D content] http://steamcommunity.com/sharedfiles/filedetails/?id=576016967
これで全世界のみんなにうちの子になりきっていただけるというわけです。
ばんばん自作モデルをアップロードしていきましょう!!
この記事でわからないことや何か質問がありましたら、できるかぎり追記いたしますのでtwitter:rikakのほうに投げていただけると嬉しいです。
また、今回の記事作成とアップロードにはFaceRig Teamの皆様、開発者のCarmen氏に多大なご協力をいただきました。本当にありがとうございました。
今回はFaseRigという配信プラットフォーム用Webカメラアプリについてのお話です。
自作モデルはこんな感じで割と簡単に入れることができます。(12/18追記)
ということで、さらに自作のLive2Dモデルをワークショップ(素材やさんみたいなところ)アップロードしてみんなに使ってもらえるようにする方法を書いてみようと思います。
基本的なsteamワークショップの使用方法については検索してみてください。
また、英語ですがこちらの記事も参考にどうぞ。
■公式のアップロード方法についての記事
[Official FaceRig Guide] Workshop Upload and Download Tutorial
■Faserig用のLive2Dモデルの準備の仕方
Using models from Live2D Library in FaceRig
必要なファイルは
○プレビュー用画像
○mocファイルと同名のフォルダ(この中に以下のファイルを入れます)
●テクスチャー用のファイル
●mocファイル
●jsonファイル
●cmoxファイル
になります。これを「Objects」というフォルダの中に入れます。
以上のファイルが用意できたら、Steamクライアントのライブラリ→ツールから FaceRig WorkShop Utility Kitをダウンロードして起動します。
Utility Kitの必要事項を埋めてアップロードします。
以上の手順を経てアップロードができました!
Libra[Live2D content] http://steamcommunity.com/sharedfiles/filedetails/?id=576016967
これで全世界のみんなにうちの子になりきっていただけるというわけです。
ばんばん自作モデルをアップロードしていきましょう!!
この記事でわからないことや何か質問がありましたら、できるかぎり追記いたしますのでtwitter:rikakのほうに投げていただけると嬉しいです。
また、今回の記事作成とアップロードにはFaceRig Teamの皆様、開発者のCarmen氏に多大なご協力をいただきました。本当にありがとうございました。
2015/12/09
「呼吸」から考えるLive2Dモーションの付け方
Live2D Advent Calendar 2015 9日目の記事です。
こんにちは。またまた神吉です。
Live2Dで色々作って遊んだり教えたりしております。
2日目に、「1枚絵からうごイラを作ろう!」という記事を書かせていただきました。
今回も、初心者さん向けの記事になります。
パラメーターをつけて、よーし動かすぞ!となりアニメーターに取り込んだときに、CGアニメの初心者なら誰でもぶち当たる壁があります。
ポーズは何とか作れる、秒数にポーズを指定したらいいのかな?
……ととりあえず適当に入れてみると、こんな感じになると思います。
これでも、初めてはとても嬉しいものです。
でも、もう一歩先の自然な動きにするには、キーフレームアニメーションの基本と人体の動き方への理解が必要になります。
聞きなれない言葉がでてきましたが、「キーフレームアニメーション」とは、CGアニメーションで動きを作るときの基本になるものです。1秒を何分割かして(フレーム)ポイントごとに動きを割り当てることで、途中の動きはソフトで自動的に作ってくれます。MMDとかもそのような動かし方ですね。
参考: 3DCG初心者のためのCGアニメーション講座【作り方・方法編】 | 俺CG屋
キーフレームアニメーションで動きの設定をするときには、動きの開始する時間と終わる時間、数値(と、補完曲線)を意識する必要があります。Live2D Cubism Animatorでは、補完曲線は自動で設定されますので、動いている時間と動いていない時間のことを意識して作っていくようにしましょう。
さて、生きている人間っぽく見せるために一番大事なこと…それは何かというと、私は「呼吸」だと思っています。生き…息だけに…いやなんでもないです。
ということで、呼吸数について調べてみると、成人で15~20回/分…3~4秒に1回となっています。
参考: ナースのためのモニタポケット知識/5.呼吸の測定
個人的には呼吸間隔が6秒くらいのゆっくりでもそんなには気にならないのですが、3秒よりも少なくなるとなんとなく見ていても苦しくなる感じになってしまう(頻呼吸は24回/分)ので、大体4~5秒くらいで呼吸を設定してみます。息の吸い始めにまばたきも設定しました。
これを基本として、動きを設定していきます。先ほどの腕を胸の前に持っていく動きをつくります。
腕の動きはじめを息を吸う動きに合わせて、動き終わりを息を吐く動きに合わせてみます。
腕の動きに合わせて、肩が上がる動きを追加しました。
※パラメーターの画像はないですが、息を吸うときにびっくりして口をあける動き、吐くときに笑う動きを追加しています。
次に前半の呼気にあわせて、「な~に?」といった感じの口の動きを入れます。
その他、微妙に顔を傾けたり目に表情をつけたりするとこんな感じになります。
さらに、体の動きに合わせて髪の毛のゆれなどを入れて微調整して完成です。
いかがでしたでしょうか?
自然なアニメーションには、リズムがあります。
そして人間の体のリズム……呼吸だったり、心臓の動きだったり、体の柔らかさだったり、運動力だったり、性格だったり、色々な要素が組み合わさっています。をの一つ一つを表現することで、キャラクターの個性を表現することができます。
それを割り出す基準のひとつが、呼吸です。
そのほかにもアニメーションをつけるときに使う人体の生理現象は色々あるのですが、それはまたの機会にということで、今日はここでおしまいです。
今回作成したアニメーションファイルはこちらにアップしましたので、よかったら参考にどうぞ。
明日は10日目でnaotaroさん!がんばってください!
今回の素材はLive2D公式サンプルデータ集から、「ハル」ちゃんを使用しました。
こんにちは。またまた神吉です。
Live2Dで色々作って遊んだり教えたりしております。
2日目に、「1枚絵からうごイラを作ろう!」という記事を書かせていただきました。
今回も、初心者さん向けの記事になります。
パラメーターをつけて、よーし動かすぞ!となりアニメーターに取り込んだときに、CGアニメの初心者なら誰でもぶち当たる壁があります。
どうやって動かすの…?!
ポーズは何とか作れる、秒数にポーズを指定したらいいのかな?
……ととりあえず適当に入れてみると、こんな感じになると思います。
「うごいたよ!」「お、おう…」
これでも、初めてはとても嬉しいものです。
でも、もう一歩先の自然な動きにするには、キーフレームアニメーションの基本と人体の動き方への理解が必要になります。
聞きなれない言葉がでてきましたが、「キーフレームアニメーション」とは、CGアニメーションで動きを作るときの基本になるものです。1秒を何分割かして(フレーム)ポイントごとに動きを割り当てることで、途中の動きはソフトで自動的に作ってくれます。MMDとかもそのような動かし方ですね。
参考: 3DCG初心者のためのCGアニメーション講座【作り方・方法編】 | 俺CG屋
キーフレームアニメーションで動きの設定をするときには、動きの開始する時間と終わる時間、数値(と、補完曲線)を意識する必要があります。Live2D Cubism Animatorでは、補完曲線は自動で設定されますので、動いている時間と動いていない時間のことを意識して作っていくようにしましょう。
開始時間を設定しない場合と設定した場合の動きの違いです。
さて、生きている人間っぽく見せるために一番大事なこと…それは何かというと、私は「呼吸」だと思っています。生き…息だけに…いやなんでもないです。
ということで、呼吸数について調べてみると、成人で15~20回/分…3~4秒に1回となっています。
参考: ナースのためのモニタポケット知識/5.呼吸の測定
個人的には呼吸間隔が6秒くらいのゆっくりでもそんなには気にならないのですが、3秒よりも少なくなるとなんとなく見ていても苦しくなる感じになってしまう(頻呼吸は24回/分)ので、大体4~5秒くらいで呼吸を設定してみます。息の吸い始めにまばたきも設定しました。
呼気(吐く)のあとで呼吸の休止期間を作っています。
これを基本として、動きを設定していきます。先ほどの腕を胸の前に持っていく動きをつくります。
腕の動きはじめを息を吸う動きに合わせて、動き終わりを息を吐く動きに合わせてみます。
腕の動きに合わせて、肩が上がる動きを追加しました。
※パラメーターの画像はないですが、息を吸うときにびっくりして口をあける動き、吐くときに笑う動きを追加しています。
次に前半の呼気にあわせて、「な~に?」といった感じの口の動きを入れます。
な→笑顔の開いた口 に→笑顔の少し開いた口
その他、微妙に顔を傾けたり目に表情をつけたりするとこんな感じになります。
さらに、体の動きに合わせて髪の毛のゆれなどを入れて微調整して完成です。
いかがでしたでしょうか?
自然なアニメーションには、リズムがあります。
そして人間の体のリズム……呼吸だったり、心臓の動きだったり、体の柔らかさだったり、運動力だったり、性格だったり、色々な要素が組み合わさっています。をの一つ一つを表現することで、キャラクターの個性を表現することができます。
それを割り出す基準のひとつが、呼吸です。
そのほかにもアニメーションをつけるときに使う人体の生理現象は色々あるのですが、それはまたの機会にということで、今日はここでおしまいです。
今回作成したアニメーションファイルはこちらにアップしましたので、よかったら参考にどうぞ。
明日は10日目でnaotaroさん!がんばってください!
今回の素材はLive2D公式サンプルデータ集から、「ハル」ちゃんを使用しました。
2015/12/02
1枚絵からうごイラを作ろう!
Live2D Advent Calendar 2015 2日目の記事です。
こんにちは、Live2Dで色々作って遊んだり教えたりしているほうの人、神吉と申します。
今日は、Live2Dを触ってみたいけど「あらかじめLive2D用のイラストを描くのが大変…」「正面だけだと面白くないよ~」と思っているあなたに必見のお話です。
Live2Dの強みは、好きな場所を、好きなタイミングで、好きなように動かす事が出来ることです。
つまり、正面じゃなくても、それ用に気合を入れてパーツ分けした絵でなくても動かせるのです!
ということで、この記事では完全に1枚の絵からパーツを分けていってみようと思います。
今回はイラストはNEGI様の、強制安眠まくらちゃんを使わせていただきました。
(NEGI様には転載と改変掲載の許可をいただいております。ありがとうございます!)
1、準備
まず準備として、どう動かすか考えます。
今回は台詞がついているので、それにそって眠そうにICカードを出したり引っ込めたりしながら引き止める→そのうちにうとうとして寝てしまうという動きを作ることにしました。
・台詞があるので、台詞にそって動かそう→喋るための「口の開閉」
・朝のシチュエーションなのでうとうとさせたい→「目の開閉」「まゆ毛の上下」「顔の動きZ」「呼吸」
・ICカードをだしたりひっこめたり→体全体のねじりを含めた「手の動き」
以上のパラメーターをつけるためのパーツわけを考えてみます。
顔から上は輪郭を中心にそれより前にあるか後ろにあるか。体は首を中心にそれより後ろにあるか前にあるかを基準に分けていくと分けやすいです。→こちらの参考画像もご参照ください。
大まかにこんな感じになりました。
体は動かす右腕と、腕の手前に来る右足、大き目のリボンパーツだけ分けてあります。
2、きりぬき
どう分けるか大まかに決まったら、まずはキャラクターを背景から切り分けます。(もともと背景とキャラクターが分けてある絵では特に必要ない工程です)
3、前髪パーツを切り分ける
手前からパーツを切り出していきます。
2で切り出したキャラ絵のレイヤーを複製し、前髪の部分をなげなわツールで選択します。
切り抜いたら、前髪ではない部分を消していきます。
線画と塗りのレイヤーを別にしてあれば、線画だけ表示して線画を整えたあと、その線画を利用してパーツの選択範囲を作成→塗りのレイヤーを切り抜いたり書き足したりすると早くできます。
(このへんで、やっぱり線画もおねだりすればよかったと思いましたがいやこれはアナログ取り込みでも活用できる技だよ?!ちゃんとやりとげてこ?!と思い直して作業をすすめました)
4、顔の中身を分ける
輪郭と顔の中身、顔の影を分けます。
この絵は髪の毛を線で書いて目の前にもってきて隠すという処理がしてあるので、一番上のレイヤーにその処理を手書きで書き足しました。
5、前後関係の複雑なパーツの処理
髪やえりなど、手前にあるものが回り込んで後ろに入るときのパーツの分け方についてです。
なので、このように手前のみつあみと後ろのみつあみに分けてしまって、後ろのほうだけ後ろのレイヤーに回します。(同じデフォーマに入れて動かすと一緒に動いてくれますので問題ありません!)
6、大きなパーツを切り抜いたところの処理
基本的には3で紹介した切り分け方を使っていくのですが、描かなかった、隠れている下の部分を描くというのは存外にたいへんなことです。
私のよくやっているやり方をご紹介しますので、参考になさってください。
こんな感じで、こつこつとパーツを切り分ける→下の部分を描く…とやっていき、動かすパーツがそろったらLive2D cubism Modelerに読み込んでパラメーターをつけて、Animatorで動きをつけて完成です。
そのあたりのことはカレンダーで誰かがきっと書いてくれると期待しつつ私はここで筆をおくことにします。もう既にだだ長くなってしまってすみませんでした。
7、ね、簡単でしょ?
ということで完成したムービーはこちら。
作業は大変ですが、それを経て一枚の絵が初めて動く瞬間は本当に魔法のようで、毎回新鮮な感動を覚えます。その気持ちを皆に共有して欲しくて、Live2Dを布教しています(笑)
最初は髪の毛を動かしたり、まばたきをさせてみてソフトの使い方をなんとなく覚えるのが近道だと思います。怖がらずにまずは触ってみよう!
関西で栗坂こなべさんが主催している「関ゲ部お絵かき会」でもLive2Dをおしえるお手伝いをしたりしているので、もし興味がありましたらご参加くださると嬉しいです。
明日はTodateさん!よろしくお願いします!
こんにちは、Live2Dで色々作って遊んだり教えたりしているほうの人、神吉と申します。
今日は、Live2Dを触ってみたいけど「あらかじめLive2D用のイラストを描くのが大変…」「正面だけだと面白くないよ~」と思っているあなたに必見のお話です。
Live2Dの強みは、好きな場所を、好きなタイミングで、好きなように動かす事が出来ることです。
つまり、正面じゃなくても、それ用に気合を入れてパーツ分けした絵でなくても動かせるのです!
ということで、この記事では完全に1枚の絵からパーツを分けていってみようと思います。
今回はイラストはNEGI様の、強制安眠まくらちゃんを使わせていただきました。
(NEGI様には転載と改変掲載の許可をいただいております。ありがとうございます!)
こちらのイラストです。大変可愛いです。もう寝よう。
そして動かしたのがこちら!フゥーウ!
※記事の最後にも紹介してますがフルサイズはyoutubeにあげてあります
1、準備
まず準備として、どう動かすか考えます。
今回は台詞がついているので、それにそって眠そうにICカードを出したり引っ込めたりしながら引き止める→そのうちにうとうとして寝てしまうという動きを作ることにしました。
・台詞があるので、台詞にそって動かそう→喋るための「口の開閉」
・朝のシチュエーションなのでうとうとさせたい→「目の開閉」「まゆ毛の上下」「顔の動きZ」「呼吸」
・ICカードをだしたりひっこめたり→体全体のねじりを含めた「手の動き」
以上のパラメーターをつけるためのパーツわけを考えてみます。
顔から上は輪郭を中心にそれより前にあるか後ろにあるか。体は首を中心にそれより後ろにあるか前にあるかを基準に分けていくと分けやすいです。→こちらの参考画像もご参照ください。
大まかにこんな感じになりました。
体は動かす右腕と、腕の手前に来る右足、大き目のリボンパーツだけ分けてあります。
2、きりぬき
どう分けるか大まかに決まったら、まずはキャラクターを背景から切り分けます。(もともと背景とキャラクターが分けてある絵では特に必要ない工程です)
このようにキャラクターの周りを大まかに切り抜いて…。
ちまちまと消していきます。(下のほうはあまりうごかないのでてきとう)
背景のほうも別に用意しておきます。
●ワンポイント!●
原画や切り分けた絵はロックをかけて別に分けておくと安全です。
やらないと涙を見たり真っ白に燃え尽きることもあるかもしれません。
3、前髪パーツを切り分ける
手前からパーツを切り出していきます。
2で切り出したキャラ絵のレイヤーを複製し、前髪の部分をなげなわツールで選択します。
切り抜いたら、前髪ではない部分を消していきます。
線画と塗りのレイヤーを別にしてあれば、線画だけ表示して線画を整えたあと、その線画を利用してパーツの選択範囲を作成→塗りのレイヤーを切り抜いたり書き足したりすると早くできます。
(このへんで、やっぱり線画もおねだりすればよかったと思いましたがいやこれはアナログ取り込みでも活用できる技だよ?!ちゃんとやりとげてこ?!と思い直して作業をすすめました)
4、顔の中身を分ける
輪郭と顔の中身、顔の影を分けます。
輪郭を分けて前髪の下に隠れている顔の影を書き足します。
顔の影をパージします。
顔の中身も分けます。
このイラストは顔の影が少なめ+動きもまばたきと口パクだけなので、
このくらい肌色の部分が残っていても大丈夫です。
あとでまばたき用のとじ目を別レイヤーで描きます。
レイヤーは「まゆ」「目」「鼻」「ほほ」「口」と部位別に分けておきましょう。
(近くて同じレイヤーだとPSD読み込みのときにくっつくので)
※手前から分けていくと、このように手前のパーツを半透明にすることで隠れている部分が分かって、無駄に書き足したりしなくてすみます。時々確認するといいです。
この絵は髪の毛を線で書いて目の前にもってきて隠すという処理がしてあるので、一番上のレイヤーにその処理を手書きで書き足しました。
5、前後関係の複雑なパーツの処理
髪やえりなど、手前にあるものが回り込んで後ろに入るときのパーツの分け方についてです。
たとえばこのみつあみ、一つのパーツにしてしまうと下の方が手前に出てしまいます。
なので、このように手前のみつあみと後ろのみつあみに分けてしまって、後ろのほうだけ後ろのレイヤーに回します。(同じデフォーマに入れて動かすと一緒に動いてくれますので問題ありません!)
6、大きなパーツを切り抜いたところの処理
この穴どうしたらいいのっていうやつ
基本的には3で紹介した切り分け方を使っていくのですが、描かなかった、隠れている下の部分を描くというのは存外にたいへんなことです。
私のよくやっているやり方をご紹介しますので、参考になさってください。
まずは切り抜かれた部分をベース色で塗ります。
線画を書き足して外側を消します。(大部分は隠れるから細かくなくてもOKです)
影を書き足します。
こんな感じで、こつこつとパーツを切り分ける→下の部分を描く…とやっていき、動かすパーツがそろったらLive2D cubism Modelerに読み込んでパラメーターをつけて、Animatorで動きをつけて完成です。
そのあたりのことはカレンダーで誰かがきっと書いてくれると期待しつつ私はここで筆をおくことにします。もう既にだだ長くなってしまってすみませんでした。
7、ね、簡単でしょ?
ということで完成したムービーはこちら。
最初は髪の毛を動かしたり、まばたきをさせてみてソフトの使い方をなんとなく覚えるのが近道だと思います。怖がらずにまずは触ってみよう!
関西で栗坂こなべさんが主催している「関ゲ部お絵かき会」でもLive2Dをおしえるお手伝いをしたりしているので、もし興味がありましたらご参加くださると嬉しいです。
明日はTodateさん!よろしくお願いします!
2015/11/22
Live2Dテクスチャチュートリアルで使用するイラストを募集します(11/25まで)
こんな感じに動きます。
Live2D Advent Calendar 2015 http://www.adventar.org/calendars/935%EF%BB%BF のチュートリアルで使用するイラストを募集します。
オリジナルで既存の統合済のイラスト。(上のようなバストアップで背景があまり複雑ではない絵が理想です。)
応募が複数あった場合は選ばせていただきます。
■諸注意
●Live2D用にイラストを切り分けるチュートリアルなので、こちらの画像のように切り分ける加工の絵やその過程を公開してもいい方
●完成したうごイラを私のツイッターやこちらのブログに投稿してもいい方
●著作権は描いた本人様にあります。また、完成したうごイラも自由に投稿、使用していただいてかまいません。
●完成データはお渡しします。
データを提供してもいいという方は、ツイッター https://twitter.com/rikak に直接イラストをアップした場所のURLをリプしていただくか、rk★galvas.net(★→@に置き換え) までご連絡ください。
締め切りました!
登録:
投稿 (Atom)


































