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

Live2Dとか

メモがわりに

FGOバトルキャラ風Live2Dモデルの作り方【後編】

どうも、カワナミです。4月だってのにこっちはまだ寒いです。前編でも書いた生まれたてほやほやの北ゲ部ですが、人数が増えてきました。嬉しい限りです。Live2D勉強会もやるよ!是非来てね!

北海道ゲーム制作部 : ATND

北のLive2D勉強会 はじめて編 : ATND

 

さて、早速後編いってみましょう!後編って何のこと?と思った方は前編記事から読んでね。

FGOバトルキャラ風Live2Dモデルの作り方【前編】 - Live2Dとか

目次は以下の通り。

 

Live2Dモデリング - 2.可動域の設定

やっとです。やっとLive2Dらしいことをします。お待たせしました。前編で散々整理整頓したパーツに動きをつけていきましょう。まだソフトはModelerのままです。

今まで「動きをつける」と言ってきましたが、これは要するに「可動域を設定する」ということです。「この腕のパーツはここからここまで動くようにする」「髪の毛の揺れで変形する幅はここからここまで」などなど。特殊なパラメータの場合はこの限りではないですが、やること自体は変わりません。

デフォーマについて

可動域を設定するにあたり、頻繁に使用するのが「デフォーマ」機能です。この機能のおかげで、ポリゴンの頂点を1つ1つ動かして変形…という作業を一気に圧縮することができます。デフォーマには「曲面デフォーマ」「回転デフォーマ」の2種類があります。特徴は下記の通り。

  • 曲面デフォーマ:パーツを格納してポリゴンを変形させることができる箱みたいなデフォーマ。八ツ橋のあんこをパーツ皮を曲面デフォーマとして、皮ごと引っ張ると中のあんこも変形されるぜーイェーイみたいなイメージです。前編でポリゴンの整理をしたのは、あんこを柔らかくするための作業です。
  • 回転デフォーマ:主にパーツの関節部分に付けて位置や角度の動きを設定できる杭みたいなデフォーマ。関節が動く紙人形のピンみたいなイメージです。

f:id:kw_nmnm:20170423193622p:plain

▲左が曲面デフォーマ、右が回転デフォーマ。

 

曲面デフォーマは四隅や十字状に並んだ小さな四角、回転デフォーマは線の先についた丸を動かすことで変形や移動・回転を行います。曲面デフォーマの場合、周りの赤い枠をつかむことでデフォーマ全体の大きさや形を変えることもできます。

デフォーマは入れ子構造にすることでその本領を発揮します。今回のバトルキャラ風モデルだと、回転デフォーマの先にさらに回転デフォーマをつける、という使い方が一番多いかもしれません。

f:id:kw_nmnm:20170423210747p:plain

▲曲面デフォーマの中に曲面デフォーマの入れ子構造。親の変形が子にも影響してるのがわかります。八ツ橋の中にちび八ツ橋ですね。お腹すいてきたな。

f:id:kw_nmnm:20170423210806p:plain

▲回転デフォーマの先に回転デフォーマの入れ子構造。腕を曲げたり脚を曲げたり。

 

以上のような曲面同士・回転同士の入れ子構造のほか、曲面の中に回転、回転の先に曲面、という入れ子構造ももちろんできます。ただしその場合、「回転デフォーマを一度挟むと、その先の曲面デフォーマには変形が影響しない」という仕様が出てきたりします。

f:id:kw_nmnm:20170423215016p:plain

▲こんな感じ。上の曲面同士の入れ子構造と見比べると、子に変形の影響が出ないまま移動だけしているのがわかります。

 

この仕様、今回はほぼ使いませんが、結構利用できるので覚えておきましょう。前にパーツを360°回転させる方法を解説したことがあるのですが、そっちでもこの仕様を利用しています。

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

デフォーマの設定

肝心の設定方法ですが、画面上側にある「デフォーマを作成」ボタンを押すことで設定ウィンドウが開きます。デフォーマに入れ込みたいパーツをクリックした状態でボタンを押すと、自動でパーツを入れ込んだ設定にしてくれるので便利です。後からパーツを入れ込むこともできるので、まずは空のデフォーマをちゃっちゃと作ってもいいです。

f:id:kw_nmnm:20170423230848p:plain

▲前編で使ったテクスチャ編集ボタンの隣。

f:id:kw_nmnm:20170423231934p:plain

▲こんなウィンドウが出てきます。パーツをクリックした状態でこのウィンドウを出すと、一番下の「選択オブジェクト〜」にチェックマークがつきます。いろいろ設定した後にOKを押すと、デフォーマがポンと現れます。

 

名前」はそのままデフォーマの名前。後から困らないようにわかりやすい名前をつけましょう。「挿入先のパーツ」は、デフォーマをパーツパレットのどの項目に所属させるか、です。前編の整理整頓同様、関連した項目に入れておきます。「所属するデフォーマ」は、入れ子構造を設定する部分。親にしたいデフォーマを選びます。入れ子構造を作る時は、親から子がはみ出ないように注意しましょう。

上の画像に出ている「- 基準面 -」というのはどこにも入れ込まれていない状態のことです。この3つは後から変更可能なので、サクッと設定しちゃいましょう。

f:id:kw_nmnm:20170408150114p:plain

▲前編で登場した画像。この<デフォーマ>という項目の中に格納されます。所属を適当にすると困るのでサボらずに設定しましょう。

 

デフォーマのタイプ」は後から変えることができません。回転を作るか、曲面を作るかは最初に決めておくといいです。ちなみに設定中にタイプを変えると、名前が「◯◯の曲面」「◯◯の回転」というデフォルト名に書き換わってしまうので、最初にタイプを決めてから名前をつけるとスムーズです。

ベジェの分割数」「変換の分割数」は今回は割愛。デフォルトのままで大丈夫だと思います。回転デフォーマの場合はそもそも設定しません。

