1

アセットでお手軽クオリティアップ！池和田 有輔（ユニティ・テクノロジーズ・ジャパン）

2

“お手軽” とは？• 理屈はさておき、とりあえずコレやっとけば良い感じになる • 応用はさておき、○○を実現するためにはコレが最短ルート

3

なぜ、アセット紹介？• 公式アセットであっても基本機能じゃないものは気が付きにくい • マニュアルやリファレンスもない

でもお高いんでしょう？• 今回は最後の一つを除いて無料のものを紹介します

4

mission 1

のっぺりした絵をなんとかしたい！

5

6

7

8

9

10

11

Post Processing StackAsset

Free

12

定番の視覚効果を束にしたポストエフェクト

• カメラコンポーネントに Post Processing Behaviorコンポーネントを追加し、プロフィールファイルを作るだけで超手軽に使えます

• なぜスタック？ • スタックならではのメリットが多い • Camera Depth Texture（深度情報テクスチャ）AA、DOF、SSRなどに使う • Motion Vector Texture（動き情報テクスチャ）AA、モーションブラーなどに使う • 1+1+1+1+1は5ではない

• ディファード＋HDR環境＋リニアカラースペースで真価を発揮 • VRでは厳しいものが多く、またモバイルでもパフォーマンスには十分配慮しよう • 使う前にこちらをチェック「ヤバい！！ポストプロセス！！入門！！！！！！！！！」

13

基本機能

• アンチエイリアシング

• アンビエントオクルージョン

• スクリーンスペースリフレクション

• フォグ

• 被写界深度

• モーションブラー

• 目の適応

• ブルーム

• カラーグレーディング

• ユーザーLut

• 色収差

• 粒子

• ヴィネット

14

今回解説するもの

• アンチエイリアシング

• アンビエントオクルージョン

• スクリーンスペースリフレクション

• フォグ

• 被写界深度

• モーションブラー

• 目の適応

• ブルーム

• カラーグレーディング

• ユーザーLut

• 色収差

• 粒子

• ヴィネット

15

アンビエントオクルージョン（AO）

くぼんでる部分に擬似的な陰を入れて実在感を上げるCGならではの手法

× =

16

アンビエントオクルージョン（AO）

基本的にはintensityで濃さを調節し、Radiusは最小限にするのがコツ

17

スクリーンスペースリフレクション（SSR）

スクリーン情報をもとに鏡面反射をシミュレート。負荷が高いので設定をしっかりやろう

18

スクリーンスペースリフレクション（SSR）

反射をした部分に反射先のピクセルをブレンドするような形。スクリーンにないものは写らない。

被写界深度（DOF）

被写界深度エフェクト。デプステクスチャを使って焦点距離から遠いものにボケ足を加える。

単焦点レンズのような綺麗なボケをシミュレート。

21

ブルーム

ピクセルの周りを散らして光の散乱を表現。大人気エフェクト

22

ブルーム

一定の輝度を超えたピクセルに反応するが、閾値と合わせてsoft kneeを設定すると自然になる

23

カラーグレーディング

露出やコントラストや彩度やRGBによるチャンネルミキサーやトーンカーブなど おなじみの調整ができる

24

ユーザーLUT

PhotoshopやLightroomを使ってカラコレの調整することもできます。 慣れてる方はこちらを断然お勧め

25

ビネット

トイカメラなどに顕著に見られる周囲の光量落ちを再現。お手軽に雰囲気が出て負荷も軽い

26

Post Processing Stackまとめ

● リアル志向、トゥーンシェーディング問わず、気軽に使えるのがいいところ

● 設定などは下記のUnite動画を参考に

● ゲームの見た目も盛ったら変わる！！！！ヤバい！！ポストプロセス！！入門！！！！！！

27

mission2

UIの文字表示を華やかにしたい

28

29

30

UI Text は2種類のフォントを扱う

• 一般的な表示形式 • ランタイム時にA8のアトラスに焼き込む • 入力フォントは都度追加 • サイズ違いは別物として扱われる • 色ちがいは同一として扱われる

• 専用ツールなどでアトラス作成 • RGBAのテクスチャも使える • あらゆる画像がフォントになる

• 手書き文字など • メモリに負担をかけがち

ダイナミックフォント 事前アトラス化フォント

31

共通する欠点は「拡大縮小に弱く」「エフェクトが苦手」 それを解決したアセットがあるんです

32

TextMesh ProAsset

Free

33

解決の鍵は、Distance Field

