Live2Dで多関節ボーンアニメーションをゲーム用途でする話と通常パラメータとブレンドシェイプの違い

## はじめに
これは[Live2Dアドベントカレンダー2023](https://adventar.org/calendars/8580 "Live2Dアドベントカレンダー2023")の17日目の記事です。

この記事はLive2Dを使ってスプライト系ツール(Spine、SpriteStudio、Unityの「2D Animation」)のような多関節2Dボーンアニメーションを **ゲーム用途** で使うひと向けの為の極めて **ニッチな記事** です。
(Live2Dは本来、そういった用途を想定していません)

ただ、それだけだと余りにもニッチ過ぎて対象読者がひとりも居ない可能性が高いので、
**ブレンドシェイプってそもそもなんやねん？ 通常パラメータと何が違うのん？** という話題にも触れています。

## こんな問題がある
Live2Dのアニメーションではパラメータに無いアニメーションは出来ません(動画用途のFA機能を除く)。
なので、1本の腕に複数の動きをさせることが非常に難しいです。

ゲームでスプライトアニメーションツールのような使い方を想定すると、
例えば、
- 歩行の足の動き
- しゃがむ、屈伸の動き
- キック

を実現しようとすると組み合わせ爆発で破綻します。
腕も同様です。

関節毎にパラメータを分けて
- 肩、肘、手首
- 股、膝、足首

としてもいいのですが、現行バージョンではIK的な動き付けが出来ず、アニメーションを付けるのが大変です。

昔、Live2Dで無謀にも格ゲーを作ったことがあるのでわかりますが、
超たいへんでした。
<iframe width="560" height="315" src="https://www.youtube.com/embed/XGK57UscIUo?si=DvDqAQiMLgMhSerL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
尚、タイトルやUIも全てLive2Dモデル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/c105cae0-c199-e839-f6bd-04ca4320bc61.png)
モデリング

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">アドカレ記事用ツイート。Live2Dで格ゲーのモーションを作ったときの。 <a href="https://t.co/FnqaLQVkxO">pic.twitter.com/FnqaLQVkxO</a></p>&mdash; 栗坂こなべ (@kurisaka_konabe) <a href="https://twitter.com/kurisaka_konabe/status/1736309620455698703?ref_src=twsrc%5Etfw">December 17, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
アニメーション

また、関節毎にパラメータを分けたとしても、
**「パラメータに無い動きはアニメーションで付けられない」**
という仕様が重くのしかかってきます。
**「このモーションでは見栄え的にもうちょっと◯関節やアートメッシュを前にズラしたいなぁ…」**
という融通が利きません(その融通すらもパラメータ化すれば出来ないこともないですが…)。
**「FA機能がSDKでも使えないものか…」**
……っと思っていたのは私だけではない筈です(せやろか)。

## 神アップデート！回転デフォーマのブレンドシェイプ対応
神では！
解決した。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Live2D 5 、回転デフォーマのブレンドシェイプ、関節アニメをやりたかった自分に最強っぽい(自分用途では) <a href="https://t.co/drYj3V5jzW">pic.twitter.com/drYj3V5jzW</a></p>&mdash; 栗坂こなべ (@kurisaka_konabe) <a href="https://twitter.com/kurisaka_konabe/status/1705221233149882680?ref_src=twsrc%5Etfw">September 22, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
やりたい動き毎にブレンドシェイプのパラメータを作る。
何でもできるやん！ FA機能のSDK対応を待っていたけど、別にええやんけ！

**モーション毎にパラメータで分ければ何でも出来る**
組み合わせ爆発なにそれ？
融通きかせ放題！神！
Unity上でも実際に動くことを確認できました。

ここでは1モーション毎に1パラメータにしましたが、上半身と下半身の動きを別々に作っておけば「上半身×下半身」の動きが出来てよさそうです。

## ブレンドシェイプとは何か？ 通常パラメータと何が違う？
通常パラメータとは何が違うのか？
**「そんなにブレンドシェイプが強力で便利で組み合わせ爆発やパラメータ数の上限が無いんなら全部ブレンドシェイプでいいんじゃないの？」**
……っと思ったひと向けに。

- 通常パラメータ：組み合わせ毎にキーフレームが別々に存在、狙った形状を作れる
- ブレンドシェイプ：あくまでも形の合成であり、組み合わせによる狙った形状は作れない

例えば、通常パラメータの角度X,Yだと右上の形状だけを特注で **「狙った形状」** に出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/51c79930-9a82-d561-2da7-5bd11580dda5.png)

これがブレンドシェイプですと(結合表示できないという問題を抜きに)、右上を狙った形状には出来ません。
あくまでも角度X:+1.0と角度Y:+1.0の形状の合成の結果でしかありません。
(ブレンドシェイプのパラメータは単体で動かして形状を編集する前提で作られているので、この状態で斜め上の形状を作っても角度Xか角度Yの形状が予期せぬ形状になってしまいます。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/457180d3-85de-3791-3ca0-89b686cf781e.png)

ですので、角度XYのような斜めの形状をしっかりと狙った形状で作る必要があるパラメータには向きません。
髪の多段揺れのような雰囲気それっぽくなっていれば良いパラメータや色変え等の完全に形状を合成した結果が予想がつくパラメータにしか使えないでしょう。

一昔前に流行った **口の変形3点×口の開閉4点** による12パータンの口の形状で「あいうえお」のパターンを作る方法も「通常パラメータ」の特性を活かした方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/190d83b7-864c-f8b9-199e-0f1d0e33fb7d.png)

通常パラメータは1つのオブジェクト(アートメッシュ or デフォーマ)に複数のパラメータを登録すると、
3×3=9パターン、3×4=12パターン、3×3×3=27パターン……っと組み合わせ毎に全て別のキーフォーム扱いになり、別々の形状を登録することができます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/Live2D_alive2021?src=hash&amp;ref_src=twsrc%5Etfw">#Live2D_alive2021</a> パラメータ網戸。よい命名。 <a href="https://t.co/VYwePn2VUj">pic.twitter.com/VYwePn2VUj</a></p>&mdash; 栗坂こなべ (@kurisaka_konabe) <a href="https://twitter.com/kurisaka_konabe/status/1466993548927303682?ref_src=twsrc%5Etfw">December 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Live2Dパラメータ網戸

用途に応じて、通常パラメータとブレンドシェイプのパラメータを使い分けましょう。

ちなみに「あいうえお」はブレンドシェイプを使ったよりモダンな方法が公式サンプルの「虹色まお」で提示されています。「あいうえお」それぞれ単体でスライダを動かして形状を作ってあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/03382f14-50f5-e834-b0eb-97976cd32487.png)


## 実際のゲームに使ってみる
なんかすごい作例を載せる……予定でしたが、次のunity1weekにでも実戦投入してみて、その結果をリポートしてみいたいと思います。

## ボーンアニメにLive2Dを敢えて使うメリット
- ボク自身がLive2Dに慣れている
- 動きの融通がめちゃくちゃ利く
- ユーザー数が多いので人材を確保しやすい？

(個人の見解です)

## おわりに
次はカワナミさんの「メッシュの頂点の数や配置は変えずに、つなぎ方のみ工夫するだけでもなんかうまくいくことがある」というお話 です。
たのしみですね。
[Live2Dアドベントカレンダー2023](https://adventar.org/calendars/8580 "Live2Dアドベントカレンダー2023")