ゲームエフェクトデザイナーのブログ | A Real-Time VFX Artist's Blog

About Making Materials on UE, Making Tools with C#, etc

Main Contents

●TOPICS

▼ゲーム開発者のための英語学習コミュニティ『GDEnglish』を開設!


▼My Tools and My Presentation Materials

 moko-vfx (moko) · GitHub
 Moko, Video game fx artist | SlideShare

 『Tenpu Gazo Maker』や『List Fusen 2』など便利なのでぜひお試しください!
 Tenpu Gazo Maker をリリースしました!
  リスト管理できるテキストエディタ「List Fusen」がバージョン2になりました!


▼References for VFX on Pinterest


●Materials from past study sessions in VFX Developers Exchange Meeting

第8回VFX技術者交流会(Vertex Shader / 2DFX / SD Techniques)
第7回VFX技術者交流会(Shadow of Translucent / Material Techniques)
第6回VFX技術者交流会(Introducion of GDC Talks)
第5回VFX技術者交流会(GDC2016 VFXRT / Rendering / VFX on Unity)
第4回VFX技術者交流会(Maya Fluids / Assets / AE Plugin / VFX Issues)

●Studying English

Danganronpa に登場した英語表現まとめ
ゲームプレイで英語を勉強する流れ
TEDの視聴に公式サイトを活用する
2人で短時間で可能でカンタンな英語学習
英語学習を1年半続けてみた所感
英語ボイチャでAmong Usをプレイする際の英文集
Netflixで英語字幕から英文を学ぶ
Netflixでの英語学習に英語対応の日本アニメを視聴してみる
英語学習のためにプレイしたSteamゲーム
英語学習向けのSteamゲームは?
英語の助動詞の役割りを表にまとめてみた
英語の学習のために行っていること
C# 英単語を覚えるためのツール「English Words Check Tool」を公開しました!
英語の学習をはじめてみた