既に作ってあるデフォーマに後からパーツを入れたい時、また、デフォーマの設定を後から変えたい時は、前編のパーツの整理でも使った「編集」パレットを使います。

f:id:kw_nmnm:20170424001004p:plain

▲パーツを入れ込みたい場合。前編で使った「パーツ」のプルダウンの下、「デフォーマ」のプルダウンから入れ込みたいデフォーマの名前を選びます。名前を適当にしてるとここでめちゃくちゃ選びづらくなるぞ。

f:id:kw_nmnm:20170424001217p:plain

▲デフォーマの設定を変えたい場合。赤枠で囲んだ部分で変更できます。IDというのは今回は気にしなくて大丈夫。

 

作ったデフォーマが小さすぎた!大きすぎた!角度がおかしい!でももうパーツが入ってて大きさや角度を変えるとパーツまで変形されちゃうよ…という時は、Ctrl(Macの場合はcommand)を押しながら変形してみましょう。幸せになれるぞ。

 

パーツを直接変形させるのはダメなの?

わざわざデフォーマに入れ込まなくても、ポリゴンの頂点を直接動かして変形させれば事足りるじゃん!と思うこともあるかもしれません。

パーツを直接変形させることももちろん必要です。今回のモデルでもいくつかのパーツは直接変形で可動域を設定しています。ただデフォーマには「パラメータの集中を防ぐ(後述)」という役割があったり、大量のポリゴンが割り振られたパーツの場合、デフォーマなしでは滑らかに変形させることが難しくなります。

付けるパラメータ(後述)の数が1つ、かつデフォーマではなかなかできない細かな動きが必要な時以外、基本的にパーツは曲面もしくは回転デフォーマに入れ込みましょう。

f:id:kw_nmnm:20170423223520p:plain

▲袖の揺れの変形。デフォーマを使えば少ない手数で滑らかに変形させられます。

f:id:kw_nmnm:20170423223627p:plain

▲直接変形だと試行錯誤しまくった挙句こうです。アイエエエエ!ポリゴン!?ポリゴンナンデ!?と叫んだあとに爆発四散して死にます。

 

 

と、まぁこんな感じでデフォーマを作ってどんどこ入れ子構造にしていきましょう。肩から腕、腕から手首…と、お人形を作るような感覚で入れ子を設定していくとわかりやすいかと思います。ていうかLive2Dモデル自体デジタルお人形みたいなものです。

作っていった結果がこちら。

f:id:kw_nmnm:20170424004830p:plain

▲ほとんどが回転デフォーマ。袖・裾はポリゴンが多いので、曲面デフォーマで揺れの変形をつけます。結んだ髪の揺れ変形はポリゴンが多いにも関わらず直接変形なのですが、やり方がちょっと特殊なので別途解説します。

パラメータを付ける

前編でも出てきたパラメータですが、ここでようやく本来の機能を使います。点に変形を覚えさせてうんぬんと前編に書いていたのを覚えていますでしょうか。では実際に、これまでで作ったデフォーマやパーツの変形をパラメータに覚えこませていきましょう。へっへっへ!二度と変形を忘れられないカラダにしてやるぜ!(?)

まずは変形させるデフォーマ、もしくはパーツをクリックしてから、「これは君が覚えてくれたまえよ」と思うパラメータの名前部分をクリックします。

パーツをクリックできるモードとデフォーマをクリックできるモードがあるので、使い分けていきましょう。もちろんパーツパレットから選択してもOKです。

f:id:kw_nmnm:20170425013610p:plain

▲画面上にボタンがあります。

f:id:kw_nmnm:20170424220912p:plain

▲パーツを直接変形させるときはパーツ、それ以外の時はデフォーマ。

f:id:kw_nmnm:20170424221237p:plain

▲こんな感じのウィンドウが出てきます。

 

ウィンドウ右上の目盛りに、変形を覚える点をクリックで打っていきます。ただ、3点もしくは2点がほとんどなので、「3点挿入(両端と真ん中)」「2点挿入(両端)」ボタン一発で打っちゃうことが多いです。腕振りや髪揺れといった振り子状の動きをするものは3点、まばたきなどON・OFF切り替えのような動きをするものは2点といった感じ。

OKを押すと、パラメータに緑の丸ができます。これが「最初にクリックしたデフォーマもしくはパーツの変形を覚える点」です。真ん中の丸のみ赤く囲まれていますが、これは「赤い丸が緑の丸の下にある」という認識でいてください。

f:id:kw_nmnm:20170424224058p:plain

▲今回は腕なので3点挿入。緑の丸が3つできました。

f:id:kw_nmnm:20170424224622p:plain

▲赤い丸をつかんでドラッグすると、線の上をスライドさせることができます。この赤い丸の位置が、現在のパラメータということです。あれです、放送室の機材についてる音量調節する上下に動かすレバーみたいな…カラオケルームの微調整できる電灯のレバーみたいな…そういうのを想像してもらえればいいかと。

 

よぉし!真ん中の点をデフォルトの状態として、パラメータの右側(+)を上に振る可動域、左側(−)を下に振る可動域にしよう!などなど、パラメータのどっち側をどの方向の可動域にするか心に決めたら、赤い丸をエイッと端の点まで動かします。右クリックで点に吸着するので、ミスを減らすためにも点のそばで右クリックしときましょう。

赤い丸を点の位置に置いたら、今度はデフォーマをいじって変形させます。「可動域の限界」の状態を作りましょう。

f:id:kw_nmnm:20170424230412p:plain

▲上の可動域の限界はこの辺じゃ!うりゃー!

f:id:kw_nmnm:20170424231618g:plain

▲ウッヒョァァァ(ブンブンブン)

 

