SlideShare uma empresa Scribd logo
1 de 102
© POKELABO, INC.
フュージョン!イリュージョン!
エクスプロージョン!
で語る
© POKELABO, INC.
私の哲学
© POKELABO, INC.
私の哲学
魔王が魔王であるために
© POKELABO, INC.
私の哲学
© POKELABO, INC.
私の哲学
© POKELABO, INC.
自己紹介
池田 博幸
エフェクトアーティスト
主な社歴と実績
●スクウェア
聖剣3/背景ドット絵
FF7/バトルエフェクト
FF9/バトル&召喚獣エフェクト
●サイバーコネクトツー
Asura’sWrath/デモ用エフェクト
ギルティドラゴン/バトルエフェクト
略歴
背景デザイナーからエフェクトアーティストに転身
現在
ポケラボにて新規GvGバトル演出を担当
© POKELABO, INC. 72016/5/23
© POKELABO, INC.
プレゼンの流れ
1. エフェクトの役割
2. エフェクト ふたつのパーツ
3. エフェクト 3要素
4. エフェクトの描き方
5. パーティクル はじめの3要素
6. 負荷を抑えるために
7. まとめ
もくじ
© POKELABO, INC.
1. エフェクトの役割
© POKELABO, INC.
ゲームデザイン
演出
エフェクト
(最終工程)
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトアーティストは
映像の化粧師
(けわいし)
エフェクトの役割
である
© POKELABO, INC.
2.エフェクト
ふたつのパーツ
© POKELABO, INC.
要素を割り出し
優先順位をつける
端末上で
全ては表現できない
エフェクト ふたつのパーツ
© POKELABO, INC.
コア
エフェクトパーツ その1
エフェクト ふたつのパーツ
(主役)
© POKELABO, INC.
エフェクト ふたつのパーツ
© POKELABO, INC.
エフェクト ふたつのパーツ
© POKELABO, INC.
♪I.D.E.A’s Spark
(作詞、作曲、歌 池田博幸)
「SparkGear」主題歌
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
エクストラ
エフェクトパーツ その2
エフェクト ふたつのパーツ
(脇役、賑やかし)
© POKELABO, INC.
エフェクト ふたつのパーツ
© POKELABO, INC.
5秒間だけ映像流します
エフェクト ふたつのパーツ
© POKELABO, INC.
エフェクト ふたつのパーツ
© POKELABO, INC.
SparkGearライブパフォーマンス
エフェクト ふたつのパーツ
© POKELABO, INC.
エフェクト ふたつのパーツ
コア
主役。必要不可欠な要素。クオリティはこちらを最優先。
中心に大きく表示されている傾向がある。
エクストラ
脇役。賑やかし要素。負荷が重い場合、こちらから削る。
中心部の周りに小さく(細く)表示されている傾向がある。
復習/エフェクト ふたつのパーツ
© POKELABO, INC. 332016/5/23
© POKELABO, INC.
3.エフェクトの3要素
© POKELABO, INC.
エフェクトの方向
エフェクトの3要素
© POKELABO, INC.
全方位型
エフェクトの役割
エフェクト方向 その1
© POKELABO, INC.
全方位型
エフェクトの3要素
© POKELABO, INC.
指向型
エフェクトの役割
エフェクト方向 その2
© POKELABO, INC.
指向型
エフェクトの3要素
© POKELABO, INC.
全方位型
最も汎用性が高く、クセが無い。
どんなカメラにも対応できる反面、演出の勢いは削がれる。
指向型
力の向きを強調した、勢いのある演出に出来る反面、
クセが出やすく調整に時間が掛かる。
復習/エフェクトの方向 ふたつの型
エフェクトの3要素
© POKELABO, INC.
エフェクトの
出現から消失までの流れ
エフェクトの3要素
© POKELABO, INC.
左図を右図にするには?
エフェクトの3要素
© POKELABO, INC.
© POKELABO, INC.
© POKELABO, INC.
エフェクトの余波
エフェクトの3要素
© POKELABO, INC.
エフェクトの3要素
© POKELABO, INC.
復習/エフェクトの3要素
エフェクトの3要素
方向
力の向きを示す。全方位型と指向型の2タイプある。
出現から消失までの流れ
どう出して、どう消す?最高潮は?余韻は?
余波
現象がまわりに与える影響。にぎやかし(エクストラ)に含まれる。
© POKELABO, INC.
4.エフェクトの描き方
© POKELABO, INC.
エフェクトの描き方
に迫る
© POKELABO, INC.
エフェクト普遍体 その1
エフェクトの描き方
© POKELABO, INC.
輪郭
(paint)
塗り
背景
エフェクトの描き方
力の向き=
© POKELABO, INC.
(paint)
エフェクトの描き方
© POKELABO, INC.
シルエットの作り方
• 円を描く
• 輪郭をこする
• 出来た窓枠の向こう側に映る景色を入れる
• 窓枠の形、景色の色をそれぞれ調整して完成
エフェクトの描き方
© POKELABO, INC.
エフェクトの描き方
エフェクト普遍体 その2
© POKELABO, INC.
エフェクトの描き方
力の向き=
背景
輪郭
塗り
© POKELABO, INC.
線も繋げば円環となる
エフェクトの描き方
全ては円に帰結する
© POKELABO, INC.
ディテールの増減で世界観を表現
リアル調
アニメ調
エフェクトの描き方
© POKELABO, INC.
円
最も汎用性が高く、クセが無い完成されたもの。
全方位型。
線
方向性を示す。繋げば円環(リング)にすることもできる。
指向型かつ全方位型。
エフェクトの描き方
復習/エフェクト ふたつの普遍体
© POKELABO, INC.
5.パーティクル
はじめの3要素
© POKELABO, INC.
エミッター
パーティクル要素 その1
パーティクル はじめの3要素
© POKELABO, INC.
パーティクル
パーティクル要素 その2
パーティクル はじめの3要素
© POKELABO, INC.
寿命
パーティクル要素 その3
パーティクル はじめの3要素
© POKELABO, INC.
個々を機能ではなく
役割として
まとめてみる
パーティクル はじめの3要素
© POKELABO, INC.
パーティクル はじめの3要素
エミッター
子供を生み、育て、陰ながらその人生を導く存在。
遺産や遺伝などの要素を子孫に継承できる。
パーティクル
親から誕生し、追従する存在。また、自らも親となり孫も生める。
寿命
誕生から死までの時間。
この人生が終わるとき、全ての存在は等しくこの世界から消去される。
パーティクル はじめの3要素
←親
←子供
←人生
© POKELABO, INC.
親から
パーティクルとは
のことである
パーティクル はじめの3要素
© POKELABO, INC.
これを
登壇者自身で例えてみた
© POKELABO, INC.
パーティクル はじめの3要素
© POKELABO, INC.
ところで
パーティクル はじめの3要素
© POKELABO, INC.
パーティクル はじめの3要素
© POKELABO, INC.
2015年現在
日本人平均寿命
男性80歳 女性86歳
パーティクル はじめの3要素
※厚生労働省調べ
© POKELABO, INC.
わが人生、今ここ
池田 博幸 43歳
パーティクル はじめの3要素
誕生 死亡
© POKELABO, INC.
人生 4つの要素+α
●大きさ
●角度
●位置
●色
パーティクル はじめの3要素
運(偶然性、ゆらぎの要素)
これらを人生のフェーズに添って変化させる
© POKELABO, INC.
エフェクトの役割
© POKELABO, INC.
パーティクル はじめの3要素
© POKELABO, INC.
人生、生き様、生涯
パーティクル はじめの3要素
© POKELABO, INC.
この世に不変のものはない
人生は無常
パーティクル はじめの3要素
© POKELABO, INC.
まわりを見回して
みてください
パーティクル はじめの3要素
© POKELABO, INC.
パーティクル はじめの3要素
© POKELABO, INC.
パーティクル はじめの3要素
© POKELABO, INC.
パーティクル はじめの3要素
春 夏 秋 冬
人生も四季も無常
© POKELABO, INC.
この無常表現こそが
説得力へのカギ
エフェクトも然り
パーティクル はじめの3要素
© POKELABO, INC.
SparkGearライブパフォーマンス
パーティクル はじめの3要素
© POKELABO, INC.
エフェクトの概念
© POKELABO, INC.
© POKELABO, INC.
© POKELABO, INC.
パーティクル はじめの3要素
エミッター
子供を生み、育て、陰ながらその人生を導く存在。
遺産や遺伝などの要素を子孫に継承できる。
パーティクル
親から誕生し、追従する存在。また、自らも親となり孫も生める。
寿命
誕生から死までの時間。
この人生が終わるとき、全ての存在は等しくこの世界から消去される。
復習/パーティクル はじめの3要素
←親
←子供
←人生
© POKELABO, INC.
6.負荷を抑えるために
© POKELABO, INC.
オーバードロー
(絵の重ねすぎ)
エフェクトマッチョ要因 その1
負荷を抑えるために
© POKELABO, INC.
オーバードローを回避する
通常画面/RGBモード OverDrawモード
右の画面を見るとポリゴン同士が重なって白トビを起こしている。
「数を減らす」「小さくする」「表示時間(寿命)を短縮する」
などを行って、これを緩和する必要がある。
負荷を抑えるために
© POKELABO, INC.
画像サイズ
(絵がデカすぎ)
エフェクトマッチョ要因 その2
負荷を抑えるために
© POKELABO, INC.
伸ばす、繰り返す、反転する
ぼんやり画像は解像度を低めに
くっきり画像は解像度を高めにするのが原則
タイル状に貼る、引き伸ばし、反転を駆使して容量を節減
負荷を抑えるために
© POKELABO, INC.
ドローコール
(処理の重ねすぎ)
エフェクトマッチョ要因 その3
負荷を抑えるために
© POKELABO, INC.
ドローコールの数を抑える
ひとつの画像の中に、複数のエフェクト画像を登録し
TextureSheetAnimationのグラフで呼び出す。
負荷を抑えるために
© POKELABO, INC. 942016/5/23
1 3
4
負荷を抑えるために
© POKELABO, INC. 952016/5/23
負荷を抑えるために
ココ
みて
© POKELABO, INC. 962016/5/23
負荷を抑えるために
© POKELABO, INC.
負荷を抑えるために
復習/エフェクトマッチョ3つの要因
 オーバードロー
