タグ: メイキング

いい加減Live2Dで立ち絵を作りたい:05

コミティアや砲雷撃戦よーいの新刊の方で一ヶ月以上Live2Dを触れませんでしたが最近やっと作業再開出来ました(ノ´∀`*)

気付けばLive2D Ver2.1も正式に公開されました。時間が経つのは早いものです…
Live2D Ver2.1特設サイト


 

と言うことで口の制作の途中で、前回は終わってましたね。
まずは口の中の実装。
はにかむような口の開きの場合に歯の白さが出るように調整し、併せて舌の描画も実装しました。

Animation 13

八重歯が見えているのがチャームポイントですね
IMGP0663

同時に口の大きさも実装しました。

Animation 14 Animation 15

口の大きさを設定すれば、口のバリエーションがかなり増えるのですが、以下のように微妙な口も出来てしまうのがどうしたものか…

Animation 16

Live2Dのリップシンク機能はいまいち把握してないけど、「あいうえお」の登録は出来ず口の開閉のみっぽい?
でも、表現の幅は広げて、出来るだけ汎用性を持たせたいので実装しました!
P_20141220_220323 どやぁ

それにしてもクリッピング機能は便利ですね。
前回の口中のパーツにクリッピング設定をしているのですが、大元をしっかり作ればあとは雑でもはみ出すことはありませんね!


さて、一通りの口は出来たので、とりあえず次は目ですね。

まずは目の光沢部分が同一パーツだったので、一度PSDファイルを再インポートして分離させました。
しかし残念ながらCLIP STUDIO PAINTでは「覆い焼き発光」を使っていたのですが、Live2Dでは「加算」しか出来ないのでイメージが結構変わってしまうのが残念デスね…

 

 

ScreenShot00636 ScreenShot00517

↑が過去の画像との比較。。。
2013-05-09 15.08.24ふむ…

鮮やかさが足りない…
自分のイラストは結構「覆い焼き発光」を用いるので、これが動くパーツに使えないのは結構表現の幅が狭まって辛いですね…
Live2D公式が要望募集している時に、覆い焼き発光実装を要望で出したのでいつか実装してくれると良いですね…!(/ω・\)チラッ

さて、そんな光沢を分離させた目を動かしていきましょう。

Animation 17

クリッピングを用いることで、綺麗に目を実装できましたね!

Animation 18

目の開閉も調整。
目の動き、開閉共に、瞳と光沢の動きを若干ずらしています。
瞳と光沢が同一パーツだとペラい印象を受けますが、若干ずらすことで立体感を演出しようという試みです。
上手く行っているかな?


さて、今回はここまでですね。
実はもうちょっと先まで作り終えてます。(パラメータ見て気付いていた人も居るでしょうが…)
Live2Dに触れなかった期間もあるので、復習がてらまたちまちま進捗を載せていこうと思います(`・ω・´)ゞ

 

 

(´・ω・`).。◯(体の動きXYZで苦戦中で先に進みませんな…)

いい加減Live2Dで立ち絵を作りたい:04

いい加減Live2Dで立ち絵を作りたい:03


さて、前回まででとりあえず準備段階はだいたい終わりました。
いよいよモデルの動きを付けて行きますヾ(´ω`=´ω`)ノ

とりあえず口の線を動かしてみます。

Animation 3 Animation 2

作り方は口の線を一本引き、それを左右対称部分を削除します。
ScreenShot00507

この線をまずコピーして口の上下を作ります。

ScreenShot00508

そして2つの線で形を作ったらコピー反転をして作りました。
この手法で左右同じ形を作れるので正面モデルだと非常に楽ですね(^ν^)

 

続いて目の開閉をです。

Animation 5

クリッピング機能を使っています。
白目に瞳をクリッピングし、まつ毛に変形パスを用いてパラメータを設定しています。

公式マニュアルの、Ver2.0までの作り方は以下の様な感じです。

ScreenShot00505
パラメータで動きをつけよう:http://sites.cybernoids.jp/cubism2/beginner-tutorial/05

このように目を隠すパーツもしくは部分が別途必要でしたが、クリッピングを用いれば白目の部分からはみ出すことは無いのでまぶたの必要がなくなります。

これは便利ヾ(´ω`=´ω`)ノ

これは口でも応用出来そうです。
ただし、口の場合は目よりも圧倒的に動きが複雑になります。
これ、作れるのかな?と疑問に思いながら作ってみることに。

Animation 6

作れましたヾ(´ω`=´ω`)ノ

Animation 7

口の線通りに頂点を動かしてやれば意外とすんなり出来るものなんですね(^ν^)

まだ口の中を調整していませんので、このあと作っていきます∠(`・ω・´)

 

いい加減Live2Dで立ち絵を作りたい:03

Live2Dで立ち絵を作りたい:02


 

さて、とりあえず前回までにPSDインポートとテクスチャの再配置、クリッピングの設定が終わりました(仮)
今回はその後に行った、描画順についてと表示グループについてです。

