Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
こっそり教えます!エフェクトデザインのイ・ロ・ハ
Search
gree_tech
PRO
September 10, 2019
Technology
0
210
こっそり教えます!エフェクトデザインのイ・ロ・ハ
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
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
160
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
110
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
120
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
94
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
120
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
130
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
140
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
170
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
340
Other Decks in Technology
See All in Technology
レガシーシステムへのDatadog APM導入奮闘記
mtakeya4062
0
130
Yahoo! JAPANトップページにおけるマイクロフロントエンド - 大規模組織におけるFE開発を加速させるには
lycorptech_jp
PRO
0
1.7k
.NET のUnified AI Building Blocks 入門...!
okazuki
0
130
徹底解説!Microsoft 365 Copilot の拡張機能 / Complete guide to Microsoft 365 Copilot extensions
karamem0
1
1.4k
OpenLLMetry-Hands-On 生成AIアプリを観測してみよう!OpenLLMetryハンズオン編
tkhresk
1
140
Entra ID の基礎(Japan Microsoft 365 コミュニティ カンファレンス 2024)
murachiakira
3
1.9k
ONNX推論クレートの比較と実装奮闘記
emergent
0
250
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
2
1.9k
Next.jsとNuxtが混在? iframeでなんとかする!
ypresto
3
2.4k
SONY AITRIOSによるAIエッジセンシングの新たな可能性(仮)
iotcomjpadmin
0
180
間違いだらけのポストモーテム - ホントに役立つレビューはこうだ!
jacopen
5
810
Amazon Forecast亡き今、我々がマネージドサービスに頼らず時系列予測を実行する方法
sadynitro
0
220
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Building Your Own Lightsaber
phodgson
103
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Why Our Code Smells
bkeepers
PRO
334
57k
YesSQL, Process and Tooling at Scale
rocio
169
14k
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 だ エフェクトは