はじめに

めりくりと言えばあめくり！(は？)　
AmusementCreators 2年のほんどぅーです。

Amusement Creators 2019 アドカレ 24日目(12/24)の記事。
横スクロールアクションゲームにおけるモーション振りについての走り書きです。

思った通りに動いてくれる気持ちよさ

クリスマスを寂しく過ごす非リア充にとっておきのコンテンツを紹介するお!!
受験生活、大学生活は思った通りに事が運ばず、人生はツラいよね。
そんな時には、自分が描いた絵を動かして命を宿してみるんだYO!!!
自分の思った通り、操作通りに動いてくれるキャラって気持ちいい。
愛情を込めれば込めるほど、できたキャラは生き生きと動き、
あなたの期待にきっと応えてくれちゃいます。

3Dの方がいい!!の人にも2Dで動かしてみることオヌヌメします。
画角やパースなど、3Dに比べるとカメラワーク(キャラモーションに関して)に意識を重く置かなくても、素材が違和感なく動きやすいです。
振ったモーションがすぐに見たままの形で出力されるので、手軽にモーション振りの要点が実体験として掴めるので、導入として作ってみるのもアリだと思います。

この記事で紹介すること

・作業前準備のコツ
・素材パーツのコツ
・SpriteStudio for Indie(モーション付け無料ソフト)のコツ