すると大変便利なことに、点同士の間の動きをソフト側で補完してくれます。この調子で他のパーツやデフォーマの可動域をいろんなパラメータに覚え込ませていきましょう!…というところなのですが、ここで大変重要な注意点があります。パーツを直接変形させるのはダメなの?の項目でも出てきた「パラメータの集中」についてです。

【注意!】パラメータの集中について

パラメータ側に覚え込ませるパーツやデフォーマの数に制限はほぼありません。「腕を曲げたときに指や袖も一緒に動かしたい!」という時は、指や袖の変形を腕と一緒のパラメータに覚え込ませればいいだけです。もちろん数が多いとそれだけ気にしなければならないことも増えますが…

しかし、1つのパーツ・デフォーマに対応したパラメータはかなりの例外を除いて最大3つまでとしてください。システム的には4個でも5個でもできますが…お前…死ぬぞ…!

まぁこれだけだと「わかんないや」という方がほとんどだと思いますので、以下の図をどうぞ。

f:id:kw_nmnm:20170424234814g:plain

▲まずパラメータ1つ目。左右の揺れ。これは何の問題もありません。

f:id:kw_nmnm:20170424235853g:plain

▲パラメータ2つ目。上下変形。一見大丈夫そうに見えますが…

f:id:kw_nmnm:20170425000415g:plain

▲う、動かない…!?左右の揺れパラメータを1(右端)にした途端、上下に変形しなくなってしまいました…。

 

実は、同じパーツもしくはデフォーマにパラメータを2つ以上対応させた場合、「パラメータAが1の時のパラメータBの1」「パラメータAが−1の時のパラメータBの1」…など、パラメータの点それぞれの組み合わせ全ての変形を覚え込ませなければならないのです。

つまり上の画像の場合、「左右の揺れパラメータが1(右端)の時の上下変形」を別でつけていないので、動かなくなってしまったというわけ。

f:id:kw_nmnm:20170425001811p:plain

▲3点パラメータが2つ、3×3=9通りの変形が必要。

 

ちょっと計算してみましょう。2点パラメータが3つであれば2×2×2=8通り。うん、まだいけそうですね。じゃあ3点パラメータが3つだと…3×3×3=27通り。これ以上増やすとどんどん倍で増えます。マゾでもない限りやめましょう。 

「えっ、でも複数パラメータつけたいよ…」という方、ご安心ください。ここでデフォーマの入れ子構造を利用しましょう。

上の例を解決しようとするのであれば、左右の揺れ用デフォーマと上下変形用のデフォーマを別で作り、上下変形(親)>左右の揺れ(子)>パーツの順で入れ子にした後、それぞれにパラメータをつければ大丈夫です。

このようにパラメータを分散させる役割もデフォーマにはあるわけです。積極的に使ってラクをしましょう。

 

特殊な変形方法

デフォーマのありがたみがわかったところで、特殊な変形方法についても紹介しておきます。今回のサンプルですと、「まばたき」と「結んだ髪の揺れ変形」がそれにあたります。

 

まばたき

前編でも書いたように、FGOバトルキャラのまばたきは2コマです。滑らかにまぶたが降りてくるのではなく、開いた目と閉じた目の画像を切り替えることでまばたきを表現しています。

Live2Dで画像切り替えを再現するにはどうすればいいのか?ということですが、そこまで難しくありません。

f:id:kw_nmnm:20170425010232p:plain

▲まばたきは通常2点パラメータですが、開き目・閉じ目のパーツにそれぞれ1つずつ点を打ちましょう。

f:id:kw_nmnm:20170425011032g:plain

▲こんな感じになっていればOK。途中で目が消えちゃってますが、後でうまいことやるので大丈夫。

 

あえて点同士の補完をなくすことで、画像の切り替えを再現しています。不透明度をいじるやり方もあるのですが、今回はこっちで。

 

結んだ髪の揺れ変形(変形パス)

髪の毛のようなパーツをくねくねと曲がるように変形させるのに、デフォーマでは難しい場合があります。そんなとき役に立つのが変形パスです。

f:id:kw_nmnm:20170425012805p:plain

▲画面上の右端にあるペンのボタンが「変形パス」。

 

くねくね曲げたいパーツをクリック後、変形パスボタンを押してカーソルをペン型にして、パーツに芯を作るようなイメージでちょんちょんとクリックしていってみましょう。このとき、最初にパーツをきちんとクリックしていないと変形パスが反映されないので忘れないように。

f:id:kw_nmnm:20170425013836p:plain

▲こんな青い線ができてきます。点の数は少なめのほうが滑らかに変形しやすいかも?

f:id:kw_nmnm:20170425014421g:plain

▲パーツモード(画面上の白矢印が描いてあるボタン)にして点を動かしてみるとこの通り。うねうねしてるぞ!

 

こうして作った変形パスをパラメータに覚えさせることで、髪の揺れを作ることができます。ただちょっと癖がありまして、変形パスを覚えさせる時は、それが反映されたパーツも一緒に選択して覚えさせてください。変形パスのみ、反映されたパーツのみだと、手直しができなくなったり、うまく動かなかったりします。

 

 

ここまでくればもう大丈夫。今度こそ、可動域をパラメータに覚え込ませていきましょう!どんな風に動かすかを妄想しつつ、シコシコ進めていきます…。ずっとポリゴンやデフォーマと戦っていると白目を剥きそうになるので、適度な休憩も大事です。

そして出来上がったものがこちら。

f:id:kw_nmnm:20170425020109p:plain▲髪の根元に回転デフォーマをつけて全体を揺らせるようにしつつ、毛先は変形パスで曲げて…揺れものは1部品ごとにパラメータを作ってバラバラに揺らせるように…などなど。達成感もひとしお。あとは動かすだけ!

 

モーション付け

お世話になってきたModelerからついに離れ、Animatorへとバトンタッチします。Modelerデータはちゃんと保存しておくのよ!