● SDF（Signed Distance Field）フォント

● 通常ピクセル記録するのはRGBAとかAの情報だがこの場合記録しているのは「境界からの距離」。また境界の内か外かは正負で決められる。

● それをもとにレンダリング時に境界線を検出し、バイリニア補間して描画。

● つまり、拡大してもジャギーが発生しない ○ ベクターデータのように扱える

● 参考：ヘキサドライブさんの技術ブログhttp://hexadrive.jp/lab/demo/610/

34

TextMesh Proのいいところ

● SDF描画による拡大縮小対応

● 豊富なリッチテキストの種類

● シェーダによる柔軟で負荷の低いエフェクト

● uGUIからの置き換えも簡単

● そう、TextMeshProReplacerを使えばね！

● https://github.com/jackisgames/TextMeshProReplacer

35

DEMO

36

37

それはそうと、ちょっと配色のコツとかなんとか

● デザインに精通してない人はこの辺りを注意

● 色を使いすぎ

● フォントの種類も多すぎ

● グリッドライン多すぎ

● 複雑になる ＝ 失敗という認識くらいが丁度いい

● ‥‥というわけで、「最も簡単な」失敗しない配色法を伝授

38

1. 使うべき色を3色に収める

● 1色は白か黒。あるいはそれに近い色

● 彩度低い、明暗はっきり

● 残りの2色はお互い補色に近い色にする

● ‥‥というわけで決まったこの3色

● ベースカラー、メインカラー、アクセントカラーと呼ぶこともある

39

2. その3色の同系色のみ使っていい事にする

● 3色だけでなんとかするのは流石に厳しい

● ここでいう「同系色」とは近い明度が基本

● 多少色相は振って良い。彩度は統一した方が無難かも

● ‥‥ということを考えると、使うべきパレットの一例としてこんな感じになるわけです

40

配色をサポートするサービスを使ってみよう

● Adobe Color CC（旧kuler）は非常に素晴らしいサービス

● 人気の高いパレットを見てみよう。そのままダウンロードして使うこともできるよ

41

mission3

パーティクルによる演出を加えたい

42

43

Unityのパーティクルはちょっと複雑

MainEmissionShapeVelocity Over LifetimeLimit Velocity Over LifetimeInherit VelocityForce Over LifetimeColor Over Lifetime

Color By SpeedSize Over LifetimeSize By SpeedRotation Over LifetimeRotation By SpeedExternal Forces

Collision

Sub EmittersTexture Sheet AnimationLights

移動 カラー サイズ 回転 イベント 描画基本

Noise

Triggers

TrailsCustom DateRenderer

スクリプト連携

● 全部で23のモジュールから成り立っており、パラメータの数がとにかく多い！

44

Unity Particle PackAsset

Free

45

Unity Particle Pack

● 公式のパーティクル集

● マニュアルから作れるようにはならない

● サンプルで学習しよう

● ゼロから作るのは大変なので、カスタマイズ

すれば良い

46

mission4

気軽にシェーダーを書きたい

47

シェーダーとは

● 光源入力とマテリアル設定をベースにして、ピクセル毎の描画色を計算するための数学的

な計算とアルゴリズムを内包した、小さなスクリプトです（マニュアルより抜粋）。

● ざっくり言うと、オブジェクトの質感を決めるもの。世の中には様々な質感があるが、そ

れらを決定付けるのがシェーダーの役割

○ 一枚板で作った机

○ よく磨かれた鏡

○ 鈍く光る錆びた鎧

○ 澄んだ色のグラス

○ 空間を歪めるオーラ

48

49

シェーダー習得の難しさ

● C#とは言語体系が違う

● グラフィックプログラミング的な考え方に慣れなきゃいけない

● 入門書籍や資料が少ない

● エラーが起きた時、原因がわかりにくい

　　・・・というわけで

50

Shader ForgeAsset

$40

51

手軽にVertex / Pixelシェーダを記述しよう

● ノードベースのシェーダエディタ。プログラミング不要

● 3Dモデル用だけでなく、パーティクルやUI/2Dアセット用のシェーダ、それからポストエ

フェクトなんかも作ることができる

● ド定番アセットであり更新頻度高め。インターネット上に情報やチュートリアルが多い

● かなり柔軟性が高くプリセットに便利なノードが多め。ノードにスクリプトも書ける

● プレビュー機能がとても便利（だけど動作はちょっと怪しい）

● CG Includeは残念ながら使えない

52

DEMO

53

Thank You !!