Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個性的で魅力的なモンスターを量産するためのデザインの秘訣と開発手法紹介 ~プリンセスコネクト!...
Search
Cygames
September 05, 2019
Technology
4
5.8k
個性的で魅力的なモンスターを量産するためのデザインの秘訣と開発手法紹介 ~プリンセスコネクト!Re:Diveにおけるモンスターデザイン制作事例~
2019/09/05 CEDEC 2019
Cygames
September 05, 2019
Tweet
Share
More Decks by Cygames
See All by Cygames
『GRANBLUE FANTASY: Relink』続・最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
0
79
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
450
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
390
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
350
高品質なフォトグラメトリデータを取得するためのハードウェア&ソフトウェア開発
cygames
0
1.2k
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
1.1k
『GRANBLUE FANTASY: Relink』開発からリリースまでを支えたCI/CDの取り組み
cygames
0
280
『GRANBLUE FANTASY: Relink』専任エンジニアチームで回す大規模開発QAサイクル
cygames
0
320
『GRANBLUE FANTASY: Relink』クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 ~カットシーンからランタイムまで~
cygames
0
350
Other Decks in Technology
See All in Technology
突き破って学ぶコンテナセキュリティ/container-breakout-cncj-lt
mochizuki875
6
1.1k
大規模サーバ移行を成功に導くための事前調査フェーズの工夫事例
fukuchiiinu
2
110
ソフトウェアエンジニアとしてキャリアの螺旋を駆け上がる方法 - 経験と出会いが人生を変える / Career-Anchor-Drive
soudai
13
2.8k
12/3(火)のBedrockアプデ速報(re:Invent 2024 Daily re:Cap #2 with AWS Heroes)
minorun365
PRO
4
140
システムリプレイスプロジェクト発足から7年、改めてコスト最適化に向き合う / replace and cost optimization
takumi
1
540
Reliability Engineering at Studist
katsuhisa91
PRO
0
120
GitHub Actions의 다양한 기능 활용하기 - GitHub Universe '24 Recap
outsider
0
490
Raspberry Pi 秋の新製品をチェックしてみよう / 20231202-rpi-jam-tokyo
akkiesoft
0
440
深層学習のリペア技術の最新動向と実際 / DNN Repair Techniques for AI Performance Alignment for Safety Requirements
ishikawafyu
0
480
プロセス改善とE2E自動テストによる、プロダクトの品質向上事例
tomasagi
1
3.6k
検証と資産化を形にするプロダクト組織へ/tapple_pmconf2024
corin8823
1
9.2k
Replit Agent
kawaguti
PRO
2
190
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Six Lessons from altMBA
skipperchong
27
3.5k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
How GitHub (no longer) Works
holman
310
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
94
17k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Speed Design
sergeychernyshev
25
650
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Optimizing for Happiness
mojombo
376
70k
Transcript
1/136
自己紹介 イラストチーム 2015年に新卒として株式会社Cygamesに所属。 「プリンセスコネクト!」に配属。 現在は、「プリンセスコネクト!Re:Dive」にて モンスターチームのリーダーを担当。 野西 正武 2/136
自己紹介 アニメーションデザイナー 2014年Cygamesに合流。 現在は「プリンセスコネクト!Re:Dive」において、 絵コンテ、モーション監修、エフェクト制作等 を担当。 高 泰俊 3/136
はじめに ▪プリンセスコネクトRe:Dive(以降、プリコネ)について 前作の『プリンセスコネクト』から大きく進化したアニメRPG 様々な要素が新たに追加 • 魅力的なキャラクター&モーション • ド派手なカットイン演出 • ストーリーアニメ
等 4/136
プリコネにおけるモンスターの役割 ▪バトルの特徴を作り出す要素 5/136
プリコネにおけるモンスターの役割 ▪世界観を作り出す要素 6/136
プリコネにおけるモンスターの役割 ▪ノーマルクエスト、クランバトル、ストーリーイベント、ルナの塔 etc. 7/136
合計 200体以上 リリースしていないものを含めるとそれ以上に… 8/136
課題 9/136
クオリティと量産の両立 10/136
【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 11/136
【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 12/136
プランナー イラスト プランナー アニメーション イラスト アニメーション アニメーション 発注書 デザイン 字コンテ
モーション 切り分け/追加パーツ 絵コンテ エフェクト モンスターの基本制作フロー 13/136
【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 14/136
【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 15/136
16/136 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ
世界観 17/136
▪モンスターの知能レベル 低 高 世界観 18/136
世界観 夏イベントボス:テンタパス ▪モンスターの生態や背景を大事に 19/136
【発注内容】 世界観 ・海のイベントボスでイカ型 ・バカンスを邪魔してキャラを攫う ・既に海に登場するモンスターと差別化 ・モーションにバリエーションを出す 夏イベントボス:テンタパス ▪モンスターの生態や背景を大事に 20/136
全身傷だらけ 喧嘩に明け暮れている ウツボを 振り回す乱暴者 身についている 武器は歴戦の証 ピアスの様に拾ったものをつけている 世界観 ▪モンスターの生態や背景を大事に 21/136
キャラクターを攫っていたり↑ モーションの バリエーション→ 世界観 ▪モンスターの生態や背景を大事に 22/136
世界観 ザコモンスター:エルダークラウド ボスモンスター:ライライ ▪モンスターの関係性を大事に 23/136
▪モンスターの知能レベル 知能レベルに合わせて身に着けている物のデザインを差別化する 【世界観】まとめ ▪モンスターの生態や背景を大事に デザインから生態や背景が伝わってくるようにする ▪モンスター同士の関係性を大事に 既に登場しているモンスターと関係性を組むと世界観に深みが出る 24/136
【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 25/136
わかりやすいデザイン ▪わかりやすいモチーフ ▪ぱっと見での役割の把握 モチーフ:岩 役割:防御タイプ モチーフ:魔術師 役割:魔法タイプ 26/136
▪攻撃部位の強調 ▪要素は二つに絞る! 恐竜 電気 深海魚 恐竜 電気 水 〇:シンプルに! ×:わかりにくい!
わかりやすいデザイン 27/136
【わかりやすいデザイン】まとめ ▪わかりやすいデザインを わかりやすいモチーフ、パッと見で伝わるデザインを ▪特徴の強調、盛りすぎない 攻撃部位の強調、要素を二つに絞る 28/136
【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 29/136
アイディアラフ ▪とにかく沢山のアイディアを出すこと。 ▪アイディアラフを整理したり、合わせたり。 30/136
テーマ:森、カンテラ アイディアラフ 31/136
アイディアラフ テーマ:森、カンテラ 32/136
アイディアをブラッシュアップ アイディアラフ テーマ:森、カンテラ 33/136
①ラフ案だし ②方向性探り ③デザイン詰め ④清書/完成 ボスはさらに多い! アイディアラフ 34/136
動くことを前提にデザインしていく 35/136
デザイン完成後も動きのチェック! 36/136
【アイディアラフ】まとめ ▪テーマに基づき沢山のアイディアを出す! どんな種族?どんな性格?どんな攻撃方法? 島クジラ ▪動くことを前提にデザインしていく 37/136
【1】世界観を大事に 【2】わかりやすさ 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 38/136
ユニークな要素 ▪モチーフの組み合わせ ▪変わった要素を取り入れる 分福茶釜+狸 蟹+鉄球 風船+鳥 39/136
▪ライデン 敗北時:メスが去ってしまう ▪アニメーションによるキャラ付け ユニークな要素 40/136
▪エレクトロギガス 敗北時:頭がアフロになってしまう ユニークな要素 ▪アニメーションによるキャラ付け 41/136
【クオリティ面のノウハウ】まとめ クオリティ 世界観 ・モンスターの知能レベル ・モンスターの生態や背景を大事に ・モンスター同士の関係性を大事に ・わかりやすいデザインを ・攻撃部位の強調、要素を二つに絞る アイディアラフ ・面白いデザインを出す為には
まず沢山のアイディア ・動くことを前提にデザインしていく ユニークな要素 ・モチーフの組み合わせ ・変わった要素を取り入れる ・アニメーションによるキャラ付け 42/136 わかりやすいデザイン
【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】まとめ 目次 43/136
【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 44/136
【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 45/136
デザインルールの設定 役割 強さ 属性 デザインルール 46/136
デザインルールの設定 役割 強さ 属性 デザインルール 迷わない 時間短縮に繋がる 47/136
▪モンスターの役割 前衛 中衛 後衛 デザインルールの設定 48/136
前衛:壁役、HP高めのモンスター ▪モンスターの役割 デザインルールの設定 49/136
▪モンスターの役割 後衛:最も長距離型の遠距離タイプ 一番後ろで特定の場所、キャラに攻撃を仕掛ける デザインルールの設定 50/136
▪雑魚モンスターの役割 中衛:前衛の後ろに隠れて行動をする厄介なモンスター 特殊な動きをする幅広いモンスターがいる デザインルールの設定 51/136
▪モンスターの役割 物理 魔法 デザインルールの設定 52/136
▪モンスターの役割 ザコ ボス デザインルールの設定 53/136
▪強さの基準 ザコ ベースカラー:3色 デザイン:シンプル ボス ベースカラー:5色 デザイン:複雑 デザインルールの設定 54/136
【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 55/136
側替え 側替え/色替え ▪側替え、色替えで時間短縮 ▪大切なのは差別化 色替え 側替え 56/136
オーク ハイオーク オークリーダー オークチーフ 側替え手法① ▪変わっていく強さ 弱 強 57/136
弱 強 側替え手法② ▪変わっていく強さ 58/136 オーク ハイオーク オークリーダー オークチーフ
洞窟 岩地 火山 森林 側替え手法② ▪同じ強さ/地域違い 59/136
色替えについて ▪大きく色を変えること ▪強さのランクを考えながら色案を出す 元のデザイン 60/136
色替えについて ▪強さのランクを考えながら色案を出す 暗い色 金色 61/136
強 弱 色替えについて ▪強さのランクを考えながら色案を出す 元のデザイン 62/136
【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 63/136
▪宗教的や文化的に不適切なもの 例:中国国内では出版物、ソフトウェアはドクロの表現は不適切となっている。 なので、中国版では骨類はデザイン修正を行っている。 不適切な表現の回避 64/136
▪宗教的や文化的に不適切なもの 例:CEROレーティングの対象となる暴力表現 ・出血描写 ・身体の分離/欠損描写 ・死体の描写etc. 人型のモンスターで 指の数が4本 5本に修正 不適切な表現の回避 65/136
【量産面のノウハウ】まとめ 量産 デザインルールの設定 ・ルールを決めて時間短縮を ・モンスターの役割の把握 側替え/色替え ・デザイン変更のみで時間短縮 ・側替えはデザインを変える ・色替えは色のみを変える 不適切な表現の回避
・不適切な表現は避ける ・海外で不適切な表現になってしまう ものも把握しておく 66/136
デザインパートまとめ 67/136
クオリティと量産の両立 プリコネのモンスターを作るうえでの課題 【デザインパート】まとめ 68/136
【デザインパート】まとめ クオリティ面のノウハウ 量産面のノウハウ 【1】デザインルールを定める 【2】側替えや色替えについて 【3】不適切な表現の回避 【1】世界観 【2】わかりやすさ 【3】アイディアラフを沢山出す 【4】ユニークな要素
69/136
【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ紹介 【3】量産面のノウハウ紹介 【4】アニメーション制作について 【5】最後に 目次 70/136
アニメーションパート 71/136
「絵コンテ」を軸に、 アニメーション制作について ご紹介します 72/136
プランナー イラスト プランナー アニメーション イラスト アニメーション アニメーション 発注書 デザイン 字コンテ
モーション 切り分け/追加パーツ 絵コンテ エフェクト 73/136 モンスターの基本制作フロー(再掲)
モンスターの基本制作フロー(再掲) プランナー イラスト プランナー イラスト 発注書 デザイン 字コンテ モーション 切り分け/追加パーツ
絵コンテ エフェクト アニメーション アニメーション アニメーション 74/136
モーションパートを動画で紹介 75/136
絵コンテ ▪絵+指示文 ・尺 ・カメラ ・内容 ・追加パーツ (etc...) 76/136
使用ツール ▪モーション Spine (2Dアニメ制作ツール) ▪エフェクト UnityのParticle System 77/136
絵コンテ制作の流れ 78/136
モーション発注ミーティング ▪「字コンテ」をもとに、プランナー、イラストレーター、アニメーション デザイナーの三者でミーティング 字コンテ 79/136
・新規性のあるデザインを目立たせたい! ・このモチーフをギミックに取り入れたい! ・対策必須な技の前に予兆を入れたい! ・高難度バトル専用の演出を入れたい! モーション発注ミーティング 仕様面 デザイン面 ▪「字コンテ」をもとに、プランナー、イラストレーター、アニメーション デザイナーの三者でミーティング 80/136
仕様への最適化 絵コンテ設計の軸 物量の最適化 ビジュアルの最適化 ・情報の整理 ・シルエット ・レイアウト ・絵のインパクトを保ったまま物量を抑える ・新しい「技」が再現可能か検討 ・欲しい機能、汎用性のある機能実装の提案
81/136
仕様への最適化 絵コンテ設計の軸 物量の最適化 ビジュアルの最適化 ・情報の整理 ・シルエット ・レイアウト ・絵のインパクトを保ったまま物量を抑える ・新しい「技」が再現可能か検討 ・欲しい機能、汎用性のある機能実装の提案
82/136
【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 83/136
情報の整理 -最初の作業- 84/136
「情報の整理」=「文字情報の変換」 字コンテの文字情報 絵コンテにしやすい文字情報 ・展開1(0.5秒) ・展開2(1秒) ・展開3(0.5秒) ・展開4(1秒) ・展開5(1秒) ---必殺技--- ▪「字コンテ」の文字情報を「絵コンテ」にしやすい文字情報に変換する
85/136
「情報の整理」の目的 ・展開1(0.5秒) ・展開2(1秒) ・展開3(0.5秒) ・展開4(1秒) ・展開4(1秒) ---必殺技1--- 【1】動作工程のバランスを整え展開をわかりやすくすること 【2】動作の尺を適正な長さにすること 86/136
各動作を「タメ」「発動」「余韻」に分ける バランス、過不足を調整する 情報の整理①:文字情報の変換 ▪具体的な方法 【1】 【2】 「タメ=予備動作」 「発動」 「余韻」 87/136
「情報の整理」の目的 ・展開1(0.5秒) ・展開2(1秒) ・展開3(0.5秒) ・展開4(1秒) ・展開4(1秒) ---必殺技1--- 【1】動作工程のバランスを整え展開をわかりやすくすること 【2】動作の尺を適正な長さにすること 「テンタパス」
88/136
▪暗転+ボスモンスター以外すべて動作が停止 必殺技:ユニオンバーストとは 89/136
1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】
変換前 情報の整理①:文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 90/136
1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】
変換前 情報の整理①:文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 91/136
1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】
1. 触手を振り上げる【タメ】 2. 往復ビンタ【発動】 3. 身体の槍を引き抜き構える【タメ】 4. 槍でとどめの一撃【発動】 5. 元の位置に戻る【余韻】 変換前 変換後 情報の整理①:文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 92/136
【1】整理した動作工程に「尺」を割り当てる 【2】「テンポ感」「迫力」チェック 情報の整理②:尺の割り当て 1.触手を振り上げる【タメ】 2.触手で往復ビンタ【発動】 3.身体の槍を引き抜く【タメ】 4.槍でとどめの一撃【発動】 5.元の位置に戻す【余韻】 変換後 ・・・・
・・・・ ・・・ ・・・・ ・・・・ 0.5秒 1.5秒 1秒 1秒 1秒 93/136
94/xx
モチーフの持つ情報量の差に注意する ▪「尺」に大きく影響する 目からビーム ライオンのオーラ < 95/136
情報量の大小に注意! ▪「モチーフ」の持つ情報量の差を考慮する 96/136 目からビーム ライオンのオーラ <
情報の整理 まとめ ・各動作を「タメ」「発動」「余韻」分ける ・過不足を調整する ・整理した動作工程に尺を割り当てる ・「テンポ感」「迫力」チェック ※モチーフの持つ情報量の差に気をつける! 文字情報の変換 尺の割り当て 97/136
【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 98/136
シルエット -瞬間の視認性を上げる- 99/136
初動のシルエットに差をつける Attack Skill2 Skill1 Damage 100/136
初動のシルエットに差をつける ▪特にダメージとの差を意識する Attack Skill2 Skill1 Damage 101/136
Attack Skill2 Skill1 Damage ▪塗りつぶして確認する 初動のシルエットに差をつける 102/136
初動のシルエットが類似する場合の対処 Skill2 Damage ▪初動に後傾姿勢の「タメ」モーションが入るパターン 103/136
初動のシルエットが類似する場合の対処 Skill2 Damage 「尺」「テンポ」「エフェクト」 「全体の雰囲気」等 総合的に判断 104/136
Skill2 Damage 初動のシルエットが類似する場合の対処 105/136
1撃目 2撃目 3撃目 攻撃部位を「誇張」する 106/136
攻撃部位を「誇張」する ▪黒く塗りつぶして確認する 107/136
攻撃部位を「誇張」する 108/136
109/xx
【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 110/136
レイアウト -画面に変化を加える絵作り- 111/136
ユニオンバーストで使える3つの機能 112/136
絵コンテは「広がり」「奥行き」「方向」を意識 カメラワーク 場の変更 カットチェンジ ユニオンバーストで使える3つの機能 113/136
絵コンテ実例:「広がり」「奥行き」「方向」 114/136
115/xx
構造の複雑化に耐えうる絵コンテを目指す モーションデータ 完成形 116/136
完成形のイメージを明確に伝える 情報の整理 • 文字情報の変換 • 尺の割り当て シルエット • 初動に差をつける •
攻撃部位の誇張 レイアウト • カメラワーク • 場の変更 • カットチェンジ ▪ビジュアルの最適化 117/136
実際の制作現場における 絵コンテの役割 118/136
実制作における絵コンテの役割 絶対に守らなければならない決まりごと 「質の高いコミュニケーション」の媒体 119/136
実制作における絵コンテの役割 担当者間のチームワークで プリコネのモンスター演出は成り立っています 120/136
最後に 121/136
振り返り 【アニメーション制作について】 【1】情報の整理 【2】シルエット 【3】レイアウト 【量産面のノウハウ】 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 【クオリティ面のノウハウ】
【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 122/136
最後に モンスターチームは プリコネが大好きです! 123/136