個性的で魅力的なモンスターを量産するためのデザインの秘訣と開発手法紹介 ～プリンセスコネクト！Re:Diveにおけるモンスターデザイン制作事例～

2019/09/05 CEDEC 2019

Transcript

1. 1/136
2. 自己紹介 イラストチーム 2015年に新卒として株式会社Cygamesに所属。 「プリンセスコネクト！」に配属。 現在は、「プリンセスコネクト！Re:Dive」にて モンスターチームのリーダーを担当。 野西 正武 2/136
3. 自己紹介 アニメーションデザイナー 2014年Cygamesに合流。 現在は「プリンセスコネクト！Re:Dive」において、 絵コンテ、モーション監修、エフェクト制作等 を担当。 高 泰俊 3/136
4. はじめに ▪プリンセスコネクトRe:Dive（以降、プリコネ）について 前作の『プリンセスコネクト』から大きく進化したアニメRPG 様々な要素が新たに追加 • 魅力的なキャラクター＆モーション • ド派手なカットイン演出 • ストーリーアニメ 等 4/136
5. プリコネにおけるモンスターの役割 ▪バトルの特徴を作り出す要素 5/136
6. プリコネにおけるモンスターの役割 ▪世界観を作り出す要素 6/136
7. プリコネにおけるモンスターの役割 ▪ノーマルクエスト、クランバトル、ストーリーイベント、ルナの塔 etc. 7/136
8. 合計 200体以上 リリースしていないものを含めるとそれ以上に… 8/136
9. 課題 9/136
10. クオリティと量産の両立 10/136
11. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 11/136
12. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 12/136
13. プランナー イラスト プランナー アニメーション イラスト アニメーション アニメーション 発注書 デザイン 字コンテ モーション 切り分け/追加パーツ 絵コンテ エフェクト モンスターの基本制作フロー 13/136
14. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 14/136
15. 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 15/136
16. 16/136 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ
17. 世界観 17/136
18. ▪モンスターの知能レベル 低 高 世界観 18/136
19. 世界観 夏イベントボス:テンタパス ▪モンスターの生態や背景を大事に 19/136
20. 【発注内容】 世界観 ・海のイベントボスでイカ型 ・バカンスを邪魔してキャラを攫う ・既に海に登場するモンスターと差別化 ・モーションにバリエーションを出す 夏イベントボス:テンタパス ▪モンスターの生態や背景を大事に 20/136
21. 全身傷だらけ 喧嘩に明け暮れている ウツボを 振り回す乱暴者 身についている 武器は歴戦の証 ピアスの様に拾ったものをつけている 世界観 ▪モンスターの生態や背景を大事に 21/136
22. キャラクターを攫っていたり↑ モーションの バリエーション→ 世界観 ▪モンスターの生態や背景を大事に 22/136
23. 世界観 ザコモンスター:エルダークラウド ボスモンスター:ライライ ▪モンスターの関係性を大事に 23/136
24. ▪モンスターの知能レベル 知能レベルに合わせて身に着けている物のデザインを差別化する 【世界観】まとめ ▪モンスターの生態や背景を大事に デザインから生態や背景が伝わってくるようにする ▪モンスター同士の関係性を大事に 既に登場しているモンスターと関係性を組むと世界観に深みが出る 24/136
25. 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 25/136
26. わかりやすいデザイン ▪わかりやすいモチーフ ▪ぱっと見での役割の把握 モチーフ：岩 役割：防御タイプ モチーフ：魔術師 役割：魔法タイプ 26/136
27. ▪攻撃部位の強調 ▪要素は二つに絞る！ 恐竜 電気 深海魚 恐竜 電気 水 〇：シンプルに！ ×：わかりにくい！ わかりやすいデザイン 27/136
28. 【わかりやすいデザイン】まとめ ▪わかりやすいデザインを わかりやすいモチーフ、パッと見で伝わるデザインを ▪特徴の強調、盛りすぎない 攻撃部位の強調、要素を二つに絞る 28/136
29. 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 29/136
30. アイディアラフ ▪とにかく沢山のアイディアを出すこと。 ▪アイディアラフを整理したり、合わせたり。 30/136
31. テーマ：森、カンテラ アイディアラフ 31/136
32. アイディアラフ テーマ：森、カンテラ 32/136
33. アイディアをブラッシュアップ アイディアラフ テーマ：森、カンテラ 33/136
34. ①ラフ案だし ②方向性探り ③デザイン詰め ④清書/完成 ボスはさらに多い！ アイディアラフ 34/136
35. 動くことを前提にデザインしていく 35/136
36. デザイン完成後も動きのチェック！ 36/136
37. 【アイディアラフ】まとめ ▪テーマに基づき沢山のアイディアを出す！ どんな種族？どんな性格？どんな攻撃方法？ 島クジラ ▪動くことを前提にデザインしていく 37/136
38. 【1】世界観を大事に 【2】わかりやすさ 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 38/136
39. ユニークな要素 ▪モチーフの組み合わせ ▪変わった要素を取り入れる 分福茶釜＋狸 蟹＋鉄球 風船＋鳥 39/136
40. ▪ライデン 敗北時：メスが去ってしまう ▪アニメーションによるキャラ付け ユニークな要素 40/136
41. ▪エレクトロギガス 敗北時：頭がアフロになってしまう ユニークな要素 ▪アニメーションによるキャラ付け 41/136
42. 【クオリティ面のノウハウ】まとめ クオリティ 世界観 ・モンスターの知能レベル ・モンスターの生態や背景を大事に ・モンスター同士の関係性を大事に ・わかりやすいデザインを ・攻撃部位の強調、要素を二つに絞る アイディアラフ ・面白いデザインを出す為には まず沢山のアイディア ・動くことを前提にデザインしていく ユニークな要素 ・モチーフの組み合わせ ・変わった要素を取り入れる ・アニメーションによるキャラ付け 42/136 わかりやすいデザイン
43. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】まとめ 目次 43/136
44. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 44/136
45. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 45/136
46. デザインルールの設定 役割 強さ 属性 デザインルール 46/136
47. デザインルールの設定 役割 強さ 属性 デザインルール 迷わない 時間短縮に繋がる 47/136
48. ▪モンスターの役割 前衛 中衛 後衛 デザインルールの設定 48/136
49. 前衛：壁役、HP高めのモンスター ▪モンスターの役割 デザインルールの設定 49/136
50. ▪モンスターの役割 後衛：最も長距離型の遠距離タイプ 一番後ろで特定の場所、キャラに攻撃を仕掛ける デザインルールの設定 50/136
51. ▪雑魚モンスターの役割 中衛：前衛の後ろに隠れて行動をする厄介なモンスター 特殊な動きをする幅広いモンスターがいる デザインルールの設定 51/136
52. ▪モンスターの役割 物理 魔法 デザインルールの設定 52/136
53. ▪モンスターの役割 ザコ ボス デザインルールの設定 53/136
54. ▪強さの基準 ザコ ベースカラー：3色 デザイン：シンプル ボス ベースカラー：５色 デザイン：複雑 デザインルールの設定 54/136
55. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 55/136
56. 側替え 側替え/色替え ▪側替え、色替えで時間短縮 ▪大切なのは差別化 色替え 側替え 56/136
57. オーク ハイオーク オークリーダー オークチーフ 側替え手法① ▪変わっていく強さ 弱 強 57/136
58. 弱 強 側替え手法② ▪変わっていく強さ 58/136 オーク ハイオーク オークリーダー オークチーフ
59. 洞窟 岩地 火山 森林 側替え手法② ▪同じ強さ/地域違い 59/136
60. 色替えについて ▪大きく色を変えること ▪強さのランクを考えながら色案を出す 元のデザイン 60/136
61. 色替えについて ▪強さのランクを考えながら色案を出す 暗い色 金色 61/136
62. 強 弱 色替えについて ▪強さのランクを考えながら色案を出す 元のデザイン 62/136
63. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 63/136
64. ▪宗教的や文化的に不適切なもの 例：中国国内では出版物、ソフトウェアはドクロの表現は不適切となっている。 なので、中国版では骨類はデザイン修正を行っている。 不適切な表現の回避 64/136
65. ▪宗教的や文化的に不適切なもの 例：CEROレーティングの対象となる暴力表現 ・出血描写 ・身体の分離/欠損描写 ・死体の描写etc. 人型のモンスターで 指の数が4本 5本に修正 不適切な表現の回避 65/136
66. 【量産面のノウハウ】まとめ 量産 デザインルールの設定 ・ルールを決めて時間短縮を ・モンスターの役割の把握 側替え/色替え ・デザイン変更のみで時間短縮 ・側替えはデザインを変える ・色替えは色のみを変える 不適切な表現の回避 ・不適切な表現は避ける ・海外で不適切な表現になってしまう ものも把握しておく 66/136
67. デザインパートまとめ 67/136
68. クオリティと量産の両立 プリコネのモンスターを作るうえでの課題 【デザインパート】まとめ 68/136
69. 【デザインパート】まとめ クオリティ面のノウハウ 量産面のノウハウ 【1】デザインルールを定める 【2】側替えや色替えについて 【3】不適切な表現の回避 【1】世界観 【2】わかりやすさ 【3】アイディアラフを沢山出す 【4】ユニークな要素 69/136
70. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ紹介 【3】量産面のノウハウ紹介 【4】アニメーション制作について 【5】最後に 目次 70/136
71. アニメーションパート 71/136
72. 「絵コンテ」を軸に、 アニメーション制作について ご紹介します 72/136
73. プランナー イラスト プランナー アニメーション イラスト アニメーション アニメーション 発注書 デザイン 字コンテ モーション 切り分け/追加パーツ 絵コンテ エフェクト 73/136 モンスターの基本制作フロー（再掲）
74. モンスターの基本制作フロー（再掲） プランナー イラスト プランナー イラスト 発注書 デザイン 字コンテ モーション 切り分け/追加パーツ 絵コンテ エフェクト アニメーション アニメーション アニメーション 74/136
75. モーションパートを動画で紹介 75/136
76. 絵コンテ ▪絵＋指示文 ・尺 ・カメラ ・内容 ・追加パーツ (etc...) 76/136
77. 使用ツール ▪モーション Spine (2Dアニメ制作ツール) ▪エフェクト UnityのParticle System 77/136
78. 絵コンテ制作の流れ 78/136
79. モーション発注ミーティング ▪「字コンテ」をもとに、プランナー、イラストレーター、アニメーション デザイナーの三者でミーティング 字コンテ 79/136
80. ・新規性のあるデザインを目立たせたい！ ・このモチーフをギミックに取り入れたい！ ・対策必須な技の前に予兆を入れたい！ ・高難度バトル専用の演出を入れたい！ モーション発注ミーティング 仕様面 デザイン面 ▪「字コンテ」をもとに、プランナー、イラストレーター、アニメーション デザイナーの三者でミーティング 80/136
81. 仕様への最適化 絵コンテ設計の軸 物量の最適化 ビジュアルの最適化 ・情報の整理 ・シルエット ・レイアウト ・絵のインパクトを保ったまま物量を抑える ・新しい「技」が再現可能か検討 ・欲しい機能、汎用性のある機能実装の提案 81/136
82. 仕様への最適化 絵コンテ設計の軸 物量の最適化 ビジュアルの最適化 ・情報の整理 ・シルエット ・レイアウト ・絵のインパクトを保ったまま物量を抑える ・新しい「技」が再現可能か検討 ・欲しい機能、汎用性のある機能実装の提案 82/136
83. 【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 83/136
84. 情報の整理 -最初の作業- 84/136
85. 「情報の整理」＝「文字情報の変換」 字コンテの文字情報 絵コンテにしやすい文字情報 ・展開１（0.5秒） ・展開２（1秒） ・展開３（0.5秒） ・展開４（1秒） ・展開５（1秒） ---必殺技--- ▪「字コンテ」の文字情報を「絵コンテ」にしやすい文字情報に変換する 85/136
86. 「情報の整理」の目的 ・展開１（0.5秒） ・展開２（1秒） ・展開３（0.5秒） ・展開４（1秒） ・展開４（1秒） ---必殺技1--- 【1】動作工程のバランスを整え展開をわかりやすくすること 【2】動作の尺を適正な長さにすること 86/136
87. 各動作を「タメ」「発動」「余韻」に分ける バランス、過不足を調整する 情報の整理①：文字情報の変換 ▪具体的な方法 【1】 【2】 「タメ＝予備動作」 「発動」 「余韻」 87/136
88. 「情報の整理」の目的 ・展開１（0.5秒） ・展開２（1秒） ・展開３（0.5秒） ・展開４（1秒） ・展開４（1秒） ---必殺技1--- 【1】動作工程のバランスを整え展開をわかりやすくすること 【2】動作の尺を適正な長さにすること 「テンタパス」 88/136
89. ▪暗転＋ボスモンスター以外すべて動作が停止 必殺技：ユニオンバーストとは 89/136
90. 1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】 変換前 情報の整理①：文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 90/136
91. 1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】 変換前 情報の整理①：文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 91/136
92. 1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】 1. 触手を振り上げる【タメ】 2. 往復ビンタ【発動】 3. 身体の槍を引き抜き構える【タメ】 4. 槍でとどめの一撃【発動】 5. 元の位置に戻る【余韻】 変換前 変換後 情報の整理①：文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 92/136
93. 【1】整理した動作工程に「尺」を割り当てる 【2】「テンポ感」「迫力」チェック 情報の整理②：尺の割り当て 1.触手を振り上げる【タメ】 2.触手で往復ビンタ【発動】 3.身体の槍を引き抜く【タメ】 4.槍でとどめの一撃【発動】 5.元の位置に戻す【余韻】 変換後 ・・・・ ・・・・ ・・・ ・・・・ ・・・・ 0.5秒 1.5秒 1秒 1秒 1秒 93/136
94. 94/xx
95. モチーフの持つ情報量の差に注意する ▪「尺」に大きく影響する 目からビーム ライオンのオーラ ＜ 95/136
96. 情報量の大小に注意！ ▪「モチーフ」の持つ情報量の差を考慮する 96/136 目からビーム ライオンのオーラ ＜
97. 情報の整理 まとめ ・各動作を「タメ」「発動」「余韻」分ける ・過不足を調整する ・整理した動作工程に尺を割り当てる ・「テンポ感」「迫力」チェック ※モチーフの持つ情報量の差に気をつける！ 文字情報の変換 尺の割り当て 97/136
98. 【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 98/136
99. シルエット -瞬間の視認性を上げる- 99/136
100. 初動のシルエットに差をつける Attack Skill2 Skill1 Damage 100/136
101. 初動のシルエットに差をつける ▪特にダメージとの差を意識する Attack Skill2 Skill1 Damage 101/136
102. Attack Skill2 Skill1 Damage ▪塗りつぶして確認する 初動のシルエットに差をつける 102/136
103. 初動のシルエットが類似する場合の対処 Skill2 Damage ▪初動に後傾姿勢の「タメ」モーションが入るパターン 103/136
104. 初動のシルエットが類似する場合の対処 Skill2 Damage 「尺」「テンポ」「エフェクト」 「全体の雰囲気」等 総合的に判断 104/136
105. Skill2 Damage 初動のシルエットが類似する場合の対処 105/136
106. １撃目 ２撃目 ３撃目 攻撃部位を「誇張」する 106/136
107. 攻撃部位を「誇張」する ▪黒く塗りつぶして確認する 107/136
108. 攻撃部位を「誇張」する 108/136
109. 109/xx
110. 【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 110/136
111. レイアウト -画面に変化を加える絵作り- 111/136
112. ユニオンバーストで使える３つの機能 112/136
113. 絵コンテは「広がり」「奥行き」「方向」を意識 カメラワーク 場の変更 カットチェンジ ユニオンバーストで使える３つの機能 113/136
114. 絵コンテ実例：「広がり」「奥行き」「方向」 114/136
115. 115/xx
116. 構造の複雑化に耐えうる絵コンテを目指す モーションデータ 完成形 116/136
117. 完成形のイメージを明確に伝える 情報の整理 • 文字情報の変換 • 尺の割り当て シルエット • 初動に差をつける • 攻撃部位の誇張 レイアウト • カメラワーク • 場の変更 • カットチェンジ ▪ビジュアルの最適化 117/136
118. 実際の制作現場における 絵コンテの役割 118/136
119. 実制作における絵コンテの役割 絶対に守らなければならない決まりごと 「質の高いコミュニケーション」の媒体 119/136
120. 実制作における絵コンテの役割 担当者間のチームワークで プリコネのモンスター演出は成り立っています 120/136
121. 最後に 121/136
122. 振り返り 【アニメーション制作について】 【1】情報の整理 【2】シルエット 【3】レイアウト 【量産面のノウハウ】 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 【クオリティ面のノウハウ】 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 122/136
123. 最後に モンスターチームは プリコネが大好きです！ 123/136