Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Cygames
September 05, 2019

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

2019/09/05 CEDEC 2019

Cygames

September 05, 2019
Tweet

More Decks by Cygames

Other Decks in Technology

Transcript

  1. 自己紹介
    イラストチーム
    2015年に新卒として株式会社Cygamesに所属。
    「プリンセスコネクト!」に配属。
    現在は、「プリンセスコネクト!Re:Dive」にて
    モンスターチームのリーダーを担当。
    野西 正武
    2/136

    View full-size slide

  2. 自己紹介
    アニメーションデザイナー
    2014年Cygamesに合流。
    現在は「プリンセスコネクト!Re:Dive」において、
    絵コンテ、モーション監修、エフェクト制作等
    を担当。
    高 泰俊
    3/136

    View full-size slide

  3. はじめに
    ■プリンセスコネクトRe:Dive(以降、プリコネ)について
    前作の『プリンセスコネクト』から大きく進化したアニメRPG
    様々な要素が新たに追加
    • 魅力的なキャラクター&モーション
    • ド派手なカットイン演出
    • ストーリーアニメ 等
    4/136

    View full-size slide

  4. プリコネにおけるモンスターの役割
    ■バトルの特徴を作り出す要素
    5/136

    View full-size slide

  5. プリコネにおけるモンスターの役割
    ■世界観を作り出す要素
    6/136

    View full-size slide

  6. プリコネにおけるモンスターの役割
    ■ノーマルクエスト、クランバトル、ストーリーイベント、ルナの塔
    etc.
    7/136

    View full-size slide

  7. 合計
    200体以上
    リリースしていないものを含めるとそれ以上に…
    8/136

    View full-size slide

  8. クオリティと量産の両立
    10/136

    View full-size slide

  9. 【1】モンスターの基本制作フロー
    【2】クオリティ面のノウハウ
    【3】量産面のノウハウ
    【4】アニメーション制作について
    【5】最後に
    目次
    11/136

    View full-size slide

  10. 【1】モンスターの基本制作フロー
    【2】クオリティ面のノウハウ
    【3】量産面のノウハウ
    【4】アニメーション制作について
    【5】最後に
    目次
    12/136

    View full-size slide

  11. プランナー
    イラスト
    プランナー
    アニメーション
    イラスト
    アニメーション
    アニメーション
    発注書
    デザイン
    字コンテ
    モーション
    切り分け/追加パーツ
    絵コンテ
    エフェクト
    モンスターの基本制作フロー
    13/136

    View full-size slide

  12. 【1】モンスターの基本制作フロー
    【2】クオリティ面のノウハウ
    【3】量産面のノウハウ
    【4】アニメーション制作について
    【5】最後に
    目次
    14/136

    View full-size slide

  13. 【1】世界観
    【2】わかりやすいデザイン
    【3】アイディアラフ
    【4】ユニークな要素
    クオリティ面のノウハウ
    15/136

    View full-size slide

  14. 16/136
    【1】世界観
    【2】わかりやすいデザイン
    【3】アイディアラフ
    【4】ユニークな要素
    クオリティ面のノウハウ

    View full-size slide

  15. 世界観
    17/136

    View full-size slide

  16. ■モンスターの知能レベル
    低 高
    世界観
    18/136

    View full-size slide

  17. 世界観
    夏イベントボス:テンタパス
    ■モンスターの生態や背景を大事に
    19/136

    View full-size slide

  18. 【発注内容】
    世界観
    ・海のイベントボスでイカ型
    ・バカンスを邪魔してキャラを攫う
    ・既に海に登場するモンスターと差別化
    ・モーションにバリエーションを出す
    夏イベントボス:テンタパス
    ■モンスターの生態や背景を大事に
    20/136

    View full-size slide

  19. 全身傷だらけ
    喧嘩に明け暮れている
    ウツボを
    振り回す乱暴者
    身についている
    武器は歴戦の証
    ピアスの様に拾ったものをつけている
    世界観
    ■モンスターの生態や背景を大事に
    21/136

    View full-size slide

  20. キャラクターを攫っていたり↑
    モーションの
    バリエーション→
    世界観
    ■モンスターの生態や背景を大事に
    22/136

    View full-size slide

  21. 世界観
    ザコモンスター:エルダークラウド ボスモンスター:ライライ
    ■モンスターの関係性を大事に
    23/136

    View full-size slide

  22. ■モンスターの知能レベル
    知能レベルに合わせて身に着けている物のデザインを差別化する
    【世界観】まとめ
    ■モンスターの生態や背景を大事に
    デザインから生態や背景が伝わってくるようにする
    ■モンスター同士の関係性を大事に
    既に登場しているモンスターと関係性を組むと世界観に深みが出る
    24/136

    View full-size slide

  23. 【1】世界観
    【2】わかりやすいデザイン
    【3】アイディアラフ
    【4】ユニークな要素
    クオリティ面のノウハウ
    25/136

    View full-size slide

  24. わかりやすいデザイン
    ■わかりやすいモチーフ
    ■ぱっと見での役割の把握
    モチーフ:岩
    役割:防御タイプ
    モチーフ:魔術師
    役割:魔法タイプ
    26/136

    View full-size slide

  25. ■攻撃部位の強調
    ■要素は二つに絞る! 恐竜
    電気
    深海魚
    恐竜
    電気

    〇:シンプルに!
    ×:わかりにくい!
    わかりやすいデザイン
    27/136

    View full-size slide

  26. 【わかりやすいデザイン】まとめ
    ■わかりやすいデザインを
    わかりやすいモチーフ、パッと見で伝わるデザインを
    ■特徴の強調、盛りすぎない
    攻撃部位の強調、要素を二つに絞る
    28/136

    View full-size slide

  27. 【1】世界観
    【2】わかりやすいデザイン
    【3】アイディアラフ
    【4】ユニークな要素
    クオリティ面のノウハウ
    29/136

    View full-size slide

  28. アイディアラフ
    ■とにかく沢山のアイディアを出すこと。
    ■アイディアラフを整理したり、合わせたり。
    30/136

    View full-size slide

  29. テーマ:森、カンテラ
    アイディアラフ
    31/136

    View full-size slide

  30. アイディアラフ
    テーマ:森、カンテラ
    32/136

    View full-size slide

  31. アイディアをブラッシュアップ
    アイディアラフ
    テーマ:森、カンテラ
    33/136

    View full-size slide

  32. ①ラフ案だし ②方向性探り ③デザイン詰め ④清書/完成
    ボスはさらに多い!
    アイディアラフ
    34/136

    View full-size slide

  33. 動くことを前提にデザインしていく
    35/136

    View full-size slide

  34. デザイン完成後も動きのチェック!
    36/136

    View full-size slide

  35. 【アイディアラフ】まとめ
    ■テーマに基づき沢山のアイディアを出す!
    どんな種族?どんな性格?どんな攻撃方法?
    島クジラ
    ■動くことを前提にデザインしていく
    37/136

    View full-size slide

  36. 【1】世界観を大事に
    【2】わかりやすさ
    【3】アイディアラフ
    【4】ユニークな要素
    クオリティ面のノウハウ
    38/136

    View full-size slide

  37. ユニークな要素
    ■モチーフの組み合わせ
    ■変わった要素を取り入れる
    分福茶釜+狸 蟹+鉄球 風船+鳥
    39/136

    View full-size slide

  38. ■ライデン
    敗北時:メスが去ってしまう
    ■アニメーションによるキャラ付け
    ユニークな要素
    40/136

    View full-size slide

  39. ■エレクトロギガス
    敗北時:頭がアフロになってしまう
    ユニークな要素
    ■アニメーションによるキャラ付け
    41/136

    View full-size slide

  40. 【クオリティ面のノウハウ】まとめ
    クオリティ
    世界観
    ・モンスターの知能レベル
    ・モンスターの生態や背景を大事に
    ・モンスター同士の関係性を大事に
    ・わかりやすいデザインを
    ・攻撃部位の強調、要素を二つに絞る
    アイディアラフ
    ・面白いデザインを出す為には
    まず沢山のアイディア
    ・動くことを前提にデザインしていく
    ユニークな要素
    ・モチーフの組み合わせ
    ・変わった要素を取り入れる
    ・アニメーションによるキャラ付け
    42/136
    わかりやすいデザイン

    View full-size slide

  41. 【1】モンスターの基本制作フロー
    【2】クオリティ面のノウハウ
    【3】量産面のノウハウ
    【4】アニメーション制作について
    【5】まとめ
    目次
    43/136

    View full-size slide

  42. 【1】デザインルールの設定
    【2】側替え/色替え
    【3】不適切な表現の回避
    量産面のノウハウ
    44/136

    View full-size slide

  43. 【1】デザインルールの設定
    【2】側替え/色替え
    【3】不適切な表現の回避
    量産面のノウハウ
    45/136

    View full-size slide

  44. デザインルールの設定
    役割 強さ
    属性
    デザインルール
    46/136

    View full-size slide

  45. デザインルールの設定
    役割 強さ
    属性
    デザインルール
    迷わない
    時間短縮に繋がる
    47/136

    View full-size slide

  46. ■モンスターの役割
    前衛 中衛 後衛
    デザインルールの設定
    48/136

    View full-size slide

  47. 前衛:壁役、HP高めのモンスター
    ■モンスターの役割
    デザインルールの設定
    49/136

    View full-size slide

  48. ■モンスターの役割
    後衛:最も長距離型の遠距離タイプ
    一番後ろで特定の場所、キャラに攻撃を仕掛ける
    デザインルールの設定
    50/136

    View full-size slide

  49. ■雑魚モンスターの役割
    中衛:前衛の後ろに隠れて行動をする厄介なモンスター
    特殊な動きをする幅広いモンスターがいる
    デザインルールの設定
    51/136

    View full-size slide

  50. ■モンスターの役割
    物理 魔法
    デザインルールの設定
    52/136

    View full-size slide

  51. ■モンスターの役割
    ザコ ボス
    デザインルールの設定
    53/136

    View full-size slide

  52. ■強さの基準
    ザコ ベースカラー:3色
    デザイン:シンプル
    ボス ベースカラー:5色
    デザイン:複雑
    デザインルールの設定
    54/136

    View full-size slide

  53. 【1】デザインルールの設定
    【2】側替え/色替え
    【3】不適切な表現の回避
    量産面のノウハウ
    55/136

    View full-size slide

  54. 側替え
    側替え/色替え
    ■側替え、色替えで時間短縮
    ■大切なのは差別化
    色替え
    側替え
    56/136

    View full-size slide

  55. オーク ハイオーク オークリーダー オークチーフ
    側替え手法①
    ■変わっていく強さ
    弱 強
    57/136

    View full-size slide

  56. 弱 強
    側替え手法②
    ■変わっていく強さ
    58/136
    オーク ハイオーク オークリーダー オークチーフ

    View full-size slide

  57. 洞窟
    岩地
    火山
    森林
    側替え手法②
    ■同じ強さ/地域違い
    59/136

    View full-size slide

  58. 色替えについて
    ■大きく色を変えること
    ■強さのランクを考えながら色案を出す
    元のデザイン
    60/136

    View full-size slide

  59. 色替えについて
    ■強さのランクを考えながら色案を出す
    暗い色 金色
    61/136

    View full-size slide



  60. 色替えについて
    ■強さのランクを考えながら色案を出す
    元のデザイン
    62/136

    View full-size slide

  61. 【1】デザインルールの設定
    【2】側替え/色替え
    【3】不適切な表現の回避
    量産面のノウハウ
    63/136

    View full-size slide

  62. ■宗教的や文化的に不適切なもの
    例:中国国内では出版物、ソフトウェアはドクロの表現は不適切となっている。
    なので、中国版では骨類はデザイン修正を行っている。
    不適切な表現の回避
    64/136

    View full-size slide

  63. ■宗教的や文化的に不適切なもの
    例:CEROレーティングの対象となる暴力表現
    ・出血描写
    ・身体の分離/欠損描写
    ・死体の描写etc.
    人型のモンスターで
    指の数が4本
    5本に修正
    不適切な表現の回避
    65/136

    View full-size slide

  64. 【量産面のノウハウ】まとめ
    量産
    デザインルールの設定
    ・ルールを決めて時間短縮を
    ・モンスターの役割の把握
    側替え/色替え
    ・デザイン変更のみで時間短縮
    ・側替えはデザインを変える
    ・色替えは色のみを変える
    不適切な表現の回避
    ・不適切な表現は避ける
    ・海外で不適切な表現になってしまう
    ものも把握しておく
    66/136

    View full-size slide

  65. デザインパートまとめ
    67/136

    View full-size slide

  66. クオリティと量産の両立
    プリコネのモンスターを作るうえでの課題
    【デザインパート】まとめ
    68/136

    View full-size slide

  67. 【デザインパート】まとめ
    クオリティ面のノウハウ 量産面のノウハウ
    【1】デザインルールを定める
    【2】側替えや色替えについて
    【3】不適切な表現の回避
    【1】世界観
    【2】わかりやすさ
    【3】アイディアラフを沢山出す
    【4】ユニークな要素
    69/136

    View full-size slide

  68. 【1】モンスターの基本制作フロー
    【2】クオリティ面のノウハウ紹介
    【3】量産面のノウハウ紹介
    【4】アニメーション制作について
    【5】最後に
    目次
    70/136

    View full-size slide

  69. アニメーションパート
    71/136

    View full-size slide

  70. 「絵コンテ」を軸に、
    アニメーション制作について
    ご紹介します
    72/136

    View full-size slide

  71. プランナー
    イラスト
    プランナー
    アニメーション
    イラスト
    アニメーション
    アニメーション
    発注書
    デザイン
    字コンテ
    モーション
    切り分け/追加パーツ
    絵コンテ
    エフェクト
    73/136
    モンスターの基本制作フロー(再掲)

    View full-size slide

  72. モンスターの基本制作フロー(再掲)
    プランナー
    イラスト
    プランナー
    イラスト
    発注書
    デザイン
    字コンテ
    モーション
    切り分け/追加パーツ
    絵コンテ
    エフェクト
    アニメーション
    アニメーション
    アニメーション
    74/136

    View full-size slide

  73. モーションパートを動画で紹介
    75/136

    View full-size slide

  74. 絵コンテ
    ■絵+指示文
    ・尺
    ・カメラ
    ・内容
    ・追加パーツ
    (etc...)
    76/136

    View full-size slide

  75. 使用ツール
    ■モーション
    Spine (2Dアニメ制作ツール)
    ■エフェクト
    UnityのParticle System
    77/136

    View full-size slide

  76. 絵コンテ制作の流れ
    78/136

    View full-size slide

  77. モーション発注ミーティング
    ■「字コンテ」をもとに、プランナー、イラストレーター、アニメーション
    デザイナーの三者でミーティング
    字コンテ
    79/136

    View full-size slide

  78. ・新規性のあるデザインを目立たせたい!
    ・このモチーフをギミックに取り入れたい!
    ・対策必須な技の前に予兆を入れたい!
    ・高難度バトル専用の演出を入れたい!
    モーション発注ミーティング
    仕様面
    デザイン面
    ■「字コンテ」をもとに、プランナー、イラストレーター、アニメーション
    デザイナーの三者でミーティング
    80/136

    View full-size slide

  79. 仕様への最適化
    絵コンテ設計の軸
    物量の最適化
    ビジュアルの最適化
    ・情報の整理
    ・シルエット
    ・レイアウト
    ・絵のインパクトを保ったまま物量を抑える
    ・新しい「技」が再現可能か検討
    ・欲しい機能、汎用性のある機能実装の提案
    81/136

    View full-size slide

  80. 仕様への最適化
    絵コンテ設計の軸
    物量の最適化
    ビジュアルの最適化
    ・情報の整理
    ・シルエット
    ・レイアウト
    ・絵のインパクトを保ったまま物量を抑える
    ・新しい「技」が再現可能か検討
    ・欲しい機能、汎用性のある機能実装の提案
    82/136

    View full-size slide

  81. 【1】情報の整理
    【2】シルエット
    【3】レイアウト
    ビジュアルの最適化
    83/136

    View full-size slide

  82. 情報の整理
    -最初の作業-
    84/136

    View full-size slide

  83. 「情報の整理」=「文字情報の変換」
    字コンテの文字情報 絵コンテにしやすい文字情報
    ・展開1(0.5秒)
    ・展開2(1秒)
    ・展開3(0.5秒)
    ・展開4(1秒)
    ・展開5(1秒)
    ---必殺技---
    ■「字コンテ」の文字情報を「絵コンテ」にしやすい文字情報に変換する
    85/136

    View full-size slide

  84. 「情報の整理」の目的
    ・展開1(0.5秒)
    ・展開2(1秒)
    ・展開3(0.5秒)
    ・展開4(1秒)
    ・展開4(1秒)
    ---必殺技1---
    【1】動作工程のバランスを整え展開をわかりやすくすること
    【2】動作の尺を適正な長さにすること
    86/136

    View full-size slide

  85. 各動作を「タメ」「発動」「余韻」に分ける
    バランス、過不足を調整する
    情報の整理①:文字情報の変換
    ■具体的な方法
    【1】
    【2】
    「タメ=予備動作」 「発動」 「余韻」
    87/136

    View full-size slide

  86. 「情報の整理」の目的
    ・展開1(0.5秒)
    ・展開2(1秒)
    ・展開3(0.5秒)
    ・展開4(1秒)
    ・展開4(1秒)
    ---必殺技1---
    【1】動作工程のバランスを整え展開をわかりやすくすること
    【2】動作の尺を適正な長さにすること
    「テンタパス」
    88/136

    View full-size slide

  87. ■暗転+ボスモンスター以外すべて動作が停止
    必殺技:ユニオンバーストとは
    89/136

    View full-size slide

  88. 1. 触手で往復ビンタ【発動】
    2. 身体の槍を引き抜き、天高く投げる【タメ】
    3. 落ちてきた槍が地面に刺さり爆発【発動】
    4. 雄叫びをあげる【余韻】
    5. 元の位置に戻る【余韻】
    変換前
    情報の整理①:文字情報の変換
    【1】各動作を「タメ」「発動」「余韻」に分ける
    【2】過不足を調整する
    90/136

    View full-size slide

  89. 1. 触手で往復ビンタ【発動】
    2. 身体の槍を引き抜き、天高く投げる【タメ】
    3. 落ちてきた槍が地面に刺さり爆発【発動】
    4. 雄叫びをあげる【余韻】
    5. 元の位置に戻る【余韻】
    変換前
    情報の整理①:文字情報の変換
    【1】各動作を「タメ」「発動」「余韻」に分ける
    【2】過不足を調整する
    91/136

    View full-size slide

  90. 1. 触手で往復ビンタ【発動】
    2. 身体の槍を引き抜き、天高く投げる【タメ】
    3. 落ちてきた槍が地面に刺さり爆発【発動】
    4. 雄叫びをあげる【余韻】
    5. 元の位置に戻る【余韻】
    1. 触手を振り上げる【タメ】
    2. 往復ビンタ【発動】
    3. 身体の槍を引き抜き構える【タメ】
    4. 槍でとどめの一撃【発動】
    5. 元の位置に戻る【余韻】
    変換前 変換後
    情報の整理①:文字情報の変換
    【1】各動作を「タメ」「発動」「余韻」に分ける
    【2】過不足を調整する
    92/136

    View full-size slide

  91. 【1】整理した動作工程に「尺」を割り当てる
    【2】「テンポ感」「迫力」チェック
    情報の整理②:尺の割り当て
    1.触手を振り上げる【タメ】
    2.触手で往復ビンタ【発動】
    3.身体の槍を引き抜く【タメ】
    4.槍でとどめの一撃【発動】
    5.元の位置に戻す【余韻】
    変換後
    ・・・・
    ・・・・
    ・・・
    ・・・・
    ・・・・
    0.5秒
    1.5秒
    1秒
    1秒
    1秒
    93/136

    View full-size slide

  92. モチーフの持つ情報量の差に注意する
    ■「尺」に大きく影響する
    目からビーム ライオンのオーラ

    95/136

    View full-size slide

  93. 情報量の大小に注意!
    ■「モチーフ」の持つ情報量の差を考慮する
    96/136
    目からビーム ライオンのオーラ

    View full-size slide

  94. 情報の整理 まとめ
    ・各動作を「タメ」「発動」「余韻」分ける
    ・過不足を調整する
    ・整理した動作工程に尺を割り当てる
    ・「テンポ感」「迫力」チェック
    ※モチーフの持つ情報量の差に気をつける!
    文字情報の変換
    尺の割り当て
    97/136

    View full-size slide

  95. 【1】情報の整理
    【2】シルエット
    【3】レイアウト
    ビジュアルの最適化
    98/136

    View full-size slide

  96. シルエット
    -瞬間の視認性を上げる-
    99/136

    View full-size slide

  97. 初動のシルエットに差をつける
    Attack Skill2
    Skill1
    Damage
    100/136

    View full-size slide

  98. 初動のシルエットに差をつける
    ■特にダメージとの差を意識する
    Attack Skill2
    Skill1
    Damage
    101/136

    View full-size slide

  99. Attack Skill2
    Skill1
    Damage
    ■塗りつぶして確認する
    初動のシルエットに差をつける
    102/136

    View full-size slide

  100. 初動のシルエットが類似する場合の対処
    Skill2
    Damage
    ■初動に後傾姿勢の「タメ」モーションが入るパターン
    103/136

    View full-size slide

  101. 初動のシルエットが類似する場合の対処
    Skill2
    Damage
    「尺」「テンポ」「エフェクト」
    「全体の雰囲気」等
    総合的に判断
    104/136

    View full-size slide

  102. Skill2
    Damage
    初動のシルエットが類似する場合の対処
    105/136

    View full-size slide

  103. 1撃目 2撃目 3撃目
    攻撃部位を「誇張」する
    106/136

    View full-size slide

  104. 攻撃部位を「誇張」する
    ■黒く塗りつぶして確認する
    107/136

    View full-size slide

  105. 攻撃部位を「誇張」する
    108/136

    View full-size slide

  106. 【1】情報の整理
    【2】シルエット
    【3】レイアウト
    ビジュアルの最適化
    110/136

    View full-size slide

  107. レイアウト
    -画面に変化を加える絵作り-
    111/136

    View full-size slide

  108. ユニオンバーストで使える3つの機能
    112/136

    View full-size slide

  109. 絵コンテは「広がり」「奥行き」「方向」を意識
    カメラワーク
    場の変更
    カットチェンジ
    ユニオンバーストで使える3つの機能
    113/136

    View full-size slide

  110. 絵コンテ実例:「広がり」「奥行き」「方向」
    114/136

    View full-size slide

  111. 構造の複雑化に耐えうる絵コンテを目指す
    モーションデータ 完成形
    116/136

    View full-size slide

  112. 完成形のイメージを明確に伝える
    情報の整理
    • 文字情報の変換
    • 尺の割り当て
    シルエット
    • 初動に差をつける
    • 攻撃部位の誇張
    レイアウト
    • カメラワーク
    • 場の変更
    • カットチェンジ
    ■ビジュアルの最適化
    117/136

    View full-size slide

  113. 実際の制作現場における
    絵コンテの役割
    118/136

    View full-size slide

  114. 実制作における絵コンテの役割
    絶対に守らなければならない決まりごと
    「質の高いコミュニケーション」の媒体
    119/136

    View full-size slide

  115. 実制作における絵コンテの役割
    担当者間のチームワークで
    プリコネのモンスター演出は成り立っています
    120/136

    View full-size slide

  116. 最後に
    121/136

    View full-size slide

  117. 振り返り
    【アニメーション制作について】
    【1】情報の整理
    【2】シルエット
    【3】レイアウト
    【量産面のノウハウ】
    【1】デザインルールの設定
    【2】側替え/色替え
    【3】不適切な表現の回避
    【クオリティ面のノウハウ】
    【1】世界観
    【2】わかりやすいデザイン
    【3】アイディアラフ
    【4】ユニークな要素
    122/136

    View full-size slide

  118. 最後に
    モンスターチームは
    プリコネが大好きです!
    123/136

    View full-size slide