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/

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

2014/12/29

2014年振り返り

ちょっと早いのですが年末は実家で過ごすので今年の振り返りでも…。
今年はちょっといろいろ環境を変えたかったり自分の絵の弱みを直したくてもがいていた感じですが、年末に来てようやく落ち着きました。年末にかけては露出の機会があまりなくて実験ばかりやってる感じになっちゃってますが、年明け2月ごろまでには今進めている事を色々と公開できると思います。

そして思うところがあり、PNを昔使っていた「神吉李花」に戻しました。
(名刺はまだ作っていないのでつくらないとね…。)

いろんなところで言ってるんですが、初めて商業誌に載るときに、「絵で仕事がやりたい…でも、きっと今の私の好きのままでやってるだけでは、多分仕事には繋がらない…」と思って、絵で仕事をすることを目指す自分(神吉)と、好きなことを趣味でやる自分(李花)を分けました。
その当時書いてたオリジナル漫画(これはLKprojectとして今書いているものです)があまりに好きなことしかしていなくて、しかもそれをやっているだけでかなり満足してしまう状態だったので、しばらく封印して、仕事としての絵が描ける自分を目指して頑張っていこう!という決意表明でした。

そんな中、2年前に始めた自主制作企画「LKproject」で、自分のやりたかった、見たかった幻想をかなえることをまた本気で頑張ることにして、ひとつ本を完成させました。
今年はそのリソースを使って、ゲーム作りや動画作り、3Dモデル作成など、新しくやってみたいことを一通りチャレンジしてみることが出来ました。
それが仕事にもいいサイクルで繋がっている感じで、このまま自分がひとつの自分でいてもきっとやっていけるという自信が付いたので、私は私に戻ることにしました。

今年は本当によいご縁に沢山めぐり合えて、とても感謝しています。

改めてやっと自分の目指すスタートラインに立った、と言う感じです。
来年はまた、新しい種類のお仕事も始めるので…いつまでたっても初めてに出会えるこの人生をとても楽しんでいます。

これからも頑張っていきますので、応援よろしくお願いいたします。

2014.12 神吉李花

-----------------------------------------------------------------------------------------------------------------------------------------


年賀状送るよ企画やってます。(無料です)同人の通販フォームで1/10まで受け付けています。自宅レーザープリンターなので印刷にふちが出ちゃったりする感じですがメッセージにはお返事させていただきます!もちろんついでに通販してくださるのもとっても嬉しいのでよろしくです!!