Animatorを開くとプロジェクト選択の小窓が出てくるので、「新規プロジェクト作成」を選びましょう。「シーン名」やら「フレームレート」やら出てきますが、「シーン名」以外はデフォルトのままで大丈夫かと。「シーン名」は好きにつけちゃってください。サンプルの場合、シーン名を「待機」、サイズを1000×1080に変更しています。保存場所もお好きなように。

そして保存しておいたModelerデータ(拡張子.cmox)をドラック&ドロップでぶち込む!すると画面にさっきまで作っていたモデルが表示されます。

f:id:kw_nmnm:20170425022801p:plain

▲でかーーーい!!!!

 

だいたいここででかく表示されてびっくりしますが、Ctrl(Macの場合はcommand)を押しながら周りの赤枠を縮めることで中心と縦横比を保ったまま拡縮できるので、落ち着いて画面内に納めます。

この時、画面下側の「タイムライン」のピンクの縦帯が左端(0秒0コマ)に来ているか確認しておきましょう。モデルの拡大率や位置もアニメーションの動きとして記録されてしまうので、中途半端な位置に帯があると変な動きがついたりします。

 

キーフレームを打つ

モデルを読み込んだら、あとはキーフレームを打つべし打つべし!キーフレームというのは、「動画全体を10秒として、1秒0コマのときにこういうポーズをする!」といった指定のことです。この指定をポチポチと散りばめれば、指定間の動きを自動でソフトが作ってくれます。

まずは0秒0コマの位置に、初期位置を固定するキーフレームを打っておきましょう。タイムライン左端にある「(データ名).cmox」の左の▶を押すと、パカッと中身が開きます。

f:id:kw_nmnm:20170425122858p:plain

▲最初に画面に収まるよう大きさを変えたので、「配置&不透明度」の部分に既にキーフレームが打たれています。

f:id:kw_nmnm:20170425123223p:plain

▲1番使うことになるのが「Live2Dパラメータ」です。ここに1つキーフレームを打ちます。Ctrl(Macの場合はcommand)+クリックでキーフレームが打てます。これで初期位置の固定ができました。

 

あとは好きなようにキーフレームを打ち、モーションをつけていきます。

f:id:kw_nmnm:20170425123548p:plain

▲たまに再生してグフフ…となりつつやると楽しいです。

f:id:kw_nmnm:20170425123714p:plain

▲「Live2Dパラメータ」の▶をクリックするとさらに中身が開きます。パラメータごとのキーフレーム(赤丸)をここでいじれるので、打ったキーフレームの位置を細かくずらしたいときはここからずらしましょう。ドラッグで選択した後につかむとずらせます。もちろん、上にある青い四角やピンクの丸もずらせますよ。

f:id:kw_nmnm:20170425125043p:plain

▲動画全体の長さやリピートを調節したいときは、右にスクロールした先にあるこれらの端をつかんで伸ばしたり縮めたりします。白い範囲・緑のバー(ワークエリア)・赤い範囲ごとに役割が違うので注意。

打ち方のコツ

キーフレームの打ち方のコツですが、まずは呼吸や全体を通してゆっくり動く手足などの大きな動きを打ってから、揺れものなど細かな動きを打っていくといい気がします。

また、FGOではキャラから見た正面〜背後に向けて風が吹き抜けているので、揺れものが揺れるタイミングをずらしていくとそれっぽいです。

f:id:kw_nmnm:20170425201720p:plain

▲4ブロックほどに分けて左から順番に。

f:id:kw_nmnm:20170425202911p:plain

▲揺れのパラメータを全部打ってから、ブロックごとに順番にずらして微調整していくといいかも。この画像はパラメータの順番がぐちょぐちょなのでキーフレームもぐちょぐちょしてますが、やってることは単純です。

風に対する揺れが1回分できたら、あとはコピペでキーフレームを増やして何回か繰り返しましょう。1回→少し経ってから2回連続という感じで揺らすとそれっぽさがでます。

「動かしてるのに、なんとなく機械的な印象に…」とお悩みの場合は、よく見ないとわからないくらいじわ〜っとした小さな動きを動かしてないパーツにつけるといいかもしれません。生き物は完全に静止することができないので、そういう「ブレ」みたいなものを意識すると生命感がでます。

まばたきの付け方

Modelerのほうで妙なパラメータを作ったまばたきですが、以下のようにキーフレームを打ちます。

f:id:kw_nmnm:20170425211407p:plain

▲ゆっくりまばたきさせたいときは、閉じ目の間隔を広くとりましょう。

これも1回分できたらコピペで増やして繰り返します。風に対する揺れと同じく、1回→少し経ってから2回連続、がオススメ。

 

 

キーフレームを打ち終わったら完成です!お疲れ様でした!メニューの書き出しからGIFもしくは静止画(連番)で書き出しましょう。サンプルではAfter Effectsに読み込むために静止画(連番)で書き出しました。

後加工 

ここから先は余談です。GIFで書き出したものを早速公開してもいいし、ちょっと一手間加えてみるのもOK。

サンプルでは、After Effectsで背景と文字をつけました。FGOっぽいキラキラした粒子がふわふわ飛んでいく背景をParticularで作ったり、ステータス画面みたいな青いグラデーションにしたり。

f:id:kw_nmnm:20170425220616p:plain

▲今まで散々名前はちゃんとつけろよと言っておきながら、こういう時めんどくさがってコンポとかデフォルト名のままにしてるのがバレバレですね。テヘヘ!

f:id:kw_nmnm:20170425221101p:plain

▲ここまで読んでくださったお礼に、背景素材画像を載っけておきます。サイズは1280×720です。もしよかったら使ってね!

 

 

