2017/9/10に開催されたunity道場スペシャル 2017大阪の講演スライドです。 講師：染谷　翔（ユニティ・テクノロジーズ・ジャパン合同会社） 講演動画：https://youtu.be/srayQZyxOug ビジュアル全体をお手軽に改良できるUnity公式の無料アセット「Post Processing Stack」をご存知ですか？初心者でもワンランク上のビジュアル表現が可能ですが、真に使いこなすには技量が要求されるため上級者も満足のできるこのアセットを紹介します。また、個人や小規模開発に便利なフリーソフトや便利ツールの紹介もします。 こんな人におすすめ ・Post Processing Stackを使ったことがないアーティスト、Unityユーザー全般 ・学校や個人で小規模なゲームを作る方 得られる知見 ・Post Processing Stackでできるビジュアル表現 ・Skyboxのおすすめ有料アセット ・Magica Voxel、Bfxr、Sound Engine Freeなどのデザインやサウンド便利ツールと使用テクニック Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards

1. Post Processing Stackでワンランク上のビジュアル表現
＋時間をかけずに武器になるツール、テクニックTips
ユニティ・テクノロジーズ・ジャパン合同会社
事業開発担当マネージャー
染谷 翔

2. 染谷 翔
ユニティ・テクノロジーズ・ジャパン合同会社
事業開発担当マネージャー／イベントマネージャー
@some_sensei

3. 自己紹介
カプコン／セガで7年プランナーを経験
会社を退職して自転車世界一周の旅に出る
3年くらい放浪しながらやりたいこと色々やってました
やる夫ブログ 旅行情報まとめニコ生 トークライブ

4. 自己紹介
・現在はイベントやマーケティング活動の企画・開催を担当

5. 自己紹介
・雲丹亭らーめんやブログのキャラクターを作ったりもしてます
らーめん作ってみた

6. 自己紹介
・付け焼き刃でも戦える
プランナー流の簡単、お手軽、コスパ良い
開発スキルを今回はお話しします。

7. Post Processing Stack について

8. その前に、
開発用語の基礎知識を
4つのクイズでチェック！

9. 【第1問】

10. 背景をピンボケさせるビジュアル表現は、俗に何と呼ばれていますか。
1）ブラー
2）カスタムシェーダー
3）DOF（被写界深度）
GIF動画

11. GIF動画
背景をピンボケさせるビジュアル表現は、俗に何と呼ばれていますか。
1）ブラー
2）カスタムシェーダー
3）DOF（被写界深度）
せいかい！

12. 【第2問】

13. オブジェクトを発光させるビジュアル表現は、俗に何と呼ばれていま
すか。
1）エミッション
2）ブルーム
3）パーティクルマテリアル
GIF動画

14. GIF動画
オブジェクトを発光させるビジュアル表現は、俗に何と呼ばれていま
すか。
1）エミッション
2）ブルーム
3）パーティクルマテリアル
せいかい！

15. 【第3問】

16. オブジェクトを擬似的に反射させるビジュアル表現は俗に何と呼ばれ
ていますか。
1）SSR（スクリーンスペースリフレクション）
2）GI（グローバルイルミネーション）
3）リフレクションプローブ
GIF動画

17. GIF動画
オブジェクトを擬似的に反射させるビジュアル表現は俗に何と呼ばれ
ていますか。
1）SSR（スクリーンスペースリフレクション）
2）GI（グローバルイルミネーション）
3）リフレクションプローブ
せいかい！

18. 【最後の問題】

19. こうしたビジュアル表現は、シーン内のどのオブジェクト内で設定す
るでしょうか？
1）オブジェクト
2）ディレクショナルライト
3）メインカメラ

20. こうしたビジュアル表現は、シーン内のどのオブジェクト内で設定す
るでしょうか？
1）オブジェクト
2）ディレクショナルライト
3）メインカメラ
せいかい！

21. メインカメラを通じて美麗なビジュアルを表現するのが
Post Processing Stack

22. 今回お話しすること
前半
１．Post Processing Stackでビジュアル改良
後半
２．【モデリング】Magica Voxelでマインクラフトちっくなモデリング
３．【UI】フォントをストックしておこう
４．【グラフィック】カラーパレットでイイ感じの色を作ろう
５．【グラフィック】Skyboxでゲームの雰囲気をガラッと変えよう
６．【サウンド】Bfxrで効果音作成

23. Post Processing Stack

24. Post Processing Stackとは
・ビジュアルを強化できるUnity公式の無料アセット
GIF動画

25. Post Processing Stackとは
・チェックボックスや数値調整などマウスだけで操作可能
・初心者からプロの開発者まで使える
GIF動画

26. Post Processing Stackのインポート
1）アセットストアからインポート

27. Post Processing Stackのインポート
2）カメラのコンポーネントに「Post Processing Behavior」を追加
GIF動画

28. Post Processing Stackのインポート
3）プロジェクトビューでCreate→Post-Processing Profileを作成
GIF動画

