Unity Playground_Tutorial_Spaceship

Unity Playground 公式チュートリアルをベースに、授業向けに資料を作りました！（Unity 2019.4.1f1版）
https://connect.unity.com/p/how-to-get-started-unity-playground-japanese

#######こちらは課題N（ノーマルコース）となります

#演習の準備
![スクリーンショット (1125).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9c79693d-b09f-e705-0915-ffe8c4c3ee8f.png)
1：Cドライブに「Unity」フォルダを作りましょう（すでに作成済みなら不要）

![スクリーンショット (1126).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b384f3ba-f466-25da-76fa-4ebbe07110ff.png)
2：Unityフォルダを開き、その中に「Unity_PlayGround_Tutorial_Spaceship」フォルダを作ってください

![スクリーンショット (1127).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9f1cb653-5983-439c-2499-4eb2fec28097.png)
3：<a href="https://drive.google.com/file/d/1XhnoJeglniUnf-l6xKL09keWnMQXo47j/view?usp=sharing">指定のURL</a>からUnity PlayGround.Zipフォルダをダウンロードし、解凍後にフォルダを開いてください。その後、「Assets」「ProjectSettings」フォルダを、先ほど作成した「Unity_PlayGround_Tutorial_Spaceship」フォルダにコピーしてください。

![スクリーンショット (1128).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/150531e7-7044-5b8d-acdf-416e8ed247ca.png)
4：このようにコピーできれば先に進みましょう。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/675a0610-7cbf-9ea8-ec09-eb838aba60a5.png)
5：Unity Hubを開き、「リストに追加」をクリックしてください。

<b>注意！　USBメモリなどからプロジェクトフォルダを読み込んではいけません（転送速度が遅いので非常に時間がかかります）。必ずハードディスクにフォルダをコピーして、そこから読み込んでください。</b>

![スクリーンショット (1130).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/70cd18d5-8f7e-261d-6d6f-3fd2b4cbb198.png)
6：CドライブからUnity＞Unity_PlayGround_Tutorial_Spaceship」フォルダを開き、フォルダ内に「Assets」「ProjectSettings」フォルダが表示されているのを確認後、「フォルダーの選択」ボタンをクリックしてください。

![スクリーンショット (1131).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/5d2a0af7-509f-83de-ec0a-8e58874aacd9.png)
7：Unity Hubに「Unity_PlayGround_Tutorial_Spaceship」プロジェクトが登録されたら、クリックしてください。。

![スクリーンショット (1132).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b3e5f524-ec6a-f301-0084-4a6ee82890ed.png)
8：Unityエディタが起動するので、プロジェクトエリアから「Spaceship_Tutorial」フォルダを開いてください。

![スクリーンショット (1134).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/58f37f00-bc9f-8832-24f5-d285de5dd362.png)
9：Unityのアイコン（＝シーンファイル、Spaceship_Tutorial.unity）をクリックしてください。その際、Hierarchyのルート表示がSpaceship_Tutorialに変化することを確認してください。

<b>画面解像度の固定</b>
![スクリーンショット (1254).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ecf343e2-a0b6-e28f-0819-c21cc96b9ac4.png)
9-1:Unityの実行画面はデフォルトで「Free Aspect」になっている。環境に応じて自由に画面の画角や解像度が変化してしまうので、固定解像度にしておくと便利だ。Gameタブをクリックし、「Free Aspect」メニューを開いて、一番下の「＋」ボタンをクリックしよう。

![スクリーンショット (1255).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2e0b5f02-4d4e-46c9-be81-879b73e0f1b2.png)
9-2:Labelに「1280＊768」と記入し、下側のWidth＆Heightスロットに「1280」「768」と記入して「OK」をクリックする。

![スクリーンショット (1256).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/884649b6-585a-83b3-6488-b8cc81977761.png)
9-3：これで実行画面の画面解像度が1280✕768ピクセルに固定された。

![スクリーンショット (1144)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b260fc9a-9606-2ff8-6876-70365060380f.png)
10：ここでいったん「File」メニュー→「Save」で上書き保存しておこう。

