絵心がなくてもわかるUE4絵作りのコツ

56
絵絵絵絵絵絵絵絵絵絵 UE4 絵絵絵絵絵絵 Unreal Engine 4 絵絵 Meetup #ue4studysap By alwei

Transcript of 絵心がなくてもわかるUE4絵作りのコツ

Page 1: 絵心がなくてもわかるUE4絵作りのコツ

絵心がなくてもわかるUE4 絵作りのコツ

Unreal Engine 4 札幌 Meetup#ue4studysap

By alwei

Page 2: 絵心がなくてもわかるUE4絵作りのコツ

自己紹介HN : alwei (アルウェイと読みます)

関西アンリアルの人。

普段 Twitter をよくやってます。→ @aizen76

元々はゲームプログラマーで、 3D アクションゲームや MMORPG など、

幅広いゲームジャンルのあらゆる部分を作ったりしていました。

今はフリーでゲーム開発の先生をやったり、テクニカルライターやったり、

イベント活動をやったりと割りと何でも屋。

Page 3: 絵心がなくてもわかるUE4絵作りのコツ

自己紹介最近はイラストを描くのが趣味。

3D モデリングもやってます!( Maya 派なので仲間少ない…)

ぶっちゃけ一人でなんでも作れるようになりたい。

テクニカルアーティストにも憧れる。

まぁ面白ければ何でもよし!

