【Unity道場スペシャル 2018仙台】お手軽クオリティアップ術
6 likes3,948 views
2018/01/20に開催されたUnity道場スペシャル 2018仙台の講演スライドです。 講師：池和田 有輔（ユニティ・テクノロジーズ・ジャパン合同会社） Unityで制作した作品が、何か一味足りないと思うことはありませんか？ 今回の講演ではUnity初心者を対象に、見た目を“盛る“ことができる Post Processing Stack を始めとして、気の利いた演出や視覚効果を簡単に実装するツールをご紹介します。「理屈はさておき、とりあえずコレやっとけば良い感じになる」「応用はさておき、○○を実現するためにはコレが最短ルート」というお手軽なクオリティアップを望むのであればきっと助けになるでしょう。 紹介予定アセット PostProcessing Stack / TextMesh Pro / Unity Particle Pack / Shader Forge など こんな人にオススメ ・Post Processing Stackを使ったことがないアーティスト、Unityユーザー全般 ・学校や個人で小規模なゲームを作る方 得られる知見 ・Post Processing Stackでできるビジュアル表現 ・デザイン便利ツールと使用テクニック Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards
【Unity道場スペシャル 2018仙台】お手軽クオリティアップ術
- 2. 2 “お手軽” とは？ • 理屈はさておき、とりあえずコレやっとけば良い感じになる • 応用はさておき、○○を実現するためにはコレが最短ルート
- 3. 3 なぜ、アセット紹介？ • 公式アセットであっても基本機能じゃないものは気が付きにくい • マニュアルやリファレンスもない でもお高いんでしょう？ • 今回は最後の一つを除いて無料のものを紹介します
- 5. 5
- 6. 6
- 7. 7
- 8. 8
- 9. 9
- 10. 10
- 12. 12 定番の視覚効果を束にしたポストエフェクト • カメラコンポーネントに Post Processing Behaviorコンポーネントを追加し、プロフィール ファイルを作るだけで超手軽に使えます • なぜスタック？ • スタックならではのメリットが多い • Camera Depth Texture（深度情報テクスチャ）AA、DOF、SSRなどに使う • Motion Vector Texture（動き情報テクスチャ）AA、モーションブラーなどに使う • 1+1+1+1+1は5ではない • ディファード＋HDR環境＋リニアカラースペースで真価を発揮 • VRでは厳しいものが多く、またモバイルでもパフォーマンスには十分配慮しよう • 使う前にこちらをチェック「ヤバい！！ポストプロセス！！入門！！！！！！！！！」
- 13. 13 基本機能 • アンチエイリアシング • アンビエントオクルージョン • スクリーンスペースリフレクション • フォグ • 被写界深度 • モーションブラー • 目の適応 • ブルーム • カラーグレーディング • ユーザーLut • 色収差 • 粒子 • ヴィネット
- 14. 14 今回解説するもの • アンチエイリアシング • アンビエントオクルージョン • スクリーンスペースリフレクション • フォグ • 被写界深度 • モーションブラー • 目の適応 • ブルーム • カラーグレーディング • ユーザーLut • 色収差 • 粒子 • ヴィネット
- 26. 26 Post Processing Stackまとめ ● リアル志向、トゥーンシェーディング問わず、気軽に使えるのがいいところ ● 設定などは下記のUnite動画を参考に ● ゲームの見た目も盛ったら変わる！！！！ヤバい！！ポストプロセス！！入門！！！！！！
- 28. 28
- 29. 29
- 30. 30 UI Text は2種類のフォントを扱う • 一般的な表示形式 • ランタイム時にA8のアトラスに焼き込む • 入力フォントは都度追加 • サイズ違いは別物として扱われる • 色ちがいは同一として扱われる • 専用ツールなどでアトラス作成 • RGBAのテクスチャも使える • あらゆる画像がフォントになる • 手書き文字など • メモリに負担をかけがち ダイナミックフォント 事前アトラス化フォント
- 33. 33 解決の鍵は、Distance Field ● SDF（Signed Distance Field）フォント ● 通常ピクセル記録するのはRGBAとかAの情報だが この場合記録しているのは「境界からの距離」。 また境界の内か外かは正負で決められる。 ● それをもとにレンダリング時に境界線を検出し、 バイリニア補間して描画。 ● つまり、拡大してもジャギーが発生しない ○ ベクターデータのように扱える ● 参考：ヘキサドライブさんの技術ブログ http://hexadrive.jp/lab/demo/610/
- 34. 34 TextMesh Proのいいところ ● SDF描画による拡大縮小対応 ● 豊富なリッチテキストの種類 ● シェーダによる柔軟で負荷の低いエフェクト ● uGUIからの置き換えも簡単 ● そう、TextMeshProReplacerを使えばね！ ● https://github.com/jackisgames/TextMeshProReplacer
- 35. 35 DEMO
- 36. 36
- 37. 37 それはそうと、ちょっと配色のコツとかなんとか ● デザインに精通してない人はこの辺りを注意 ● 色を使いすぎ ● フォントの種類も多すぎ ● グリッドライン多すぎ ● 複雑になる ＝ 失敗という認識くらいが丁度いい ● ‥‥というわけで、「最も簡単な」失敗しない配色法を伝授
- 38. 38 1. 使うべき色を3色に収める ● 1色は白か黒。あるいはそれに近い色 ● 彩度低い、明暗はっきり ● 残りの2色はお互い補色に近い色にする ● ‥‥というわけで決まったこの3色 ● ベースカラー、メインカラー、アクセントカラーと呼ぶこともある
- 39. 39 2. その3色の同系色のみ使っていい事にする ● 3色だけでなんとかするのは流石に厳しい ● ここでいう「同系色」とは近い明度が基本 ● 多少色相は振って良い。彩度は統一した方が無難かも ● ‥‥ということを考えると、使うべきパレットの一例としてこんな感じになるわけです
- 40. 40 配色をサポートするサービスを使ってみよう ● Adobe Color CC（旧kuler）は非常に素晴らしいサービス ● 人気の高いパレットを見てみよう。そのままダウンロードして使うこともできるよ
- 42. 42
- 43. 43 Unityのパーティクルはちょっと複雑 Main Emission Shape Velocity Over Lifetime Limit Velocity Over Lifetime Inherit Velocity Force Over Lifetime Color Over Lifetime Color By Speed Size Over Lifetime Size By Speed Rotation Over Lifetime Rotation By Speed External Forces Collision Sub Emitters Texture Sheet Animation Lights 移動 カラー サイズ 回転 イベント 描画基本 Noise Triggers Trails Custom Date Renderer スクリプト連携 ● 全部で23のモジュールから成り立っており、パラメータの数がとにかく多い！
- 45. 45 Unity Particle Pack ● 公式のパーティクル集 ● マニュアルから作れるようにはならない ● サンプルで学習しよう ● ゼロから作るのは大変なので、カスタマイズ すれば良い
- 47. 47 シェーダーとは ● 光源入力とマテリアル設定をベースにして、ピクセル毎の描画色を計算するための数学的 な計算とアルゴリズムを内包した、小さなスクリプトです（マニュアルより抜粋）。 ● ざっくり言うと、オブジェクトの質感を決めるもの。世の中には様々な質感があるが、そ れらを決定付けるのがシェーダーの役割 ○ 一枚板で作った机 ○ よく磨かれた鏡 ○ 鈍く光る錆びた鎧 ○ 澄んだ色のグラス ○ 空間を歪めるオーラ
- 48. 48
- 49. 49 シェーダー習得の難しさ ● C#とは言語体系が違う ● グラフィックプログラミング的な考え方に慣れなきゃいけない ● 入門書籍や資料が少ない ● エラーが起きた時、原因がわかりにくい ・・・というわけで
- 51. 51 手軽にVertex / Pixelシェーダを記述しよう ● ノードベースのシェーダエディタ。プログラミング不要 ● 3Dモデル用だけでなく、パーティクルやUI/2Dアセット用のシェーダ、それからポストエ フェクトなんかも作ることができる ● ド定番アセットであり更新頻度高め。インターネット上に情報やチュートリアルが多い ● かなり柔軟性が高くプリセットに便利なノードが多め。ノードにスクリプトも書ける ● プレビュー機能がとても便利（だけど動作はちょっと怪しい） ● CG Includeは残念ながら使えない
- 52. 52 DEMO
- 53. 53 Thank You !!