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公式サンプルデータ集から、「ハル」ちゃんを使用しました。

2015/12/02

1枚絵からうごイラを作ろう!

Live2D Advent Calendar 2015 2日目の記事です。

こんにちは、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を布教しています(笑)
最初は髪の毛を動かしたり、まばたきをさせてみてソフトの使い方をなんとなく覚えるのが近道だと思います。怖がらずにまずは触ってみよう!

関西で栗坂こなべさんが主催している「関ゲ部お絵かき会」でも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(★→@に置き換え) までご連絡ください。

11/25ごろまで募集しております。よろしくお願いします!
締め切りました!

2015/04/01

Live2Dがうごくゲーム作ってみました。


意外と簡単にできたような気がします。

もともとはエイプリルフールのために準備
してみたのですが、実験作としてもいい感じになったのでしばらく置いておいて、キャラ少しづつ増やしていってもいいなと思いました。
http://lk.rossa.cc/game/game02.html ブラウザゲームなので、こちらのページでプレイできます。

ゲームは開発にはティラノスクリプトを使用しました。無料で使えてとても使いやすいのでおすすめです。http://tyrano.jp/
また、使い方について画像でまとめてみましたので作って見たいという方はご参考になさってください。クリックすると元のサイズで見れます。
(4/6追記)
ティラノスクリプト公式の、製作事例にて紹介していただきました!
また、イベント画像のデータも公開いたしました。フリー素材ではありませんが、PSD、cmox、moc、モーション、テクスチャ、設定ファイルなどLive2Dモデル作成~アプリへの使用のためのひととおりのファイルが入っています。ぜひ参考用にお使いください。 http://library.live2d.com/libraries/view/000051/kamiyoshi

2015/03/17

春のお知らせ

Live2Dの描いてみた動画作ってみました。


水着の女の子のいろんなところが揺れるうごイラの製作過程の録画です。閉じ目の作り方や動かすためのレイヤーの分け方などを解説しています。
概要的な内容になっていますが、また詳しい手順などの動画も作りたいとおもいます。

こちらからどうぞ⇒http://www.nicovideo.jp/watch/sm25743996

そういえば今年もLive2D Creative Awardが開催されますね!
私も何か作って応募しようと思っています。
http://www.live2d.com/award2015

昨年のLive2D Creative Awardがきっかけで、Livew2Dの講師をさせていただくことになりました。初めての経験で勉強することだらけですが、頑張っていきたいと思います。
また、関西でLive2Dの勉強会も時々開催して行きたいと考えています。小規模の会なのでtwitterでの告知のみですが、興味のある方がいましたらぜひよろしくお願いします。


それと、HJ文庫さんのほうで、「高1ですが異世界で城主はじめました」のコミックを描かせていただいています。こちらもがんばって行きますので、よろしくお願いいたします!
http://hobbyjapan.co.jp/hjbunko/

そういえば私事ですが、著者の鏡先生は私がシナリオを勉強するときにすごく参考にさせていただいた本「鏡裕之のゲームシナリオバイブル」を書かれている方で、めっちゃびっくりしました。シナリオ書きたい方だけでなく、漫画とかの作品の企画書の作り方とか知りたい方にもめっちゃおすすめですよ!