半透明の重なりあいが処理落ちを起こす。
 画像サイズ
画像が大きいほどロード時間がかかる。
描画面積に比例して負荷が増大。
 ドローコール
呼ばれるマテリアルの数に比例して負荷が増大。
© POKELABO, INC.
7.まとめ
まとめ
© POKELABO, INC.
まとめ
表現追求の世界では必ず
人間を知る
という
永遠の命題に行き着く
© POKELABO, INC.
まとめ
© POKELABO, INC.
まとめ
エフェクト道に終わりなし
その深淵へと歩み続けろ
© POKELABO, INC.
まとめ
あくなき探究心を武器に
ものごとの本質だけを
つらぬけ

Mais conteúdo relacionado

Mais procurados

それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイントそれを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイントMakoto Goto
 
UE4背景アーティスト勉強会(前編) 背景ワークフロー解説
UE4背景アーティスト勉強会(前編) 背景ワークフロー解説UE4背景アーティスト勉強会(前編) 背景ワークフロー解説
UE4背景アーティスト勉強会(前編) 背景ワークフロー解説Aiko Shinohara
 
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版小林 信行
 
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』Unity Technologies Japan K.K.
 
エフェクトにしっかり色を付ける方法
エフェクトにしっかり色を付ける方法エフェクトにしっかり色を付ける方法
エフェクトにしっかり色を付ける方法kmasaki
 
