Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1DayMakeMazeGame ver,20171022

375 views

Published on

「1日で迷路ゲームを作っちゃおう」の2017年10月23日版です。

Published in: Technology
  • Be the first to comment

1DayMakeMazeGame ver,20171022

  1. 1. 1日で 迷路ゲームを作っちゃおう Unity Technologies Japan 常名 隆司
  2. 2. Unity操作・基本のキ
  3. 3. 基本操作をやってみる • プロジェクトの作成 • 画面の見かた • シーンの作成・保存 • ブツを出現させる • ツールバー/各ボタンの役割 • 見え方の変更 • ショートカットキーを使ってみよう • だんご三兄弟を作ってみる
  4. 4. Unityでのゲーム開発概念 • プロジェクト – 一つのゲームの開発単位 • シーン – ゲーム内の小分けにした場面 ごとの開発単位 – スタート画面やゴール画面も シーンとして分離するケース もあり • ゲームオブジェクト – ゲームを構成する一つ一つの パーツ – 建物、人物、小物、表面素材、 特殊効果、効果音、ボタン、 etc, プロジェクト シーン ゲームオブジェクト
  5. 5. プロジェクトの作成 • Project name – ゲーム自体の名前を付けておく – 半角英数字 – 今回は Maze-20171019 • Location – 保存先のディレクトリを指定す る – 慣れない内は変更しなくても OK • Create project – ボタンをクリックすると新規プ ロジェクトが立ち上がる
  6. 6. プロジェクトの選択 • Projects – 一度作ったプロジェクトは 一覧表示される – プロジェクト名をクリック するとプロジェクトが開く • New – プロジェクトを新規作成し たい場合にクリックする • Open – (他のUnityで開発したな どで)一覧に表示されてい ないプロジェクトを開きた い場合にクリックする
  7. 7. 画面の見かた • シーンビュー – ゲームを作るための編集画面 • ヒエラルキーウィンドウ – シーンにある全オブジェクト を階層的に表示する • プロジェクトウィンドウ – プロジェクト全体で使用でき るオブジェクトやプログラム スクリプト等の全てを表示 • インスペクターウィンドウ – 選択中のオブジェクトのプロ パティの表示・編集 シーンビュー ヒエラルキー ウィンドウ プロジェクト ウィンドウ インス ペクター ウィンドウ ツールバー • ツールバー – 開発中に使用する便利な一発 切り替えボタンが並ぶ
  8. 8. シーンの作成・保存 • シーンの名前を付けて保存 – 何はともあれまずはシーンの 名前を付けて保存する – Menu > File > Save Scene as...をクリック • Save Scene – Save As: に “Main.unity” と して右下の [Save] ボタンを クリックする
  9. 9. シーンの作成・保存 • シーンはこまめに保存 – 一度名前を付けて保存したら、 次からは頻繁に単純にシーン を保存する – Menu > File > Save Scene をクリック – ⌘+SキーでもOK
  10. 10. ブツを出現させる – 床 • 何はともあれ床 – Planeを使う – QuadはUIとかで使う – 今回はPlaneを使う – Menu > GameObject > 3D Object > Plane をクリック
  11. 11. ブツを出現させる – 立方体 • 万能選手の箱 – 立方体としても柱にも板にも 使える Cubeというオブジェ クトを使う – Menu > GameObject > 3D Object > Cube をクリック – 出現させただけの状態では 「配置した場所にただ存在す るだけの何か」 – 物理法則を適用(重力の影響 を受ける)させたい場合は Rigidbodyをアタッチして Use Gravityオプションを有効 にする(後述)
  12. 12. ブツを動かしてみる • 1軸方向の平行移動 – 立方体から三方向に伸びてい る矢印の先端をクリック – ドラッグすると矢印方向にオ ブジェクトを移動させられる
  13. 13. ブツを出現させる – 球体 • 粒、弾、ボールならコレ – 変形させるよりもサイズを変 えて球体のまま使うケースが 多い Sphereというオブジェ クトを使う – Menu > GameObject > 3D Object > Sphere をクリック – 出現させただけの状態では 「配置した場所にただ存在す るだけの何か」 – 物理法則を適用(重力の影響 を受ける)させたい場合は Rigidbodyをアタッチして Use Gravityオプションを有効 にする(後述)
  14. 14. ブツを落としてみる • プレイボタンをクリック – メニューバーの中央部にある 右向きの▶︎をクリック
  15. 15. ブツを落としてみる • プレイボタンをクリック – メニューバーの中央部にある 右向きの▶︎をクリック • なにも起きません
  16. 16. ブツを落としてみる • プレイボタンをクリック – メニューバーの中央部にある 右向きの▶︎をクリック • なにも起きない – Sceneにただ置いただけのオ ブジェクトは「ただの物質」 – 物理法則を適用させる必要が ある
  17. 17. ブツを落としてみる • 物理法則を適用する – 重力の影響を受けさせる • Rigidbodyをアタッチ – Inspectorの一番下にある [ Add Component ]をクリッ ク
  18. 18. ブツを落としてみる • 虫眼鏡マークの入力欄に rigi と入力 • Searchに出ている候補から Rigidbodyをクリックして 選択する – Inspectorの下の方に Rigidbodyが追加される
  19. 19. ブツを落としてみる • プレイボタンをクリック – メニューバーの中央部にある 右向きの▶︎をクリック
  20. 20. ブツを落としてみる
  21. 21. ブツを弾ませてみる • 跳ねる物理シミュレーショ ンを追加する – Assets > Create > Physic Material
  22. 22. ブツを弾ませてみる • 跳ねる物理シミュレーショ ンを追加する – Assets > Create > Physic Material • ProjectウィンドウのAssets に New Physic Materialが 出現する – Bump という名前に変更して おく
  23. 23. ブツを弾ませてみる • 跳ねる量を設定する – Inspectorの Bouncinessの値 を 0 から 1 に変更
  24. 24. ブツを弾ませてみる • 跳ねるシミュレーションを 球体に追加する – Projectウィンドウの中の Bumpをドラッグアンドド ロップでシーンウィンドウの 中の Sphereに付ける – Hierarchyの Sphere Collider に “Bump” と表示されていれ ばアタッチ成功
  25. 25. ブツを落としてみる • プレイボタンをクリック – メニューバーの中央部にある 右向きの▶︎をクリック
  26. 26. ブツを弾ませてみる • 跳ねる量を変えてみる – Bouncinessの値を1より小さ くしてみる(0.3や0.5など) – Bouncinessの値を1より大き くしてみる(1.2や1.8など)
  27. 27. ブツを弾ませてみる • 跳ねる量を変えてみる – 全部の項目の数値を変えたり プルダウンメニューの中の値 を変えてみる
  28. 28. ブツを出現させる – 円柱 • 串、テーブル、柱はこれで – 円柱のバリエーションのモノ を作るなら Cylinder というオ ブジェクトを使う – Menu > GameObject > 3D Object > Cylinderをクリック – 出現させただけの状態では 「配置した場所にただ存在す るだけの何か」 – 物理法則を適用(重力の影響 を受ける)させたい場合は Rigidbodyをアタッチして Use Gravityオプションを有効 にする
  29. 29. ブツを出現させる – カプセル • 仮置きの人や棒にはカプセル – Cylinderよりも柔らかい印象に なる Capsule というオブジェ クトを使う – Menu > GameObject > 3D Object > Capsuleをクリック – 出現させただけの状態では「配 置した場所にただ存在するだけ の何か」 – 物理法則を適用(重力の影響を 受ける)させたい場合は Rigidbodyをアタッチして Use Gravityオプションを有効にす る
  30. 30. ツールバー/各ボタンの役割 • 画面の見え方変更ボタン – シーンビュー内の特定の場所 をクリックしたままドラッグ する – クリックした地点を中心に視 点を上下左右に変更できる – キーボードの Q キーをクリッ クしても切り替えられる
  31. 31. ツールバー/各ボタンの役割 • オブジェクト移動ボタン – シーンビュー内のオブジェク トの配置をドラッグアンドド ロップで変更する – オブジェクトの中心から3方向 に伸びる矢印の先端をドラッ グすると矢印方向に移動でき る – オブジェクトの中心の立方体 をドラッグすると自由に移動 できる – キーボードの W キーでも切り 替えられる
  32. 32. ツールバー/各ボタンの役割 • オブジェクト回転ボタン – シーンビュー内のオブジェク トを3軸方向それぞれに回転さ せる – 3方向に伸びる矢印の代わりに オブジェクトの中心を包む3つ の環が出現する – 環をドラッグすると任意の向 きに変更できる – キーボードの E キーでも切り 替えられる
  33. 33. ツールバー/各ボタンの役割 • オブジェクト拡縮ボタン – シーンビュー内のオブジェク トを3軸方向それぞれに拡縮さ せる – 3方向に伸びる矢印の代わりに 3方向にキューブが伸びる – 先端のキューブをドラッグす るとオブジェクトがその方向 に伸び、かつ、中心から同じ サイズ分反対側にも伸びる – キーボードの R キーでも切り 替えられる
  34. 34. ツールバー/各ボタンの役割 • Rectツールボタン – 2DとUIで拡大縮小のために使 う – 3Dでも使えるけれども左とな りの拡縮ボタンと同じ動き – キーボードの T キーでも切り 替えられる
  35. 35. 見え方の変更 • 右クリック – シーンビュー内で右クリック したままドラッグすると、自 分視点を中心にシーン内全体 の見え方を上下左右に移動さ せられる – Altキーを押しながら操作して も同じ効果を得られる
  36. 36. 見え方の変更 • シーンギズモ – シーンビューの視野角や投影 モードを一発で素早く変更す る(俯瞰、右、左) – 円錐(ラッパ)をクリックす るとその向きからの見た目に 切り替わる – 円錐の中心の立方体をクリッ クすると奥行き感の有無が切 り替わる – どこを向いているかわからな くなったら、Shiftキーを押し ながら円錐の中心の立方体を クリックすれば少し見下ろし た状態に戻る
  37. 37. ショートカットキーを使う • 1scaleづつ移動させる – Command(ctrl)を押しなが ら移動させる
  38. 38. ショートカットキーを使う • 頂点同士をくっ付ける – Vキーを押す – 付けたい頂点に薄い□をかざ して選ぶ – 薄い□をドラッグしてオブ ジェクトを動かす
  39. 39. ショートカットキーを使う • 頂点同士をくっ付ける – Vキーを押す – 付けたい頂点に薄い□をかざ して選ぶ – 薄い□をドラッグしてオブ ジェクトを動かす
  40. 40. ショートカットキーを使う • 頂点同士をくっ付ける – Vキーを押す – 付けたい頂点に薄い□をかざ して選ぶ – 薄い□をドラッグしてオブ ジェクトを動かす
  41. 41. ショートカットキーを使う • 頂点同士をくっ付ける – Vキーを押す – 付けたい頂点に薄い□をかざ して選ぶ – 薄い□をドラッグしてオブ ジェクトを動かす
  42. 42. ショートカットキーを使う • 面方向に移動させる – 移動対象の中央の3色の□の面 と同方向にのみ移動できる – やってみよう
  43. 43. ショートカットキーを使う • 他のオブジェクトに視点を 切り替える – Shift+Fキーを押す • 遠くのオブジェクトに切り 替える • 探し出せないオブジェクト に切り替える などにも応用可能
  44. 44. だんご三兄弟を作ってみる • 3連球 – Sphereを使う – Cmd+CとCmd+Vで増殖 – 四方八方から見てくっ付いて いるか確認する • 串 – Cylinderを使う – 拡縮モードで縮めて形を整え るか、インスペクターウィン ドウで数値を直接変更する
  45. 45. だんご三兄弟を作ってみる • 値を直接変更 – Positionの値を変更すると シーン内に配置されたオブ ジェクトの位置を変更できる – Rotationの値を変更するとオ ブジェクトの傾きを変更でき る – Scaleの値を変更するとオブ ジェクトの大きさを変更でき る
  46. 46. だんご三兄弟を作ってみる • だんごと串に色を塗る – ProjectウィンドウのProject タブ直下にある [Create] をク リックし、プルダウンから Material を選択 – プロジェクトウィンドウ内に New Materialが出現するので DangoColor という名前に変 更する – Inspectorウィンドウ内の Main Maps項目の Albedoの 右の白い四角をクリック – 表示されたカラーパレットか ら好みの色を選ぶ
  47. 47. だんご三兄弟を作ってみる • だんごと串に色を塗る – Projectウィンドウの Dango Colorを Hierarchyウィンドウ 内のSphereにドラッグアンド ドロップする – あるいは DangoColorをシー ンビュー内のだんごに直接ド ラッグアンドドロップする – 同じ要領で串にも串の色をつ ける – 串の色のマテリアル名は DangoKushiにする
  48. 48. だんご三兄弟をゴールにする • ゴールの位置に移動させる – シーン内の好きな位置にだん ご三兄弟を移動させる – ゴールに見立てるので隅でも 中央でも適当な場所でも構わ ない – ただし、今回は以下の条件に 適合すること • 床の上のどこかに置くこと • 床に接するor一部埋まっているこ と – ただしただし、ゴールさせる 経路次第では上記条件に沿わ なくてもOK
  49. 49. 迷路ゲームを作ってみる • 土台を作る • 外周を作る • 経路を練る • 迷路の壁を建てる • 主人公を置く • ゴールを作る • トリックを仕込む
  50. 50. 土台を作る • さっきの床をそのまま使う • だんご三兄弟はそのまま使 う • これら以外はDeleteキーで 全部消す
  51. 51. 外周を作る • キューブを流用する – GameObject > 3D Object > Cube • 長さと厚みを変える • 床の端に置く • コピー&ペーストで反対側 の壁を作る • 矢印のドラッグ&ドロップ で反対側に置くか Inspectorの PositionのZ値 を反対側の位置(例では -5 を 5)に変更する
  52. 52. 外周を作る • 横壁を流用する • コピー&ペーストで縦方向 の壁を作る – Inspectorの Rotationの Yの 値を90にして壁の向きを直角 方向に変更する • 矢印のドラッグ&ドロップ で床の側に置く • 反対側の壁はコピー&ペー ストで作って移動させて反 対側に配置する
  53. 53. 迷路ゲームの経路を練る • 自動処理で迷路の経路をつくる – NavMeshでやる – A* Pathfindingなどのアセットを使う – 自分で迷路の正解の道順を作る
  54. 54. 迷路ゲームの経路を練る • 自動処理で迷路の経路をつくる – NavMeshでやる • 時間が掛かる&コツを掴むまでは難しい – A* Pathfindingなどのアセットを使う • 壮大な迷路にはコレ! • 今回の規模ではオーバースペック – 自分で迷路の正解の道順を作る • 今回の規模には最適♪
  55. 55. 迷路の経路を作る • キューブを使う – GameObject > 3D Object > Cube • 床と見分けやすい色を塗る – Project > Material – 「MazeRoute」という名前を つけておく • ひたすらコピー&ペーストで 箱を増殖しながら迷路の正解 の道筋を作る
  56. 56. 迷路の経路のコツ • 長い直線は飽きる • 曲がり過ぎると後で自分が大変になる • 引っ掛け経路などは気にしない • 最短距離過ぎてもつまらない • 最短距離過ぎると見た目がごまかせない
  57. 57. 迷路ゲームの経路の例 • 直感的に作ってみる – 壁を建て始めると経路を変え たくなる • 長い直線は2箇所まではOK – カラクリでごまかせる • くっ付いても気にしない – 壁を建てて隔てられる • シンプルがちょうど良い – 壁を建てて実際に辿ると案外 難しくなっている
  58. 58. 迷路の壁を建てる • 外周を流用する – コピー&ペースト • 床の罫線の上に乗せる – CubeとCubeの間に挟まって 良い • 拡縮ボタンを活用 – 長さを縮める • 横壁は縦壁を流用する – Inspectorの Rotationの Yの 値を90°変更
  59. 59. 迷路の壁を飾りやすくする • 作った壁を「プレハブ化」 する – シーンビュー内のオブジェク トをプロジェクトウィンドウ にドラッグ&ドロップする – 縦の壁は “MazeWallTate” と 名前をつける – 横の壁は “MazeWallYoko” と 名前をつける – プレハブ化したプレハブをド ラッグ&ドロップでシーン ビューに落とす – この作業の謎解きは後ほど
  60. 60. 迷路の壁を建てまくる • プレハブから作った壁をど んどんコピペする – プレハブではなくプレハブを シーンビューに落とした壁を コピペしまくる – 正解経路のCubeを挟み込んで 通路になるように壁を建てる – 直感でジャンジャン壁を建て ていく
  61. 61. 主人公を置く • 今回は Cupsuleを使う – Menu > GameObject > 3D Object > Cupsule • ゴール(だんご三兄弟)の 正反対の位置に配置する • 床の上に置く • 通路幅よりも細くする – 例)X:0.5, Y:0.2, Z:0.5
  62. 62. 主人公が動くようにする • そのままでは動かない – ←↑↓→ のキー操作で動くよ うにする • 動かすためのプログラムを 仕込む – 今回はコピペで済ませる – Projectウィンドウ > Create > C# Script – ファイル名を “Move” に変更 – ファイルをダブルクリックす る
  63. 63. 主人公が動くようにする • プログラム編集ソフトが起 動する – Cmd+Aキーで全て選択 – Deleteキーで全て消す – 続けて次のページのプログラ ムを全部コピーしてきて、そ れをペーストする
  64. 64. 主人公が動くようにする using UnityEngine; using System.Collections; public class Move : MonoBehaviour { // 動く速度を指定する public float speed = 3; // Use this for initialization void Start () { } // Update is called once per frame void Update () { // 左右キー・上下キーのキーボード入力を取得する float speed_x = Input.GetAxis (“Horizontal”) * speed; float speed_y = Input.GetAxis (“Vertical”) * speed; // 自分に力を与えて動かす(転がす) this.GetComponent<Rigidbody> ().AddForce (speed_x, 0, speed_y); } } https://goo.gl/wwn7z8
  65. 65. 主人公が動くようにする • 主人公にくっ付ける – いま出来上がった Project ビューの中にあるプログラム “Move” を、Hierarchyビュー の中の主人公にドラッグ&ド ロップする – Hierarchyビューの中の主人公 がどれだか判らない時は、 シーンビューの中の主人公を クリックすると判る – 主人公にプログラムがくっ付 いたかどうか確認する • 主人公をクリックしてInspector ビューに “Move (Script)” の項目 があればOK!
  66. 66. 主人公が動くようにする • 主人公が物理法則の影響を 受けるようにする – Inspectorウィンドウの一番下 の [Add Component]ボタン をクリック – 検索窓に “rigi” と入力 – “Search” に “Rigidbody” が 表示されたらクリックで選択 – Inspectorビューの中に “Rigidbody” が入っていれば OK
  67. 67. 主人公が動いたら • プレイモードにする – 画面上部中央のプレイボタン ▶︎ をクリック • キーボードの←↑↓→で操作 – 主人公がキー入力通りに動くか 確認する
  68. 68. 主人公が動いたら • 正解経路のCubeを全部消す – シーンビューで一つ一つ消す か Hierarchyビューでまとめ て消す • ゴールに辿り着けるか確認 – 通れない通路はないか? – 曲がれるか
  69. 69. 見えにくい時は • 最初にゲームカメラの視野 を変えておく • シーンギズモくん登場 – カメラが見える視野になるま でX, Y, Zラッパをクリックし まくる – 見つからない時はズームアウ ト(ホイールをスクロール) してみる – 真横にカメラが見える位置が オススメ
  70. 70. 見えにくい時は • カメラの視野を鳥瞰にする • シーンギズモくん登場 – カメラが見える視野になるま でX, Y, Zラッパをクリックし まくる – 見つからない時はズームアウ ト(ホイールをスクロール) してみる • 回転ボタン活躍 – カメラの視野を真下に向ける – カメラのInspectorのRotation の値を直接変えてもOK • Inspector > Transform > X:90
  71. 71. 見えにくい時は • シーンの視野を変える • シーンギズモくん登場 – 全体がが見える視野になるま でX, Y, Zラッパをクリックし まくる – 入りきらない場合はズームア ウト(ホイールをスクロー ル)してみる
  72. 72. トリックを仕込む • シーンの視野を変える • シーンギズモくん登場 – 全体がが見える視野になるま でX, Y, Zラッパをクリックし まくる – 入りきらない場合はズームア ウト(ホイールをスクロー ル)してみる
  73. 73. ゴールを作る • ゴールしたことを判りたい • だんご三兄弟に当たったら 串の色を変えたい • モノがぶつかったら色を変 えるプログラムを仕込む – 今回もコピペで済ませる – Projectウィンドウ > Create > C# Script – ファイル名を “Goal” に変更 – ファイルをダブルクリックす る
  74. 74. ゴールを作る • プログラム編集ソフトが起 動する – Cmd+Aキーで全て選択 – Deleteキーで全て消す – 続けて次のページのプログラ ムを全部コピーしてきて、そ れをペーストする
  75. 75. ゴールを作る using UnityEngine; using System.Collections; public class Goal : MonoBehaviour { void OnTriggerEnter(Collider col){ // オブジェクトに衝突したことを検出する // マテリアルの色として red を着色する GetComponent<Renderer>().material.color = Color.red; } } https://goo.gl/wwn7z8
  76. 76. ゴールを作る • ゴールにくっ付ける – いま出来上がった Project ビューの中にあるプログラ ム ”Goal” を、Hierarchy ビューの中の串(Cylinder) にドラッグ&ドロップする – Hierarchyビューの中の串がど れだか判らない時は、シーン ビューの中のだんご三兄弟の 串をクリックすると判る – 串(Cylinder)のCapsule Colliderの Is Triggerにチェッ クを付ける
  77. 77. ゴールを作る • プレイモードにする – 画面上部中央のプレイボタン ▶︎ をクリック • 色が変わるか確認する – ゴールまで遠すぎたり複雑す ぎる時は一時的に主人公を ゴールの近くに置く – 見え難かったら視点を変える か、だんごの高さを変えて串 を見えるようにする – 主人公が串をすり抜ける
  78. 78. ゴールを作る ~2 • ゴールしたことを判りたい • だんご三兄弟に当たったら 串の色を変えたい • 串をすり抜けたくない • モノがぶつかったら色を変 えるプログラムを仕込む – 今回もコピペで済ませる – Projectウィンドウ > Create > C# Script – ファイル名を “Goal2” に変更 – ファイルをダブルクリックす る
  79. 79. ゴールを作る • プログラム編集ソフトが起 動する – Cmd+Aキーで全て選択 – Deleteキーで全て消す – 続けて次のページのプログラ ムを全部コピーしてきて、そ れをペーストする
  80. 80. ゴールを作る~2 using UnityEngine; using System.Collections; public class Goal : MonoBehaviour { void OnCollisionEnter(Collision collision){ // オブジェクトに衝突したことを検出する // マテリアルの色として red を着色する GetComponent<Renderer>().material.color = Color.red; } } 主人公がゴールの串をすり抜けたくない場合に使う https://goo.gl/wwn7z8
  81. 81. ゴールを作る • ゴールにくっ付け直す – いま出来上がった Project ビューの中にあるプログラ ム ”Goal2” を、Hierarchy ビューの中の串(Cylinder) にドラッグ&ドロップする – 串の Capsule Colliderの Is Triggerのチェックを外す
  82. 82. ゴールを作る • プレイモードにする – 画面上部中央のプレイボタン ▶︎ をクリック • 色が変わるか確認する • 串にぶつかってすり抜けな いことを確認する Is Triggerを有効にするとぶ つかったオブジェクトはす り抜ける でも、ぶつかったこと自体 は認識(=衝突判定)する
  83. 83. 高度化させてみよう
  84. 84. トリックを仕込む • ただゴールを目指してもいいけど、、、 • 罠があると面白さが増す – チェックポイントでハードルを上げる – 障害物があると乗り越えたくなる – 騙しがあると燃える – 意表を突くと笑いが取れる
  85. 85. チェックポイントを作る • カッコイイチェックポイントにしよう! – チェックポイントに寄りたくさせる – 絵心やCG経験、3Dモデリング経験があるな ら作る – それらの経験がなくても大丈夫!
  86. 86. アセットストアを使う • マーケットプレイス – Unityで何かを開発する時に、 – すぐ使えるパッケージ(ア セット)を、 – 無料で取得・有料で購入でき るマーケットプレイス – 3Dモデル、アニメーション、 Unity拡張、音素材、特殊効果 – 総点数 27,000強 • みんなが使っている – 大手ゲーム開発会社 – 有名ゲーム・アプリ
  87. 87. アセットストアを使う • アセットストアを開く – Menu > Window > Asset Store – シーンビューの上にアセット ストアウィンドウが開く
  88. 88. アセットストアを使う • 何はともあれ [ログイン] ボタンをポチる
  89. 89. アセットストアを使う • アセットストアにログイン • メール – 登録したメールアドレス • パスワード – 登録したパスワード • [ログイン] ボタンをポチる • Full Nameに登録した名前 に切り替わる
  90. 90. アセットストアを使う • もしもログインできなかっ たら、、、 – [アカウント作成] ボタンをポ チる
  91. 91. アセットストアを使う • 自動的にブラウザが開く • Email – 受け取れるメールアドレス • Password – 8文字以上で記号、英大小文字、 数字を組み合わせる • Username – ペンネームみたいなもの • Full Name – 英文の実名 • Country – 必ず【Japan】を選ぶ!
  92. 92. アセットストアを使う • Click or touch the 〜〜〜 – 〜〜〜で指定されている絵柄 を選ぶ • I agree to the〜〜〜 – 利用規約とプライバシーポリ シーに同意できるならチェッ クをつける • Get Unity news – Unityからの各種お知らせが届 く – 不要ならチェックしない • Create a Unity ID – ポチッと!
  93. 93. アセットストアを使う • Confirm your Email に変 わったらメールを受信する • メール本文中の “Link to confirm email” をクリック する
  94. 94. アセットストアを使う • アセットストアにログイン – [ログイン] ボタンをポチる
  95. 95. アセットストアを使う • アセットストアにログイン • メール – 登録したメールアドレス • パスワード – 登録したパスワード • [ログイン] ボタンをポチる • Full Nameに登録した名前 に切り替わる
  96. 96. アセットストアを使う • なにはともあれ検索 • And検索 – 検索単語をスペースでつなぐ • Or検索 – 単語をパイプ | でつなぐ • And/Or検索 – かっこ()でくくりスペース でつなぐ – (fire|flare|burn) effect • 除外 – マイナス – を付ける – car -cartoon 今回は star を検索してみる
  97. 97. アセットストアを使う • 値段順に並べ替える – 無料から順に並ぶ – 無料の中からカテゴリが “3D モデル” のものを選ぶ – 例では “Cartoon Props Pack” • 黒い太文字がアセット名 – アセット名をクリックする – アセットの説明ページが開く – そこからダウンロードできる
  98. 98. アセットストアを使う • [ダウンロード]をポチる – ダウンロードボタンがプログ レスバー(何%ダウンロード 中のように伸びる)に変わる – 100%になると “Import Unity Package” 画面が開く • 特に気にせず [Import] ボ タンをポチる – ダウンロードしたアセットの 解凍とインポートが始まる
  99. 99. チェックポイントを作る • インポートが完了すると – Projectウィンドウの Assets フォルダ直下にアセット名の フォルダが生まれる – フォルダを開くといろいろ 入っている • モデルをシーンに配置 – Modelsフォルダ内の “Star” をドラッグ&ドロップで迷路 状のチェックポイントに置く – ちょうど良いサイズに変更す る
  100. 100. チェックポイントを作る • インポートが完了すると – Projectウィンドウの Assets フォルダ直下にアセット名の フォルダが生まれる – フォルダを開くといろいろ 入っている • モデルをシーンに配置 – Modelsフォルダ内の “Star” をドラッグ&ドロップで迷路 状のチェックポイントに置く – ちょうど良いサイズや向きに 変更する – コピペで2〜3個配置してみる
  101. 101. 時間がある方は • チェックポイントに当たったら • 飛跳ねさせてみる • 飛び跳ねる音を鳴らしてみる • 数回飛跳ねたら消滅させる • 得点をつけてみる • 主人公をワープさせてみる
  102. 102. 障害物を置く • ただの壁じゃつまらない • DLしたアセットを使う • 樽をシーンに配置 – Modelsフォルダ内の “Barrel” をドラッグ&ドロップで迷路 の邪魔になる場所に置く – ちょうど良いサイズや向きに 変更する – 今回は「正解経路」を塞ぐ
  103. 103. もしも樽が動いたら、、、
  104. 104. もしも樽が動いたら、、、
  105. 105. もしも樽が動いたら、、、
  106. 106. 騙してみよう • 樽が物理法則の影響を受け るようにする – 樽をクリックしてInspector ビューの一番下の [Add Component] ボタンをポチる – 検索窓に “rigi” と入力 – “Search” に “Rigidbody” が 表示されたらクリックで選択 – Inspectorビューの中に “Rigidbody” があればOK • プレイモードにする – 画面上部中央のプレイボタン ▶︎ をクリック
  107. 107. 意表を突いて笑いを取ろう
  108. 108. 見えない壁を作ろう • 見えない壁とは? – “衝突判定” だけのモノを置く • “カラ”のモノを作る – Menu > GameObject > Create Empty • 衝突判定だけを付ける – Inspectorウィンドウの一番下 の [Add Component]ボタン をクリック – 検索窓に “coll” と入力 – “Search” に “Box Collider” が表示されたらクリック – Inspectorビューの中に “Box Collider” が入っていればOK
  109. 109. 見えない壁を作ろう • 見え難いので場外で作業 – 大きさ・厚さを壁と同じくら いにする • 正解経路上に置いてみる – とにかく見え難いので視野を 変えながら微調節する
  110. 110. 見えない壁を作ろう • プレイモードにする – 画面上部中央のプレイボタン ▶︎ をクリック
  111. 111. もっと意表を突こう
  112. 112. すり抜けられる壁を作ろう • すり抜けられない壁とは? – ぶつかったことを検知して 「オレ、モノだから!」と主 張する – ぶつかった方は「モノだから すり抜けられない」と認識す る – これが俗に言う “衝突判定” – 衝突判定は “Collider” さんが やってくれる • 衝突判定を外す – すり抜けたい壁の Inspector 内の “Box Collider” のチェッ クを外す
  113. 113. すり抜けられる壁を作ろう • プレイモードにする – 画面上部中央のプレイボタン ▶︎ をクリック
  114. 114. 見栄えをキレイにしてみる • 壁 • 外周 • 土台 • 主人公
  115. 115. 壁っぽくしてみる • 壁に似合う素材を使う – Asset Store > テクスチャ& マテリアル > レンガ
  116. 116. 壁っぽくしてみる • 壁に似合う素材を使う – Asset Store > テクスチャ& マテリアル > レンガ – 例では “Stone and Brick Texture Pack”をダウンロード – そのまま全部 Importする
  117. 117. 壁っぽくしてみる • 壁のプレハブに素材を貼る – Projectウィンドウで “MazeWallYoko” を選択 – Inspectorウィンドウが表示さ れている状態にしておく – Projectウィンドウで Assets/Stone&BrickTexture Pack/Texture/Materialsフォ ルダを開く(フォルダをク リックして開くまで) – Brickを素早くMazeWallYoko のInspectorウィンドウにド ラッグ&ドロップする – シーンビュー内の横壁が全部 グレーのレンガに変わる
  118. 118. 壁っぽくしてみる • 同じ要領で縦壁にも貼る – Projectウィンドウで “MazeWallTate” を選択 – Inspectorウィンドウが表示さ れている状態にしておく – Projectウィンドウで Assets/Stone&BrickTexture Pack/Texture/Materialsフォ ルダを開く(フォルダをク リックして開くまで) – Brickを素早くMazeWallTate のInspectorウィンドウにド ラッグ&ドロップする – シーンビュー内の縦壁が全部 グレーのレンガに変わる
  119. 119. 覚えていますか? • プレハブって便利ですね – プレハブ単位で一括変更 – 異なるプレハブには影響しな い – まとめるほど便利 – まとめすぎると厄介者 • 便利に使うためには? – グルーピングの仕方を事前に 熟考する
  120. 120. 床っぽくしてみる • 床に似合う素材を使う – Asset Store > テクスチャ& マテリアル > 地面
  121. 121. 床っぽくしてみる • 床に似合う素材を使う – Asset Store > テクスチャ& マテリアル > 地面 – 例では “Grass 01 Game- Ready”をダウンロード – そのまま全部 Importする
  122. 122. 床っぽくしてみる • Planeに素材を貼る – Projectウィンドウで Assets/TL_LAB/TL_Grass_0 1/U4 Materialフォルダを開く – TL_Grass_01を素早くシーン ビュー内の床にドラッグ&ド ロップする
  123. 123. なんということでしょう♪ Before After
  124. 124. 時間がある方は • 主人公にテクスチャを貼ってみる • 主人公を3Dモデルに変えてみる – 人型、車、戦車、戦闘機、宇宙船 • カウントダウンタイマーをつけてみる • 全体的なBGMを付けてみる • スタート画面を作ってみる • ゴールを褒め称えちゃう画面を作る
  125. 125. 主人公を追いかける • カメラを動かす – ←↑↓→ のキー操作で動くよ うにする • 動かすためのプログラムを 仕込む – 今回はコピペで済ませる – Projectウィンドウ > Create > C# Script – ファイル名を “CameraMove” に変更 – ファイルをダブルクリックす る
  126. 126. 主人公を追いかける • プログラム編集ソフトが起 動する – Cmd+Aキーで全て選択 – Deleteキーで全て消す – 続けて次のページのプログラ ムを全部コピーしてきて、そ れをペーストする
  127. 127. 主人公を追いかける using UnityEngine; using System.Collections; public class CameraMove : MonoBehaviour { // 相手のTransform(位置・角度・大きさ)情報を取得 public Transform move_target; // Use this for initialization void Start () { } // Update is called once per frame void Update () { // 自分の位置を相手の位置と同じにする。 transform.position = move_target.position; } } https://goo.gl/wwn7z8
  128. 128. 主人公を追いかける • Main Cameraの位置と向き を変える – 主人公目線に変更する – 壁高目線 – 足元目線
  129. 129. 主人公を追いかける • Main Cameraの位置と向き を変える – 主人公目線に変更する – 壁高目線 – 足元目線
  130. 130. 主人公を追いかける • 自分目線でカメラを動かして みる – Game Object > Create Empty – 名前を Camera Parent に変更
  131. 131. 主人公を追いかける • 自分目線でカメラを動かして みる – Camera Parent のInspectorの Positionと Rotationの値を Main Cameraの値と同じにす る
  132. 132. 主人公を追いかける • 自分目線でカメラを動かして みる – Main Camera を Camera Parent にドラッグアンドド ロップして、Camera Parentの 子にする
  133. 133. 主人公を追いかける • カメラの親にくっ付ける – 作っておいた Projectビューの 中にあるプログラ ム ”CameraMove” を、 Hierarchyビューの中の Camera Parent にドラッグ& ドロップする • 主人公を対象にさせる – Camera Parentの Inspector で Camera Move (Script) の Move_targetの右端の◉をク リック – 検索窓で cap と入力 – Capsule を選択する
  134. 134. みんなに遊んでもらおう • Build Settingsを開く – File > Build Settings…
  135. 135. WebGLでの書き出し • WebGLを選択 • 画面左下の「Switch Platform」をクリック
  136. 136. WebGLでの書き出し • 「Add Open Scenes」をク リック • “Scenes in Build”の枠内に Mainシーンが入ったら画面 下の「Build」をクリック
  137. 137. WebGLでの書き出し • Save As: にWebGL書き出し をするディレクトリ名を入力 する – 今回は MazeWebGL • Saveをクリック • しばらく待つと index.html と複数のフォルダが出来上が る • ウェブサーバーにアップロー ドする

×