Live2Dでアクションゲームキャラを作る！

こんにちは。
Live2Dアドカレ 14日目を担当させていただきます、フリーランスのmakotok1です。

Live2Dアドカレの記事の準備はじめました。まずはスクリーンショットを出しても恥ずかしくないように、モデルデータの整理から。 pic.twitter.com/KkGrmUk47A

— makotok1＠蒼穹工房 (@makotok1) December 7, 2019

ということで今回は、Spineが得意そうなアクションゲーム用のミニキャラを、Live2Dで作ってしまえ！というご紹介です。

Live2DとSpineの違い

まずはLive2DとSpineの違いから。
といっても挙げ始めたら数限りないので今回のようなミニキャラを動かそうとした時に思いつく主なもの2点だけ。

1. タイムライン上でパーツを変形できるかどうか

Spineは、モーションを作る際、タイムライン上にキーフレームを打ち、そこで直接ボーンの角度を変えたり、メッシュの変形をさせて動きをつけていきます。

Live2Dは、タイムライン上でキーフレームを打ち、そこで動きをつけることはSpineと同じですが、パーツを直接変形、回転するのではなく、モデラーで予め設定したパラメーターを操作することで動きをつけます。

（※ Live2DもVer.4の新機能「フォームアニメーション」で直接パーツの変形等を行えるようになりましたが、今回は最終的にUnitySDKで利用するためのリアルタイムモデルとして出力をする前提なので、SDK未対応の「フォームアニメーション」は使用しません。）

アクションゲームのキャラのように、大きな動きが必要な場合は、Spineのようにタイムライン上で時間経過に合わせて直接パーツを移動、回転させるほうが直感的でわかりやすいかもしれません。

…でも！

Spineだって結局はあらかじめ、ボーンを入れたり変形用のメッシュを用意して、それを利用してタイムライン上で動きをつけてます。

では。

Live2Dもあらかじめ、人体で想定されている動きを全部パラメーターで作っておけばいいじゃん、ということになります！（ちょっと強引か？）

詳しくは後述のモデリングの項目で。

2.  IKの有無

これはよく言われることなので、知っている方も多いかと思います。
腕とか足に設定すると、それを動かすだけでいい感じに関節を動かしてくれるというアレです。
これについては、Live2Dにはありません。
代用案もありません（少なくともボクは思いつきません）。

でも、本当に必要ですか？

IKは、たしかに先端を動かすだけで、途中の関節も含めて動かしてくれますが、ボクが作業した限り、微妙なニュアンスとか角度が調整しにくい！…と思います。

Spineを使いこなしてないだけだろ！

とか、

きちんと設定してないからだ！