UE4でAIとビヘイビアツリーと-基礎-
UE4でAIとビヘイビアツリーと-基礎-UE4でAIとビヘイビアツリーと-基礎-
UE4でAIとビヘイビアツリーと-基礎-com044
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司schoowebcampus
 
マテリアルエディタで作るVFX
マテリアルエディタで作るVFXマテリアルエディタで作るVFX
マテリアルエディタで作るVFXAkihito Chiba
 
ガチャサイクルと海外課金
ガチャサイクルと海外課金ガチャサイクルと海外課金
ガチャサイクルと海外課金Hiromasa Iwasaki
 
UE4 LODs for Optimization -Beginner-
UE4 LODs for Optimization -Beginner-UE4 LODs for Optimization -Beginner-
UE4 LODs for Optimization -Beginner-com044
 
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜GREE/Art
 
そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>
  そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>  そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>
そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>エピック・ゲームズ・ジャパン Epic Games Japan
 
UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~
UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~
UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~historia_Inc
 
Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例
Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例
Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例Tatsuhiro Tanaka
 

Mais procurados (20)

それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイントそれを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
 
UE4背景アーティスト勉強会(前編) 背景ワークフロー解説
UE4背景アーティスト勉強会(前編) 背景ワークフロー解説UE4背景アーティスト勉強会(前編) 背景ワークフロー解説
UE4背景アーティスト勉強会(前編) 背景ワークフロー解説
 
UE4におけるエフェクトの基本戦略事例 後半
UE4におけるエフェクトの基本戦略事例  後半UE4におけるエフェクトの基本戦略事例  後半
UE4におけるエフェクトの基本戦略事例 後半
 
UE4モバイルでノンゲームコンテンツ
UE4モバイルでノンゲームコンテンツUE4モバイルでノンゲームコンテンツ
UE4モバイルでノンゲームコンテンツ
 
UE4におけるレベル制作事例
UE4におけるレベル制作事例  UE4におけるレベル制作事例
UE4におけるレベル制作事例
 
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
 
売り切りとF2pの話
売り切りとF2pの話売り切りとF2pの話
売り切りとF2pの話
 
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
 
