Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
こっそり教えます!エフェクトデザインのイ・ロ・ハ
Search
gree_tech
PRO
September 10, 2019
Technology
0
480
こっそり教えます!エフェクトデザインのイ・ロ・ハ
CEDEC 2019 にて発表された資料です
https://cedec.cesa.or.jp/2019/session/detail/s5c9874276edbb
gree_tech
PRO
September 10, 2019
Tweet
Share
More Decks by gree_tech
See All by gree_tech
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
850
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
870
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
860
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
850
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
940
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
860
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
850
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
860
コミュニケーションに鍵を見いだす、エンジニア1年目の経験談
gree_tech
PRO
0
150
Other Decks in Technology
See All in Technology
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
stupid jj tricks
indirect
0
8k
社内お問い合わせBotの仕組みと学び
nish01
0
380
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
980
Findy Team+のSOC2取得までの道のり
rvirus0817
0
340
BirdCLEF+2025 Noir 5位解法紹介
myso
0
200
about #74462 go/token#FileSet
tomtwinkle
1
350
Azure Well-Architected Framework入門
tomokusaba
1
310
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
270
KMP の Swift export
kokihirokawa
0
330
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
350
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Code Reviewing Like a Champion
maltzj
525
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
How to train your dragon (web standard)
notwaldorf
96
6.3k
The Language of Interfaces
destraynor
162
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
confidential © POKELABO, INC. 2019/9/10 1 こっそり教えます 池田 博幸 エフェクトデザインの
イ・ロ・ハ
confidential © POKELABO, INC. 2019/9/10 2 池田 博幸 エフェクトアーティスト •
経歴 スクウェア、サイバーコネクトツーなどを経て 2019年9月現在、ポケラボにて主に 「SINoALICE-シノアリス」 「戦姫絶唱シンフォギアXD UNLIMITED」 のエフェクト制作に携わる 座右の銘 エフェクトは人生だ
confidential © POKELABO, INC. 2019/9/10 3 5% ※CGWorld調べ https://cgworld.jp/interview/201801-jobsnews.html エフェクトアーティスト
confidential © POKELABO, INC. 2019/9/10 4 エフェクトアーティストの「三高」 1. 高い希少性 希少性5%
=上位5% 学習法、育成法ともに確立しておらず競争人口が少ない。 2. 高い視点 上位5%が全体の95%を俯瞰する。連携業務が多く学習項目も多岐。大局観が鍛えられる。 3. 高い生存率 希少性5% =(定年までの)生存率95% エフェクトはあなたの懐刀としても必ず役立つ。
confidential © POKELABO, INC. 2019/9/10 5 全体の流れ 第一部 イ:姿(ルック) /15分
第二部 ロ:道(ベクトル) /15分 第三部 ハ:死(デス) /15分 質疑応答/5分
confidential © POKELABO, INC. 2019/9/10 6 全体の流れ 第一部 イ:姿(ルック) /15分
第二部 ロ:道(ベクトル) /15分 第三部 ハ:死(デス) /15分 質疑応答/5分
confidential © POKELABO, INC. 2019/9/10 7 表現には理由が必要 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 8 1. 多次元展開が前提 2. 低等身アバターと相性が良い
3. 表現コストが低い エフェクトに誇張表現が求められる理由 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 9 誇張エフェクト 3つの特徴 1. 手描き調
2. 鋭い輪郭 3. ちぎれる 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 10 階調や色、ディテールを省略し、パキッとした見た目 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 11 ちぎれつつ 消えている 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 12 まだだ!まだつくらんよ 「特徴分かった、さっそく作ろう」 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 13 作成前に 表現の外側にあるもの を知る必要がある 第一部
イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 14 背景は厚塗り 人物は単色ベタ塗り アニメ質感表現の傾向 第一部
イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 15 「異なる質感同士の共存」 事実上の前提条件 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 16 エフェクトの質感はどちらに寄せるか 背景?人物? 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 17 1. 等身に合わせる 2. 規模感に合わせる
3. 発生源に合わせる エフェクトの馴染ませ方 3原則 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 18 1. 等身に合わせる 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 19 2. 規模感に合わせる 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 20 3. 発生源に合わせる 第一部 イ:姿(ルック)
なめらか パキパキ なめパキ
confidential © POKELABO, INC. 2019/9/10 21 「火」「水」「風」 エフェクトは変幻自在 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 22 すべてのエフェクトは たったひとつの究極の形に集約される
confidential © POKELABO, INC. 2019/9/10 23 円 エフェクト普遍体 その1 第一部
イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 24 輪郭 (背景) ディテール 力の向き
= (背景) 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 25 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 26 エフェクト普遍体 その2 線 第一部
イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 27 (背景) 輪郭 ディテール 力の向き
= (背景) 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 28 線(横) 力の向き = 線(縦)
円 力の向きを見極め、相性を考慮した動きも意識する 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 29 普遍体(円、線)に崩しを入れて整える 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 30 (paint) 第一部 イ:姿(ルック)
confidential © POKELABO, INC. 2019/9/10 31 第一部 まとめ スマフォのエフェクトは誇張表現の需要が高い。
異なる質感同士の共存を前提とした表現がある。 本質はいつもひとつ。原型をイメージしながら 様々な属性表現を行おう。
confidential © POKELABO, INC. 2019/9/10 32 全体の流れ 第一部 イ:姿(ルック) /15分
第二部 ロ:道(ベクトル) /15分 第三部 ハ:死(デス) /15分 質疑応答/5分
confidential © POKELABO, INC. 2019/9/10 33 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 34 花火→エフェクト 花火の全体的な演出 火花→パーティクル
一つ一つの火花(パーティクル)の 集合体が花火(エフェクト)。 薬筒→エミッター 火花(パーティクル)の発生源 言葉の定義 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 35 初期値 (エミッタの持続時間/Durationとパーティクルの寿命/LifeTime、 速度/Velocity、色/Color、大きさ/Size、回転/Rotationの一番最初の値を指定) エミッタ
(パーティクルの発生数、発生法、発生形状を指定) アニメーション (パーティクルの各属性が指定した寿命に添って変化 アニメーションの尺や各値の上限は初期値がベース) レンダラー(見た目の指定) 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 36 パーティクル 主要4属性 1. 大きさ/Size
2. 角度/Rotate 3. 位置/Position 4. 色/Color(RGBA) 第二部 ロ:道(ベクトル) Speed(初速)gravity(重力) Velocity(速度)force(力) も含む
confidential © POKELABO, INC. 2019/9/10 37 パーティクル 制作の流れ 完成 メニュー(初期値)を決める
オーダー(発生)する スパイス(乱数)をかける 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 38 1.メニュー(初期値)を決める 期間(duration)=1.0secに変更 エミッタ持続時間(花火エフェクトの尺) 初速(Start
Speed)=50に変更 火花パーティクルの散る速度 寿命(Start Lifetime)=0.5secに変更 火花パーティクルの尺 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 39 2.オーダー(発生)する Emitter/Shape(発生形状)をCircleに変更 Radius(半径)はそのままでOK Rate
over Timeを0に変更、その後 右下+ボタンをクリックしBurstsに変更、 Countに100と入力 制限速度(Limit Velocity Over Lifetime) チェックをオン Speedを0に、Dampenを0.5に変更 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 40 3.スパイス(乱数)をかける 花火が自然に見えるように Random Between
Two Constants を適用し 初期値(寿命、大きさ、初速)に 指定した2値間でバラツキを入れる 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 41 第二部 ロ:道(ベクトル)
confidential © POKELABO, INC. 2019/9/10 42 最高の背景 最悪の背景 光
confidential © POKELABO, INC. 2019/9/10 43 最悪の背景 最高の背景 闇
confidential © POKELABO, INC. 2019/9/10 44 第二部 まとめ キービジュアルを決め、要素と動きを割り出そう。
パーティクル主要属性は4つ。塊で覚えよう。 最高のエフェクトは最悪の背景で作られる。
confidential © POKELABO, INC. 2019/9/10 45 全体の流れ 第一部 イ:姿(ルック) /15分
第二部 ロ:道(ベクトル) /15分 第三部 ハ:死(デス) /15分 質疑応答/5分
confidential © POKELABO, INC. 2019/9/10 46 一流のエフェクトは 消え方がカッコいい 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 47 一流のエフェクトは 消え方がカッコいい 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 48 円はどう消える(死ぬ)? ルック Look デス
Death 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 49 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 50 火花の設定1
confidential © POKELABO, INC. 2019/9/10 51 火花の設定2
confidential © POKELABO, INC. 2019/9/10 52 火花の設定3
confidential © POKELABO, INC. 2019/9/10 53 下地の設定1
confidential © POKELABO, INC. 2019/9/10 54 下地の設定2
confidential © POKELABO, INC. 2019/9/10 55 1. 透かす 2. 縮める
3. 動かす エフェクト消去法・オモテ 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 56 1. 透かす 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 57 2. 縮める(全軸) 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 58 2. 縮める(軸別) 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 59 3. 動かす(UV) 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 60 3. 動かす(色) 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 61 組み合わせ(透かす+縮める+動かす) Case1:SINoALICE-シノアリス- グローブ専用ヒットエフェクト 第三部
ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 62 1. にがす 2. さえぎる
3. なにもださない えふぇくと消去法・うら 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 63 1. にがす(拡大) にがす/拡大 にがす/移動
第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 64 1. にがす(移動) にがす/拡大 にがす/移動
第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 65 2. さえぎる(白い板) 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 66 2. さえぎる(波画像) 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 67 第三部 ハ:死(デス) 組み合わせ Case2:SINoALICE-シノアリス-
魔晶石バラマキ攻撃 (にがす+さえぎる)
confidential © POKELABO, INC. 2019/9/10 68 3. なにもださない 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 69 第三部 ハ:死(デス) 3. なにもださない
confidential © POKELABO, INC. 2019/9/10 70 第三部 ハ:死(デス) 3. なにもださない
confidential © POKELABO, INC. 2019/9/10 71 「エフェクト以外の表現に委ねる」 という選択肢もある 3. なにもださない
第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 72 人間に を考え抜く 第三部 ハ:死(デス)
confidential © POKELABO, INC. 2019/9/10 73 第三部 まとめ 消去法を巧みに組み合わせ、エフェクトを
かっこよく消そう。 消去法は出現法にも転用可能。エフェクトの 出現から消去までの流れを意識しよう。 人間に最も響く表現を考え抜こう。
confidential © POKELABO, INC. 2019/9/10 74 だ エフェクトは