というご意見。
ごもっともなので、この際、無視しまs(略。

なので、泥臭く、Live2Dモデラー上で、腕や足が動く想定範囲内を網羅するように、回転でフォーマーやワープでフォーマーを駆使してパラメーター設定しましょう！

これも、詳しくは後述のモデリングの項目で。

パーツ分割

特筆することはないかと思います。
普通に全身モデルを作る時に分割する感じで。
ただ、前髪だけは房ごと等、細かくしておいたほうがいいかもしれません。そうすると、小さくても顔Xのパラメーターの動きがわかりやすくなります。

モデリング

1. 頭部のパラメーター

なるべく動きは大きくつけておきましょう。
小さいと、大きなアクションをする時にあまり動いてないように見えてしまいます。

※　ちなみに画像にある【FaceX2】は、特定モーション用の奥を見るような顔の動きで、今回は使用しません。
　また、【HeadCoX】【HeadCoY】は、頭部パーツ自体の座標をXYでずらすことができるパラメーターです。動きをつける上で、どうしても首の位置に違和感を感じたときの調整用です。必須ではないのでお好みで。

2. 体のパラメーター

こちらもオーバーめにつけておくとGoodです。

【CharacterX】【CharacterY】【CharacterZ】は、それぞれキャラクター自体の座標移動、回転用のパラメーターです。
これがSpine的なモーションを作る時に重要な要素となるので、かならず作りましょう。
詳しくは後述のモーションの項目で。

3. 腕のパラメーター

人体で可能な範囲プラスαくらいでパラメーターを作りましょう。

特に肘の回転（画像の【ArmR2】【ArmL2】）は、反対側の回転を、人体でやったら折れるんじゃね？というくらいにつけておきましょう。
これは、モーションを作る際に勢いを出すための反動の動きなどで多用します。動きがダイナミックになるので、つけておいて損はないです（使わないなら、そちらの方向にパラメーターを設定しなければいいだけですし）。

腕の伸縮のパラメーターもぜひ作っておきましょう（画像の【ArmR4】【ArmL4】）。
回転だけでは平面的な動きになるところを、このパラメーターを使うことで立体的に見せることが出来ます。

くわしくは過去の記事、「 Live2D 腕の立体表現のススメ 」を！

4. 足のパラメーター

腕と同じく、人体としてそれは無茶だろ？というくらいつけておきましょう。

特に足全体の回転（【LegR1】【LegL1】）は、上図くらい回転させましょう。
モーションを作る際、しゃがんだりジャンプしたりする時に、このくらい回転できるようにしておかないと、全く話になりません。
スカートを突き抜けているのは……とりあえずここでは気にしなくてOKです。
モーションを作っていて、どうしても気になるようでしたら、足の回転パラメーターとは別に独立した形で、スカートのひるがえりのパラメーターを作りましょう。
連動させてしまうと、ものすごく使いづらくなります。疑うのであれば、一度、足の回転にスカートの動きを連動させた状態でモーション作成をしてみましょう。絶対に後悔します。

膝の回転（【LegR2】【LegL2】）と、伸縮（【LegR4】【LegL4】）は、腕のパラメーターと同じように作っておきます。理由も腕と同じです。

5. 髪揺れ・服揺れのパラメーター

お好みで。

ちなみに、今回のモーションでは、物理演算ではなく手打ちで揺れをつけてます。
結構派手な動きをする上に、パラメーターの使い方が通常と違うところが出てくるので、物理演算でいい感じに表現しようとすると、熟練の業と多大な試行錯誤の時間が必要になると思います。

6. 特殊攻撃用エフェクト

趣味です。
必須ではありません。

ぱわーうぇ○ぶ！

モーション作成

まずは「歩き」モーションから。

1. 「歩き」モーション

基本的に3つのポーズの切り替えです。
3つのポーズを作り、等間隔に配置して切り替えます。

では、具体的に3つのポーズのパラメーターを含めた解説を。

1-1. 直立ポーズ（最初のフレーム）

なんの変哲もない直立ポーズです。

ポイントは足の伸縮パラメーター（【LegR4】【LegL4】）を若干縮め気味にしておくことです。
完全に伸ばした状態にすると、歩くモーションの時に足が外側を回り込んでいるような違和感が発生します。

この直立ポーズは、モーションの最初と最後のフレームの他に、中央のフレームにも使用します。

1-2. 歩きポーズ1（2分割したうちの前半の中間のフレーム）

手足を前後にしたポーズ。
歩いているいい感じにしてください（適当）。
ポーズの参考は、「アニメーション　歩き」等でググると、横向きのキャラクターの歩きポーズが載ったサイトがたくさん出てくるので、そちらを見ましょう！

ポイントは、キャラクター全体のY座標（【CharacterY】）を若干下げ目にしましょう。
足を開いている分、キャラクターの位置が若干下がることを表現します。
これを入れてないと、キャラクターが歩くモーションをしながら平行移動しているようなイメージなってしまいます。

1-3. 直立ポーズ（中央のフレーム）

1-1と基本は同じです。

ただ、上図では、揺れを若干体の動きからずらしているため、揺れ関係のパラメーターのみが違っています。

1-4. 歩きポーズ2（2分割したうちの後半の中間のフレーム）

1-2の逆です。
Y方向のパラメーターは、基本的に1-2と同じものが使えるので、コピペして使い、X方向のパラメーターと手足の前後を1-2とは逆にしましょう。

これも、参考サイト、画像などを見ながらいい感じにしてください（適当）。

1-5. 直立ポーズ（最後のフレーム）

1-1と全く同じです。
逆に違うところがあると、ループが破綻してしまうので、必ず同じにしてください。
というか、コピペでOK。

次は「走り」モーション。

2. 「走り」モーション

4ポーズの切り替えです。
「歩き」よりも躍動感を出すために、Y方向のパラメーターを大きく変動させています。

以下でパラメーターを含めたポーズの解説を。

2-1. 走りポーズ1（最初のフレーム）

前傾姿勢を取って、手足を前後に出しているポーズです。
いい感じにしてください（適当）。
「走り」もGoogle先生に聞けば、いい感じに参考になりそうなサイトや画像を教えてくれます。

はねている状態なので、キャラクター全体のY座標（【CharacterY】）を若干上げ目にしましょう。

ループの関係上、最終フレームにも同じポーズを配置します。

2-2. 走りポーズ2（2分割したうちの前半の中間のフレーム）

着地した状態です。
「歩き」とちがって、棒立ちにはなりません。

体を縮こませた状態なので、キャラクター全体のY座標（【CharacterY】）を若干下げ目にします。

2-3. 走りポーズ3（中央のフレーム）

再びはねている状態です。

Y方向のパラメーターは2-1と同じなので流用して楽をしましょう。
コピペ後に手足とX方向のパラメーターを、2-1とは逆の方向へ移動します。

2-4. 走りポーズ4（2分割したうちの後半の中間のフレーム）

再び着地した状態です。

これもY方向のパラメーターは2-2と同じなので、コピペで。
そのあと、手足とX方向のパラメーターを逆に。
流れ作業のように。

2-5. 走りポーズ5（最後のフレーム）

2-1と全く同じです。
コピペです。
改変してはいけません。

続けて「攻撃」モーション。

3. 「攻撃1」モーション

コンボ攻撃の１撃目。
文字通りジャブです。

コツは、腕を振り上げる前の後ろに引く予備動作です。
腕の動きだけではなく、体X（【BodyX】）のパラメーターをうまく使って、体全体でひねってパンチを繰り出すようにしましょう。

また、動きを大きくするために、キャラクター全体の移動パラメーター（【CharacterX】【CharacterY】【CharacterZ】）も使用しています。

4. 「攻撃2」モーション

コンボ2撃目。
ストレートパンチ。

初めのポーズは、「攻撃1」の最後のポーズに合わせます。
「攻撃1」より、予備動作でさらに大きく体を引いているのがポイント。

「攻撃1」同様、キャラクター全体の移動パラメーター（【CharacterX】【CharacterY】【CharacterZ】）も更に大きく使用しています。

5. 「攻撃3」モーション

コンボ3。キック。
予備動作やキャラクター自体の移動パラメーターが、さらに大きく動いています。

このあたりは、コツというより、自分が思い描く「かっこいいポーズ」を再現させるつもりで作るといいかもしれません。
思い描いた通りのポーズを付けるには、モデリングで可能な限り可動範囲を大きく、おおげさに取れるように作ることが重要です。
頑張りましょう！

6. 「特殊攻撃」モーション

ぱ○ーうぇいぶ！

モデルデータは流用しよう！

モデリングで可能な限り色々なポーズを取らせられるモデルが出来上がったら、流用しましょう。
ポーズが色々取れるという時点で、別の歩き方や走り方、攻撃の動きもできる（はずな）ので、PSDを差し替えて、キャラごとの特徴に合わせて調整するだけで、別キャラクターの出来上がりです。

たとえば、ゾンビ。

ベースのモデルは、同じものを使っていますが、モーションで全体的に前屈みにさせることで、こんな感じに別の歩きをさせることが出来ます。

ちなみに、ゾンビモデルに、普通の歩きモーションを適用すると。

あらまぁ、こんなスタイリッシュに！

ほかにも。

女の子っぽい走り方や

男の子もつくれます。

最後に

かなり駆け足になりましたが、Live2Dでアクションゲームに使えそうなミニキャラを作ってみよう！でした。

最後に、今回紹介したデータを使って、ゲームを作っています！
…といっても、まだ作り始めたばかりですが。

Live2Dモデルで作るアクションゲーム。1から作り直しで、プレイヤーキャラクターの操作関連を実装してみた。今度はWebGLで書き出してるので、ブラウザで動くよ。左右キーで移動。スペースキーでジャンプ。Vキーで攻撃。まだ敵は未実装なんで、キャラクターが動くだけ。　https://t.co/01mVoQIlUM pic.twitter.com/EpAbw0FogD

— makotok1＠蒼穹工房 (@makotok1) December 9, 2019

まだまだ先になると思いますが、完成したらぜひ遊んでみてください！
とりあえず、この動画みたいな感じを目標に。

簡単操作で爽快、豪快演出！ができればいいなぁと思っています！
では、また！

まだまだ続くLive2Dアドカレ、明日は、ドラゴンたつみさんです！