エフェクトにしっかり色を付ける方法
エフェクトにしっかり色を付ける方法エフェクトにしっかり色を付ける方法
エフェクトにしっかり色を付ける方法
 
UE4でAIとビヘイビアツリーと-基礎-
UE4でAIとビヘイビアツリーと-基礎-UE4でAIとビヘイビアツリーと-基礎-
UE4でAIとビヘイビアツリーと-基礎-
 
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
マテリアルエディタで作るVFX
マテリアルエディタで作るVFXマテリアルエディタで作るVFX
マテリアルエディタで作るVFX
 
ガチャサイクルと海外課金
ガチャサイクルと海外課金ガチャサイクルと海外課金
ガチャサイクルと海外課金
 
UE4 LODs for Optimization -Beginner-
UE4 LODs for Optimization -Beginner-UE4 LODs for Optimization -Beginner-
UE4 LODs for Optimization -Beginner-
 
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
【CEDEC2016】横スクロールARPG 「追憶の青」における 2Dキャラクターアニメーション〜2Dアニメの注意点とテクニック〜
 
Unreal Engine 5 早期アクセスの注目機能総おさらい Part 2
Unreal Engine 5 早期アクセスの注目機能総おさらい Part 2Unreal Engine 5 早期アクセスの注目機能総おさらい Part 2
Unreal Engine 5 早期アクセスの注目機能総おさらい Part 2
 
そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>
  そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>  そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>
そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 1 <Shader Compile, PSO Cache編>
 
UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~
UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~
UE5制作事例 “The Market of Light” ~Nanite/Lumenへの挑戦~
 
Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例
Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例
Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例
 

Destaque

過去の変遷から考えるDevOps型大規模ゲーム開発
過去の変遷から考えるDevOps型大規模ゲーム開発過去の変遷から考えるDevOps型大規模ゲーム開発
過去の変遷から考えるDevOps型大規模ゲーム開発GREE/Art
 
Gcm#4 Social VRの取り組みとしてデモ開発を通じてわかったこと
Gcm#4  Social VRの取り組みとしてデモ開発を通じてわかったことGcm#4  Social VRの取り組みとしてデモ開発を通じてわかったこと
Gcm#4 Social VRの取り組みとしてデモ開発を通じてわかったことGREE/Art
 
Gcm#4 アメリカの長編アニメーションの 色とライティング
Gcm#4  アメリカの長編アニメーションの 色とライティングGcm#4  アメリカの長編アニメーションの 色とライティング
Gcm#4 アメリカの長編アニメーションの 色とライティングGREE/Art
 
モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践GREE/Art
 
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例GREE/Art
 
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2GREE/Art
 
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるにはGREE/Art
 
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?GREE/Art
 
Shake up the Culture with Automation!
Shake up the Culture with Automation!Shake up the Culture with Automation!
Shake up the Culture with Automation!Hiroyuki Ito
 
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at FlickrJohn Allspaw
 

Destaque (10)

過去の変遷から考えるDevOps型大規模ゲーム開発
過去の変遷から考えるDevOps型大規模ゲーム開発過去の変遷から考えるDevOps型大規模ゲーム開発
過去の変遷から考えるDevOps型大規模ゲーム開発
 
Gcm#4 Social VRの取り組みとしてデモ開発を通じてわかったこと
Gcm#4  Social VRの取り組みとしてデモ開発を通じてわかったことGcm#4  Social VRの取り組みとしてデモ開発を通じてわかったこと
Gcm#4 Social VRの取り組みとしてデモ開発を通じてわかったこと
 
Gcm#4 アメリカの長編アニメーションの 色とライティング
Gcm#4  アメリカの長編アニメーションの 色とライティングGcm#4  アメリカの長編アニメーションの 色とライティング
Gcm#4 アメリカの長編アニメーションの 色とライティング
 
モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践
 
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
Gcm#4 VR空間で殴られよう 一人称視点の近接攻撃表現の事例
 
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
GCM#4 アーティストのためのプログラマブルシェーダー講座Part2
 
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
 
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
 
Shake up the Culture with Automation!
Shake up the Culture with Automation!Shake up the Culture with Automation!
Shake up the Culture with Automation!
 
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
 

フュージョン!イリュージョン!エクスプロージョン!SparkGearで語るエフェクト哲学