描画順に関してですが、PSDインポートを行うと全てのパーツが描画順500で読み込まれるようです。
レイヤー校正順になっているので全て500でも現時点では問題ありませんが、順番を変更したりフォルダで整理するとパーツの順番が変わり大惨事になります。
そこで以下のパーツ全てを0~1000の間で数値を調整してきましょう。(数字が大きい方が手前に表示される)

ScreenShot00490

編集ウィンドウの中の描画順数値を直接変更したり、縦に長く伸びる定規のような描画順編集バーにて変えられます。
個人的には編集バーを使用する方が楽でしたね。
そんな感じで後ろ髪は後ろへ。前髪は前へ移動させたりしました。

 

表示グループについてですが、これは言わば表示非表示の状態を記録できます。
夏服や冬服を切り替える際に、1つ1つ表示非表示を選択していたのでは手間ですし、予め登録しておきたいと思いました。

公式サイトを見てみましょう。

ScreenShot00491

>表示グループを設定できます。詳しくはこちらのページをご覧ください。

(´・ω・`)

(´・ω・`) …

CIMG0696 どちら!?

 

ということで実際に試してみることに。

Animation 0

出来ない…(^ν^)

とTwitterで愚痴ったりしてたら教えていただきました!

なん…だと…Σ(´∀`;)
ということでいざ実践。

Animation 1

デキタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

教訓:表示グループは表示単位で考えよう。

まかかびさん、いつもありがとうございます(´;ω;`)ブワッ

 

そしてよくよく後から見てみると、公式マニュアルに表示グループについてもうちょっと載ってましたね(´・ω・`)

ScreenShot00492

いい加減Live2Dで立ち絵を作りたい:02

Live2Dで立ち絵を作りたい:01


 

さて、前回で元絵を準備し、PSDインポートを使いLive2Dへ読み込み、テクスチャの再配置を行ったところです。

読み込んだ画像を見てみるとこのような形です。
ScreenShot00475
今回Live2Dは2.1βです。新たに実装されたクリッピングを使うべく、ニーソはクリッピング前提の作りにしてみました!
ScreenShot00475
↑ニーソはこのような感じ。
補正色を大雑把に配置し、乗算とクリッピングを組み合わせて行きます。

 

さて、クリッピング自体は編集ウィンドウのクリップIDにクリップ先IDを設定するだけです。
クリッピング機能とはなんぞや?という人は公式サイトの以下の部分を見てみると良いかと思います。

ScreenShot00493

パーツパレットについて:http://sites.cybernoids.jp/cubism2/modeler/basic/edit-pallet

このように、はみ出し防止が出来る強力な機能です。
また、コンマ区切りで複数指定することも出来ます。

(´・ω・`) …

コンマ区切りで複数指定することも出来ます!!

 

さて、とりあえず使い方もわかったので実際に指定してみました。

ScreenShot00476

なんじゃこりゃ━━(;゚Д゚)━━!!
何で肌が薄くなっとるんじゃ?
ウワァァ—–。゚(゚´Д`゚)゚。—–ン!!!!

という自体が発生しました。

バグなのか仕様なのかはわかりませんが、どうやらPhotoshopやCLIP STUDIO PAINTなどのクリッピングマスクとは挙動が違うようです(‘、3_ヽ)_

ScreenShot00480

ということで半日程あっちゃこっちゃ扱ってましたがいまいち半透明の処理を上手く出来ず…
Twitterで愚痴っていた所、

!!!!(゚д゚)!!!!

はい。この時私はクリップIDを複数指定できることを知りませんでした。

そこでニーソ余生用のパーツを大きい物に統合し、クリップIDを指定してみます。

ScreenShot00494

 

ScreenShot00481

デキタ━━━━ヽ(゚∀゚ )ノ━━━━!!!!!!

教訓。クリップIDは複数指定できる(´・ω・`)

まかかびさん教えて頂きありがとうございます。
教えてもらわなかったらあと3日は悩んでいた自信がありますm(_ _)m
ちゃんとマニュアルは読まないとダメですね(;´∀`)

 

クリッピング昨日と乗算機能を組み合わせる事による負荷は…よくわからないので今は考えないで置くことにします∠(`・ω・´)

いい加減Live2Dで立ち絵を作りたい:01

そんなわけで以前まで作っていたLive2D立ち絵が色々と修正箇所が増え、最初から作りなおしたほうが早い程になってたので、

最初から作り直したいと思います
∠(`・ω・´)

ついでにメイキング的な感じでブログを更新できたらいいですね(願望)

ScreenShot00474

って事でほぼ一から書き直した元イラストです。
既にLive2D用に分割済みです。
ちなみに背景のグレーは4096pixelの正方形です。
後ろ髪など長いパーツがはみ出さないように目安として置いてました。

服などは流用出来たので使っていますが、分割方法などが以前に比べてだいぶ変わりましたね。
まぁその辺はおいおい(ノ´∀`*)

さて、とりあえず現時点でLive2Dに持っていけるまでの状況です。
とりあえずPSDインポート機能を使い読み込み、テクスチャの再配置Cを行います。ScreenShot00488 ScreenShot00487