うちの子可愛い (*´∀ ` )

Page 4: 絵心がなくてもわかるUE4絵作りのコツ

著書Unreal Engine 4ブループリント逆引きリファレンス

翔泳社様より発売中。

ブループリントとは何ぞや?

ビジュアルスクリプトってどう使うの?

というような人向けの内容です。

Page 5: 絵心がなくてもわかるUE4絵作りのコツ

さて…

Page 6: 絵心がなくてもわかるUE4絵作りのコツ

札幌に大阪から乗り込んできたものの…

Page 7: 絵心がなくてもわかるUE4絵作りのコツ

関西人アウェイ!

Page 8: 絵心がなくてもわかるUE4絵作りのコツ

緊張 Big !

Page 9: 絵心がなくてもわかるUE4絵作りのコツ

面白いこと言わないときっと刺される!!

Page 10: 絵心がなくてもわかるUE4絵作りのコツ

まぁそんなことより誰か札幌の美味しい

食べ物紹介してください

Page 11: 絵心がなくてもわかるUE4絵作りのコツ

いいから本題

Page 12: 絵心がなくてもわかるUE4絵作りのコツ

UE4 の絵作りについて

Page 13: 絵心がなくてもわかるUE4絵作りのコツ

絵を描いてみる

Page 14: 絵心がなくてもわかるUE4絵作りのコツ

モデリングしてみる

Page 15: 絵心がなくてもわかるUE4絵作りのコツ

おいっ!!

Page 16: 絵心がなくてもわかるUE4絵作りのコツ

私、絵心ないし…プログラマー(エンジニア)の方は、厳しいかもしれません。

じゃあ UE4 で魅力のある絵を出すのは難しいの?

いえ、そんなことはありません。

しっかりと基礎を理解していれば UE4 で魅力のある絵を出すことは

そんなに難しいことではありません。

今回はそんな人達向けの内容です。

Page 17: 絵心がなくてもわかるUE4絵作りのコツ

ポストエフェクト

Page 18: 絵心がなくてもわかるUE4絵作りのコツ

ポストエフェクトUE4 に限らず、 After Effects などの合成ソフトと同じようなことが可能。

一度レンダリングしたモノに対してかける後処理のエフェクトです。

イマドキの綺麗で魅力ある絵を表現するにはここをこだわる必要があり。

UE4 にはデフォルトで様々なポストエフェクトが用意されています。

使い方は以下を参照してください。

https://docs.unrealengine.com/latest/JPN/Engine/Rendering/PostProcessEffects/index.html

Page 19: 絵心がなくてもわかるUE4絵作りのコツ

ブルーム

Page 20: 絵心がなくてもわかるUE4絵作りのコツ

ブルーム現実世界における発光現象を再現するエフェクト。

いわゆる HDR ( High Dynamic Range )映像のシミュレート。

あくまでもシミュレートなのでガウスブラーアルゴリズムで実装されています。

イマドキのゲームはブルームにメッチャこだわってます。

UE4 はこのブルームエフェクトの質もとても高い。

ブルームにこだわるゲームはとても綺麗です!

Page 21: 絵心がなくてもわかるUE4絵作りのコツ

ブルームなし

Page 22: 絵心がなくてもわかるUE4絵作りのコツ

ブルームあり

Page 23: 絵心がなくてもわかるUE4絵作りのコツ

更に少し調整

Page 24: 絵心がなくてもわかるUE4絵作りのコツ

ブルームを使おう!ブルームは豪華な映像には必須!

ブルームプロパティの、” Intensity” や” Threshold” の調整だけでも

かなりの違いを見せることが可能。

光らせたいマテリアルを”エミッシブカラー”に接続するだけで光る!※値要調整

またはメタリック要素が強いものは反射によって光る。

Page 25: 絵心がなくてもわかるUE4絵作りのコツ

ブルームを使おう!!恒常的に光るものはエミッシブカラーに。

光の反射によって光る場合はライトの強さと置き方と、

メタリック、ラフネスのバランスで反射の光り方は変化します。

極端な設定にすると目に痛くなるので、やりすぎに注意。

バランスよく設定すると柔らかな表現が可能になります。

Page 26: 絵心がなくてもわかるUE4絵作りのコツ

カラーグレーディング(トーンマッピング)

Page 27: 絵心がなくてもわかるUE4絵作りのコツ

カラーグレーディングHDR (ハイダイナミックレンジ)を LDR (ローダイナミックレンジ)に

カラー情報をマッピング仕直すことをトーンマッピングと呼びます。

これで HDR 映像の高輝度を表現することができます。

UE4 では更にこれの色変換を行うところまでサポートしており、

この変換処理のことをカラーグレーディングと呼んでいます。

Page 28: 絵心がなくてもわかるUE4絵作りのコツ

アニメちっくな色づかいカラーグレーディングを調整することで、

普段皆さんの観ているセルアニメのような雰囲気に近い表現ができます。

セルアニメのような表現でキーワードとして重要なのは、

『彩度』『ハイコントラスト』『ガンマ値』などなど…

ここから 1枚ずつ変化を見ていきましょう!

Page 29: 絵心がなくてもわかるUE4絵作りのコツ

完全未調整状態

Page 30: 絵心がなくてもわかるUE4絵作りのコツ

Scene Color Tint(0.5,0.5,0.5)

Page 31: 絵心がなくてもわかるUE4絵作りのコツ

Saturation(2.5,1.5,1.5)

Page 32: 絵心がなくてもわかるUE4絵作りのコツ

Contrast (4.0,4.0,4.0)

Page 33: 絵心がなくてもわかるUE4絵作りのコツ

Gamma (3.0,3.0,3.0)

Page 34: 絵心がなくてもわかるUE4絵作りのコツ

High Contrast LUT挿入

Page 35: 絵心がなくてもわかるUE4絵作りのコツ

独自セルシェーダー導入

Page 36: 絵心がなくてもわかるUE4絵作りのコツ

独自ディフュージョン導入

Page 37: 絵心がなくてもわかるUE4絵作りのコツ

最初と最終の比較

※ モデル本体のマテリアルは一切弄っておりません。

Page 38: 絵心がなくてもわかるUE4絵作りのコツ

解説

Page 39: 絵心がなくてもわかるUE4絵作りのコツ

Scene Color (シーン全体の色)最初に Scene Color全体を暗く落としました。

高輝度に調整していく場合、暗い状態からの方が幅効かせて

調整がしやすいからです。

Page 40: 絵心がなくてもわかるUE4絵作りのコツ

Saturation (彩度)魅力あるアニメキャラは全体的に彩度が高い。

彩りのあるキャラは魅力的に見える。

肌の色を強くするために R 成分だけを強めにしています。

Page 41: 絵心がなくてもわかるUE4絵作りのコツ

Contrast (ハイコントラスト)ハイコントラストは線の力強さを引き上げます。

白いところは白く、黒いところはより黒くなります。

アニメキャラも全体的にハイコントラストでメリハリをつけています。

Page 42: 絵心がなくてもわかるUE4絵作りのコツ

Gamma (ガンマ値)ガンマ値はモニターによる色補正のことです。

モニターによって違う値になるのでここではベースのガンマ値を設定します。

今回は高い値による補正で全体的な輝度を高めました。

Page 43: 絵心がなくてもわかるUE4絵作りのコツ

ルックアップテーブルルックアップテーブルテクスチャーを挿入して、更に色変化を与えます。

今回はハイコントラストな LUT テクスチャーを挿入しました。

これでより色と線が引き立つように。

今回使用した LUT 。LUT テクスチャーは探すと色々出てきます。

Page 44: 絵心がなくてもわかるUE4絵作りのコツ

セルシェーディング独自セルシェーディングを導入。アウトライン機能もつけています。

簡単な作り方ならブログで紹介しています。

http://unrealengine.hatenablog.com/entry/2016/05/29/204545

ぶっちゃけこの辺の詳しいことはこの後のおぎまふさんが解説してくれるはずなので後は任せた!!

Page 45: 絵心がなくてもわかるUE4絵作りのコツ

ディフュージョンフィルターもんしょさんが作られてたディフュージョンフィルターを参考にして、

導入しています。アニメ系の絵作りにはかなり効果あり。

https://twitter.com/monsho1977/status/670633405634248705

Page 46: 絵心がなくてもわかるUE4絵作りのコツ

色づかいについてまとめ色づかいというのは本当に重要です。

絵描きさんの絵が魅力的に見えるのは必然的に

色の選択が上手いというのも大きいはずです。

絵心がない!という人も一度色塗りをやってみるとその気持ちがわかります。

描くというのと塗るというのはまた別の技術です。

一度何かを塗ってみてから、どういう色が綺麗に見えるのか

わかってくると UE4上でも同様のことが再現できるようになります。

Page 47: 絵心がなくてもわかるUE4絵作りのコツ

被写界深度( Depth of Field )

Page 48: 絵心がなくてもわかるUE4絵作りのコツ

被写界深度( DoF )カメラの焦点が合っていない時にブラーを発生させて、

見せたい対象にフォーカスし、視線を誘導させる手法です。

現実のカメラに発生するエフェクトですが、それをシミュレートします。

プロの映像の世界では間違いなく利用されており、

これが使いこなせるかでプロとアマチュアの差が出るくらいです。

UE4 では 3種類の被写界深度が実装されています。

Page 49: 絵心がなくてもわかるUE4絵作りのコツ

被写界深度( DoF )被写界深度の考え方は 3 つのレイヤーに分かれています。

Near (近距離)、 Far (遠距離)、 Focal Region (焦点領域)

これらのレイヤーのうち Near と Far がブラーによりぼやけて、

Focal Region とブレンドされた結果が DoF となって画像になります。

[Show( 表示 )]→[Visualize( 可視化 )]→[Depth of Field Layers] で

それぞれのレイヤーが緑、青、黒でデバッグ表示されます。

Page 50: 絵心がなくてもわかるUE4絵作りのコツ

Gaussian DoF

Page 51: 絵心がなくてもわかるUE4絵作りのコツ

Bokeh DoF

Page 52: 絵心がなくてもわかるUE4絵作りのコツ

Circle DoF

Page 53: 絵心がなくてもわかるUE4絵作りのコツ

Gaussian DoF最も標準の被写界深度。実際にゲームで使うのには

丁度良いパフォーマンスになります。品質的には Bokeh DoF に劣ります。

Page 54: 絵心がなくてもわかるUE4絵作りのコツ

Bokeh DoF映画の映像のようなクオリティを実現する DoF です。

パフォーマンスよりもクオリティ重視なため、かなり重いです。

Page 55: 絵心がなくてもわかるUE4絵作りのコツ

Circle DoF最近追加された DoF 。クオリティとパフォーマンスのバランスは良いです。

ただし設定が貧弱で、 3種類の DoF の中で最も使いこなすのが難しいところ。

Page 56: 絵心がなくてもわかるUE4絵作りのコツ

まとめマテリアルが上手く作れなくても、ポストエフェクトだけで

UE4 はかなりお手軽に綺麗で魅力ある絵作りができます。

もちろん絵が描けたり、モデリングできるともっと有利です。

絵心ないけど…という人も一度挑戦してみるのもいかがでしょうか?

ポストエフェクトを弄る際にもそれらが相乗効果になり、

よりクオリティの高い表現ができるようになります。