横スクロール ARPG「追憶の青」における

2D キャラクターアニメーション

〜 2D アニメの注意点とテクニック〜

グリー株式会社　アニメーションディレクター

清田 徹

自己紹介 名前：清田 徹 (1979 〜 )

経歴： FlashLite ゲーム開発者

→ アニメーションデザイナー

2010 年 グリー株式会社入社

聖戦ケルベロス

絶対防衛レヴィアタン

ドラゴンズパーティー などなど

追憶の青 ではアニメーションの実制作と監修を担当

趣味：ストリートファイター V 、ガンプラ

今日の概要

１ . 「追憶の青」のご紹介

３ . 2D アニメ制作時の注意点とテクニック

２ . プレイヤーキャラモーションの仕様解説

１ . 「追憶の青」のご紹介

まずはムービーを御覧ください

アクションにもストーリー演出にもキャラクターモーションを多用

ざっくり言うと ...

2D アニメに力を入れたゲーム！

そんな「追憶の青」の

キャラクターアニメーションについて

解説して参ります

2. プレイヤーキャラモーションの仕様解説

使用ソフト

スプライトシート

フレームレート

パーツ構成・関節構造

パーツのバリエーション

2. プレイヤーキャラモーションの仕様解説

使用ソフト

OPTPiX SpriteStudio (ver5.6)SpriteStudio の特徴

日本企業製（ WebTechnology 社）

ボーンはない

親子付け可能

IK は一応ある（追憶の青では使ってません）

メッシュはない

頂点変形可能（長方形の四隅のみ）

※ 最新バージョンにはメッシュとボーン機能が追加されるそうです

スプライトシート

1024 x 1024px

キャラクターの画像 ( スプライトシート )

画像差し替えで別キャラクターに

画像差し替えで別キャラクターに

素体はジョブ毎に用意

フレームレート

アニメーション：３０ fps( ゲーム自体は 60fps)

アニメーション：３０ fps

● 作業量が 60fps

の半分

● 容量が小さい

● 味があるといえ

ばある

● 滑らかさに欠け

る● 短い動きがわか

りづらい

パーツ構成・関節構造

パーツ数：約 40 個

体部位： 17 パーツ 揺れもの類： 19 パーツ

※ パーツ数はナイトの場合

体部位：親子付け関節構造

たくさんの部位が可動

上腕、腕、手首

腿、脛、足首

頭、腰、胸、ケツ

体部位：親子付け関節構造

関節の中心点（回転軸）の設定は超重要

足首は親子付けせず独立させている

関節の中心点 ( 回転軸 ) 設定の重要性

回転するたびに座標の調整が必要になってしま

う

回転しても絵的に違和感がない

回転軸をどこにすればよいかはケースバイケース

セットアップの時点で念入りに

確認しながらすすめたほうがよい

(左右反転した場合のことも考慮すると尚よし )

ベストな中心点 ( 回転軸 ) は ...

足首を独立させている理由足首がつながっている

ポーズをつけた後に足の接地位置を調整する手間がかかる

足首が独立

ポーズを変えても接地位置を維持できるので効率的

IK とコンストレイントがあれば

足首独立は不要 ... かもしれません

揺れもの類

揺れもの類：上下 2 パーツに分割

分割されたパーツには接合点が打ってある

接合点がずれないように頂点変形などを利用して動きを作成

上下にわかれているおかげでひるがえりを表現できる

パーツのバリエーション

素材は 3面分用意

全パーツが 3種類あるわけではない

全パーツが 3種類あるわけではない

上腕は２種類のみ

うまいこと流用している

左右反転をつかっている関係で左右非対称なデザインには制限がある

左右反転などを利用すれば 6面分の立ち姿が表現可能

一部のパーツのみ左右分のパーツを用意

左右非対称なデザインが可能に

以上

このような仕様でアニメーションを作っています

3. 2D アニメ制作時の注意点とテクニック

アニメーション初心者が作ってしまいがちなモーション ...

3. 2D アニメ制作時の注意点とテクニック

例として、このモーションを手直ししていきます

3. 2D アニメ制作時の注意点とテクニック

一旦「追憶の青」のように

3面分のパーツがない想定で

パーツ切り替えなしで手直ししていきます

(より普遍的な話になるように )

手直し その１：足と地面の関係

地面のラインを想像すると足が地面をつきぬけたり

接地位置が横に滑ったりしている

パントマイム「壁」

↓

動きだけで、ないはずの「壁」があたかも

そこにあるかのように感じさせる

一定の地点よりも

手を奥に動かさない

手を横滑りさせない

ことで「壁」があると

錯覚させられる

2D の世界には「地面」がない

↓

動きだけで、ないはずの「地面」があたかも

そこにあるかのように感じさせる

この状態を ...

修正前

このように修正足が地面と想定したラインを超えない横滑りしない

修正後

修正前 修正後

足と地面の関係をスッキリさせると

地面の存在を感じさせることができ

その地面にキャラクターが乗っている

キャラクターが「そこにいる感」が増す

手直し その１：足と地面の関係

手直し その２：動きのメリハリ

まず

大事な場面にタメを作る

少し長めにとる（ 30 fps で 3 〜 4 フレーム程度）

