Unity5でUnityちゃんの簡単な3Dゲームを作る mac編

## Unity5でUnityちゃんの簡単な3Dゲームを作る Mac編

　今回は初心者が作った簡単な3Dゲームの作り方を紹介します
Unity初学者向けの記事になりますが、Unityをすでにダウンロードした方を対象とします。

　まず今回のゲームに必要なのは

- プレイヤー（Unityちゃんを使用します）
- プレイヤーを乗せるステージ（3Dオブジェクト）
- 地面（Terrain）
- 3Dオブジェクト（四角いCubeと丸いSphereの２つ）
- 超簡単なUI

そして用意するスクリプトは4つ

- Player(プレイヤーを動かすスクリプト)
- ItemController（3DオブジェクトのCubeとSphereをコントロールします）
- ItemGenerator（CubeとSphereを自動で生成します）
- GameDirector（UIを更新します）

　では実際に作ろうと思います。
まずはNewProjectからTemplateは3Dを選びます
![スクリーンショット 2018-12-18 午後1.51.51.png](https://qiita-image-store.s3.amazonaws.com/0/179761/6cfc4422-5f20-89a9-6003-e6a1dae2fc28.png)
上の画面になったら ・Scene　・Game　・AssetStore ・Animatorのうちの一番左、Sceneをクリックしてください

　最初に作るオブジェクトは地面です
左のHierarchyにあるCreateの矢印から3Dオブジェクトにカーソルを合わせ、下から4番目のTerrainをクリックします。画面には地面が追加されましたね。
![スクリーンショット 2018-12-18 午後1.54.41.png](https://qiita-image-store.s3.amazonaws.com/0/179761/098d1e40-1152-724b-dd13-6e27d78f47e8.png)


　そのまま流れでStageを作りましょう。
同じくHierarchyにあるCreateの矢印から3Dオブジェクトにカーソルを合わせ、一番上のCubeをクリック。今度は画面には四角いオブジェクトが追加されました。
![スクリーンショット 2018-12-18 午後2.00.12.png](https://qiita-image-store.s3.amazonaws.com/0/179761/3848dcf0-2438-7075-6dae-57c8c8662669.png)

　ここで一度オブジェクトのサイズや位置を調整しましょう。
左のHierarchyからTerrainを選択、画面の右に　Inspectorが表示されます
ここにあるTransformのPositionを　X -30 Y 0 Z -30に設定してください
![スクリーンショット 2018-12-18 午後2.05.16.png](https://qiita-image-store.s3.amazonaws.com/0/179761/1993d5f0-7644-ef4c-b3c5-4d82623ffc89.png)

　次にHierarchyからCubeを選択、さらにもう一度クリックして名前をStageに変えてあげましょう
そしてこのStageもTerrainと同じくサイズを調整します
同じくHierarchyからStageを選択、画面の右に　Inspectorが表示されるので
ここにあるTransformのScaleを　X 10,Y 10,Z 10に設定してください
![スクリーンショット 2018-12-18 午後2.11.26.png](https://qiita-image-store.s3.amazonaws.com/0/179761/19cf3169-ebb1-6e89-f0ce-886e62501fae.png)

　次にゲームの中で使うカメラも調整します
同じく左のHierarchyからMainCameraを選択、画面の右に　Inspectorから
ここにあるTransformのPositionを　X -18 Y 15 Z -18に
Rotationを X 20 Y 45 Z 0、に設定
Transformの下にあるCameraの上から5番目、Field of Viewの値を20にしてください
![スクリーンショット 2018-12-18 午後2.24.19.png](https://qiita-image-store.s3.amazonaws.com/0/179761/3673a7ee-8d1e-a78d-cac9-db67b6e53b0f.png)

　画面上のSceneタグからGameタグに切り替えて見てください
これでゲーム中のカメラアングルが決まりました
![スクリーンショット 2018-12-18 午後2.27.13.png](https://qiita-image-store.s3.amazonaws.com/0/179761/6d93a839-32d1-161c-d1be-0c511cb28759.png)

　次はUnityちゃんを登場させましょう。
今回は下記のサイトを参考にしました。説明は省かせてもらいます。
https://unity-shoshinsha.biz/archives/189
このサイトに習ってUnityちゃんを登場させたら
HierarchyからUnityChanを選択、画面の右の　Inspectorから
ここにあるTransformのPositionを　X 0 Y 5 Z 0に設定します

　現状、地面TerrainとStageが見分けつかないのでTerrainの色を変えましょう
画面左下のプロジェクトシーンからAssets > UnityChan > Stage > Texturesとフォルドを進み
4つのTexturesの中から好きなのを１つ選びSceneの画面にあるTerrainにドラッグ&ドロップします
![スクリーンショット 2018-12-18 午後2.45.31.png](https://qiita-image-store.s3.amazonaws.com/0/179761/df812657-9b59-df2a-0770-5faf52794f68.png)
簡単に色を変えることができましたね。とても見やすくなったと思います

　それでは3Dオブジェクトを作っていきましょう
まずはHierarchyのcreateから3D　ObjectのCubeを一つ作ります
今度は同じくHierarchyのcreateから3D　ObjectのSphereを一つ作ります
次はRigidbodyを今作った２つのオブジェクトにつけてみましょう
まずはHierarchyからCubeを選択します。そして右のInspectorの一番下にあるAdd Componentをクリック
その中から上から12番目のPhysicsをクリックし、上から11番目のRigidboyをクリックします
![スクリーンショット 2018-12-19 午前8.50.25.png](https://qiita-image-store.s3.amazonaws.com/0/179761/d6b28013-204a-cd5d-8da1-f54589df6c36.png)
するとInspectorにRigidbodyが追加されますね
同じ方法でもう一つのオブジェクトSphereにRigidbodyを追加しましょう
Rigidbodyはサイズなどの調整ができますが、今回はデフォルトのまま使用します
それではCubeとSphereの位置を調整します
今回はInspectorのpositionから調整はしません。
まずは　HierarchyからCubeを選択するとScene画面でCubeにXYZ方向の矢印が表示されます
![スクリーンショット 2018-12-19 午前9.00.07.png](https://qiita-image-store.s3.amazonaws.com/0/179761/4d73c9dd-7c11-f869-338e-6f4a116c1070.png)
今回はStageより少し浮いた場所に配置します。この３つに別れたXYZの矢印の中から移動したい方向Yの方を向いたグリーンの矢印を選択し、上方向にドラッグしましょう
すると選択した矢印の方向にCubeは移動します
同じ方法でもう一つのオブジェクトSphereもStageの上に配置しましょう
先ほどはStageの中に配置されていたオブジェクトがStageの上に配置され見やすくなりましたね

　次は画面上のタスクバーからFile > Save Scene as をクリックしてSceneを保存します。名前はGameSceneにしましょう。
![スクリーンショット 2018-12-19 午前9.15.21.png](https://qiita-image-store.s3.amazonaws.com/0/179761/114650e3-9480-6b8e-3c6b-4ee3d311af21.png)

　ではゲームを動かすスクリプトを準備しましょう
左下のProjectにあるCreateからC# Scriptをクリック
Assets欄にスクリプトが表示されるのでそのままスクリプト名を変更します
Script名はItemControllerにしましょう
![スクリーンショット 2018-12-19 午前9.18.39.png](https://qiita-image-store.s3.amazonaws.com/0/179761/401450ca-56d0-1be9-e348-7c4d83e4964e.png)
ここで注意していただきたいのは、保存する前に名前を変更してほしいことです
まずAssets欄にスクリプトが表示された時点でスクリプト名が青色がかっていて変更可能な状態になっていました。
この時点でスクリプト名を変更しないと、スクリプト名とスクリプト内のクラス名が一致しないことになります。
スクリプトを作成の際には気をつけていただきたいと思います

　ではスクリプトを開いてみましょう
ItemControllerをダブルクリックし、以下のスクリプトを入力します

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemController : MonoBehaviour {

    GameObject director;

    void Start()
    {
        this.director = GameObject.Find("GameDirector");
    }

    public void Update() {
        if (transform.position.y < 1.0f) {
            this.director.GetComponent<GameDirector>().Drop();
            Destroy(gameObject);
        }
	}
}
```

入力したら保存します

　では次にスクリプトをオブジェクトにアタッチしましょう。
Assetsにある先ほど作ったスクリプトをHierarchyにあるCubeへドラッグ&ドロップします
ここでの注意点はHierarchyにあるCubeへスクリプトをドラッグすると、Cubeの文字が青色がかるまでドラッグしないといけません。青色がかっている状態でドラッグ&ドロップすることでオブジェクトにアタッチすることになるのです
それではオブジェクトへのアタッチができたらCubeのInspectorを確認します
無事アタッチができたら一番下にItemControllerのスクリプトが追加されます
![スクリーンショット 2018-12-19 午前9.58.09.png](https://qiita-image-store.s3.amazonaws.com/0/179761/ab62df3d-9444-9653-2c16-839d579f6898.png)
それでは同じ方法でもう一つのオブジェクトSphereにも同じItemControllerのスクリプトをアタッチしましょう

　次に作るのは先ほど作った２つのオブジェクトを自動で生成するItemGeneratorのスクリプトです
まず左下のProjectにあるCreateからC# Scriptをクリック
Assets欄にスクリプトが表示されるのでそのままスクリプト名を変更します
Script名はItemGeneratorにします
ではスクリプトを開いてみましょう
ItemGeneratorをダブルクリックし、以下のスクリプトを入力します

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemGenerator : MonoBehaviour {

    public GameObject SpherePrefab;
    public GameObject CubePrefab;
    float span = 5.0f;
    float delta = 0;
    int ratio = 2;

	void Update () {
        this.delta += Time.deltaTime;
        if(this.delta > this.span) {
            this.delta = 0;
            GameObject item;
            int dice = Random.Range(1, 11);
            if(dice <= this.ratio) {
                item = Instantiate(CubePrefab) as GameObject;
            } else {
                item = Instantiate(SpherePrefab) as GameObject;
            }
            float x = Random.Range(-5, 6);
            float z = Random.Range(-5, 6);
            item.transform.position = new Vector3(x, 6, z);

        }
	}
}
```

入力したら保存します

　スクリプトができたら次に実際にオブジェクトを自動生成する工場を作ります。
空のオブジェクトを作り、そのオブジェクトにItemGeneratorスクリプトをアタッチします
まず左上のHierarchyにあるCreateから　Create　EmptyをクリックするとHierarchyにGameObjectというオブジェクトができあがります
GameObjectの名前をItemGeneratorに変更しましょう
この先ほど作った何も入っていない空のオブジェクトItemGeneratorにItemGeneratorスクリプトをアタッチします
AssetsにあるItemGeneratorスクリプトをドラッグ&ドロップでHierarchyにあるItemGeneratorにアタッチしましょう
![スクリーンショット 2018-12-19 午前10.25.32.png](https://qiita-image-store.s3.amazonaws.com/0/179761/99a93671-d61b-7a58-ac00-a18b7d7047ab.png)
アタッチすると上の画像のようにItemGengeratorのInspectorにスクリプトがアタッチされます

　それでは次に自動生成される3Dオブジェクト、CubeとSphereを自動生成するために空のオブジェクトItemGeneratorに渡す準備をしましょう
まずはHierarchyからCubeを選択し、名前をCubeからCubePrefabに変更しましょう
![スクリーンショット 2018-12-19 午前10.39.00.png](https://qiita-image-store.s3.amazonaws.com/0/179761/519fafea-7521-6170-7d7d-fe21b39238de.png)
同じ方法でHierarchyからSphereを選択し、名前をSphereからSpherePrefabに変更します

　次に先ほど名前を変更したHierarchyにあるCubePrefabを下のAssetsにドラッグ&ドロップします
![スクリーンショット 2018-12-19 午前10.43.07.png](https://qiita-image-store.s3.amazonaws.com/0/179761/74de6932-29c9-d383-00f1-435c959ae6a7.png)
同じ方法でSpherePrefabも下のAssetsにドラッグ&ドロップしましょう

　ドラッグ&ドロップが完了したらHierarchyにあるCubePrefabを削除しましょう
CubePrefabを選択し、右クリック、Delateをクリックします
![スクリーンショット 2018-12-19 午前10.46.22.png](https://qiita-image-store.s3.amazonaws.com/0/179761/c9f18bcf-3946-7a3c-6c49-25f413523e82.png)
同じ方法でSpherePrefabを削除します。
SpherePrefabを選択し、右クリック、Delateをクリック
![スクリーンショット 2018-12-19 午前10.49.37.png](https://qiita-image-store.s3.amazonaws.com/0/179761/671c64dd-2ea0-9eca-5015-f5aff9091c45.png)
左のHierarchyにはCubePrefab、SpherePrefabがなくなり、AssetsだけにCubePrefab、SpherePrefabがある状態になりました。

　これで3Dオブジェクトを自動生成するための空のオブジェクトItemGeneratorに渡す準備ができました
実際に渡してみましょう
左のHierarchyから空のオブジェクトItemGeneratorを選択
右のInspectorからスクリプトのItemGeneratorにあるCubePrefabにNoneと書いてあるボックスが横にあります
ここに下からAssetsのCubePrefabをドラッグ&ドロップしましょう
ドラッグ&ドロップできたら同じ方法で今度はSpherePrefabにもドラッグ&ドロップします
![スクリーンショット 2018-12-19 午前10.54.14.png](https://qiita-image-store.s3.amazonaws.com/0/179761/6c199b66-b5b4-ea90-8d23-c871c180fc36.png)
ここで一度Gameの再生ボタンを押してみましょう▶️
オブジェクトが自動生成されてますね
![スクリーンショット 2018-12-19 午前11.05.02.png](https://qiita-image-store.s3.amazonaws.com/0/179761/68e0c8a6-060c-fae5-b701-b667a826d01c.png)

　次はいよいよ超簡単なUIです
左のHierarchyからCreate、そして下から３番目UIのTextをクリックします
HierarchyにCanvasができます
Canvasをクリックすると、中にTextがありますので名前をTimeに変更しましょう
名前を変更したら右のInspectorから赤い十字のアイコン、アンカーポイントをクリックし右上に変更、
RectTransformのPosの項目 X Y Zをそれぞれ -60 -25 0 にします
次にWidth、Heightをそれぞれ　160 40　にします
下にあるText(Script)のText欄に60.0と入力、Font Sizeは３２に変更
ParagraphにあるAlignmentを縦方向、横方向のそれぞれ２つを中央揃えにします
![スクリーンショット 2018-12-19 午前11.19.08.png](https://qiita-image-store.s3.amazonaws.com/0/179761/14a5c549-7f0f-96c1-f9ef-6df14ccd9388.png)

　同じ方法でもう一つPointのUIも作りましょう
左のHierarchyからCreate、そして下から３番目UIのTextをクリックします
HierarchyにCanvasができます
Canvasをクリックすると、中にTextがありますので名前をPointに変更しましょう
名前を変更したら右のInspectorから赤い十字のアイコン、アンカーポイントをクリックし右上に変更、
RectTransformのPosの項目 X Y Zをそれぞれ -60 -70 0 にします
次にWidth、Heightをそれぞれ　160 40　にします
下にあるText(Script)のText欄に30.0と入力、Font Sizeは３２に変更
ParagraphにあるAlignmentを縦方向、横方向のそれぞれ２つを中央揃えにします
![スクリーンショット 2018-12-19 午前11.19.34.png](https://qiita-image-store.s3.amazonaws.com/0/179761/693a5921-8c23-7bae-7bc1-1bb5a8bf4c6e.png)

　ここで一度Gameの再生ボタンを押してみましょう▶️
背景と被ってせっかく作ったUIが見えづらい場合は色を変更します
Hierarchyから変更したいUIをクリックし、InspectorからParagraphにあるColorをクリック
![スクリーンショット 2018-12-19 午前11.43.49.png](https://qiita-image-store.s3.amazonaws.com/0/179761/e6d4526a-86fa-333b-f636-34d691a36505.png)
このように直感的に色を選べることができます。
背景と被って見えなかったUIが見えるようになりましたか？
それではUIのスクリプトを作りましょう

　まず左下のProjectにあるCreateからC# Scriptをクリック
Assets欄にスクリプトが表示されるのでそのままスクリプト名を変更します
Script名はGameDirectorにします
ではスクリプトを開いてみましょう
GameDirectorをダブルクリックし、以下のスクリプトを入力します　

```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class GameDirector : MonoBehaviour {

    GameObject timerText;
    GameObject pointText;
    float time = 30.0f;
    int point = 0;

    public void Drop() {
        this.point += 100;
    }

	void Start () {
        this.timerText = GameObject.Find("Time");
        this.pointText = GameObject.Find("Point");
	}
	
	void Update () {
        this.time -= Time.deltaTime;
        this.timerText.GetComponent<Text>().text =
            this.time.ToString("F1");
        this.pointText.GetComponent<Text>().text =
                this.point.ToString() + " point";
	}
}
```
入力したら保存します

　最後にGameDirectorをアタッチする空のオブジェクトを作りましょう
HierarchyのCreateからCreate Emptyをクリック、名前をGameDirectorに変更します
AssetsのGameDirectorスクリプトを空のオブジェクトGameDirectorにドラッグ&ドロップでアタッチします
![スクリーンショット 2018-12-19 午前11.52.41.png](https://qiita-image-store.s3.amazonaws.com/0/179761/af2ba162-3c0d-20a4-021d-a78c8693ceaa.png)

　Gameの再生ボタンを押してみましょう▶️
![スクリーンショット 2018-12-19 午前11.56.34.png](https://qiita-image-store.s3.amazonaws.com/0/179761/31a7faed-9cf4-ab5b-8e9d-5b00e6287056.png)

　UnityちゃんがオブジェクトをStageの外に押し出すと100pt加算されます。制限時間が30.0秒です
簡単なゲームですがこれで完成となります。
今後もっと面白くできそうな方は手直しをして遊んでみてください。
長いお時間いただきましてありがとうございました。