以上、FGOバトルキャラ風Live2Dモデルの作り方でした!いやー書いた書いた!ここまで読んでくれてる人いないんじゃないのか!?こんなポンコツ解説じゃちっともわからないんだけど💢という方は公式のマニュアルも参照すると良いと思います。作文苦手なんだって!!!!許して!!!!

Live2D Cubism 2 マニュアル

気がつきゃもう3のリリースが明日。楽しみですね。これを機にLive2D面白いなって思った方、是非いろんなモデルを作ってみてください。そしてこの記事を宣伝してください。私が喜ぶだけですが。

ここまで本当にありがとうございました!長々とすみませんでした!ご質問等あればTwitterやコメントでお気軽にお声がけください。あとモデル作ったら見せてください。みんなのうちの子サーヴァントが見たいんじゃ私は。それではまた。うちの子FGOパロはいいぞ〜

FGOバトルキャラ風Live2Dモデルの作り方【前編】

どうも、カワナミです。4月です。私は春の陽気にあてられて「北海道ゲーム制作部」略して「北ゲ部」の設立に踏み切ってしまいました。これから札幌を中心にゆるゆる活動していくつもりです。ご興味ある方は下記リンクからどうぞ〜Live2D勉強会とかもやるよ!

北海道ゲーム制作部 : ATND

 

話は変わって、今流行りのアプリゲーム「Fate/Grand Order」、いいですよね。私はまだ4章ですが、いいから早く終章までやれお前も苦しめとベテランマスター勢にせっつかれています。推しはサンソンです。目指せレベル100。

Fate/Grand Order 公式サイト

 

このゲームはバトルがメインなのですが、真横から見た画でキャラががしがし動きます。とってもかっこいいです。あんまりにもかっこいいので、つい創作キャラでパロディしてみたくなります。なりますよね?ならないわけがない。

という訳で今回はLive2Dでこの「FGOバトルキャラ風モデル」を作ってみます。これでうちの子をどんどんサーヴァントにしよう!
ちょろっと調べてみたところ、本家は2Dで描いたパーツを3DCGソフトで動かしてるみたいです。ほぼLive2Dと同じ感じですね。多分。

キャラクターの武器、わかる人的に言うとイシュタルの乗ってるアレなど、立体的な動きが必要なものは3Dで別途モデリングしているそう。さすがにそれはLive2Dでは再現が難しいので置いときます。

実は既に1つ作ってたりするので、そちらをサンプルにして解説していきますね。

▲こちらが作ったモデル。キャラクターはツイートの通り、フォロワーさんのお子さんをお借りしました!掲載の許可をいただき本当にありがとうございます!使用ソフトにPhotoshopAfter Effectsとありますが、これはそれぞれパーツを描くのと後の背景合成にしか使ってないので、メインはLive2D。

上記のツイートを見るとわかるように、実際に動かしてるのは待機モーションだけです。今回は待機モーションまでを目標として解説していきます。でもモデルをそれ用にいじくればきっと攻撃モーションだってできる…はず…。あとは…任せた…。

 結構長いので、目次をつけておきますね。

これ以降は後編で解説してますのでどうぞ。

FGOバトルキャラ風Live2Dモデルの作り方【後編】 - Live2Dとか

 

下ごしらえ

まずはモデルの元となる絵を描きましょう。FGOの画像を検索しまくって画風を寄せていきます。FGOのキャラステータスを開くとバトルキャラが見られたりもするので、そこで本家がどんな動きをしているかも観察します。

私が見る限りわかったバトルキャラの特徴は以下の通りです。

  • 線はあまり強弱をつけない
  • 塗りはシンプルに。影・ハイライトは1段階
  • キャラの身長・体格にもよるがだいたい5頭身
  • 服や髪のなびき、呼吸による体の動きはなめらか
  • まばたきのみ2コマ

きっとキャラのデザインによって例外はあるかとは思いますが、こんな感じにするとバトルキャラっぽくなるかな〜程度に踏まえてもらえると良いかと。もし間違ってたらゴメリンコ。ていうかFGOはなびきがすごい。かっこいい。風を感じる。強い。

わかった特徴を元にPhotoshopでシコシコ絵を描きます。お絵かきソフトはpsd形式が書き出せるのであればなんでもいいので、好きなやつで描いてください。サイズに特に決まりはありませんが、私の場合は1500×2000。最初からモデル用の絵だったので、下書きしたあとはパーツごとに描いてました。服に隠れた太ももを描いているときは興奮しました。

f:id:kw_nmnm:20170408000542p:plain

f:id:kw_nmnm:20170408001113p:plain

▲レイヤーはこのような感じ。線画と塗りを分けてグループでまとめてました。こうすると読み込み用psdにするときにわーっと結合できて楽な気がします。
 

f:id:kw_nmnm:20170408002756p:plain

f:id:kw_nmnm:20170408003904p:plain

▲最終的なものがこちら。

パーツ分け画像はご参考に。モーションを妄想しつつ分けると良いです。服の裏地や揺れ物を細かく分けると仕上がりがいい感じになります。

実際は下画像のようなpsdデータをLive2Dのソフトにぶち込みます。レイヤーの名前・重なり順がそのまま反映されるので、名前と上下関係はこの時点できちんとしておきましょう。また、「乗算」「加算」等の描画モードやレイヤーの不透明度はうまく反映されないので使わないようにしましょう。全部描画モード「通常」でレイヤー不透明度100%です。

まばたきは2コマなので開き目と閉じ目を用意しました。目のところがなんか大変なことになってますが、表示非表示はLive2Dのほうでつけていくので大丈夫。

 

Live2Dモデリング - 1.整理整頓

さて、お待ちかねのLive2Dです。Cubism EditorというLive2D制作ソフトでぬるぬる動くバトルキャラを作っていきましょう。この記事を書いてる時はバージョンが2.1なのですが、なんと今月19日に3がリリースされます!見た感じ便利機能が追加される以外は大きな差異はなさそうなので、3でもきっと同じように作れます。むしろ3のほうが楽に作れるかも。