Unreal Engine 4(UE4

エフェクトツールを使ってできること
エフェクトのワークフロー

テクスチャのインポートについて
テクスチャのプロパティについて
テクスチャのフォーマットについて

マテリアル作成の基本的な知識
最終マテリアル入力の各ポートについて
パーティクル向けのマテリアルの設定について


Maya

MELの最初のステップ
MELのウインドウ作成について
MELでシェーダー作成 1
MELでシェーダー作成 2
MELスクリプトのある場所を参照する
MELを配布する時のプロシージャについて
UVの正規化
頂点カラーを別のモデルに転送
テクスチャの色を頂点カラーに転送

Photoshop

Photoshopのスクリプトを書いてみる

C#やプログラム全般

「C#」の記事一覧

●その他の記事

VFXアーティストのスキル自己評価シートを公開しました

数学が苦手な人向けのCG数学シリーズ

処理速度と処理量のお話 ms(ミリセカンド)について
ドローコールについて

おおまかな開発コストの計算方法
おおまかなゲームソフトの売り上げの計算方法

勉強会開催のすすめ
大阪・京都の貸し会議室メモ

 

GDC2019 | The VFX Process Behind 'Battleborn'

GDC2019の「BATTLEBORN」のエフェクトのメイキングの講演から、重要なトピックと英語表現の両方を取り上げてみる記事になります。

講演部分は20分ほどで、英語に慣れるのにも丁度良いと思ってピックアップしました。

BATTLEBORNはUE3で開発されていたようです。
Battleborn (video game) - Wikipedia

 

Introduction


講演者はBATTLEBORNを開発したGearbox SoftwareのシニアVFXアーティストのAshley Lyons氏。「Borderlands: The Pre-Sequel」にも携わっているとのこと。

TwitterHank Hustle🎮🖱🎨 (@FXBl4ckout) | Twitter
ArtStation: https://ashlyons.artstation.com/

pre-sequel / prequel ‥ 前日譚・前編
sequel ‥ 後日譚・後編・続編


また、BATTLEBORNの特徴は以下であると説明されています。

fast-paced ‥ ペースの速い・展開が早い
light-hearted ‥ 快活な・楽しい
FPS
stylized ‥ 様式化された・スタイライズドな
aesthetic ‥ 美的な・美学的な(アスタティック)
it incorporates mobile-like elements
 ‥ モバイル(ゲーム?)のような要素を組み込んでいる


講演内容のトピックは大きく3つ。

Why we decided to feature stylized effects?
なぜ我々はスタイライズドなエフェクトを特徴付けることを決めたのか?

How it concepted many of our ideas?
我々の沢山のアイデアをどうやって構想したのか?

How we implemented those ideas to come about with our final product?
それらアイデアを我々の最終的な製品に組み込む


メモ:【to implement】 と 【to incorporate】 と 【to integrate】 はどう違いますか? | HiNative

なぜスライライズドなエフェクトにしたのか?


2つ語られています。

It was a great way to stand out amongst other FPS games.
それが他のFPSゲームの中で突出するための方法だった。

・amongst = among 
・stand out ‥ 突出する・目立つ・際立つ

By doing so it allowed us to create some super creative and original VFX.
そうすることで非常にクリエイティブで独創的なエフェクトを作ることができた。


キャラクターデザインの時点ですでに誇張された見た目(exaggerated look)だったそうです。そこに独自のアニメーションされたエフェクト(Animated VFX)を加えることで、アニメ的な美学(cartoon-like aesthetic)を高めて(enhance)引き立たせ(complement)、カラフルな環境も同様に引き立たせることができたとのこと。

また様々なテクニックやスタイルを試せたことも良かったそうです。

加えてAshley氏の個人的な意見として「現実に即したエフェクトはアーティストに表現の制限を与えてしまう傾向にある」とも語られています。

沢山のアイデアをどうやって構想し、どう製品に組み込んだのか?


2人のアニメーターの参加が中核になっていたようです。

●Michel Gagne氏の参加

BATTLEBORNの構想段階で、様々な映画(Spider-Man: Into the Spider-Verseも)に携わっているFXアニメーターMichel Gagne氏が加わったそうです。
About Michel Gagné

講演とは関係無いですがスパイダーバースのメイキングを貼り付けておきます。。

こちらは、Michel氏とのやり取りの説明時に登場した表現のメモです。

initial growing pains ‥ 初期の困難

out of the way ‥ 並外れた・片付いて
follow suit ‥ 先例に倣う・後に続く
go over ‥ 調査する・探査する・練習する・熟考する


初期のエフェクトのコンセプトイメージを起こしてアイデアをコンセプト化しているそうで、実際にMichel氏がゲーム中のアニメーションの1コマ1コマに手描きで起こしたものが紹介されています。


●Seung Kim氏の参加

もう1人FXアニメーターのSeung Kim氏が3万フレーム(!)を遥かに超える量の中割りのパターンを描いて、ゲームのアセットに落とし込んだそうです。

またエフェクトチームに2人のアニメーターがいる利点として、観察する機会が得られる点と「12 Principles of Animation(12のアニメーションの原則)」のいくつかを自分たちのエフェクトに応用できた点があり、結果キャラクターアニメーションを模倣したエフェクトを作ることができたそうです。そのため36フレームなら36パターンのアニメを用意したとのこと(!)。

over the course of the game development ‥ ゲーム開発の過程で
a type of basic ground impact ‥ 基本的な地面への衝撃波
fall into the groove ‥ 型にハマる・マンネリになる・慣れる
turn into ~ ‥ ~に変化する
towards the end of development ‥ 開発の終盤に向かって
up to the standard ‥ 基準に達する
go back ‥ 再び取り掛かる・立ち返る
precise ‥ きちんとした
crisp ‥ 鮮明な・きちんとした
akin to ~ ‥ ~と同種の
observe [verb] ‥ 観察する
namely ‥ すなわち・ハッキリ言えば
unnoticeable ‥ 知覚されない・目立たない
end up with ~ ‥ 結果的に~で終わる

 

●フレームレートガイドの作成

テクスチャスペースを最大化するためにフレームレートガイドを作成したという話がされました(詳細は話されていないので分かりませんが、記載の感じだと1枚のテクスチャに複数のアニメーションパターンを同梱していたりも?)。

最終的に3600個を超えるパーティクルエフェクトが完成したとのことです。

●スタイルガイドの作成

総勢30名のキャラクターが6つの組織に属していて、各組織とキャラクターに独自のスタイル化されたエフェクトがあり、一貫性を保つためにスタイルガイドを作成する必要があったそうです。

to keep things consistent ‥ 一貫性を保つために
consistent ‥ 辻褄の合う・一貫性のある・着実な
faction ‥ 派閥・技法の形式
cement the look ‥ ルックを固める
acquire [verb] ‥ 獲得する・習得する
we represented with electric blue and some golden yellow hues.
 ‥ 電撃的な青とゴールデンイエローの色合いで描写(表現)した
represent [verb] ‥ 示す・代表を務める・描画する・表現する・心に描く

hue ‥ 色相・色合い・色彩・種類・型・見え方

 

●グレーパッキング

RGBの各チャンネルにモノクロのテクスチャを格納することをグレーパッキングと呼んでいるそうです。特定の色が必要でない限り、各テクスチャはグレーパッキング用に色味を抑えて色調統一のためにグラデーションを入れないようにしているとのこと。

最終的に90%のテクスチャをグレーパッキングしたとのこと。マテリアルインスタンスでRGBのどのチャンネルの絵柄を利用するか選べる形になっている感じでしょうか。サムネイルでどんなテクスチャが格納されているか見辛くなるため、膨大なテクスチャの大半をパックしているとなるとその点がネックになりそうですが。。

assemble [verb] ‥ 集める・組み立てる・構築する・整理する

keep at around two to three colors ‥ 2~3色に抑える

a black and white texture ‥ モノクロテクスチャ

at the end of the project ‥ プロジェクト終了時

 

●2Dのテクスチャを3D環境に加える

旋風の3Dエフェクトを例に、どんなテクスチャをどんな3Dモデルに適用しているか説明されています。爆発エフェクトのコンセプトアートは真横から見た絵になっていますが、色んな角度から見ても大丈夫なようにエフェクトを構成するために、Michel氏には「真下を見るようなイメージで」とオーダーしたとのこと。

strip ‥ 細長い一辺
one-to-one ‥ 1対1の・1対1に対応する
give that effect a more volume
 ‥ そのエフェクトによりボリューム感を与える
escape that flat billboard type look
 ‥ 平坦なビルボードタイプの見た目を回避する
result [verb] ‥ 生じる・帰結する

 

●キャラクターに合ったエフェクトを用意する

12のアニメーションの原則の適用とキャラクターアニメーションの誇張されたルックにエフェクトをマッチさせた結果、プレイヤーキャラクターの全てのエフェクトに「a sense of ownership(キャラクターを体現している感じ?)」を生んでいるとのことです。

correspond ‥ 一致する・該当する
respective 名詞(複数形) ‥ それぞれの・個別の
convey [verb] ‥ 運ぶ・伝える
ownership ‥ 所有者・責任感
bipedal ‥ 二足歩行の
shimmer ‥ チラチラと光る・揺らめく

 

例えば二足歩行の蛇のキャラクター「Pendles」には全てのエフェクトに蛇のテーマを、同じく鳥のキャラクター「Ernest」には卵黄と羽のテーマを与えたそうです。

a heavily implied snake theme ‥ 色濃く暗示した蛇のテーマ
egg yolk ‥ 卵黄

 

●エフェクトを制作する上で避けたこと

チームで「FX Soup」または「Color Vomit」と呼んでいるものを避けた(avoiding what we on the team called Effects Soup or basically Color Vomit)、具体的には画面上に過剰にエフェクトを表示させることを避けたということです。

※ soup は濃霧・分厚い雲という意味がありネガティブなニュアンスがある模様
※ vomit は嘔吐物・噴出という意味がある模様

get carried away ‥ 調子に乗る・我を忘れる
straddle a line ‥ 境界をまたぐ
abundance ‥ 大量・おびただしさ
dial back ‥ (議論などを元に)戻す
numerous critique ‥ 無数の批評

 

●プレイヤーが近づいた際にフェードさせる

開発終盤のポリッシュ時に「We added a fade to all of the particle systems anytime the player got close to them.(ゲーム中に全てのエフェクトをプレイヤーが近づいたらフェードさせるようにした)」そうです。

結果的にカメラの視界も良くなると思いますが、直接的にはキャラクター自体の視認性を上げるための施策ですね。

impede ‥ 妨げる
during the game ‥ ゲーム中

 

●最後にいくつかの助言

Ashley氏はスタイライズドなエフェクトをゲームに取り入れることを検討する際のアドバイスとして「You should ask yourself why you stylize effects in the first place and how will this decision affect your game.(そもそもなぜエフェクトをスタイライズするのか、その決定がゲームにどう影響するのか自身に問うべき)」と語っています。

そして「You can ask yourself if is the universe cohesive, (and) does everything belong.(その世界はまとまっているのかどうか、全てがあるべきところにあるかを自身に問ってはどうか)」、またコンセプト作成に移る際には新しいことへの挑戦を恐れず、自分では作れないタイプのエフェクト作成に果敢であれと言う一方で「FX Soup Look」を避けるべしといった感じにことを言われています。

それから「エフェクト自体がキャラクターのように命・振る舞い・個性を与えること」や「あなたが成し遂げられる限界に近づくこと」を最後に添えられています。

in the first place ‥ 第一に・そもそも

 

以上、英語のリスニングと開発における英語表現の勉強を兼ねてのご紹介でした!

Sprite Sheet Tool をリリースしました!

スプライトシートを作成したり、逆に画像を分割したりするためのツールです。

かなり簡易的に作成したツールなので、現状はファイル名を指定できなかったり出力フォルダを指定できなかったりと色々と手を抜いたものになっています。。

f:id:moko_03_25:20220220003723p:plain

 

複数の画像を1枚に結合して出力する方法


1.  ツール上に複数の画像をドラッグ&ドロップ
 ※この場合は何もプレビューされません(左下の Number : に枚数が表示されます)

2.「ヨコに並べる数」を指定

3.  画像のフォーマットを選択

4.「出力する」ボタンを押す

すると最初に放り込んだ画像が保存されている場所に「Output」フォルダを自動で作成して、その中に結合した画像を出力します。

f:id:moko_03_25:20220220001833g:plain

 

1枚の画像を複数の画像に分割して出力する方法


1.  ツール上に1枚の画像をドラッグ&ドロップ

2.「ヨコの分割数」と「タテの分割数」を指定

3.  画像のフォーマットを選択

4.「出力する」ボタンを押す

すると、こちらも「Output」フォルダを自動で作成して、その中に画像を出力します。

f:id:moko_03_25:20220220001820g:plain

 

ダウンロードはこちら


GitHubにアップしています。binaryフォルダ内にツール本体の実行ファイルが入っていますので「Download」ボタンからDLしてお使いください。

ライセンスは MIT License です。

不具合があったらtwitter(@moko_03_25)等でお知らせいただけると助かります!

更新履歴


・2022.02.20 ver.1.00   リリース!

作者 / 著作権


moko

動作確認済みのOS


Windows10 (64bit)

使用条件


本ツールはOSSオープンソース・ソフトウェア・ライセンス)です。
商用・非商用に関わらず(プライベートでもお仕事でも)ご自由にお使いください。
複製、改変、再配布も自由です。