振り上げ 振り下げ

さらに

動きにねばりをつける

足に体重がかかっているのを想像し

足が地面から離れるのを遅らせる

剣を振ったあとの足元に注目！

修正前

剣を振ったあとの足元に注目！

修正後

修正前 修正後

動きを一定速度にせず

偏り ( タメ・ツメ ) をつくることで

大事な場面が強調され

なにをしている動作なのかが

理解しやすくなる

手直し その２：動きのメリハリ

手直し その３：ポージング

振り上げ 振り下げ

タメを作ったが、タメの瞬間の

ポーズのカッコ悪さが際立ってしまった

やる気なさそう 意志弱そう

振り上げのポーズ

修正前 肩の動きを加える 振り上げる動きを全身の伸び上がりで強調

振り下ろしのポーズ

修正前 視線を意識して首の角度を調整

肩の立体感を考慮して変形

肩の話

肩の表現の重要性

肩の位置を上げると緊張感のある表現に

肩の表現の重要性

肩の位置を上げると緊張感のある表現に

肩の表現の重要性

肩の位置を下げるとリラックスした表現に

これくらいは肩が動かせる

回転だけをつかうとうつむくほど胴体が手前にねじれて見える

うつむく時とのけぞる時の表現

胸を菱型に変形することで胴体の向きを維持

胴体の向きが自然に

修正前 修正後

視線の話

胴体の動きに頭の角度がついてきてしまうと意志のない人形のよう

「視線」を意識して頭の角度を変える

修正前 修正後

剣振り下げ時の頭の角度、体の向きに注目！

修正前

剣振り下げ時の頭の角度、体の向きに注目！

修正後

修正前 修正後

キャラクターの感情や意志を

ポージングで表現

( キャラクターに命を吹き込む )

手直し その３：ポージング

手直し その４：全体のシルエット

キャラクターの動きを

長方形のシルエットに例えると

こんな感じ

ただの長方形でも動きの大小で勢いが違って見える

もうちょい全体のシルエットを大きく変化させたほうが迫力がでるはず

もっと全体のシルエットの動きを大きくしたい

ポーズを少しずつさらに極端に

最も縦に伸びたポーズ 最も横に伸びたポーズ

伸び上がりと振り下ろし後のポーズに注目！

修正前

伸び上がりと振り下ろし後のポーズに注目！

修正後

修正前 修正後

シルエットの変化を意識してない

シルエットの変化を意識した

もうひとつサンプル

ディテールにこだわっていると

全体の迫力や印象のことを

忘れてしまいがちになるので

最後に確認

手直し その４：全体のシルエット

一旦まとめます

ここまでのまとめポージング

• 肩でキャラクターの感情を表現• 視線でキャラクターの意志を表現

全体のシルエット

• シルエットの変化を意識して伸び縮みを誇張

足元と地面の関係

• 地面を突き抜けない• 横滑りしない

動きにメリハリ

• 大事な場面でタメ• 動きにねばりをつける

では、ここからは「追憶の青」のように

パーツのバリエーションがある場合のお話

パーツのバリエーションがあれば体の「ひねり」を表現できる

パーツが全部右向き 向きがバラバラより人間的に

体の「ひねり」をつかった立体的なアニメーションが可能

パーツ切り替えが入るアニメーションを作る際に気をつけていること

パーツの切り替えが目立ってしまわない工夫が必要

胸のパーツは 前、横、後の三種類

胸のパーツの向きが変わる瞬間がカクカクして目立ってしまっている

このカクカクをなおします

それぞれのパーツが切り替わる直前に次のパーツのシルエットに

近くなるように変形をかけていく

胸と肩の動きに注目！

修正前

胸と肩の動きに注目！

修正後

パーツの切り替えタイミングが目立たなくなる

修正前 修正後

ちなみに

体の向きを変えるための作業はめんどう ...

向きをかえるすべてのパーツで

絵の変更

左右反転

描画順の変更

位置の調整

回転の調整 まだ揺れものもある ...

そこで

6 方向分のキーフレームを用意しておく

必要な向きのキーフレームを

まとめてコピペすれば作業が

圧倒的に楽になる！

コピペしたあとに座標や回転

などのキーフレームを一旦

消すと前のフレームと

なめらかにつながる

手間がかかりすぎると作業が面倒になる↓

クオリティがあがらないという事態になりかねない

手間を短縮するのは大事！

他、小ネタ紹介

頭に大きく角度をつける時は横向きの頭をつかう

頭に大きく角度をつける時は横向きの頭をつかう

なんでも回転運動ですませないで奥行きをつかった直線運動をつかう

まとめ

2D でも頭の中では立体的に動きをイメージする

目の前のパーツとばかり向き合っていると 2D の制約

にどんどんしばられていくので、まず頭の中で立体的

に動きをイメージし、それを 2D でどうすれば表現で

きるかと考えて作るのが大事

体つかってます

体つかってモーションの確認する時のポイント

顔、肩、腰、つま先の向きに注目する

体のひねり具合の確認

各部位の位置関係を確認する

肘が肩よりも上、とか腰が肩よりも右、とか

体重移動する時に腰、腕、脚のどれが先に動くかの確認

物理的な「都合」の確認

ご清聴ありがとうございました