11月15日資料

床を傾けてボールを転がし、ゴールにまで導くミニゲームを作る演習課題です。

<b>環境設定</b>

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/0f8bed9f-70ff-0d05-eb2b-aed1ccc43619.png)
1：Unityを起動し、メニューから「New」をクリック

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/53eb4938-a1ab-83cc-9b55-74df44538302.png)
2：Projet Nameに今日の日付「191115」を入力し、Templateで「3D」を選択した後に、「Create project」をクリック

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/5f496c7e-98fb-b114-e6f5-72691fe03140.png)
3：Unityのエディタが開いたら、何はともあれ「File」→「Save Scens」でシーンファイルを保存しよう

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/5f487535-b39c-f172-8b6e-12ab20689971.png)
4：ウィンドウが開くので、こちらも本日の日付「191115」を入力し、「保存」をクリック

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/49e2f9ab-ba8b-50f4-ff3f-c07cb8a262ec.png)
5：レイアウトが狂っていたら、「Layout」→「Default」を選択する

<b>フロアとボールの配置</b>

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/eab3c35c-0dfd-c975-7be3-3bfe93ba2a8b.png)
6：「GameObject」→「3D Object」→「Cube」を選択

![01-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6d3a7b01-0937-c036-f2cb-c512d6f22a9b.png)
7：シーンビューに「Cube」が配置される

![01-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/5e781d70-64a2-62ba-d028-1472b512d7b4.png)
8：「Cube」をクリックし、Imspectorでオブジェクト名を「Floor」に変更し、TransformのScaleでXを20，Yを1、zを20に変更する

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/de142d77-ec50-2d57-6782-4922ace0a49f.png)
9：「Assets」→「Create」→「Material」を選択

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/08d3a1e6-296f-e322-6258-b954d5b5703d.png)
10：作成されたMaterialの名称を「Floor」とし、ImspectorからAlbedoをクリックして、床の色を選ぶ

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/eb26a0be-994f-fb01-d181-62a74c703917.png)
11：作成したFloorのMaterialをシーンビューのFloorオブジェクトにドラッグ＆ドロップし、色を変える（Hierarchy欄のFloorにドラッグ＆ドロップしてもいい）

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6306bb15-58eb-bef5-4f75-a8f4bf35d97a.png)
12：同じく「GameObject」→「3D Object」→「Sphere」を選択

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f81b7d2a-e4e3-6b90-9bbd-72b8b4d99713.png)
13：作成したSphereのImspectorでオブジェクト名を「Ball」に変更

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9bb4c3bf-fad9-8c30-a150-34e68c47dbec.png)
14：同じく「Assets」→「Create」→「Material」を選択

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/32ee49ae-5300-0412-5b26-e0eb7be16037.png)
15：作成されたMaterialの名称を「Ball」とし、ImspectorからAlbedoをクリックして、ボールの色を選ぶ

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b109210f-d5a9-daff-9b23-57b84f8e53ba.png)
16：作成したBallのMaterialをシーンビューのBallオブジェクトにドラッグ＆ドロップし、色を変える（Hierarchy欄のBallにドラッグ＆ドロップしてもいい）

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/19b92959-6de7-cbb5-2fe7-a7f727882a77.png)
17：「Assets」→「Create」→「C# Script」を選択

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/01a034ea-ec66-5e17-8e94-9841717e3abb.png)
18：作成されたC#スクリプトの名前を「Rotate」に変更する

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/471eb9f1-1ca9-6c27-2d93-d8603953f497.png)
19：RotateをダブルクリックするとVisual Scriptが開くので、見本にしたがってスクリプトを入力し、Ctrl+Sで上書きセーブする

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6c3a7ffc-24f8-6da1-a046-820d82211e2c.png)
20：作成したRotateスクリプトをFloorオブジェクトのImspectorにドラッグ＆ドロップし、アタッチする

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f9f44929-b372-107e-5309-e97e811901de.png)
21：HierarchyでBallオブジェクトを選択し、Imspectorの「Add Component」から「Rigidbody」を選択し、アタッチする

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8bff7489-4d02-8da9-0052-9903a5ed7c08.png)
22：アタッチしたRigidbodyで「Use Gravity」をオンにする

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/fb1c6b56-4da5-c312-f3a6-db427f36b3df.png)
23：Ballオブジェクトをクリックし、ImspectorのTransformでPositionをX=0、Y=5、Z=0にする

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/a0f69c19-a6af-9898-1063-26d753a6108e.png)
24：再生すると上からBallが落下する。また、カーソルキーでFloorを傾けられる(ただし、この段階ではボールは転がらないので注意）

<b>ステージの作成</b>
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/34c02896-1bbc-5763-e601-0e13f775895f.png)
25：GameObject→3D Object→Cubeを選択

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c1eaea44-2a09-470d-5e3e-955df9de9f95.png)
26：Hierarchyで作成されたCubeをクリックし、Imspectorで名称を「Wall」として、TransformのPositionでX=10.5、Y=0.5、Z=0とする。また、ScaleでX=1、Y=2、Z=1とする

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/41d8d52b-0d25-652b-cddf-c8f7e9f0ece3.png)
27：同じくImspector→Transform→ScaleでX=1、Y=2、Z=20とする