2017.4.18追記:リリースが26日に延期になったみたいです。待ち遠しい…!

 

Live2D 公式サイト

 

こちらの「ダウンロード」からソフトをゲットしましょう。私の制作環境はPro版ですが、複雑な作りではないのでFree版でもできると思います。インストールするとCubism ModelerCubism Animatorという2つのソフトが入っていますが、まずはModelerを使ってモデリングを行います。Modelerを起動して下ごしらえで描いたpsdデータをドラック&ドロップでぶち込みます。「PSDファイルをインポート」といウィンドウが出てきますが、特に問題ないと思うのでそのままOKを押しちゃってください。するとそのままの絵が画面にボン!と現れます。

【注意!】psdデータの色がCMYKだとうまく読み込まれません。うまくいかない場合はRGBになっているかを確認してみましょう。

f:id:kw_nmnm:20170408134016p:plain

▲すっごーい!

実はこの時点で、もう動かす準備ができています。あとは「どんな風に動くか」をつけていくのですが、この状態のままだとちょっとごちゃごちゃしているので、動きをつけやすいように整理していきましょう。 

パーツの整理

画面左下にある「パーツ」パレットに「PSD」という項目があり、読み込んだパーツはここに全て格納されています。項目名の左にある▶をクリックするとパカっと開きます。

f:id:kw_nmnm:20170408141132j:plain

▲開くとめちゃくちゃ入ってます。これを整理するぞ。

デフォルトの状態で「目玉」「体」などの項目が用意されてますので、「このパーツはここ!このパーツはここ!」と割り振っていきましょう。ぶっちゃけPSDにパーツが全部入っていても今回のモデル的には問題ないのですが、ミスが発生したりこんがらかったりします。整理整頓大事。

f:id:kw_nmnm:20170408143246j:plain

▲こんな感じでサクサク移動。ドラック&ドロップでもできますが、間違った場所にパーツを落っことしてドコドコすることもあるので気をつけましょう。私はよくドコドコします。

「『リボン』の項目とか欲しいなぁ…『ラフ』って項目とかはいらないなぁ…」ってときはパーツパレット右上の「パーツ設定」ボタンを押すとウィンドウが出て項目を増やしたり減らしたりできるのでどうぞ。

f:id:kw_nmnm:20170408144242p:plain

▲こんなやつ。右下のボタンで消したり足したり編集したりできます。追加する場合、パーツIDや名前、描画順は今回はあんまり考えなくて大丈夫です。「PARTS_RIBON」とか「RIBON」とか適当につけちゃいましょう。

f:id:kw_nmnm:20170408150114p:plain

▲パーツの整理が一通り終わったものがこちら。超すっきり。<デフォーマ>って何?って感じですが、これは後編で説明します。

同じ名前のパーツがめちゃくちゃできてる場合

上の画像でもそうですが、「眉・口」というパーツが2つできてるのがわかります。このくらいなら今回は問題ないのですが、psdデータの内容によっては同じ名前のパーツがめちゃくちゃできてて暴れまわりたくなることもあるかもしれません。

これはModelerの「同じレイヤーにあろうとも、ピクセルが繋がっていなければ別パーツとして読み込む」という仕様が原因になります。

f:id:kw_nmnm:20170408154306p:plain

▲図解。ハイライトは特にこうなりやすいです。

これを解消するには2つの方法があります。1つは、psdデータの時点で不透明度1%の塗りで囲い、パーツをこっそり繋げておく方法。もう1つは、Modeler側でポリゴンを振り直す方法です。後者についてはこの後の「ポリゴンの整理」で解説します。

f:id:kw_nmnm:20170408160715p:plain

▲前者はこんな感じ。これは解説用に不透明度が高めですが、実際の1%ならほぼ見えないはず。

ポリゴンの整理

パーツの整理が終わったらポリゴンの整理です。しなくてもモデルは動かせますが、ここをがんばるとクオリティが上がります。ポリゴンとかいうポケモンみたいな単語が突如現れて何のことやらさっぱりなので、まずはポリゴンの説明をします。

ポリゴンって何?

もちろんポケモンのことではなく、Live2Dのパーツを囲む三角形の部品のことです。パズルのピースのように、三角形がいっぱい並んでパーツを囲んでいます。もしかしたらパーツの整理をしていたときに画面右側の絵にいっぱい白い点やら線やらがでてきてびっくりしたかもしれませんが、それがポリゴンです。Live2Dではこのポリゴンを変形させることで、絵の質感を変えることなくパーツをうにょうにょと動かすことができます。

f:id:kw_nmnm:20170409130428p:plain

▲ポリゴンを示す表示。顔の辺りは細かいパーツが集中してるのでちょっとエグい。初見はびっくりしちゃうよね。

f:id:kw_nmnm:20170409131420p:plain

▲ポリゴン変形の例。三角形の頂点をいじくることで形を変えていきます。

Modelerは大変親切なことに、psdデータをぶち込んだ時点で自動的にパーツをポリゴンで囲ってくれます。じゃあなぜ整理するの?ということですが、自動で囲んでくれたものだけでは限界があるのです。

ではどういう場合に自動でできたポリゴンではダメなのかというと、主に「細かく、もしくはなめらかに変形させたいパーツ」のポリゴンは振り直しの必要があります。FGOバトルキャラ風モデルの場合、「髪」「風になびく服などの布」が振り直しの対象です。

f:id:kw_nmnm:20170409142519p:plain

▲「振り直し前」が自動でできたポリゴンのことです。これを下のように振り直して曲げてみると…

f:id:kw_nmnm:20170409142533p:plain

▲こんな風になります。

