【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜

【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜

1. 1. 横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション 〜2Dアニメの注意点とテクニック〜 グリー株式会社 アニメーションディレクター 清田 徹
2. 2. 自己紹介 名前：清田 徹 (1979〜) 経歴：FlashLiteゲーム開発者 → アニメーションデザイナー 2010年 グリー株式会社入社 聖戦ケルベロス 絶対防衛レヴィアタン ドラゴンズパーティー などなど 追憶の青 ではアニメーションの実制作と監修を担当 趣味：ストリートファイターV、ガンプラ
3. 3. 今日の概要 １.「追憶の青」のご紹介 ３. 2Dアニメ制作時の注意点とテクニック ２. プレイヤーキャラモーションの仕様解説
4. 4. １.「追憶の青」のご紹介
5. 5. まずはムービーを御覧ください
6. 6. アクションにもストーリー演出にもキャラクターモーションを多用
7. 7. ざっくり言うと... 2Dアニメに力を入れたゲーム！
8. 8. そんな「追憶の青」の キャラクターアニメーションについて 解説して参ります
9. 9. 2. プレイヤーキャラモーションの仕様解説
10. 10. 使用ソフト スプライトシート フレームレート パーツ構成・関節構造 パーツのバリエーション 2. プレイヤーキャラモーションの仕様解説
11. 11. 使用ソフト
12. 12. OPTPiX SpriteStudio (ver5.6) SpriteStudioの特徴 日本企業製（WebTechnology社） ボーンはない 親子付け可能 IKは一応ある（追憶の青では使ってません） メッシュはない 頂点変形可能（長方形の四隅のみ） ※最新バージョンにはメッシュとボーン機能が追加されるそうです
13. 13. スプライトシート
14. 14. 1024 x 1024px
15. 15. キャラクターの画像(スプライトシート)
16. 16. 画像差し替えで別キャラクターに
17. 17. 画像差し替えで別キャラクターに
18. 18. 素体はジョブ毎に用意
19. 19. フレームレート
20. 20. アニメーション：３０fps (ゲーム自体は60fps)
21. 21. アニメーション：３０fps ● 作業量が60fpsの 半分 ● 容量が小さい ● 味があるといえ ばある ● 滑らかさに欠け る ● 短い動きがわか りづらい
22. 22. パーツ構成・関節構造
23. 23. パーツ数：約40個
24. 24. 体部位：17パーツ 揺れもの類：19パーツ ※パーツ数はナイトの場合
25. 25. 体部位：親子付け関節構造 たくさんの部位が可動 上腕、腕、手首 腿、脛、足首 頭、腰、胸、ケツ
26. 26. 体部位：親子付け関節構造 関節の中心点（回転軸）の設定は超重要 足首は親子付けせず独立させている
27. 27. 関節の中心点(回転軸)設定の重要性 回転するたびに座標の 調整が必要になってしまう 回転しても絵的に 違和感がない
28. 28. 回転軸をどこにすればよいかはケースバイケース セットアップの時点で念入りに 確認しながらすすめたほうがよい (左右反転した場合のことも考慮すると尚よし) ベストな中心点(回転軸)は...
29. 29. 足首を独立させている理由 足首がつながっている ポーズをつけた後に足の接地 位置を調整する手間がかかる 足首が独立 ポーズを変えても接地位置を 維持できるので効率的
30. 30. IKとコンストレイントがあれば 足首独立は不要...かもしれません
31. 31. 揺れもの類
32. 32. 揺れもの類：上下2パーツに分割
33. 33. 分割されたパーツには接合点が打ってある
34. 34. 接合点がずれないように頂点変形などを利用して動きを作成
35. 35. 上下にわかれているおかげでひるがえりを表現できる
36. 36. パーツのバリエーション
37. 37. 素材は3面分用意
38. 38. 全パーツが3種類あるわけではない
39. 39. 全パーツが3種類あるわけではない 上腕は２種類のみ
40. 40. うまいこと流用している
41. 41. 左右反転をつかっている関係で左右非対称なデザインには制限がある 左右反転などを利用すれば 6面分の立ち姿が表現可能
42. 42. 一部のパーツのみ左右分のパーツを用意 左右非対称なデザインが可能に
43. 43. 以上 このような仕様でアニメーションを作っています
44. 44. 3. 2Dアニメ制作時の注意点とテクニック
45. 45. アニメーション初心者が作ってしまいがちなモーション... 3. 2Dアニメ制作時の注意点とテクニック
46. 46. 例として、このモーションを手直ししていきます 3. 2Dアニメ制作時の注意点とテクニック
47. 47. 一旦「追憶の青」のように 3面分のパーツがない想定で パーツ切り替えなしで手直ししていきます (より普遍的な話になるように)
48. 48. 手直し その１：足と地面の関係
49. 49. 地面のラインを想像すると 足が地面をつきぬけたり 接地位置が横に滑ったりしている
50. 50. パントマイム「壁」 ↓ 動きだけで、ないはずの「壁」があたかも そこにあるかのように感じさせる
51. 51. 一定の地点よりも 手を奥に動かさない 手を横滑りさせない ことで「壁」があると 錯覚させられる
52. 52. 2Dの世界には「地面」がない ↓ 動きだけで、ないはずの「地面」があたかも そこにあるかのように感じさせる
53. 53. この状態を... 修正前
54. 54. このように修正 足が地面と想定したラインを超えない 横滑りしない 修正後
55. 55. 修正前 修正後
56. 56. 足と地面の関係をスッキリさせると 地面の存在を感じさせることができ その地面にキャラクターが乗っている キャラクターが「そこにいる感」が増す 手直し その１：足と地面の関係
57. 57. 手直し その２：動きのメリハリ
58. 58. まず 大事な場面にタメを作る
59. 59. 少し長めにとる（30 fpsで 3〜4 フレーム程度） 振り上げ 振り下げ
60. 60. さらに 動きにねばりをつける
61. 61. 足に体重がかかっているのを想像し 足が地面から離れるのを遅らせる
62. 62. 剣を振ったあとの足元に注目！ 修正前
63. 63. 剣を振ったあとの足元に注目！ 修正後
64. 64. 修正前 修正後
65. 65. 動きを一定速度にせず 偏り(タメ・ツメ)をつくることで 大事な場面が強調され なにをしている動作なのかが 理解しやすくなる 手直し その２：動きのメリハリ
66. 66. 手直し その３：ポージング
67. 67. 振り上げ 振り下げ タメを作ったが、タメの瞬間の ポーズのカッコ悪さが際立ってしまった
68. 68. やる気なさそう 意志弱そう
69. 69. 振り上げのポーズ 修正前 肩の動きを加える 振り上げる動きを全身の 伸び上がりで強調
70. 70. 振り下ろしのポーズ 修正前 視線を意識して 首の角度を調整 肩の立体感を 考慮して変形
71. 71. 肩の話
72. 72. 肩の表現の重要性 肩の位置を上げると緊張感のある表現に
73. 73. 肩の表現の重要性 肩の位置を上げると緊張感のある表現に
74. 74. 肩の表現の重要性 肩の位置を下げるとリラックスした表現に
75. 75. これくらいは肩が動かせる
76. 76. 回転だけをつかうとうつむくほど胴体が手前にねじれて見える うつむく時とのけぞる時の表現
77. 77. 胸を菱型に変形することで胴体の向きを維持
78. 78. 胴体の向きが自然に 修正前 修正後
79. 79. 視線の話
80. 80. 胴体の動きに頭の角度が ついてきてしまうと意志のない人形のよう
81. 81. 「視線」を意識して頭の角度を変える 修正前 修正後
82. 82. 剣振り下げ時の頭の角度、体の向きに注目！ 修正前
83. 83. 剣振り下げ時の頭の角度、体の向きに注目！ 修正後
84. 84. 修正前 修正後
85. 85. キャラクターの感情や意志を ポージングで表現 (キャラクターに命を吹き込む) 手直し その３：ポージング
86. 86. 手直し その４：全体のシルエット
87. 87. キャラクターの動きを 長方形のシルエットに例えると
88. 88. こんな感じ
89. 89. ただの長方形でも動きの大小で 勢いが違って見える
90. 90. もうちょい全体のシルエットを 大きく変化させたほうが迫力がでるはず
91. 91. もっと全体のシルエットの動きを大きくしたい
92. 92. ポーズを少しずつさらに極端に 最も縦に伸びたポーズ 最も横に伸びたポーズ
93. 93. 伸び上がりと振り下ろし後のポーズに注目！ 修正前
94. 94. 伸び上がりと振り下ろし後のポーズに注目！ 修正後
95. 95. 修正前 修正後
96. 96. シルエットの変化を 意識してない シルエットの変化を 意識した もうひとつサンプル
97. 97. ディテールにこだわっていると 全体の迫力や印象のことを 忘れてしまいがちになるので 最後に確認 手直し その４：全体のシルエット
98. 98. 一旦まとめます
99. 99. ここまでのまとめ ポージング • 肩でキャラクターの感情を表現 • 視線でキャラクターの意志を表現 全体のシルエット • シルエットの変化を意識して伸び縮みを誇張 足元と地面の関係 • 地面を突き抜けない • 横滑りしない 動きにメリハリ • 大事な場面でタメ • 動きにねばりをつける
100. 100. では、ここからは「追憶の青」のように パーツのバリエーションがある場合のお話
101. 101. パーツのバリエーションがあれば 体の「ひねり」を表現できる
102. 102. パーツが全部右向き 向きがバラバラ より人間的に
103. 103. 体の「ひねり」をつかった立体的なアニメーションが可能
104. 104. パーツ切り替えが入るアニメーションを 作る際に気をつけていること
105. 105. パーツの切り替えが目立ってしまわない工夫が必要
106. 106. 胸のパーツは 前、横、後の三種類
107. 107. 胸のパーツの向きが変わる瞬間が カクカクして目立ってしまっている
108. 108. このカクカクをなおします
109. 109. それぞれのパーツが切り替わる直前に 次のパーツのシルエットに 近くなるように変形をかけていく
110. 110. 胸と肩の動きに注目！ 修正前
111. 111. 胸と肩の動きに注目！ 修正後
112. 112. パーツの切り替えタイミングが目立たなくなる 修正前 修正後
113. 113. ちなみに
114. 114. 体の向きを変えるための作業はめんどう... 向きをかえるすべてのパーツで 絵の変更 左右反転 描画順の変更 位置の調整 回転の調整 まだ揺れものもある...
115. 115. そこで
116. 116. 6方向分のキーフレームを用意しておく
117. 117. 必要な向きのキーフレームを まとめてコピペすれば作業が 圧倒的に楽になる！ コピペしたあとに座標や回転 などのキーフレームを一旦 消すと前のフレームと なめらかにつながる
118. 118. 手間がかかりすぎると作業が面倒になる ↓ クオリティがあがらないという事態になりかねない 手間を短縮するのは大事！
119. 119. 他、小ネタ紹介
120. 120. 頭に大きく角度をつける時は横向きの頭をつかう
121. 121. 頭に大きく角度をつける時は横向きの頭をつかう
122. 122. なんでも回転運動ですませないで 奥行きをつかった直線運動をつかう
123. 123. まとめ
124. 124. 2Dでも頭の中では立体的に動きをイメージする 目の前のパーツとばかり向き合っていると2Dの制約に どんどんしばられていくので、まず頭の中で立体的に 動きをイメージし、それを2Dでどうすれば表現できる かと考えて作るのが大事
125. 125. 体つかってます
126. 126. 体つかってモーションの確認する時のポイント 顔、肩、腰、つま先の向きに注目する 体のひねり具合の確認 各部位の位置関係を確認する 肘が肩よりも上、とか腰が肩よりも右、とか 体重移動する時に腰、腕、脚のどれが先に動くかの確認 物理的な「都合」の確認
127. 127. ご清聴ありがとうございました