30分で作る初めてのUnity

## はじめに

* [ZEALS Advent Calender](https://qiita.com/advent-calendar/2019/zeals) 23日目の記事です。

普段はWeb周りの技術を扱ってばかりなので、
今回は以前から興味があった[Unity](https://unity.com/ja)を触ってみました。

この記事は、

> なんでもいいから一度Unityを使ってプロジェクトを作ってみたい。

という方向けに、プロジェクトの作成からBuildまでの流れを掴んでもらう為に書いたものです。
ですので、数あるUnity機能の中からほんの数個ピックアップして追加したのみにすぎません。
ご了承ください。

## 目次
1. イントール
2. プロジェクトの作成
3. レイアウトの変更
4. オブジェクトの作成
5. オブジェクトに装飾
6. オブジェクトに動きを与える
7. プロジェクトをBuild

## 1. イントール

まずはUnityをダウンロードしましょう。
個人開発であれば無料です。
[→ ダウンロード画面へ](https://store.unity.com/ja#plans-individual)
(*途中のアカウント作成等は割愛させていただきます。)

<img width="1192" alt="スクリーンショット 2019-12-22 16.02.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/95ad1501-5d1a-7298-2735-aa6084d96ae0.png">


## 2. プロジェクトの作成

インストールしたApplicationを開くと以下の画面が現れるので、`New`を選択します。

![スクリーンショット 2019-12-22 16.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/d587f97a-2678-627f-47a2-308d446271d2.png)

`Template` を `3D` にしてプロジェクトを作成します。
![スクリーンショット 2019-12-22 16.18.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/5d7b562f-11b1-071a-b774-8bdfe419ca3d.png)

## 3. レイアウトの変更

こちらがプロジェクトのデフォルト画面です。

<img width="1680" alt="スクリーンショット 2019-12-22 16.22.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/26ddb675-b789-30aa-b89b-26f044725cc9.png">

自分の作業しやすいレイアウトに変更してください。
私は`2by3`にしています。

<img width="546" alt="スクリーンショット 2019-12-22 16.27.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/073a6b10-6850-955f-effc-40ee8b3bbde6.png">

## 4. オブジェクトを作成

ゲームオブジェクト(以下`オブジェクト`)を作成します。
`Hierarchy` → `Create` → `3Dオブジェクト` → `Cube` の順で選択してください。
 
すると画面左の`Scene`に`Cube`が現れます。

<img width="1673" alt="スクリーンショット 2019-12-22 16.31.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/ea8ebcb9-9c6d-c5c9-f7b9-4360c38a7bd1.png">

オブジェクトの形を変えるために画面右上の`Inspector`を下記のように編集します。

<img width="372" alt="スクリーンショット 2019-12-22 16.41.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/3a5a4332-7720-0fb2-e27d-d572115dfd79.png">

オブジェクトの形が変わりました。
<img width="1675" alt="スクリーンショット 2019-12-22 16.42.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/b72a492b-825b-7fcf-dd14-345c32412670.png">

この調子で `Square`も追加してみます。

<img width="1675" alt="スクリーンショット 2019-12-22 16.44.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/d8172d52-5de1-6b0b-5b23-56e433eb507e.png">

## 5. オブジェクトに装飾

`Cube`と`Square`に色を与えましょう

`Project` → `Materials`を選択

<img width="294" alt="スクリーンショット 2019-12-22 16.46.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/81506630-b38c-5509-0f43-eccf650f86d3.png">

画面を見やすくするために 右上設定(三本の棒線)から`One Column Layout`を選択します。

<img width="430" alt="スクリーンショット 2019-12-22 16.47.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/21177a0f-0196-f470-9100-69ef6fc242da.png">

`Material`内のスポイトのようなアイコンから色を選択します。

<img width="621" alt="スクリーンショット 2019-12-22 16.49.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/18d42061-e2ca-410d-4cf6-19dfffcbbce1.png">

この調子でもう１色作成します。

そして、今作成した`Material`は対象のオブジェクトにドラッグ＆ドロップできます。
(`Scene`, `Hierarchy`どちらでも可)

<img width="1648" alt="スクリーンショット 2019-12-22 16.51.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/9806a050-52c8-c374-b8f7-92341a328040.png">

## 6. オブジェクトに動きを加える

次は`Square`に動きをつけられるようにします。

まず、`Square`の`Inspector`から`RigidBody`(オブジェクトに重力を付与)を追加します。

<img width="401" alt="スクリーンショット 2019-12-22 17.09.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/3a546ac5-ed55-e10c-9688-71ea360fde5b.png">


次に、`Add Component`を選択します。
最下部にある`New Scrip`を選択、名前を決めてScriptを作成します。

<img width="459" alt="スクリーンショット 2019-12-22 16.55.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/4a4a50f3-b307-e43d-c5e7-d20d0de312de.png">

<img width="813" alt="スクリーンショット 2019-12-22 16.56.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/a256e696-a855-09a5-87a4-46f4c2497910.png">

作成されたScriptをダブルクリックするとEditorが開くはずです。

<img width="1576" alt="スクリーンショット 2019-12-22 16.58.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/cee1dd2e-e971-2ade-e954-b80194c15d08.png">

以下、カーソルを押した方向に`Square`を動かすようにするScriptです。

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

public class moveScriot : MonoBehaviour
{
    Rigidbody rigidbody;

    // Start is called before the first frame update
    void Start()
    {
        rigidbody = GetComponent<Rigidbody>();
    }

    // Update is called once per frame
    void Update()
    {
        float moveH = Input.GetAxis("Horizontal");
        float moveV = Input.GetAxis("Vertical");
        Vector3 move = new Vector3(moveH, 0, moveV);
        rigidbody.AddForce(move);
    }
}
```

これで`Square`が動くようになったと思います。

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/fb97a033-f6e9-cd09-07d8-35f1fc6a76ad.gif)

画面左下に見えている`Game`が実際にユーザーがゲームを遊ぶときの視点です。
わかりやすくするために、`Main Camera`の`TransForm`を調整してください。

![スクリーンショット 2019-12-22 18.07.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/cc4cf8a3-4e7e-c8a4-6fae-30dbf1547ad7.png)


## 7. プロジェクトをBuildする


最後にこのプロジェクトを`Build`してみましょう。

`File` → `Build Settings`を選択

![スクリーンショット 2019-12-22 18.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/50f01795-f713-4317-7669-b99690078591.png)

こちらでプラットフォームを選択することができます。
今回は`MacOS`のまま進むので`Platform`はそのままで問題ありません。
右上の`Add Open Souce`から現在の`Scenes`を追加して、
最後に`Build`を選択してください。
<img width="620" alt="スクリーンショット 2019-12-22 20.54.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/952777a6-eefe-f6ad-2c45-662e537dd20b.png">


デスクトップに作成したゲームが出現します。

<img width="465" alt="スクリーンショット 2019-12-22 18.14.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236688/cda2bc6b-4d78-e891-1534-2aad7d1b774a.png">


これでいつでも先程のGameを開くことができるようになりました。