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
380
こっそり教えます!エフェクトデザインのイ・ロ・ハ
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
130
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
1.7k
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
580
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
590
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
560
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
640
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
1k
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
660
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
790
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
LLM時代の検索
shibuiwilliam
2
650
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
200
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.1k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
290
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
150
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
230
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Making Projects Easy
brettharned
116
6.3k
A designer walks into a library…
pauljervisheath
207
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
RailsConf 2023
tenderlove
30
1.1k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Reviewing Like a Champion
maltzj
524
40k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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 だ エフェクトは