![スクリーンショット (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d67fd36d-3c76-53f0-7864-891e6bd46089.png)
11：これで準備が完了しました。これ以降は「Unity PlayGroundマニュアル日本語版」の内容に沿ってチュートリアルを進めていきます。
https://docs.google.com/document/d/1xCywAAMJOVvumjgoLl7NioiTO85oEhAHJ62yKMIDH18/edit?usp=sharing

![スクリーンショット (58).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/cc2f6dde-cca9-e0ee-a468-b54c39869223.png)
12：今回作成するゲームは小惑星にぶつからないように宇宙船を操縦して、スターを5つ集めるという、シンプルなものです。ゲームの三要素は下記の通りです。

<b>目標：画面上のStarをすべて集める
手段：矢印キーで宇宙船を動かせる
障害：隕石に当たるとHealthが1減る。Healthが0になるとゲームオーバー</b>

#マイシップの作成
![スクリーンショット (1135).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/90396beb-78c4-64da-8c3b-c37c2e179134.png)
13：「Assets」→「Images」→「Spaceships」で「SpaceshipBlue」をHierarchyにドラッグ＆ドロップします

![スクリーンショット (1139).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/12f8b681-9c20-2bac-540c-fdc682a212d8.png)
14：Spaceshipをクリックし、InspectorのTransform欄でPositionを「X=0」「Y＝0」、Scaleを「X=0.3」「Y=0.3」にします。

![スクリーンショット (1140).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f9ae41e6-69b5-b656-aec9-a3fe891dd16b.png)
15：SpaceshipのInspector欄でTagを「Player」にします。

![スクリーンショット (1142).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/adccfbb8-8bae-d4c1-5ba7-1f6f767a3ea6.png)
16：プロジェクトエリアのツリーから「Assets＞Scripts＞Movement」を選び、Moveアイコンをシーンビュー上のSpaceshipBlueにドラッグ＆ドロップして、スクリプトをアタッチします。きちんとアタッチできたら、SpaceshipBlueをクリックして、Inspector欄を確認しましょう。「Rigidbody 2D」と「Move with Arrows」という、2つのコンポーネントが表示されていればOKです。

![スクリーンショット (1143).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ddb15280-84c8-64bc-ed7a-1eca9f23b94a.png)
17：SpaceshipBlueをクリックします。次にInspector欄で、「Rigidbody 2D」の「Friction」を10，「Gravity」を0にします。また、「Move With Arrows」の「Movement」欄にある「Speed」を8にします。最後に「Orientation」の「Orient to direction」にチェックを入れ、「Look Axis」をUpにします。

![スクリーンショット (1144).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d7e424dd-05ea-9f96-f672-89ce7e3c0882.png)
18：再生ボタンをクリックして、上下左右キーでSpaceshipBlueが移動できるか確認しましょう。

![スクリーンショット (1144)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/3e93b6a9-d716-f8c0-b1d5-1d2b98b83f35.png)
19：ここまでできたら、いったん上書きセーブしましょう。

#アステロイドの作成
![スクリーンショット (1147).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/029f3632-a410-f8c1-8c3b-9605e4daabfd.png)
20：続いてSpaceshipBlueに当たり判定をつけます。まず、SpaceshipBlueを選択し、Inspector欄から「Add Command」をクリックして、「Polygon Collider 2D」と入力します。その後、表示されるコンポーネントをクリックします。実際は入力途中で表示されるので、その段階でクリックしても大丈夫です。

![スクリーンショット (1148).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f387c558-39c8-f1bb-a0da-4768c37f21dd.png)
21：SpaceShipBlueのInspector欄に、新しく「Plygon Collider 2D」が表示され、オブジェクト全体に緑の線がつきました。これが自機の当たり判定になります。

![スクリーンショット (1151).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/03c62900-705e-dc85-387b-230a41355217.png)
22：続いて障害物となるアステロイドを作りましょう。まずプロジェクトエリアのツリー「Assets」→「Images」→「Asteroids」から「Asteroid2」をHierarchyにドラッグ＆ドロップします。するとAsteroid2がシーンビュー上に表示されます。

![スクリーンショット (1152).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9370c2e6-2830-24c8-b98b-54eca4b00729.png)
23：Asteroid2のInspector欄から「Add Command」をクリックし、「Rigidbody 2D」と入力して、表示されるコンポーネントをクリックします

![スクリーンショット (1153).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/31a6070f-a76f-604f-2c34-0fe4efa5893a.png)
24：同じくInspector欄から「Add Command」をクリックし、「Polygon Collider 2D」と入力して、表示されるコンポーネントをクリックします。これでSpaceShipBlueと同じく、Asteroid2にも当たり判定がつきました。

![スクリーンショット (1155).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f62a4c06-ea8d-6101-4134-b44abd3bda9e.png)
25：Asteroid2のInspector欄のRigidbody 2D欄で「Mass」を10、「Gravity」を0にします。

![スクリーンショット (1168).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/adb29c77-1076-7577-5550-5ff1a93c0d1a.png)
26：Asteroid2＞Inspector＞Transform＞ScaleでXの値を0.8、Yの値を0.8にします。

![スクリーンショット (1169).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/5d77eb51-695a-7264-87df-c74a8f9366af.png)
27：再生ボタンをクリックして、宇宙船で隕石を押して動かせるか確認しましょう。

![スクリーンショット (1169)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/119e64ab-667c-fc7c-2cec-2a38ac14c0e6.png)
28：例によってここまでできたら、いったん上書きセーブしましょう。

#隕石のPrefab化

![スクリーンショット (1171).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/6dd76b11-754f-0166-00bd-9af6c4b5bf5f.png)
29：プロジェクトエリアのツリーからAssets＞Scripts＞Attributeと進み、「ModifyHealthAttribute」をAsteroid2にドラッグ＆ドロップします。その後、Asteroid2をクリックして、きちんと「Modify Health Attribute」コンポーネントがアタッチされているか確認しましょう。

![スクリーンショット (1172).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/866b710d-0728-2a66-c0b5-c571ecf56e08.png)
30：同じようにプロジェクトエリアのツリーからAssets＞Scripts＞Attributesと進み、「HealthSystemAttribute」スクリプトを選択して、シーンビューのSpaceshipBlueにドラッグ＆ドロップします。きちんとアタッチされていたら、SpaceShipBlueのInspector欄に「Health System」コンポーネントが表示されています。

![スクリーンショット (1173).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/933dccd1-a447-e356-b401-95e3c93e7958.png)
31：プロジェクトエリアのツリーで「Spaceship_Tutorial」を選びます。次にHierarchyで「Asteroid2」を選択し、プロジェクトエリアにドラッグ＆ドロップして、Prefabを作ります。ドラッグ＆ドロップしたら、HierarchyのAsteroid2の色が黒から青に変わるのを確認してください。これがオブジェクトがPrefabsになったというサインです。

![スクリーンショット (1175).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/3548752c-2b08-4094-48df-63b725313854.png)
32：今度は反対にプロジェクトエリアから「Asteroid2」Prefabを選択してHierarchyにドラッグ＆ドロップします。これを4回繰り返します。その後、シーンビュー上でPrefabの場所を調整します。すべての小惑星が一画面（白い枠線）内に収まるようにしてください（このゲームでは画面はスクロールしません）。

![スクリーンショット (1175).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8e7ba379-ed9d-23b1-675c-4c6d6051a342.png)
33：プロジェクトエリアのツリーからAssets＞Prefabsと進み、「UserInterfaces」をHierarchyにドラッグ＆ドロップします。

![スクリーンショット (1176).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/8914e21c-b855-f524-5b96-79cb3db3ed14.png)
34：ゲームを再生し、UIが表示されているか確認します。

![スクリーンショット (1177).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/f48b18b1-2f7e-c842-d31e-d7e80e175988.png)
35：Spaceshipを操作し、小惑星にぶつかるとHealthが減ることと、Healthが0になるとGame overが表示されることを確認します。

![スクリーンショット (1169)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/133d4594-d737-5337-5c20-5852d0b2c312.png)
36：ここでまたまた上書きセーブしましょう。

#スコアアイテムの作成
![スクリーンショット (1250).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/35ab58dc-2454-8ac6-8eae-b17921280c67.png)
37:プロジェクトエリアのツリーからAssets＞Images＞GameElementsと進み、StarをHierarchyにドラッグ＆ドロップします。

![スクリーンショット (1251).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/56632712-c822-c2e9-355f-84494fe3f468.png)
38：StarのInspectorでAdd Componentメニューから「Polygon Collider 2D」を絞り込み検索し、選択します。これにより、StarのInspectorにPolygon Collider 2Dコンポーネントが追加されます。

![スクリーンショット (1253).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2d580aaa-e285-86f6-f8dc-cf5693591762.png)
39：プロジェクトエリアのツリーからAssets＞Scripts＞Attributeと進み、「Collectable」をStarにドラッグ＆ドロップします。きちんとアタッチされていたら、StarのInspector欄に「Collectable」コンポーネントが表示されます。その後、Poligon Collider 2DのIs Trigerにチェックを入れます。これを忘れるとStarを集めることが出来ないので注意しましょう。

![スクリーンショット (1181).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/382a7f34-651e-fe9c-d056-004e19d41a8a.png)
40：プロジェクトエリアのツリーからAssets＞Spaceship_Tutorialと進み、HierarchyのStarをドラッグ＆ドロップします。これによってStarがPrefabsになります。

![スクリーンショット (1182).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/62ef1790-ec4c-4004-285c-9039b60f0351.png)
41：それではAsteroid2と同じように、StarのPrefabsをHierarchyに4回ドラッグ＆ドロップしましょう。

![スクリーンショット (1183).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/eed56fcc-51c3-7fb3-bcff-14aeb28e20ff.png)
42：その後、シーンビュー上でStarのPrafabの場所を調整します。

![スクリーンショット (1184).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/e3fcb4b8-363d-8016-93ba-0b7ef6cefa83.png)
43：HierarchyでUserinterfaceをクリックし、Inspector＞UI Script(Sript)のScore to Winの値を確認します。デフォルトではシーンビュー上に配置されているStarの個数と同じ「5」になっていることに注目してください。

![スクリーンショット (1187).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/16b75ad5-2d6b-d633-7d91-c24eb9e93a1f.png)
44：それでは再生ボタンをクリックして、ゲームが問題なく動作することを確認してください。

![スクリーンショット (1188).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/484d8ca0-6809-85fe-765d-e643ebf3be1c.png)
45：SpaceShipBlueがStarに接触すると、Starが消えて画面上のスコアが1加算されます。

![スクリーンショット (1189).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/30258f31-375f-6b48-b357-6a2e22438724.png)
46：小惑星を避けながら、すべてのStarを集めると、「Player 1 wins!」と表示されます。再生ボタンをクリックしてゲームを終了してください。

![スクリーンショット (1189)-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/e48eeadf-dc7d-16de-5178-72f92cb1acf1.png)
47：おつかれさまでした。最後に忘れずに上書きセーブしましょう。

##Prefabとは何か？
![hanko_stamp_illust_3608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/191abc72-67ed-bdce-c0ca-dae211cb973e.png)
Prefabsは判子のようなものだと思ってください。判子をペタペタ押すと同じ印章が簡単に押せるように、オブジェクトをPrefabsにすると、同じ属性を持つオブジェクトを大量に作成できます。敵キャラクターやアイテムなどを作るのに便利です。この時、複製されたオブジェクトのことをInstanceと呼びます。また、元のPrefabsを変更すると、すべてのInstanceをまとめて変更できます。

![スクリーンショット (1190).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/55583ac9-70e4-a157-6f7c-a4835cd28faf.png)
例として、ここではStarのPrefabsを修正してみましょう。まずプロジェクトエリアにあるStarのPrefabsを選択し、InspectorでOpen Prefabsをクリックします。

![スクリーンショット (1193).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/32775268-923b-0075-faea-bd7e51f8d91b.png)
StarのPrefabsの中身が展開されるので、ColectableのPoints Wortsのパラメータを「5」に修正してみてください。この値を修正するとStarをゲットした時に得られるスコアの数が変わります。修正後、Hierarchyの「＜」マークをクリックすると、修正が反映されて元に戻ることができます。

![スクリーンショット (1194).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/746f5a35-44d3-370f-4b36-0d4954048389.png)
Unityエディタ上でシーンビュー上のStarをクリックし、InspectorのCollectableでPoints Wortsの値が「5」になっていることを確認しましょう。

![スクリーンショット (1195).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/4862baec-3abc-0a28-5227-430c91793a15.png)
そのまま再生すると、Starを1つとるだけでクリアさせられます。確認後は再びPrefabsを開いて、パラメータを「1」に戻しておきましょう。

![スクリーンショット (1196).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/a943917e-b48b-f480-cc3d-3636d2411f5a.png)
注意：Hierarchyやシーンビュー上で個々のインスタンスを選択し、パラメータを修正しても、他のインスタンスには反映されないので注意が必要です。