(cache) 多関節2Dキャラクターモーションのお話

はじめまして。
X Production部 / TechArt and Animation チーム所属で、アニメーションディレクターを拝命しております、清田徹と申します。
はやいもので2015年ももう半分終わってしまいましたね。
おそろしいですね。

今回は、最近よく和製スマートフォンゲームで見かけるようになった、多関節2Dキャラクターモーションについてお話ししたいと思います。
多関節2Dキャラクターモーションならではのノウハウって意外と世の中に広まってないなと思いましたのでそのあたりも交えつつお話できればと。

まずは、今回サンプルとして用意したキャラクターをご紹介。
下記のようなパーツ構成になっています。

【パーツ構成】
頭：Head
胸：Chest
腰：Hip
上腕：UpperArm (左右共通)
腕：Arm (左右共通)
手：Hand
腿：Thigh (左右共通)
脛：Leg (左右共通)
足：Foot (左右共通)

今回は、このパーツ構成を使ってでできる範囲で、ゲームにおけるキャラクターモーションの定番である「歩きモーション」「立ちポーズと攻撃モーション」の2つをとりあげてお話しします。

１−１．歩きモーションの基礎

ではまず、キャラクターモーション初心者の方が作ってしまいがちな歩きモーションと、その改善策をご紹介します。

初心者の方が作る歩きモーションで、↓ こんな感じになっているのをよく見かけます。

この歩きモーション、どこがまずいかというと、足の運びの不自然さが特に目立ちます。
分解すると下記のようになります。

なぜこれが不自然に見えるのかというと、前に出した足が前で着地せずに、もとの位置で着地してしまっているのが主な原因です。

【悪い例】前に出した足を前に着地せず、もとの位置に戻してしまっている

自分でその辺を歩いてみればわかりますが、前に出した足を前に着地せずにもとの位置に戻してしまうと前に進めません。
不自然に見えてしまうのはそのためです。
なので、ちゃんと前に出した足が前の位置で着地するようにします。

こんな感じで。同時に後ろの足を地面から上げておきます。

そしたら今度は、着地した足を後ろへ送ります。

この、着地した足を後ろに送ることが、キャラクターを前に進んでいるように見せるのです。
(ルームランナーの上を歩いているところをご想像していただけるとわかりやすいかとおもいますが、前に出した足を後ろに送る時にルームランナーのベルトは回転します)

同時に、後の足を前に送ります。
あとは、左右逆で同じことを繰り返します。

動かしてみるとこんな具合に

【修正前】

【修正後】

１−２．歩きモーション応用編

次は多関節2Dキャラクターモーションならではのテクニックを。
腕の振りにあわせて、奥行きを意識して胸のパーツを横方向に伸縮してみます。

↓この腕の位置の時はそのままにしますが

↓この腕の位置の時に体の横幅を縮めます
(腕パーツは一緒に縮めてしまわず、肩の位置だけ調整します)

【元の状態】

【横幅を縮めた状態】
sample_body3

するとこのように

【修正前】

【修正後】

体の動きに前よりも奥行きが感じられるようになったと思いませんか？？

リアルに歩く動きを考えると、こんなに肩を前後させるのは不自然なんじゃないかという気もしますが、アニメーションでは、しばしばこのような誇張表現をすることがあります。
より動きがイキイキとして見えるんじゃないかと思いますが…いかがでしょうか？

１−３．歩きモーション仕上げ

最後に、各部位の動きに緩急をつけて仕上げます。

普通にキーフレーム同士をトゥイーンでつなげると直線的で不自然な動きになってしまいます。
腕の動きを例に出してみましょう。

前へいく動きから後へいく動きへ折り返すタイミングで、一瞬カクっとしてしまっているのがわかりますでしょうか？

そこで、折り返しのタイミングに緩急をつけます。
具体的にいうと、折り返し地点に向かうにつれて減速するようにして、折り返し地点を離れるにつれて加速するようにします。
また、腕の場合は、上腕の動きのタイミングと下腕の動きのタイミングをわずかにずらすとさらに滑らかな印象になります。

【修正前】

【修正後】

この要領で全身のパーツの動きに緩急をつけていくとこんな感じに

【修正前】

【修正後】

違いがおわかりいただけますでしょうか！

２．立ちポーズと攻撃モーション

次に、立ちポーズと攻撃モーションです。
ここからはほとんどが多関節2Dキャラクターモーションならではのテクニックです。

普通に立ちポーズを作るとこんな感じのポーズになるかと思います。

このポーズから攻撃モーションをした場合こんな感じになります。

これはこれで悪くはないかもしれませんが、動きが平面的でいかにも2Dアニメーションという感じがしてしまいます。

もし、パーツの左右反転が許される仕様であれば、このような立ちポーズを作ることもできます。

このポーズから攻撃モーションを作ると、このように体のひねりが動きが入ったモーションにすることができます。

では細かく解説していきます。
(正直、多関節2Dキャラクターモーションは勢いにまかせたごまかしだらけなので、こうして1フレームずつ静止画にするのはかなり恥ずかしいのですが、ここは恥をしのんで…！)

フレーム1	フレーム2	フレーム3	フレーム4
まずは立ちのポーズから構えのポーズへ移行します。ここから6フレームまではモーショントゥイーンでつないでいるだけです。
フレーム5	フレーム6	フレーム7	フレーム8
	構えのポーズです。ここまでトゥイーンです。	構えから動き出す、この瞬間に体を左右反転しています。後ろの足もこの時点で左右反転しています。この左右反転が、腰のひねりの表現になってくれます。	左右の手のパーツを、体のひねりにあわせて自然にみえるよう左右逆のものに差し替えています。このように、手よりも先に腰が動くようにすると、いわゆる“腰の入った動き”になってくれます。
フレーム9	フレーム10	フレーム11	フレーム12
胸パーツの横幅をだいぶ縮めています。胸の横幅が縮まることで、体の向きが正面から横向きに変わっているように見える錯覚を狙っています。			攻撃終わりのフレーム。ここで背中向きや真横向きなど胸パーツのバリエーションが用意してあればさしかえたいところですが…今回はパーツのバリエーションが用意されていませんので、そのままです。こうして止め絵でよーく見てしまうと不自然なのですが、実際のアニメーションの中では一瞬のことだし、目立つまいということでやってしまっています
フレーム13	フレーム14	フレーム15	フレーム16
		フレーム12〜15は攻撃の反動から戻る部分です。
フレーム17	フレーム18	フレーム19	フレーム20
フレーム15〜17は同じポーズのまま停止して、ポーズを印象づけるようにしています。	もとのポーズへ戻る動きを開始します。	先に上体を起こしてから…	足を下げるとより自然な動きになります。剣が手前を向くのを表現するため、縮小しています。
フレーム21	フレーム22	フレーム23
剣を左右反転しています。		もとのポーズにもどって終了です。