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
370
こっそり教えます!エフェクトデザインのイ・ロ・ハ
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
コミュニケーションに鍵を見いだす、エンジニア1年目の経験談
gree_tech
PRO
0
120
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
1.7k
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
560
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
560
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
530
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
620
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
980
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
640
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
760
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
67k
本が全く読めなかった過去の自分へ
genshun9
0
710
Witchcraft for Memory
pocke
1
670
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
怖くない!はじめてのClaude Code
shinya337
0
310
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
1
320
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
180
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
260
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
350
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
250
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
A better future with KSS
kneath
239
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Thoughts on Productivity
jonyablonski
69
4.7k
Writing Fast Ruby
sferik
628
62k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Statistics for Hackers
jakevdp
799
220k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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 だ エフェクトは