パっと見どっちでも良くね…?って感じですが、振り直し前だと赤丸で囲んだ部分に少し角ばりが目立ちます。まだシンプルな一本線なのであんまり影響なく見えますが、これが中身に塗りがある髪や服になると意外と歪んだりします。サンプルでは髪と着物の袖・裾を振り直しました。

ポリゴンを振り直す

まず振り直したいパーツをクリックして、画面上側にある「テクスチャ編集」ボタンを押します。このとき、パーツの整理で入れ込んだ項目を非表示にしたりロックしたりすると、余計なパーツを選択してこんがらかったりせずに済みます。項目名の左側にある目のマークや鍵マークを押してみましょう。

f:id:kw_nmnm:20170409145407p:plain

▲ここで早速整理整頓が活きます。後で動きをつける時も使えます。

f:id:kw_nmnm:20170409161428p:plain

▲テクスチャ編集ボタンの位置は上側真ん中あたり。

ボタンを押すと、パーツが並んだウィンドウが出てきます。これも、psdデータをぶち込んだときにModelerが自動で配置してくれてます。先ほどクリックしたパーツとそのポリゴンが真ん中に表示されてると思いますので、頂点を消したり打ったりしてポリゴンを振り直していきましょう。

f:id:kw_nmnm:20170409163749p:plain

▲これがそのウィンドウ。「点の挿入」と「消しゴム」はよく使います。

f:id:kw_nmnm:20170409171627p:plain

▲振り直し方のコツ。頂点を打ってから移動させると反映時にパーツが歪むので、一度打った頂点の位置がコレジャナイ時は消してから打ち直しましょう。

パーツを囲む時は、隣り合った別のパーツを巻き込まないよう注意してください。うっかり巻き込んだまま反映させると切れ端みたいな変なゴミができたりします。

ポリゴンを全部消してから振り直す場合

消しゴムツールで一気にポリゴンを消して全部振り直すぜー!という場合、1つ気をつけなければならない点があります。

psdデータをぶち込んでポリゴンを自動生成した場合、後からpsdデータに加筆・修正しても反映されるようデータ間でリンクがつながっています。これによって、服の模様の修正などが簡単にできるというわけです。しかしポリゴンを全て消してしまうとこのリンクが切れて、反映ができなくなってしまいます。リンクが切れても困らない時は気にする必要はありません。

このリンク切れを防ぐには、ポリゴンを全部消す前にちょっとやることがあります。

f:id:kw_nmnm:20170409204250p:plain

▲リンク切れ防止の方法。

ポリゴンを全部消す前に、小さなポリゴンをパーツの近くに別で作っておきましょう。これを作ってからパーツのポリゴンを全て消し、振り直した後に小さなポリゴンを消してしまえばOKです。消し忘れには注意してください。これでpsdデータのリンク切れを防ぐことができます。

 

 

f:id:kw_nmnm:20170409205108p:plain

▲ポリゴンの整理後。ポリゴンが表示されてないパーツは自動で作られた状態のままです。

同じ名前のパーツがめちゃくちゃできてる場合の解消法

パーツの整理」 で説明した同じ名前のパーツがめちゃくちゃできてる問題(長い)の解消法として、ポリゴンの振り直しがあります。まず、めちゃくちゃできてるパーツのうち1つを残してパーツを削除します。

f:id:kw_nmnm:20170410012924p:plain

▲貴様らは用済みだ。

その後生き残ったパーツをクリックし、テクスチャ編集ボタンを押しましょう。パーツとしてはバラバラでしたが、psdデータで描いた配置のままで取り込まれています。

f:id:kw_nmnm:20170410013304p:plain

▲みんな…!

あとは削除されたパーツも一緒に囲むようにポリゴンを振り直します。そうすれば1つのパーツに全部収まってすっきりです。

f:id:kw_nmnm:20170410014152p:plain

▲やったぜ。

 

さて、ポリゴンの整理が終わったら動きをつけるまであと少し。最後はパラメータの整理をしていきましょう。

 

パラメータの整理

またもや聞いたことのない単語がでてきました。パラメータというのは、画面真ん中辺りにずらーっと並んでいる点と線のことです。この線上に点を打ち、点に変形を覚えさせることでモデルに動きをつけていきます。

f:id:kw_nmnm:20170409211440p:plain

▲「パラメータ」パレット。デフォルトでいろんなパラメータが用意されています。

「角度X」「角度Y」などなどいろんなパラメータがありますが、今回のモデルに必要なさそうなものは消したり、ほしいものは足したりしましょう。モデルに動きをつけながら追加・削除しても大丈夫なので、「ええい待ちきれん!先に動きを作るぞ!」という方はここを飛ばしても大丈夫です。

パラメータパレット右上の「パラメータ設定」ボタンを押すと「パーツの整理」で出てきたウィンドウと似たウィンドウが出てきます。

f:id:kw_nmnm:20170409230427p:plain

▲こんなウィンドウ。これも右下のボタンで消したり足したり編集したりできます。

「角度X(顔の横方向の立体的な動き)」や「体の回転X(体の横方向の立体的な動き)」など、今回のモデルには必要なさそうなパラメータは消して、追加でほしいパラメータをじゃんじゃん作りましょう。

パーツの整理」のときと同じように、今回のモデルではIDはあまり考えずにつけて大丈夫です。範囲も特に制限はありませんが、-1〜1や0〜1で問題ないと思います。説明という欄がありますが、このパラメータがどんな動きに関連したものかというメモ書きのような部分なので、書いても書かなくてもいいです。他の人にもモデルをいじってもらう場合は書いておくとわかりやすかったりします。

どんなパラメータを追加すればいいかわからない時はとりあえず置いといて、後から必要だと思った時に追加してもOKです。

f:id:kw_nmnm:20170410003627p:plain

▲サンプルの最終的なパラメータがこちら。IDとか説明とかめちゃくちゃ雑ですね。最初から全て揃っていたわけではなく、動きを作りながら追加したものもあります。