![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8c34193e-44cf-1d0e-93a4-9226085b4603.png)
28：HierarchyでWallを右クリック→Duplicateを選択

![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/50ec80de-39de-79e5-e7c2-a52516342d23.png)
29：複製された「Wall(1)」を選択し、Imspector→Transform→PositonでX=-10.5, Y=0.5, Z=0とする。あわせてScaleでX=1、Y=2、Z=20とする

![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2d74c631-e386-7ca5-f2fa-d359bded6569.png)
30：同様に「Wall(2)を複製し、Imspector→Transform→PositonでX=0, Y=0.5, Z=10.5とする。あわせてScaleでX=22、Y=2、Z=1とする

![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6e7fd714-160d-b32e-81a3-9529c6493865.png)
31：同様に「Wall(3)を複製し、Imspector→Transform→PositonでX=0, Y=0.5, Z=ｰ10.5とする。あわせてScaleでX=22、Y=2、Z=1とする

![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/766eac30-a96b-bc30-deb6-022cacc518d9.png)
32：HierarchyのMain Cameraを選択したうえで（忘れやすいので注意！）、GameObject→Align With Viewを選択する

![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/658a23b9-62d0-e63a-f9dc-0ab0b22a307e.png)
33：この段階で再生ボタンをクリックすると、カーソルキーを押してもFloorだけが回転し、周囲の壁が連動しないままになってしまう

![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/fdbbae7d-e78a-df9c-1e79-e6982f174e17.png)
34：そこでGameObject→Create Emptyを選択する

![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/91de3b3d-67df-9e90-4463-694ad6e073a4.png)
35：作成されたCreate EmptyをHierarchyで選択し、Imspectorでオブジェクト名を「Stage」に変更する。

![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/066132dd-5e39-1fd1-5d23-7165c0edd70d.png)
36：HierarchyでBall,Floor,Wall～Wall(3)を範囲指定する

![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c559405f-8dbc-a306-324f-e2f6b4b385b4.png)
37：範囲指定したオブジェクトをFloorの下にドラッグ＆ドロップし、親子関係を作る

![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/7df737f3-9113-a6df-6a18-3549d346c4e8.png)
38：HierarchyのFloorを選択し、ImspectorにあるRotateスクリプトの先頭にあるボックスをオフにする。これで、このスクリプトが動作しなくなる

![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2d59604a-202e-faff-1620-ca8e28b0c30a.png)
39：かわりにHierarchyでStage（GameObjectから改名）を選択し、RotateスクリプトをImspectorにドラッグ＆ドロップしてアタッチする

![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b364dbc5-6b9c-fe18-360d-67db8e4ecf89.png)
40：ここで再び再生ボタンをクリックすると、周囲の壁がFloorに連動して傾けられる。ボールも転がせるようになるので、自由に動かして遊んでみよう

<b>レベルデザイン</b>
![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d2d28124-3c0d-829a-5381-378dbbd5deca.png)
41：再びGameObject→3D Object→Cubeを選択

![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/a76afb7e-4aef-f1a0-28eb-cba332485cc0.png)
42：Imspectorでオブジェクト名を「Maze」に変更し、TransformのPositionでX=0,Y=1,Z=0にする。また、ScaleでX=13,Y=1,Z=1にする

![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/24126337-65eb-8057-049d-2959c17b5d04.png)
43：今までの手順と同じようにしてMaterialを作成し、Mazeの色を変える

![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/732bc234-db60-9518-eb00-f13a179b92a6.png)
44：HierarchyのMazeオブジェクトをProject欄にドラッグ＆ドロップし、prefabを作成する

