2017/8/19に開催されたUnity道場 福島ゲームジャム対策回＋前夜祭のスライドです。 講師：染谷　翔（ユニティ・テクノロジーズ・ジャパン合同会社）

1. 初心者には初心者の戦い方がある！
スキルがなくても付け焼き刃で戦う小手先テクニック
ユニティ・テクノロジーズ・ジャパン合同会社
事業開発担当マネージャー
染谷 翔

2. 自己紹介

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

4. 自己紹介
・現在はUnityでイベントマネージャー／事業開発担当マネージャーとして活動
・UniteやUnityインターハイ、Unity道場スペシャルなどの企画・開催

5. 自己紹介
・Unityグッズや雲丹亭らーめん、ショートカットうちわを作ったりもしてます
うちわ作ったら
面白いかなって思った

6. 自己紹介
・Unityは一応使えるけど勉強中
・ゲームジャム参加経験は5回
・付け焼き刃でも戦える、
プランナー流の簡単、お手軽、コスパ良い
開発スキルを今回はお話しします。

7. 今回お話しすること
１．【モデリング】Magica Voxelでマインクラフトちっくなモデリング
２．【モデリング】SketchUpでステージ素材や飛行オブジェクトをモデリング
３．【UI】フリーフォントをストックしておこう
４．【UI】TextMesh ProでUIの見た目を改良
５．【グラフィック】Skyboxでゲームの雰囲気をガラッと変えよう
６．【グラフィック】カラーパレットでイイ感じの色を作ろう
７．【グラフィック】Post Processing Stackでビジュアル改良
８．【サウンド】フリー音源を探して「割り当て表」を作れ！
９．【サウンド】SoundEngine Freeで波形編集
１０．【サウンド】Bfxrで効果音作成
１１．【スクリプト】Input Managerでゲームパッド対応にしよう

8. Magica Voxel

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

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

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

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

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

14. SketchUp

15. SketchUpでステージ素材や飛行オブジェクトをモデリング
・建築や製造、工業分野で使われる3Dモデリングソフト
・個人（非商用）で使うのは無料

16. SketchUpでステージ素材や飛行オブジェクトをモデリング
・操作にクセがなく、テクスチャが揃っているので
直線的な物体（壁や床）や
モーションのいらない飛行オブジェクト（飛行機、UFO）向き
GIF動画

17. SketchUpでステージ素材や飛行オブジェクトをモデリング
・SketchUp版の無料アセットストア「3D Warehouse」があり、
様々なモデルデータを無料で使用できる（非商用専用）
GIF動画

18. よくある問題
・FBX形式にエクスポートできるが、デフォルトでは
「ポリゴンの裏面を描画しない」という設定に
なっている
・これを回避するためにはエクスポート時
（＝ファイル保存時）に「オプション」で
「裏面と表面をエクスポートする」にチェックを
入れる
・ついでに「縮尺」を「センチメートル」に
しておくとほどよい大きさでインポートできる
GIF動画

19. フリーフォント

20. フリーフォントをストックしておこう
・フォントと色が変わるだけで見栄えが良くなる
・Unityに限らずストックしておくと便利！

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

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

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

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

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

26. TextMesh Pro

27. TextMesh ProでUIの見た目を改良
・UI（フォント）を綺麗に加工できるUnity公式の無料アセット
GIF動画

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

29. TextMesh Proの使い方
1）アセットストアからインポート

30. TextMesh Proの使い方
2）Unity上部メニューの Window→TextMeshPro→Font Asset Creater を選
択し、専用のFont Assetを作成する。
GIF動画

31. TextMesh Proの使い方
3）ヒエラルキービュー上の Create→UI（または3D Object）→TextMesh Pro
Text で専用のテキストUIを作成する。
GIF動画
2）で作ったFontAssetを
適用

32. よくある問題
・FontAssetCreaterで生成すると、シーンビュー上のTextMesh Pro Textが
表示されなくなることがある
・表示をオンオフすると直る
GIF動画
叩いたら直るで

33. TextMesh Proの使いどころ
・スコア、残り時間、ゲームクリア！ゲームオーバー！など、
ワンポイントで使用する箇所向き
・お手軽なタイトルロゴにも使える
GIF動画

34. カラーパレット

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

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

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

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

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

40. Skybox

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

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

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

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

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

46. Post Processing Stack

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

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

49. Post Processing Stackの使い方
1）アセットストアからインポート

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

51. Post Processing Stackの使い方
3）プロジェクトビューでCreate→Post-Processing Profileを作成
GIF動画

52. Post Processing Stackの使い方
4）1で追加したPost Processing Behaviorに、
2で作成したプロファイルをドラッグ。以上で準備完了！
GIF動画

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

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

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

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

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

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

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

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

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

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

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

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

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