免責事項


本ソフトウェアは予告なく機能を変更することがあります。
本ソフトウェアは動作環境を満たす全ての環境で正常に動作することを期待していますが、保証はできません。
本ソフトウェアの使用により生じたいかなる損害に関して、作者は一切の責任を負いません。

 

煙に背後のオブジェクトのシルエットを写す [後編] | Draw silhouettes of objects behind smoke Part.2

陽 花嶋 さんの記事「Niagaraでマリオのワンワン作ろう~PDB法でのリアルタイム鎖シミュレーション~」に続いて「UE Advent Calendar 2021」23 日目、そして前回の記事の後編です!

Following Yo Hamashima's article "Let's make Chomp in Mario Bros. ~ real-time chain simulation by PDB method ~," this is the article on the 23rd day of UE Advent Calendar 2021 and the second part of the previous article!

続きを読む

英語の技術記事の冠詞・単数形・複数形(UEの場合)

英語で技術記事を書く際に名詞の冠詞単数形複数形の使い分けに非常に迷います。
そこで UE5 の公式ドキュメントを参考に特徴を抜き出してみました。

続きを読む

複合形容詞の例(UEの場合)

英文を読んでいると複数の単語がハイフン ( - ) で繋がっていることがあります。
例えば「next-generation(次世代)」のような。

これは複合形容詞と呼ばれるものだそうです。

沢山種類がありますね‥!

そこで、海外のCG技術関連ドキュメントを漁る際によく登場しそうなものをメモっておきたいと思います。とりあえず UE5 のドキュメント内に登場するものを列挙しました。

続きを読む

英語の技術記事のタイトルの付け方(UEの場合)

英語で技術記事を書こうと思った時にタイトルをどう付けるか迷うことがあります。
その参考用に UE5・UE4 の公式ドキュメントから特徴を抜粋してみました。

続きを読む

煙に背後のオブジェクトのシルエットを写す [前編] | Draw silhouettes of objects behind smoke Part.1

ほげたつさんのブルーマンチャレンジ!の記事 に続いて「UE Advent Calendar 2021」7日目の記事になります!

Following Hogetatu's article (about Blueman Challenge!), this is the article on the 7th day of UE Advent Calendar 2021!

去年は何を書こうかと思っていたら12月が終わってしまいましたが、今年は2019年の記事と同じようにマテリアルを使った表現について取り上げたいと思います。

Last year, December ended before I came up with what to write about, and this year, I want to show an expression using materials on UE like my article in 2019.

続きを読む