![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/fa09dccc-c8c2-13ad-9692-51078b7d32ff.png)
45：prefabが作成できたら、HierarchyのMazeを削除する

![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/dc77b8a7-3d6c-eb28-4578-b9a70e4ac7ad.png)
46：ProjectにあるMazeのprefabをHierarchyに2回ドラッグ＆ドロップして、2つのMazeオブジェクトをシーンビューに配置し、場所を調整する

![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/518547d4-eaee-a4e0-d3e6-4878d281a510.png)
47：Ballを選択し、Imspector→Transform→PositonでX=9.5,Y=1,Z=-9にする

![43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/69d6ae2b-42a9-789b-44c8-5511add3f4ff.png)
48：再生ボタンをクリックし、ボールが壁にぶつかるか確認しよう

![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/eeb55058-4b20-41ee-cc0d-f180a79edd7c.png)
49：マウス操作でシーンビューの見え方を調整しながら、ステージ全体が正面に配置されるようにする。このとき、ギズモのX軸が左、z軸が下になるように注意する

![45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/464852b9-a68a-2164-eb10-844e99ab0b0d.png)
50：HierarchyでMain Cameraを選択し、GameObject→Align With Viewを選択する

![46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8f0163c1-7bee-cdd6-87e1-58bac1f1a9ad.png)
51：GameObject→3D Object→Cubeを選択し、縦横2，高さ1の直方体オブジェクトを作る。その後、これまでの要領でMaterialを作成し、色を変える。また、オブジェクト名をGoalに変更する

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d51f969a-07f6-88cc-9f8c-4e3a18987b7f.jpeg)
52：Goalの位置をImspector欄で修正し、X=-9,Y=0.16,Z=9にする。また、Box ColliderのSize欄のY軸を2にして、当たり判定の高さを高くする。最後にIs Trigerをオンにする

![48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9edfd7ca-1ded-2f6c-2894-053fd7cc1e52.png)
53：同じくGameObject→3D Object→Cylinderを選択し、縦横2，高さ1の円柱オブジェクトを作る。その後、これまでの要領でMaterialを作成し、色を変える。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9bee0d3a-9039-3687-b842-bda31ebbfea6.png)
54：オブジェクト名をMissに変更し、Capsule ColliderでIs Trigerをオンにする。その後、MissオブジェクトをHierarchyからProjectにドラッグ＆ドロップして、prefabにする

![50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/145fdae0-c1ee-ab2e-b960-ddbbd70907bc.png)
55：prefabが作成されたら、HierarchyのMissオブジェクトを削除する

![101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/7898b0ef-43b0-23e3-7d63-90bef54b8e03.png)
56：prefab化されたMissをHierarchyにドラッグ＆ドロップし、ステージ上の任意の場所に配置したうえで、ステージに埋め込む。Imspector→Capsule Colider→Center欄Y＝1にする

![52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/0a77a7cd-3095-2e86-26f9-52e1eb929f90.png)
57：同様にprefab化されたMissをHierarchy上にあと2個ほどドラッグ＆ドロップし、ステージ上の任意の場所に埋め込む。また、それぞれのImspectorでCapsule Colider→Center欄Y＝1にする

![53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/3e319ac9-3673-ed79-bba1-1f84d69bc9f2.png)
58：再生ボタンをクリックして、特に引っかかり無くBallが移動するか確認する

<b>UIとメカニクスの実装</b>
![54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8dab358f-ed51-8ac2-24fd-73c4cdb89fba.png)
59：GameObject→UI→Textを選択する

![55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/38377041-9a77-c13b-d9f3-604079541d31.png)
60：エディタをシーンビューからゲームビューに切り替え、スクリーンショットを参考にGOAL表示を設定する

![56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c9b2092f-5463-c2ba-f1ed-b9811b1074ce.png)
61：同様にGameObject→UI→Textを選択し、MISS表示を設定する。設定が終了したらゲームビューからシーンビューに戻す

![58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6f601429-9bcc-8517-fd2d-b292d8164002.png)
62：Ballを選択し、ImspectorのTagメニューで「Player」を選択する

![57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/18759373-3807-3058-dd8e-bb8d82fd2c11.png)
63：HierarchyでGoalUIを選択し、Imspectorのオブジェクト名の左側にあるチェックボックスをオフにする。これでゲームビューからGoalのUI表示が消える。同様にMissUIもチェックボックスをオフにする