拡大率100%で、4096テクスチャ2枚でギリギリ収まりました⊂(^ω^)⊃ セフセフ!!
ポリゴンの割り当てについては随時作りなおす予定なのでとりあえずデフォルトのままです(。╹ω╹)
ただ以前のバージョンでは4096テクスチャを使うとLive2DViewerでエラーが出た事があったので一抹の不安…

現時点では夏と冬の制服姿を考えていますが、今後差分を増やす必要があればPSDインポートを再度使用して追加してみたいですね(。╹ω╹)

そんなこんなで進捗をちょくちょく上げれたらいいなと思ってますん(‘、3_ヽ)_

この髪の毛メイキング動画が気になる

厚塗りの髪の毛の塗り方で非常に参考になりそうなメイキング動画があったのでご紹介!

メイキング動画

ツールはPhotoshopを用いているようです。

私も同じような手法で厚塗りを行いますが、明度と彩度の選び方が段違いですね。
立体感と髪の毛の質感の表現は見習いたいです。
P_20150613_124212 すごいにゃ

スクリーンショット

まずはじめにシルエットを大まかに描いていますね。
すでに私とはやり方が違うのですが、このやり方もなかなか良さそうなので今度取り入れて描いてみたいですね。
ScreenShot00418

その後髪の毛のラフを描いていくようです。
私はここの順序が逆ですね。ラフ線を描いてから下塗りします。
ScreenShot00419

ベースとなる基本の着色ですね。
どうやら先ほどのラフの上にクリッピングマスクを使って色を乗せていますね。
乗算あたりを使っているようですがちょっと字が読めないです(´・ω・`)
ScreenShot00420 ScreenShot00421

その後一度髪の毛のレイヤーを結合し、再度新たにクリッピングマスクを設定したレイヤーを作って、そこで描き込んでいくようです。
頭頂部から描き込んでいくようです。
ScreenShot00422

必要に応じてレイヤーはどんどん結合して行くようですね。そして新たにレイヤーを作ってそちらに描き込むようです。
レイヤーの結合基準は何なんでしょうね?
私は上手く描けたかなと思った時に結合していますね。
ScreenShot00423
 ScreenShot00424

クリッピングマスクを使っていないところもあるようですね。
何かしらの理由があるのか、もしくは必要なかっただけでしょうかね。
少なくともレイヤーが複数増えているということは、何かしらのレイヤーモードを使っているのだと思われます。
ScreenShot00425
  ScreenShot00426

最終的なレイヤー構成はこんな感じで描き終えていますね。
ここからレイヤーを全結合して、最終的な調整を行っています。
ScreenShot00427
ScreenShot00428


なんとなく描く流れに共通点はありましたが、
肝心の色彩や明度の選び方、立体感や質感の出し方は自分で描いて覚えるしか無いですね。
l1501

はちゃち的、畳テクスチャの作り方

畳テクスチャが必要になったので、せっかくなので自作してみることに。

ScreenShot00190

案外いい感じに出来たのじゃないかな?
l8828

以下はググりつつ試行錯誤した工程を備忘録代わりにメモです。
注意:講座と違いざっくりとした内容です。

[制作環境] Photoshop CC 2014

畳テクスチャの作り方メモ

手順1

4500pixelくらいのキャンバスを新規作成しました。
(サイズに特に理由はない)

まずはキャンバスを黒く塗りつぶします。

ScreenShot00153

手順2

新規レイヤーを作成し、白いラインを引きます。

ScreenShot00154

線を複製して縞模様にしていきます。

ScreenShot00156

手順3

白線レイヤーに「ぼかし(ガウス)」をかけます。

ScreenShot00171 ScreenShot00172 ScreenShot00173

手順4

新規レイヤーを作成し、グレーで塗りつぶします。

ScreenShot00175

グレー濃度は以下の感じ

ScreenShot00176

手順5

グレーレイヤーに「ノイズを加える」処理を施す。

ScreenShot00177 ScreenShot00178

手順6

ノイズを加えたグレーレイヤーに、「ぼかし(移動)」をかける。

ScreenShot00179 ScreenShot00180

手順7

グレーレイヤーの描画モードを「差の絶対値」にする。

ScreenShot00181

以下実行結果

ScreenShot00182

手順8

レイヤーを全て結合し、「色相・彩度」にて色相補正を行う。

ScreenShot00184

右下の「色彩の統一」に☑チェックを入れ、数値を試行錯誤しながら微調整していく。

ScreenShot00186

OKで確定すると以下の様になる。

ScreenShot00187

これを保存すれば畳テクスチャの完成!

最後に

毎月Adobeに5千円上納しているわけですからPhotoshopも使わないと損だとは思っているんですけれどね…
どうしてもお絵描きのメインソフトがCLIP STUDIO PAINTで出番の無いPhotoshop先生です。

Photoshopは解説出来るほど把握出来ていませんので簡単な説明とスクリーンショットだけでしたが如何だったでしょうか?
個人的には復習兼備忘録としてよかったのでまた何か学んだら残していきたいですね。

CIMG0096