読者です 読者をやめる 読者になる 読者になる

Live2Dとか

メモがわりに

Cubism Modelerでぐるぐる動かせる球体を無理矢理作ってみる

この記事はLive2D Advent Calendar 2015の18日目担当です。

どうも、カワナミです。趣味でLive2Dをわちゃわちゃしたりわちゃわちゃされたりしてるクソガキです。こういうクリエイター的な発表の経験があまりないのでドキドキです。説明がわかりづらかったらごめんなさいと先に謝っておきます。

内容は中級者向けです。Live2Dの基本的な使い方がわかればOKかと思います。回転とかループとかさせたいときの小技にも触れますよ。

もし基本的な使い方から学びたいときは、アドベントカレンダーを上記リンクから覗いてみてください。初心者向けのわかりやすい記事が投稿されてます。

というわけで、早速Cubism Modelerでぐるぐるできる球体を無理矢理作っていきましょう。

 

 

用意する材料・道具

・Cubism Editor
これがないと始まりません。一応制作環境はPro版ですが、Free版でもできると思います。

・簡単な丸いキャラクターを描いたpsdデータ

f:id:kw_nmnm:20151214234454j:plain
▲本当に簡単です。
大きさは1024×1024。ぷよぷよみたい

 

f:id:kw_nmnm:20151214234859p:plain
▲レイヤー分けはこんな感じ。
見たまんまですね。
白目と黒目を分ける必要はなかったような気もします。
 
下ごしらえ

まずキャラクターのpsdデータをCubism Modelerに読み込みます。読み込んだらまずはで白目と黒目をからだでクリッピング。目がからだのラインからはみ出ないようにします。2.1から追加されたクリッピングマスク機能ですが、控えめに言って神機能です。すばらしい!

次にデフォーマを作りそれぞれの部品を入れ込みましょう。そこまで複雑な変形はさせないので、デフォーマの分割数はデフォルトのまま(今回はベジェ・変換ともに3×3)で大丈夫です。

f:id:kw_nmnm:20151215155838p:plain

f:id:kw_nmnm:20151215155011p:plainf:id:kw_nmnm:20151215155008j:plain

▲こんなふうに入れ込んでいます。
赤い枠が上下方向用、青い枠が左右方向用、黄色い枠が回転方向用です。
 

「なんで回転(回転)と回転(曲面)があるの?」と思った方、後ほど説明しますのでちょっと我慢しててください。

 

作り方(上下左右方向)

ここからそれぞれのデフォーマにパラメータを設定していくのですが、その前にループ用パラメータについて。

ぐるぐる動かせる球体を作るためには、ぐるっと一周してまた元の位置に戻ってくるように動かせなければなりません。左右に向きを振るパラメータを作りCubism Animatorで「左→右→1フレームですぐ左に戻す(つまり超高速で左を向かせる)→右…」とフレームキーを打つなど、わざわざループ用をこしらえずともできることはできますが、どうせだったらCubism Modelerの段階でぐるぐるしたいですよね!そうに決まってる!

そういうわけで、ループ用パラメータが必要不可欠なわけです。

では作り方ですが、至って簡単。よくあるLive2Dモデルの角度Xと角度Yのように、2つのパラメータを1つにまとめて3×3、もしくは2×2の状態にします。

 
f:id:kw_nmnm:20151215234126p:plain
▲パラメータ名の左側をクリックするとできるアレです。
 

あとはど真ん中を除いた8個(2×2であれば4個)のポイントをぐるっと一周するよう設定していけばループ用パラメータの完成です。言ってしまえば、顔の向きをぐるぐるできる角度Xと角度Yもループ用パラメータのようなものですね。

実はこのループ用パラメータ、公式マニュアルにて配布されているサンプルデータに既にあったりします。やはり公式さんのサンプルデータは勉強になります…!

f:id:kw_nmnm:20151216002303g:plain

▲「わんころもち」というキャラクターのサンプルモデルです。
湯気がループするように2×2のパラメータが設定されています。
ダウンロードはこちらから(わんころもちはPro版用データのみ)。
もにもにしてとってもかわいいです。
 

ループ用パラメータについてわかったところで、さっきの球体キャラクターにパラメータを設定していきましょう。