![59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9dbacf91-b961-0e1d-fd1f-3f5ab3463aa8.png)
64：Assets→Create→C# Scriptを選択し、「Goal」「GoalUI」「Miss]「MissUI」という4種類のC#スクリプトを作成する

![60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/0f223726-54cd-0f84-e08f-26e422d1ec88.png)
65：GoalスクリプトをダブルクリックしてVisual Studioを起動し、見本を参考にGoalスクリプトを作成する。完成したらCtrl+Sで上書き保存する

![61.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/a2d2af0f-842f-5ab7-61ef-a0c6bb9d1e24.png)
66：同様にGoalUIスクリプトをダブルクリックしてVisual Studioを起動し、見本を参考にGoalUIスクリプトを作成する。完成したらCtrl+Sで上書き保存する

![62.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/31b3f0a1-13dd-ea08-8d5d-8b7dcc258736.png)
67：プロジェクト欄のGoalスクリプトを、GoalオブジェクトのImspectorにドラッグ＆ドロップしてアタッチする

![63.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c17b4055-3f10-5a41-fa11-1c91370a29ab.png)
68：HierarchyのCanvasをクリックし、ProjectのGameUIスクリプトをCanvasのImspectorにドラッグ＆ドロップしてアタッチする。その後、HierarchyのGoalUIをGameUIスクリプトの「Result UI」欄にドラッグ＆ドロップして登録する

![65.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/11dde986-22fa-4c66-7252-df900aa06695.png)
69：再生ボタンをクリックし、BallがGoalに到達するとゴール表示が行われるか否か確認する

![66.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/272587c1-5123-d009-e9cb-eb383f6374e7.png)
70：MissスクリプトをダブルクリックしてVisual Studioを起動し、見本を参考にMissスクリプトを作成する。完成したらCtrl+Sで上書き保存する

![67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/da73133f-a5b8-787c-159f-472305cf7e07.png)
71：同様にMiss UIスクリプトをダブルクリックしてVisual Studioを起動し、見本を参考にMiss UIスクリプトを作成する。完成したらCtrl+Sで上書き保存する

![68.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/455baa3a-ac3d-71d3-3199-9c60131fa5d2.png)
72：プロジェクト欄のMissスクリプトを、MissオブジェクトのImspectorにドラッグ＆ドロップしてアタッチする

![69.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/07bae44c-b113-3d71-d23c-56b1ad6ee3e4.png)
73：HierarchyのCanvasをクリックし、ProjectのMissUIスクリプトをCanvasのImspectorにドラッグ＆ドロップしてアタッチする。その後、HierarchyのMissUIをCanvasにあるMissUIスクリプトの「Result UI」欄にドラッグ＆ドロップして登録する

![70.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/12046554-5390-8ceb-ed85-60358e1eabe5.png)
74：再生ボタンをクリックして、BallがMissオブジェクトに触れるとMISS表示が行われるか確認する

![71.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/519b0acf-d9ab-c9bb-a099-475892c4b0fb.png)
75：これでひとまず完成だが、最後にProject欄を整理しよう。Assets→Create→Folderを選択する

![73.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/bfd085b2-3bf1-28f2-0aa1-e10231e2a16f.png)
76：Materials, Prefabs, Scriptsのフォルダを作成し、それぞれのファイルをドラッグ＆ドロップして収納する。これでプロジェクト欄がすっきりした

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/aa01d594-828d-e201-5f79-e96f9e090aa0.png)
77：最後まで完成したら、このメカニクスに即したレベルデザインを自由に考えてみよう。はじめにFile→Save Scene asを選択する

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/fbf3b3e9-f726-85c4-83b4-c060da837b16.png)
78：191122（今日の日付）で新規シーンファイルを保存する

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/251837a2-ec99-57bf-7f9a-61957eede75f.png)
79：新たに作成された「191122.unity」アイコンをクリックする。Hierarchyの一番上にあるUnityのアイコンの名称が「191122」に変更されたのを確認した上で、レベルデザインを始めよう。こうすると、Project欄の「191115.unity」をクリックするだけで、元の状態に戻れる

<b>スクリプト出展</b>
Rotate：テラシュールブログ　http://tsubakit1.hateblo.jp/entry/20120120/1327038715

Goal、GoalUI、Miss、MissUI　「Unity2018入門 最新開発環境による簡単3D&2Dゲーム制作」https://www.amazon.co.jp/dp/4797397667/