29. Post Processing Stackのインポート
4）1で追加したPost Processing Behaviorに、2で作成したプロファイルをドラッグ
これで準備完了！
GIF動画

30. Post Processing Stackのインポート
5）2で作成したプロファイルを選択し、インスペクター上から
様々なエフェクトを設定できる
GIF動画

31. Post Processing Stackのインポート
★1）Player Settings の Color Space を Linear に設定しておくこと
GIF動画

32. Post Processing Stackのインポート
★2）カメラ設定の Rendering Path を Deferred、Allow HDR を ON に設定
しておくこと
GIF動画

33. Post Processing Stack
初心者おすすめ機能

34. Fog（フォグ）
・色を変えることで怪しげな雰囲気、吹雪や砂煙、神秘的な雰囲気などが出せる
・この項目だけは上部メニューのWindow→Lighting→Settingsから設定する
GIF動画

35. AntiAliasing（アンチエイリアシング）
・ドットのジャギが目立たないなめらかな、上品なビジュアルにする
GIF動画 GIF動画

36. Ambient Occlusion（アンビエントオクルージョン）
・環境の明暗／陰影をより自然に見せることができる
フォトリアルな
グラフィック向け

37. Ambient Occlusion（アンビエントオクルージョン）
・擬似的な明暗の表現
GIF動画

38. Screen Space Reflection（スクリーンスペースリフレクション）
・水面や地面にオブジェクトが映り込む反射表現ができる
・味付けとして付け足すとオシャレな雰囲気が出せる
・CameraのRendering PathをDifferedにする必要あり
GIF動画

39. Depth Of Field（デプスオブフィールド）
・いわゆる被写界深度。ピントを設定して焦点以外をボカすことができる
GIF動画GIF動画

40. Motion Blur（モーションブラー）
・早い動きにボケを与える
・見づらくなるデメリットもあるのでイベントシーンや特殊なステージなど、
状況に応じて使うのがよさそう
GIF動画

41. Bloom（ブルーム）
・光を反射している明るい部分をジワーッと輝かせる
・リアルなゲームからちょっとしたパズルゲームの味付けまで汎用性が高くオススメ！
GIF動画

42. Bloom（ブルーム）
・Directional LightやSkyboxで明るい世界になっていると調整が難しい
・暗い世界だといい感じに光ってくれる
GIF動画

43. Bloom（ブルーム）
・オブジェクトを部分的に光らせたい場合は、
光らせたい箇所に「Emissionにチェックを入れたマテリアル」を設定しよう
GIF動画

44. Bloom（ブルーム）
・Radiusを最大にし、Intensityの量で明るさを調整するのがおすすめ。
自然な光り方になる
GIF動画

45. 他にも色々できるよ
参考：ゲームの見た目も盛ったら変わる！！！！ヤバい！！ポストプロセス！！入
門！！！！！！！！！
https://www.youtube.com/watch?v=r5mNmH68KPQ

46. Post Processing Stack まとめ
手軽にビジュアルを強化できる
（使いこなせばさらに美麗なビジュアル表現が可能）
こいつ
エンジニア志望のクセに
ビジュアルもイケてるな…

47. プログラミング以外の技能も、
サブスキルとして身につけたら役に立つ！

48. 時間をかけずに武器になる
ツール、テクニック
学生や個人制作向け

49. Magica Voxel

50. Magica Voxelでマインクラフトちっくなモデリング
・無料で使えるモデリングソフト
GIF動画

51. Magica Voxelでマインクラフトちっくなモデリング
・ほぼマウス操作だけでオブジェクトを作って出力できる
GIF動画GIF動画

52. Magica Voxelでマインクラフトちっくなモデリング
・絵心がなくてもそれっぽいステージやオブジェクトを作成できる
GIF動画
Unityインターハイ2016でも
受賞作品が多用

53. Magica Voxelでマインクラフトちっくなモデリング
・サンプルオブジェクトも付いてます
GIF動画 GIF動画

54. Magica Voxelでマインクラフトちっくなモデリング
・Blender経由でボーンを付けて動かすことも可能
参考：「だいしブログ」さん
http://github.dev7.jp/b/2015/12/15/precureadv20151213/#.WYNRTC70CQo.twitter
GIF動画

55. フリーフォント／有料フォント

56. フォントをストックしておこう
・フォントと色が変わるだけで見栄えが良くなる
・美しいフォントを使うことに慣れておこう

57. ラノベPOP
・ラノベに限らず使える
Unityインターハイ2016
受賞作品

58. 鉄瓶ゴシック
・太くてタイトル向き

59. アンニャントロマン
・ゲーム開発者が作成したフォント

60. はらませにゃんこ
・アンニャントロマンと同じ
ゲーム開発者が作成したフォント

61. カーニング（間隔調整）でフォントはもっと良くなる
自転世界録
フォントサイズと間隔を調整
ロゴ化