今回の記事では、各ツールの基本的は操作方法などは扱いません。公式からのチュートリアルを参照してみてください。(https://www.webtech.co.jp/help/ja/spritestudio/starter/creating58/)

出力した連番画像のマップ内における処理は取り上げませんが、弊サークル すずりゅーことGONちゃんの記事 にある、SATを使って"サッと"作ってみてください。(ちみちみ侍は、すずりゅー君のスクリプト調整のおかげでレスポンス快調です。)

では順を追って説明します。

作業前準備のコツ：イメージ

締め切りギリギリでもできればやることをお勧めします。あとから効いてきます。(締め切りすぎても責任はとれません)

・人気、有名な2Dゲームのやり込み
ソフトがない遊べない場合は実況等でも構いません。この動き!カッコイイ! なモーションを探してください(可愛いでも可)。人気、有名なゲームは細部までこだわりぬかれています。お手本です。

・リピート再生
実況配信などで、再生速度を調節しながら同じモーションを繰り返し再生します。完全に理解するまで続けてください。
ここで大事なのが虫の目と崇の目を持つこと。すなわち
拡大して最低速度で、1フレーム毎にどのパーツが動いているか、動いていないかという情報。
原寸大通常速度で、全体の流れのうち、どの部分が動きが大きいか、動きの速い所と遅い所、ザックリとしたメリハリの情報。
この2つを偏りなく得ることです。どちらも欠かせない視点です。
速度調整chrome拡張機能置いときます。ネトフリ爆速再履にもってこい。
(https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk?hl=ja)

これらの観察によって、完成するモーションのイメージをなるべく掴んでおきます。

素材パーツのコツ

・素材絵のレイヤー
このようなポーズの絵が描けたとします（描けません）(弊サ神絵師haruさんは一瞬で作ってくれます。すごい。推し絵師)。描けない場合は写真や既存のキャラ絵の画像を切り抜いたり模写したりして、このような基本姿勢の素材を用意します。最初のうちは装飾品は極力避ける、左右反転しても変わらないような服装にしておくといいかもしれません。このあとのモーション付け作業で詰みます。
素材に困ったら、弊サの愛されキャラにゃんにゃんを使ってみてください。zamakaさんの記事を貼っておきます。分かりやすくてすぐに素材が手に入ります。
それをもとに、次の素材を作ります。

1つ前の工程で観察した可動部で体をバラして作ります。
ここでコツは、動作を考えて全ての関節を下のようにしておきます。

１は接合時に線が見えてしまうのを防ぐため
２は動作時に関節が消えるのを防ぐためです。

ここまでできたらいよいよモーションを振っていきます。

モーション付けフリーソフトSpriteStudio for Indieのコツ

ダウンロード：(https://www.webtech.co.jp/spritestudio/indie/index.html)
チュートリアル：(https://www.webtech.co.jp/help/ja/spritestudio/starter/creating58/)

お金に余裕のある方は (https://www.webtech.co.jp/spritestudio/personal.html) こちらをお勧めします。メッシュボーンが使えるだけで精神が休まります。書き終わってから使ってみましたが、1/3ぐらいの苦労が消えます。

ではここから、SpriteStudio for Indieを使って覚えたコツっぽいものを思い出せるだけ書いていこうと思います。

・優先度
これはパーツを配置していると一番最初に自然と意識するものです。1フレーム目にこれで各パーツの手前か奥かの関係を設定するのが最初の使い道かなと思います。モーションの途中でパーツの一部が手前に行ったり奥に行ったりした時にそのフレームごとに優先順位を規定できます。見せたくない所、動きがどうしても表現できない一瞬のフレームで優先度を変えることで隠すことができます。

・親子ノード
胴体に対して頭、頭に対して帽子など、動作に対して二つの重心があまり動かないものに適用すると効果的です。可動域の広い腕や足の上下で親子関係を作ってしまうと思った通りに動いてくれることは少ないというのが使ってみた感想です。基本姿勢や歩く動作などでは効果を発揮しますが、カッコイイ動きには向いてません。あとあと修復が大変になります。動きが大きい場所では、ひとつひとつパーツをイメージ通りに配置していくしかありません。

・拡縮
少ない素材でモーションが作れるのがこのソフトの最大の利点ですが、動作が大きくなると、元の素材では対応しきれずに透けの問題が発生してしまいます。関節が千切れてしまう現象です。
この問題を解決するのが拡縮です。空いた穴を塞いだり隠すことができます。
そのほかに、拡縮を繰り返しながら位置を移動させたりすることで、メッシュ機能がなくてもなびかせが表現できます。マントとか。無理やり引き延ばして元の形からはありえない使い方もしてました。重宝しました。

・反転
攻撃モーションなどで腕や足が反り返る、武器の向きが変わる、顔の向きを反対にしたいときは、一部パーツの向きを反対にすると解決できます。

・不透明度
顔の差分などを表現できます。目が見える顔の絵、後頭部が見える絵など、それぞれ別で素材が用意されている場合、透明度を切り替えれば、一瞬で素材を切り替えることができます。足の表裏とかも。あとはパーツが途中から修復不可能な挙動をしだしたら、不透明度をそっと0にすると心が安らぎます。

・回転
全体的に体を上に反らせたい、あるいは前かがみで体育座りの状態で空中を舞いたい、そんなときはグルーブ選択したパーツを回転させることで、それぞれのパーツの相対位置は変えずに、大きく体勢を変えることができます。

あとはすべて手作業でコマ毎、フレームごとに動きを再生しては調整していくの繰り返しです。
割り振ったキーとキーの間の動きは自働で補間してくれますが、メリハリが効かないことが問題として挙げられます。素早い動き、ピタッと止まる動きには適していません。 連番として出力した枚数はひとつのモーションでも多くても20枚は行きませんでした。大体10枚前後で収まりました。

こんなところでしょうか。。。3ヶ月ぐらい触ってなかったので忘れちゃってますが。。。
実際ゲームにするとエフェクトでモーションの多くは隠れてしまいます。しかし完成した時の達成感はとても気持ちいいです。自分で命を吹き込んだ感覚がたまらん人にはたまらんと思います。

さいごに、色々ごちゃごちゃ言いましたが、自分が素敵だと思えるものを気楽に作ってほしいと思います。
今回のアドバイスをほぼ無視して作ったニャンたクロースです。めちゃかわいいです。エモいです。