f:id:kw_nmnm:20151216234325p:plain
f:id:kw_nmnm:20151216235602g:plain
▲左右方向のパラメータです。
斜め向きでもきっちり止められたほうがいいかなと思い3×3で作っています。
ど真ん中は使わないので8個のポイントに右目・左目のデフォーマの位置や変形情報を設定。
 

目が裏側にきている状態ですが、不透明度ではなく描画順をいじっています。デフォルトだと描画順は500ですが、このパラメータだと上真ん中のポイントのみ描画順が400です。左上と右上のポイントは目がからだのラインから飛び出しているのでクリッピングで見えないだけです。

f:id:kw_nmnm:20151217001635p:plain
▲描画順の設定。
描画順をパラメータに利用した例ってあんまり見たことないのですが、
使いどころありそうな気がぼんやりとします。

 

同じ要領で上下方向も作っていきます。 

f:id:kw_nmnm:20151217002915g:plain
▲こんな感じ。
 
作り方2(回転)

下ごしらえの部分で「なんで回転(回転)と回転(曲面)があるの?」と思った方、お待たせしました。いよいよ回転(時計回り、反時計回り方向)の設定です。

私も当初は「時計回り反時計回りとか回転デフォーマ1つでできるし楽勝だわウェ~イ」と思っていました。

f:id:kw_nmnm:20151217231015g:plain
現実は甘くありませんでした。
 

そう、回転デフォーマを一回転でループするように設定すると、最後の最後で反対周りにひっくり返ってしまうのです。「なんということだ、回転デフォーマではダメか…ならば曲面デフォーマだ!」

f:id:kw_nmnm:20151217233132g:plain
▲やはり現実は甘くありませんでした。

 

曲面デフォーマを回転させると、今度は部品の大きさがうにょうにょと変わってしまいます。回転の動きがデフォーマ4隅の頂点の移動とみなされてしまうのが原因みたいです。一体どうすればいいんだ!

ここでふと思い出します。「そういえば回転デフォーマって曲面デフォーマの拡大縮小の影響受けないんだっけ?こ、これだ!!」そして生まれたのがこの小技です。

f:id:kw_nmnm:20151218001837g:plain
▲イェーイ!!
 

動かしたいもの>回転デフォーマ>曲面デフォーマの順で親子関係を作り、曲面デフォーマをくるくる回しています。これなら部品自体の大きさは変わらないし、回転デフォーマがひっくり返ることもない!完璧!!

こうして無事回転デフォーマの設定も終えることができました。ようやくこの球体キャラクターは上下左右回転方向にぐるぐるできるようになるわけです。

 

仕上げ

せっかくなのでAnimatorで動かしてみました。

f:id:kw_nmnm:20151218003330g:plain
▲ちょっと球体っぽく見えませんか?
f:id:kw_nmnm:20151218010153g:plain
▲パラメータの動きはこんな感じです。
 

そうそう、Animatorで動かすときは、キーの補間をリニアにするのをお忘れなく。デフォルトだとカーブ補間なので、キーの間の動きに補正がかかって等速で動いてくれません。

f:id:kw_nmnm:20151218005601j:plain
▲「カーブ(C)」ボタンをクリックしたあと、
タイムラインのLive2D パラメータをぱかっと開いて
パラメータ名をクリックすると出てきます。

 

さいごに

以上で「Cubism Modelerでぐるぐる動かせる球体を無理矢理作ってみる」はおしまいです。ここまで読んでくれた方はいらっしゃるのでしょうか。いや〜書ききった感じがします。満足満足。

  • 球体になったはいいものの、既に白目も黒目もからだでクリッピングしているから、まばたき等をさせるのに手間がかかるんじゃないの?
  • 複数のパラメータを同時に動かしたら球体っぽくならなくない?
  • 3DCGで球体作ったほうが早い 

タイトルでも無理矢理って言ってるじゃないですか!!!!勘弁してください。すみませんでした。

この方法で作ったモデルが全然役に立たなくても、きっとこれを作る工程それぞれがどこかで応用として役に立てばいいなと願っています。これでカー◯ィとか作ったらかわいいんじゃないかな。誰か作って

 

さて、クリスマスまであと1週間。明日19日目のご担当はネコミミマスター「Nek0Masu」さんです。よろしくお願いします!