これでようやく整理整頓が終わりました!あとはレッツモデリングです。やっとLive2Dらしいことができます。ただここまでかなり長く説明してしまったので、一旦区切って後編へ。この記事で動かすとこまでできると思ってた方ごめんなさい。やだ、すごい文字数……作文苦手なのに……。

ご質問等あればTwitterやコメントで声かけてください。取って食ったりしないので構ってください。

魔法のお絵かき動画の作り方

どうも、カワナミです。全然ブログ更新してないです。この前の記事が約半年前ってどんだけブログ慣れしてないんだって話です。

この前Twitterに動画を投稿したら予想以上に反響があったので、メモも兼ねてここに秘密を書いておきます。

▲これがそのツイート。「私くらいになると」とかクッソ調子こいたこと書いてマジですみませんでした。朝方だから誰にも見られてないと思ったんです。許してください。

 

「巷で噂の」とありますが、このお絵かき方法を考案した方は他にいらっしゃいます。

▲最初に考えつくってすごいことです。素晴らしいアイデアと掲載の許可、本当にありがとうございます!

追記:ちなみにこちらは私が今回使っているAfterEffectsではなく、AviUtlを使用して制作したそう。AviUtlは無料ですしLive2DもFree版(Win・Mac両対応かつ使用期限なし)があるので、お金をかけずとも魔法のお絵かきができますぞ。AviUtlを使う場合は、Live2Dの動きを別動画として書き出して乗っければいけると思います。多分。

さらに追記:これ、「サイキックお絵描き」って言うようになったみたいですね!ここを参考に修行して新たな能力者が生まれてくれれば幸いです。

 
下準備

まずは以下の素材を準備します。

  • お絵かきソフトの画面をスクリーンショット等で撮影したもの
  • 下書き、線画の画像
  • Live2Dモデル(Live2Dの作り方はまた別の話なので今回は割愛)

 

f:id:kw_nmnm:20160514124328j:plain
▲今回の背景はPhotoshopの編集画面。下書きは顔だけ別画像です。
Live2Dは元々作ってたものです。キャラはうちの子。
クトゥルフ神話TRPGというテーブルゲームで作った探索者です。かわいい。 

 

この素材をAfterEffects(Adobeさんの動画が作れるソフト)に持っていきます。Live2DモデルをAfterEffectsに持ってく方法ですが、公式でプラグインが配布されています。今のところはCC2015に対応してないそうなので注意しましょう。

2016.10追記:CC2015にも対応したようです!やったね!

After Effects プラグイン - Live2D Cubism 2 マニュアル

 

動画を作る 

どんなふうに操作したいか一生懸命妄想しながら、背景の上に置いた画像をマスク機能を使って流れるように切り替えたりします。ワイプってやつです。エフェクトとかでも良いのだろうか。素人にはよくわからない。そう見えりゃ何だっていいんだよ!

そうそう、動画のサイズはお持ちのPCの画面サイズと同じにしてください。後でフルスクリーンにして再生しますよ。

 

f:id:kw_nmnm:20160514131021p:plain
▲AfterEffectsの編集画面。下書きから線画へ切り替えている途中。
塗りを出すところでLive2Dに切り替えています。

 

タッチする部分もあらかじめ決めておき、そこにタッチしたっぽい効果をつけておきます。

 

f:id:kw_nmnm:20160514132335p:plain
▲ふわっと光ってるのは「Saber」という無料プラグインのおかげ。
素人なのでこういう光り物にすぐ飛びつく。かっこいいよね!

 

プラグインのおかげでAfterEffects内でLive2Dモデルに動きをつけられるので、命を吹き込んだあとの動きをつけます。イージーイーズ使い放題なので自然な動きがつけやすいです。やったね。

 

f:id:kw_nmnm:20160514134700p:plain
▲つけた動きの一部。こんなふうにキーを打っていきます。
絶対無駄なキーあると思う。

 

満足いく動きがついたら動画を書き出します。次はいよいよ撮影です。

 

鬼の撮影タイム

先ほど書きだした動画をPCでフルスクリーン再生します。リピートで何度も何度も流しつつ、一緒に手を動かして操作してるっぽく見えるよう練習します。私は自分で作った動画のくせに全然タイミングが合わなくて深夜1人で泣きそうになってました。

ある程度動きを覚えたら本番です。左手でスマホを構えていざ撮影。

 

f:id:kw_nmnm:20160514140949p:plain

あぁ…

f:id:kw_nmnm:20160514141001p:plain

あぁぁ…

f:id:kw_nmnm:20160514141011p:plain

ああぁあぁぁ……

 

リピート再生かつ撮りっぱなしで動きを繰り返し、比較的マシだった回を切り出して完成です。私は15回くらい繰り返しました。結構難しいです。

あとは撮影した動画をSNSにあげるなり見せるなりしてドヤ顔しましょう。綺麗にタイミングが合うと自分でもちょっと感動します。

 

作り方は以上です。いかがだったでしょうか。今回はAfterEffectsを使いましたが、別のソフトや方法でも全然できると思います。大事なのは「どうやって操作しようかなグヘヘ」という妄想力です。

Live2Dに関してはひとつ前の記事にいろいろ書いてあります。ノウハウがまとまったアドベントカレンダーへのリンクもあるので是非どうぞ。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」さんです。よろしくお願いします!

はじめてみました

どうも、カワナミです。

Live2Dアドベントカレンダー2015投稿用の記事を書くためにブログを作ってみました。全く初めてなので全然勝手がわかりませんが、もし何かのお役に立てれば幸いです。

多分慣れてきたら暴れだすと思います。

 

私のLive2D作品はこちら▼
(Live2D Creative Award 2015にてユニークな視点賞をいただきました)

www.youtube.com