Notas do Editor

  1. 自分を検索したところ、なんと自分のwikiがありました。 しっかり時系列で系譜が書かれており、自分が外部で行った講演のリンクなども全て貼られています。 一体誰がまとめてくれてるのでしょうか。物好きな人もいるもんですよね。 私のことをもっと知りたい!池田ファンの方は是非こちらご覧になってみてください。
  2. では本日のプレゼンの流れです。 まず最初に、エフェクトの概念と、着想から制作まで4つのパートに分けて説明していきます。 私の実演による説明に加え、ツールをライブで使用しながら、可能な限り分かりやすい説明をしていく所存です。 エフェクトの概要を理解していただいたあと 最終調整項目である処理負荷を抑える手法について触れ、 最後にまとめとさせていただきます。
  3. まずゲームにおけるエフェクトの立ち位置を階層構造を用いて概観してみましょう。 まずゲームデザイン。忘れがちなのですが、私たちが作っているのは「ゲーム」です。 ゲームにおいての表現は、あくまでこのゲームデザインにコミットしたものでなければいけません。 表現そのものよりゲーム自体のクオリティが何よりも優先です。 で、そのゲームデザインにおいての下位概念として「演出」があります。 キャラクターや背景、UI、またゲームシステムに対して どんな演出を加えればゲームがより盛り上がり、ユーザーが没入感を抱いてくれるかを考える次元がココです。 で、演出に際して必要なエフェクトを付け加える。ご覧のとおりエフェクトは一番下、最終工程になります。 なのでゲームデザインが定まっていないと演出もエフェクトも制作できません。
  4. そんな、ゲームにおけるエフェクトの役割はシンプルに言うと、こうなります。 「化粧」です。 この言葉自体が、エフェクトが最終工程であることを示唆しています。 次の画像をみていただければ エフェクト(化粧)のあるなしで、キャラクターの印象に大きな違いがあるのが分かります。
  5. 女性であれば口紅やマスカラ、ファンデーションなどが化粧の道具(ツール)になります。
  6. エフェクトアーティストであれば デジタルな制作支援ツールがその化粧道具になります。
  7. このようにツールを用いてゲーム画面に施す化粧を行うのが エフェクトアーティストの仕事だと言えます。 エフェクトが「化粧」であれば、エフェクトアーティストは 「映像の化粧師(けわいし)」です。
  8. 制作前にさまざまな参考資料(スクショ、動画など)を集めると思いますが、その際に必要な素材を割り出していくコツをお教えします。
  9. なぜ割り出しが必要かというと、すべては表現できないからなんですね。 特にモバイルの場合は制限も多く、欲張るとすぐに処理が重くなりゲームプレイに多大な影響を与えることもあります。 なので最初に構成要素をしっかり割り出して、優先順位をつける必要があります。 そんなエフェクトの構成要素ですが、大きく二つのパーツに分けられます。
  10. まず「コア」 コアの概念は、それなくしてはエフェクトとして成立しない、絶対必要不可欠な要素を指します。 コアはエフェクトの中心部分にあり、もっとも大きく表示されていることが多いです。
  11. みなさんライブ行ったことありますか。 ライブで言えばボーカルが主役ですよね。 これにはみなさん納得していただけると思います。 なんだか一曲、歌いたくなってきましたね。歌っちゃっていいですか。
  12. みなさんライブ行ったことありますか。 ライブで言えばボーカルが主役ですよね。 これにはみなさん納得していただけると思います。 なんだか一曲、歌いたくなってきましたね。歌っちゃっていいですか。
  13. 実は今日のために私、スパークギアの主題歌を作ってみました。 イデアズスパーク。 聴いてください。
  14. イェイイェー最高だぜ。みんな~ありがとう。 のちほどですが、この歌詞で歌われた 「イデア」という単語について触れます。軽く意識しておいてください。
  15. 話を戻します。 続いて「エクストラ」 エクストラの概念は、あればさらに良くなるが、なくてもエフェクトとして成立する、にぎやかしの要素を指します。 エクストラはコアの周りに表示されており、それよりもかなり小さく(細く)表示されていることが多いです。
  16. はい、これがエクストラです。このプレゼン中は私がコアでみなさんがエクストラということになるのでしょうか。 ライブは観客がいたほうが盛り上がりますよね。 観客も多ければ多いほど、会場も広ければ広いほどいいですよね。 加えて照明などの演出もあったほうが絶対いいですよね。 でもこれらはあくまでオマケ要素で、必須ではないです。 このライブと同じ考え方で、エフェクトの構成要素を割り出していきます。
  17. さぁ、太陽が太陽であるために必要な要素は何でしょうか。
  18. 復習です。ふたつのパーツ、こちら改めてまとめました。 エフェクトのクオリティを追求するなら、まずコアにリソースを割いていきましょう。 エフェクトの処理負荷が重くなってしまった場合、まずエクストラから優先して削っていくことで負荷軽減を図っていきましょう。
  19. いまお見せした太陽に限らず、他のすべての物理現象も 構成要素を意識しながら必要素材の割り出しと見極めを行っていきましょう。 慣れてくると、資料(動画、スクショなど)を一瞥しただけでエフェクトのベクトルや必要素材が瞬時に分かるようになります。 常日頃、目的意識をもってモノを見る目を養ってください。
  20. では初心者や一般の方向けに、一般の方が使われている分かりやすい言葉で 簡単にエフェクトの概念を説明していきます。
  21. エフェクトには方向があります。その方向には二つの型があります。
  22. まずひとつめの型。全方位型。
  23. こちらクロサマの全方位型タイプのエフェクトです。 中心から外側に向かって同心円状に万遍なく広がっているのが特徴です。
  24. 続いて二つ目の型、指向型になります。
  25. 指向型のメリットは、力の向き(これをベクトルといいます)を強調した、勢いのある表現が可能になる反面、 ベクトルを持っているためクセが出てしまい、 かっこよい角度で見せるためのカメラワークの調整などに時間がかかってしまう点がデメリットとして挙げられます。 以上3つの現象以外にも、世界にはたくさんの指向型エフェクトがあります。意識して探してみてください。 エフェクト制作時は、このベクトルを常に意識しましょう。
  26. 復習です。 エフェクトの方向、ふたつの型 改めてその特性を理解してください。
  27. 続いてこちら。エフェクトをどうやって出して、どうやって消すか その演出の流れの考え方について触れます。
  28. ではクイズです。 エフェクトは発生と消失のさせ方次第で、クオリティに大きな差が出ます。 下の図を見てください。黒地に白い丸が見えると思います。 これを真っ黒に遷移させるにはどのような手法があるでしょうか。 ちなみに答えは一つではありません。無限です。なので 特に挙手して答えて頂かなくても構いません。ご来場の皆様全員、演出家として考えてみてください。
  29. 正解は以下になります。どうでしたか、この中に自分が思い描いた消去法はありましたか。 これらの遷移は日本のアニメなどでも定番の消去法ですね。 もちろん正解はこれだけではありません。 他にもさまざまな発生、消去法があるはずですし、既存のもの同士の組み合わせによる新しい表現も考えられます。
  30. こちらも同じです。こちらは先ほどよりも少しテクニカルな消去法になりますかね。
  31. つづいて余波について 余波とは 「起きた現象が周囲に与える影響」のことを指します。
  32. 復習です。改めてこの三つを意識してください。 この三つは私自身が先輩方に教えられたノウハウの中で 制作時に特に気を付けるように言われていた3つの事柄です。 この三つを意識して説得力と現実味のある演出を考えてみてください。
  33. つづいてエフェクトの描き方
  34. ここでクイズです。 エフェクトで使用するにあたって、もっとも汎用性が高く、クセの無い、完成された画があります。 それは・・・円(えん/Circle)です。 円には「欠けたところが無い、完成されたもの、完全なるもの」という意味があります。 こういったものを私は「普遍体」、と呼んでいます。 すべてのエフェクト画像はこの普遍体を基軸に作成していきます。
  35. それではこの円を要素別に分解してみます。 普遍体は「塗り」と「輪郭」で構成されていると考えます。 それらにディテール(ゆらぎ)を与えていくことで炎や煙などのエフェクトに仕上げていくことが可能です。 画像やシェーダを作成する際に、その原型となる円の輪郭(アウトライン)を窓枠の形に見立てて、その窓枠に何を映すか、を考えてみてください。 窓枠の形(輪郭/アウトライン)はどんなものにするか、窓枠に映すもの(塗り)は何か、その壁(内壁)はどのようなものか、じっくりイメージしてみてください。
  36. その考え方で作成したのがこれらの画像です。このように枠の形は普遍体を基軸にして、無限のシルエットを生み出します。 ちなみにこのパーティクル画像すべてが、Adobe社の動画編集ソフト、AfterEffectsの数値入力だけで作成したものです。 「クロスサマナー」で使用しているエフェクト画像の9割以上も、このAfterEffectsの数値入力だけで作成されています。手描きの画像はほぼゼロです。 ビルボード(画面正対ポリゴン)で使用することが多いので、極端な角度が付いたりした画像だと汎用性がガタ落ちになります。 なのでパーティクルで使用する画像はこれらの画像のように、円形に近く、中心点(ピボット)がずれていない画像にしてください。
  37. ざっくりですが、この普遍体に対するディテールの与え方の一例を図解します。 エフェクトの画の作り方、何となく理解できそうでしょうか。 ここらへんは後程行う実機デモで改めて触れます。
  38. 続いて円ほどの実用性には適わないまでも、それに次いで使用頻度の高い普遍体があります。 さぁ、何だと思いますか? 「円」ときたら、次は何でしょうか。お分かりの方いらっしゃいますか。ものすごくシンプルな形ですよ。 はい、「線」ですね。
  39. この普遍体も同じく要素別に分解するとこうなります。
  40. 実はこの線、左の画像にフォトショップの極座標フィルタを与えますと、こうなります。 繋いで丸めれば「輪(リング)」になります。リングとはつまり「円」ですね。 というわけで全ては円に帰結します。
  41. このように普遍体に対して与えるディテールの増減で 写実的にしたりアニメ的にしたりして 作品の世界観をエフェクトでも表現できます。 後程みなさんにお見せするSparkGearのリアルタイムプレビューであれば、 数値入力だけで一瞬のうちにエフェクトのディテールの増減を試すことができますし 思う存分に、好きなだけトライアンドエラーを繰り返せます。
  42. 復習です。 普遍体である 円と線、改めてその特性を理解してください。
  43. 円と線の普遍性の説明で少しはエフェクトデザインの理解が深まったかと思いますが、どうでしょうか。 続いて、実際にエフェクトツールを使うに当たって最初に学ぶ3つの要素を 一般の方にも分かりやすい言葉で説明していきます。
  44. 今言ったエミッター、パーティクル、寿命を こんな感じに言葉を変えてみました。
  45. これを僕で説明します。僕がエミッターで子供がパーティクルです。 実は画面外にもうひとつパーティクルがいまして、合計ふたつのパーティクルを育ててます。 実はもうひとつパーティクルを生成しようと思っているのですが、このパーティクルの育成には経済力が必要でして、 ぼくの年収が1000万円を越えたら、また作ろうかなと思ってます。 このように(親)から(子供)を生成させ、その子の(人生)をしっかり演出していくのが エフェクトアーティストの役割なんです。
  46. 次はその「人生」に触れていきます。 ところで・・・
  47. SparkGearでこのライフを色で時間軸にそって表現してみました。 一般的な男性の寿命が80歳とすると、今の僕の人生はSparkGearの寿命表示メモリでいうとちょうどこの辺になります。 私はもう折り返し地点を過ぎちゃってますね~。 みなさんの人生はどのあたりでしょうか。 ではパーティクルでこの人生を演出をするとなるとどのような手法で行うのでしょうか。 パーティクルには主要な4つの属性がありまして、それを駆使して演出します。 その主要4属性が次のスライドのこちらになります。
  48. さて人生を分解してみましょう。 エフェクトの見た目や挙動に大きな影響を与えている主要な属性はこれら4つに集約されます。 これら四つの要素を、人生のフェーズに添って変化させていくのがエフェクトアニメーションです。 ちなみに皆さんの人生も、客観的にはこの四つで全て表現できます。 どれだけ膨大なパラメータがあろうとも、最終的にはこの四つの属性に集約されていきます。 で、今言った4つの要素全てに影響を与えるものが、ひとつあります。 分かる方いらっしゃいましたら挙手願います。 運、ですね。この運は偶然の揺らぎのようなもので、自然界ではこの運が個体差として現れます。 エフェクト用語ではこれを「乱数」といいます。
  49. SparkGearでは乱数と呼ばれる仕組みを使って、この運を自由に操作できます。 このようにエフェクトアーティストは、生み出した子供の運命を自由に操る 神様みたいな存在なんです。
  50. Life この用語は、世界中に存在するすべてのパーティクルエディタで共通の用語になっており、必ず出てきます。 Lifeには人生、生き様、生涯、寿命などといった、いろんな意味が込められています。
  51. 今言ったものは全て「無常」なんです。この「無常」、どういう意味かというと 「この世のすべては常に変化し続け、一瞬たりともその同一性を維持できない」 ことをいいます。 これと同じ意味で古代ギリシャの哲学者ヘラクレイトスも 「万物流転」なんて言葉を遺しています。
  52. 突然ですがみなさん、この部屋を見まわしてください。 今は特に変化がないように見えます。 止まっているものもあるじゃないかと思うかもしれません。 それは人間の時間の尺度で考えているからそう思えるだけです。
  53. じゃあ100年後、この場所は一体どうなってますか。 我々はおそらくみんなあの世行きでしょう。 この部屋も経年変化で廃墟になっているか、ヒルズも取り壊されているかもしれません。 ちなみにこの画像はライトフライヤースタジオの開発している 「武器よさらば」のコンセプトアートです。 荒廃したイメージが文章のキャッチコピーにぴったりだったので使わせてもらってます。 リリースの暁にはぜひプレイしてみてください。
  54. この「無常」、もともと仏教用語で 平家物語でも使用されている重要な言葉です。諸行無常の響きあり、聞いたことがありますよね。 今の言葉に要約すると、 「鐘の音には、すべてのものは常に変化し、同じところにとどまらない響きがある。 花の色は、盛んな者もいつか必ず衰えるという道理を表している。」 という意味です。
  55. 四季の移り変わりと同じく、我々の人生もまた「無常」なのが分かると思います。 ひとつ違いがあるとすれば、季節はまためぐりますが「人生は一度きり」だということくらいです。 パーティクルはあなたと同じくこの世に生まれ、成長していきます。 時に子をもうけ、育て、壁(困難/コリジョン)にもぶち当たり、やがて死を迎え、無に帰します。 一つ一つのパーティクルにはあなたが与えたLife/人生があるわけです。
  56. エフェクト表現も全く同じです。 パーティクルの人生の続く間、この「無常」をきっちり表現してあげないと 説得力あるエフェクトになりません。
  57. ぼくはパーティクルから宇宙を感じます。 そしていずれ必ず死を迎える私たち自身も、実は、 無数の星々と同様、限りある人生を持ってこの宇宙に生まれた「子供」だと言えます。 俺たちの真の親は宇宙なんです。
  58. 俺たちの親が宇宙なのはわかった。 じゃあ、この宇宙の親は一体誰だ? 「誰だ」って、そもそも人じゃないかもしれないですが
  59. 残念ながら、この宇宙をビッグバンとともに発生させた親が一体どのようなものなのかは 現代科学では未だ解明されていません。 ビッグバン発動前には空間はもとより、時間の概念すら存在していないそうです。 我々人間には想像すらできません。 人はその親を「神」と呼ぶのかもしれません。
  60. 壮大な話になってしまいましたが、改めてこちら復習になります。 エミッターやらパーティクルやらわけ分からない横文字ですが、言葉に惑わされないでください。 これらの言葉は全て観念でしかなく、「そのもの」である実体は存在しません。 で、これらの言葉を一般の方にも馴染みある言葉で分かりやすく表現してみたのが 三つのワード、親、子供、そして人生となります。
  61. さてそろそろ後半に差し掛かってまいりました。 ここでエフェクトが最終的には実機に乗っかるわけですが、その際に気になるのが処理負荷ですよね。 みなさんもココらへんに詳しくなっていただき、軽快でカッコイイエフェクトを作ってもらいたいので 一体負荷が重いとどうなるかと、負荷をどのようにして抑えるかを 私が今から劇場方式で説明させていただきます。
  62. クロサマトップページの背景の雲についてフォーカスしてみます。 低解像度の画像をタイル状に敷き詰めて二枚重ねにして、ゆっくり動かしてあります。 どうしても高解像度で表現したいのであれば、その画像に繰り返せる部分は無いか、反転して使える部分は無いかを今一度じっくり確認してみてください。 画像の持つディテールよりも、動かし方(アニメーション)のほうがはるかに大事です。 解像度よりも、動きに徹底的にこだわってください。
  63. 複数の画像を一枚に収めて、対応した番号をパーティクルエディタのグラフで指定して呼び出すことが出来ます。
  64. このドローコール、先ほども説明しましたが いまいちわかりにくいと思うので もう一度説明します。 4つの矩形のエフェクト画像があるのが分かりますでしょうか。 この4つのエフェクト画像を駆使して、燃え盛る炎のエフェクトをsparkgearで作成してみました。
  65. 赤い枠を御覧ください。 ドローコールが1になっているのがわかりますよね。 見えない?じゃこちらで
  66. スパークギアの場合、複数の画像を自動でひとつに収めてくれるので ひとつのパーティクルに対して多彩な表現が可能で、かつ処理も抑えめのエフェクトが作成できます。 ちなみにUnityのシュリケンで同じ表現をした場合、単純計算でこの4倍の処理負荷がかかってしまいますよ。
  67. 復習です。改めてごらんください。 エフェクトの処理落ち要因はほぼこの3つに集約されます。忘れないでくださいね。
  68. 全体のまとめです。 本日のプレゼンを通じてエフェクトの概念、その魅力、皆様に少しでも理解していただけたなら幸いです。 さて、これが最後です。 先ほど紹介した「無常」と同様にみなさんに持ち帰っていただきたい言葉があります。
  69. ここに集まってくれたみなさんはクリエイターですよね。「表現者」ですよね。であれば、 決して技術の追求のみにとどまらないでください。 人間の心理を知ることも重要ですよ。 作ったエフェクトを見るユーザーは「人間」です。
  70. 何を見て人は感動するのか。何を見て人は悲しむのか。何を見て人はかっこいいと思うのか。 答えなんてないです。考え続けるしかありません。 ぶっちゃけ、エフェクトやパーティクルなんていくらでも忘れて構いませんが、 人間を知ること、これだけは忘れないでくださいね。