62. カーニングはあらゆる広告や商品パッケージで使われている
フォントサイズと間隔を調整
フォントサイズと間隔を調整
フォントサイズと間隔を調整

63. 有料フォントの強みは
デザインと対応文字数の多さ

64. ロゴや広告など、プロの現場で通用するデザイン

65. ロゴや広告など、プロの現場で通用するデザイン
竹

66. ロゴや広告など、プロの現場で通用するデザイン
ハルクラフト

67. ロゴや広告など、プロの現場で通用するデザイン
すずむし

68. 可読性が高く、日本語に完全対応
リュウミン

69. 可読性が高く、日本語に完全対応
解ミン月

70. 可読性が高く、日本語に完全対応
UD 新ゴ

71. フォントを統一してゲームの個性を出そう
・シンプルなゲームほどフォントが重要
・色やデザインを統一すると見栄えが良い
Unityインターハイ2016
受賞作品

72. デフォルトのArialフォントから脱却しよう
GIF動画
GIF動画

73. TextMesh ProでUIの見た目を改良
・チェックボックスや数値調整などマウスだけで操作可能
GIF動画GIF動画 GIF動画 GIF動画
フチ 影 立体感 輝き

74. カラーパレット

75. カラーパレットでイイ感じの色を作ろう
・カラーリングが苦手な人はカラーパレット生成サイトを使いましょう

76. HUE/360
・色を1色選ぶと、その色とマッチする色だけが画面に表示され、
自然に美しいカラーパレットが作れるサイト。
・まずはBrightness（明度）を選択し、1色クリックすると、
その色と組み合わせてもおかしくない色のみが表示される。
GIF動画

77. Paletton
・使いたい色をクリック＆ドラッグで選択し、色の組み合わせを作ることができるサイト。
・多色組み合わせ、同系色や反対色でのシミュレーションなど色々なパターンを
試せるほか、Webページプレビューで仕上がりイメージを確認することもできる。
GIF動画

78. BrandColors
・世界的な大企業やベンチャー企業のブランドカラーを一覧化した配色パレット
・Unityカラーもあるよ！
GIF動画

79. NIPPON COLORS
・日本の伝統的なカラーを色の名前とともに取得できるサイト
・和風の色合いを厳選するのに使える
GIF動画

80. Skybox

81. Skyboxでゲームの雰囲気をガラッと変えよう
・5分でできるお手軽なビジュアル強化

82. Skyboxでゲームの雰囲気をガラッと変えよう
・Skyboxを変更してライトを調整するだけでこんなに違う！

83. Skyboxの変更のやり方
・上部メニューの
Window → Lighting → Settings を選択して
ライティングウィンドウを開く
・ライティングウィンドウの上部メニューで
Scene を選択し、一番上にある
Environment の Skybox Material を
別のSkyboxマテリアルに変更する
GIF動画

84. Skyboxの変更のやり方
・暗いSkyboxを使う場合は
Directional Lightを弱めて
明るさと色合いを調整しよう
GIF動画

85. アセットストアのSkybox
・アセットストアには
5-10ドル程度の安価で良い
Skyboxアセットが
たくさんあります
・コストパフォーマンス良し！
・個人的にはCartoon系がオススメ

86. アセットストアのSkybox
・Cloudy Blue Cartoon Skybox（2ドル）

87. Bfxr

88. Bfxrで効果音作成
・クリックするだけで効果音を自動生成する
GIF動画

89. Bfxrで効果音作成
・Pickup/Coin（選択・コイン音）やExplosion（爆発）、Jump（ジャンプ）など
カテゴリボタンをクリックすると、それに応じた効果音を自動生成する。
クリックするたびに音は変化し、履歴に記録が残っていく
・WAV形式でエクスポートできる。
聞き比べて良いと思う音を選択し、「Export Wav」ボタンから
エクスポートしよう
GIF動画

90. Bfxrで効果音作成
実演

91. 総括

92. スキル習得のコスパが良いテクニック、ツール
・短時間で覚えられて効果の高いテクニックやツールが色々ある
・いい感じのテクニックはまわりの人やネットで共有しよう！

93. 今後のスキルアップに向けて
・全部をいっぺんに覚えようとせず、好きなことから覚えよう
・好きじゃないことは後回しでもいい
・好きなことは実戦で覚えよう
（個人ブログ、ゲームジャム、研究発表、同人活動など）
・実戦で覚えたことは体に身につく

94. 今回お話ししたこと
前半
１．Post Processing Stackでビジュアル改良
後半
２．【モデリング】Magica Voxelでマインクラフトちっくなモデリング
３．【UI】フォントをストックしておこう
４．【グラフィック】カラーパレットでイイ感じの色を作ろう
５．【グラフィック】Skyboxでゲームの雰囲気をガラッと変えよう
６．【サウンド】Bfxrで効果音作成

95. 今回お話ししたことはブログに記事があります
http://inter-high-blog.unity3d.jp/ Twitterアカウント：@some_sensei
思い出したい時は
検索してね