66. フリー素材を探してきたら
「割り当て表」を作れ！

67. スキルのない人はフリー素材を探してこよう
・フリー音源やアセットストアのアセット（無料モデル等）を探すのは
スキルがなくてもできる

68. フリー素材を拾ってきた「あと」の作業
・プログラマ的にはサウンドデータを渡すだけでなく
どの音をどこに使うのか決めておいてほしい
簡単な表に
なっていればOK！

69. フリー素材を拾ってきた「あと」の作業
・アセットストアで拾ってきたパーティクルや3Dモデルも
割り当て表があるとすばやく実装してもらえる
・開発の実装部隊であるプログラマの負担を減らそう

70. SoundEngine Free

71. SoundEngine Freeで波形編集
・フリー素材のBGMをループさせたり、効果音を短くフェードアウトさせる
・WAVファイルのみ対応

72. SoundEngine Freeで波形編集
・専門的に見えますが初心者でもすぐ覚えられます
GIF動画

73. 波形編集のやり方
1）iTunesを使ってMP3ファイルをWAVファイルに変換
上部メニューから 編集→設定→インポート設定 でインポート方法を
「WAVエンコーダ」にする
GIF動画

74. 波形編集のやり方
2）iTunesを使ってMP3ファイルをWAVファイルに変換
オーディオファイルを選択した状態で上部メニューの ファイル→変換 で
「WAVバージョンを作成」できる
GIF動画

75. 波形編集のやり方
3）SoundEngine FreeにWAVファイルを貼り付け
GIF動画

76. 波形編集のやり方
4）拡大ボタンで音の区切り目を探す
GIF動画

77. 波形編集のやり方
5）ドラッグで選択して削除して完成！
綺麗に区切れていれば人間の耳では自然に聴こえる
GIF動画

78. 波形編集のやり方
同じ手法でBGMをループさせたり、効果音の一部を削ったりできる
GIF動画 GIF動画
音のフェードアウトも
設定できる

79. Bfxr

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

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

82. Bfxrで効果音作成
実演

83. ゲームパッド対応

84. Input Managerでゲームパッド対応にしよう
・一度やり方を覚えれば今後の人生でずっと使えるノウハウ
・色々調べることが多く、今までに多くのUnity初心者を悩ませてきた！

85. Input Managerでゲームパッド対応にしよう
・使用するゲームパッドは「Microsoftゲームコントローラー」
・PCゲーム界で一番スタンダードなやつ（多分）
Steamで
おもしろいゲームも
たくさん遊べるぞ！
GIF動画

86. ゲームパッド対応のやり方
1）操作スクリプト内で Input.GetAxis("Vertical") と
Input.GetAxis("Horizontal") を使ってジョイスティックに対応する
2）操作スクリプト内で Input.GetButtonDown("ボタン名") を使ってボタン
操作に対応する
詳細は割愛しますが
複雑ではないです

87. ゲームパッド対応のやり方
3）Unityエディタ上のInputManagerで対応するボタンを割り当てる
GIF動画

88. ゲームパッド対応のやり方
Positive Buttonの項目、left ctrl と書かれているところを書き換えてボタンナンバーを割り振る。
Joystick 0はXboxコントローラーのAボタン、joystick 1はBボタン、joystick 2はXボタンに相当する。
キー名の表はこちら https://docs.unity3d.com/jp/540/Manual/ConventionalGameInput.html

89. ゲームパッド対応のやり方
ボタンナンバーの表はこちら http://wiki.unity3d.com/index.php?title=Xbox360Controller

90. ゲームパッド対応のやり方
なんとWindowsとMacでボタンナンバーが異なる。
番号がかぶらないように両方のプラットフォームの入力をスクリプトに書く必要がある

91. ゲームパッド対応のやり方
・ゲームパッドで動かすとゲームはおもしろい！
GIF動画

92. 総括

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

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

95. 初心者には初心者の戦い方がある！
ゲームジャムの戦場で会おう！

96. 今回お話ししたこと
１．【モデリング】Magica Voxelでマインクラフトちっくなモデリング
２．【モデリング】SketchUpでステージ素材や飛行オブジェクトをモデリング
３．【UI】フリーフォントをストックしておこう
４．【UI】TextMesh ProでUIの見た目を改良
５．【グラフィック】Skyboxでゲームの雰囲気をガラッと変えよう
６．【グラフィック】カラーパレットでイイ感じの色を作ろう
７．【グラフィック】Post Processing Stackでビジュアル改良
８．【サウンド】フリー音源を探して「割り当て表」を作れ！
９．【サウンド】SoundEngine Freeで波形編集
１０．【サウンド】Bfxrで効果音作成
１１．【スクリプト】Input Managerでゲームパッド対応にしよう

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

98. イベント事後アンケートはこちらから！
プレゼントが
当たるぞ！