こんにちは。ポケラボクリエイティブ部です。

クリエイティブ部の若手メンバーがスキルアップに励む姿をお送りしているCreative Blogですが、今回はSpineデータの拡張作業の模様をお送りします。

Spineについてはコチラをご参照ください。
http://ja.esotericsoftware.com/

以前「Creative Blog #8 Spineのセットアップしました！」で作成したSpineデータに、表情と手のパーツを追加しました。

パーツを追加した事で表情やポージングのバリエーションが増え、演技の幅も広がりクオリティに大きな変化が！

前回セットアップを行ったこのキャラクターですが…。

実は表情はこの１パータンしかなく、手に関してもグー（握り拳）の１パターンしかありませんでした。
このままだと、ニコニコ顔のまま拳に力をいれて相手を攻撃する（グーで殴る）という、ちょっと怖いモーションしか作れなくなってしまうのでSpineデータを拡張する事にしました。

どうせ拡張するならこれを機に検証も兼ねて色々挑戦してみようとメンバー間で盛り上がり、「表情の拡張」と「手の拡張」を行う事にしました。

まずは「表情の拡張」から。

現状は一つのスロットで目を管理している状態です。
スロットEyeに割り当てられた画像には左右の目が格納されています。

両目を１つのスロットにまとめた際のネガティブなポイントは下記の通りです。
・ウインクなどの表情パターンが増えた場合、新しく画像を用意する必要があり容量が膨らみやすい。
・アトラス化（Spineから使用画像を一枚にまとめてExport）した際に両目の間の空白部分も確保されるので無駄なスペースが生まれる。

これを解消する為に、目のスロットを左右別々にする事にしました。
左右のスロットには、目の全パターンの画像４点（開き目、半目、閉じ目、ニッコリ閉じ目）を格納します。

◆左右別スロットにすることで画像容量と画像管理コストが削減
１スロット管理の場合、ウインクをさせたい時は片方を開き目、もう片方をニッコリ閉じ目にした一枚の画像を用意する必要があります。
反対の目のウィンクが必要な場合、先ほど作った画像の左右逆バージョンの画像が必要になります。
なので、左右でウインクさせるには画像を二枚用意する必要があります。

左右別スロット管理の場合は、右目を開き目、左目をニッコリ閉じ目にする表示制御だけで事足ります。
反対の目でウインクさせる場合は、表示内容を左右逆にするだけです。
なので、表情に応じて画像が増えることがありません。

◆無駄な余白スペースを無くし軽量化
１スロット管理の場合、右目と左目の間のスペースも画像に含まれるので画像サイズが大きくなり、容量も増えます。
左右別スロットにするとそのスペースが無くなるので画像サイズが最小になり軽量化に繋がります。

眉毛も同じように左右でスロットを分けています。
眉毛のパターンは、通常、怒り、悲しみの３種類あります。

このように左右でスロットを分けることにより、画像容量を削減しつつ豊かな表情がつけられます。
まさに一石二鳥ですね！

左右でスロットを分けた目と眉毛を組み合わせて作ったウインクがコチラです！

表情のパーツの内訳は下記の通りです。
・右眉毛　→　怒り
・左眉毛　→　通常
・右目　→　ニッコリ閉じ目
・左目　→　通常

今回、表情の拡張のために目と眉毛のパターンを追加してくれたメンバーの感想がコチラです。

顔パーツの制作時に気を付けたことは、どんな表情になってもバランスが崩れないようにしたことです。
左右で異なる眉毛や目が表示されても違和感がないように気を付けました。
頂いたフィードバックを参考に、下まつ毛を２本にした事で小さく表示されても視認し易くなったと思います。

次は「手の拡張」です。

今回追加した手のパターンがコチラです。

攻撃モーションを作る事を想定して、グーのバリエーション（色んな角度から見たグー）を追加し、攻撃以外にちょっとした演技にも対応できるように、元気なパーや柔らかさが感じられるパーなども追加しました。

今回手のパターンを追加してくれたメンバーの感想がコチラです。

手はキャラクターを表現する大事なパーツの１つです。
握る、開く、反るなど様々なポーズをとることでキャラクターの多彩な心情が表現できます。
手は表情が付けやすく、その分いろんな角度から見ると全く違う見え方になるので、それを描き分けるのが大変でした。
また、このキャラクターは手にアーマーを付けているので、そこも難しいポイントでした。
既に制作されたノーマルの手を並べて見ても違和感がないように、細部を整えつつ作成しました。
今回追加した手のパーツを活用する事で表情豊かなポーズを取る事ができると思います。
今後が楽しみです。ワクワクが止まりません！

今回追加した表情と手を活かして前回と同じようなポーズをとるとこうなります！

グーの角度が増えた事、パーの手がある事で、腕を大きく外に広げるポージングが無理なく作れるようになりました。
腕を開放的に動かすことでこのキャラクターの明るさが更に表現できるようになったと思います。

モーションを作る際に制作者のアイディアがバンバン反映できるかどうかは、Spineデータのセットアップ次第と言っても過言ではありません。
パーツの追加は工数が掛かりますが、次工程のモーション作成で良い成果を出すには追加が必要になる場合もあります。
限られた画像領域、画像枚数の中でより高品質に見せるために、どこを足しどこを差し引くのか。
色んな要素を総合的に考え配慮する事が、Spineを使ったアニメーション作成では重要になってくると思います。

キャラクターの魅力や「らしさ」を引き出し、良い表現を生み出すために、今後も検証や研究を重ねたいと思います。

以上、Spineデータの拡張でした。

次はいよいよモーション作成か！？お楽しみに！