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
260
こっそり教えます!エフェクトデザインのイ・ロ・ハ
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
240
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
200
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
200
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
170
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
220
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
380
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
250
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
300
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
460
Other Decks in Technology
See All in Technology
LLM活用の現在とこれから:LayerXにおける事例とともに 2025/1 ver. / layerx-llm-202501
yuya4
3
200
いま現場PMのあなたが、 経営と向き合うPMになるために 必要なこと、腹をくくること
hiro93n
9
8.4k
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
2
260
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
15
2.7k
Goで実践するBFP
hiroyaterui
1
130
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
300
第27回クラウド女子会 ~re:Invent 振り返りLT会~ 宣言型ポリシー、使ってみたらこうだった!
itkr2305
0
130
トラブルシュートを楽しもう (wakamonog meeting 15)
recuraki
3
860
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
130
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
160
Docker Desktop で Docker を始めよう
zembutsu
PRO
1
210
When Windows Meets Kubernetes…
pichuang
0
320
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Thoughts on Productivity
jonyablonski
68
4.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
970
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Designing for humans not robots
tammielis
250
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
GraphQLとの向き合い方2022年版
quramy
44
13k
Optimising Largest Contentful Paint
csswizardry
33
3k
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 だ エフェクトは