【Unity】アングリーサンタを作ろう


最近、本屋に行くとUnityの参考書が圧倒的に増えているのを身にしみて感じております。
そこで今回は、最近なにかと話題な統合開発エンジン**Unity**に軽く触れてみたいと思います。

**全く触れたことのない初心者向けに丁寧に紹介するので、ゲームを作りたいなぁと思っているそこのあなたは必見ですよ！**
私自身、RailsとiOSエンジニアなのでUnityについてあまり詳しくありませんので、ご了承ください。
この記事をきっかけにUnityの面白さを実感していただけたら幸いです。

Unityは、**「物理エンジン」**が簡単に使えることが特徴の一つです。そして、物理エンジンを使ったゲームで有名になったのが「アングリーバード」です。
そして今回は、かの人気有名ゲームアングリーバードみたいな**アングリーサンタ**を作ってみたいと思います。

# 完成イメージ
以下リンク先のようなゲームを作ります
https://gyazo.com/f03ca4290cc664087223c69f81d047bf
![06.png](https://qiita-image-store.s3.amazonaws.com/0/75221/374db857-cae2-177f-5865-1a648adeabfe.png "06.png")


# 機能一覧
アングリーサンタでは以下の機能を実装します。

- マウスでクリックしてサンタを飛ばすことができる
- 建物を壊すことができる
- 敵キャラ（トナカイ）を消すことができる
- スコアを確認できる
- サンタは3回飛ばすことができる

#  Unityとは
 Unityとは、統合開発環境を内蔵し、複数のプラットホームに対応するゲームエンジンです。
簡単に言い直しますと、パソコンや携帯端末など様々な機器の3Dゲームが開発できるソフトです。3Dだけでなく、2Dゲームもつくることができます。
[Unity公式HP](http://japan.unity3d.com/)

<br>

# Unityゲーム開発の環境を整えよう
Unityを使ってゲーム開発をする前に、まずは環境を整えましょう。
WindowsでもMacでも構いませんが、今回はMac版を紹介します。

## Unityをインストールしよう
まずは開発環境となるUnityを自分のパソコンにインストールしましょう。

⚠️ すでに自分のパソコン内にUnityがインストールされている方は以下の作業をスキップしてください。

### ✏️ 下記のリンクからUnityHPを開きUnityをインストールしましょう
[Unityをインストールする](http://unity3d.com/jp/get-unity/update)

<br>

# Unityで新規プロジェクトを作ろう
Unityで新規プロジェクトを作成してみましょう。

### 💡 プロジェクトとは
プロジェクトというのは、Unityで新しいアプリケーションを作成するときに作成されるものです。プロジェクトは、ソースコードのファイルだけでできているわけではなく、CGデータやオーディオファイル、設定ファイルなどアプリケーションに必要なものをまとめて管理するためのものです。

### ✏️ 「AngrySanta」という名前で新規プロジェクトを任意のディレクトリ内に作成しましょう

#### 1. Unityを立ち上げて以下の画面から「New」をクリック

![01.png](https://qiita-image-store.s3.amazonaws.com/0/75221/64ea38fd-1b91-5016-6aec-6696416e501d.png "01.png")

#### 2. 2Dを選択
最初の状態では、「3D」が選択された状態になっているので「2D」をクリック

![02.png](https://qiita-image-store.s3.amazonaws.com/0/75221/2b4b9216-46b7-0cad-32d5-fd48ddac8684.png "02.png")

#### 3. AngrySantaという名前でプロジェクトを作成
Project nameを「AngrySanta」という名前にして、Create projectをクリック

![03.png](https://qiita-image-store.s3.amazonaws.com/0/75221/ef37e17a-2efd-a95b-2f2e-cd52f0cea496.png "03.png")


作成後、以下のような画面が表示されるはずです。

![04.png](https://qiita-image-store.s3.amazonaws.com/0/75221/7f07aa6b-8b65-61a5-e7bf-76dbdb1edaf2.png "04.png")

<br>

# Unityの操作画面
Unityの基本的な操作画面について説明します。

![05.png](https://qiita-image-store.s3.amazonaws.com/0/75221/7c57a180-6253-a646-ea6a-d0c972a41bf1.png "05.png")

#### ①Hierarchyビュー
使われているたくさんの部品を階層的に整理して表示するものです。

#### ②Sceneビュー/Gameビュー
**Sceneビュー**
ゲームの場面を表示し、配置した部品を選択して動かしたりするのに使われます。
**Gameビュー**
実際にゲームをプレイした時の画面を表示します。

#### ③Inspectorビュー
選択した部品の様々な情報を表示し編集するのに使用します。

#### ④Projectビュー/Consoleビュー
**Projectビュー**
ゲームに使用されるファイルをまとめたものです。
**Consoleビュー**
エラーが表示されたり、プログラムが’正常に動いていることを確認するものです。

<br>

# シーンを作ろう

## 新規シーンを作成
### ✏️ メニューバーの「File」から「New Scene」を選択してください(cmd + N)

![07.png](https://qiita-image-store.s3.amazonaws.com/0/75221/e7aebcbc-4180-1755-5e69-46b9ba887365.png "07.png")

## 背景色の変更
### ✏️ HierarchyビューからMain Cameraを選択し、右側のInspectorビューのBackgroundで背景色を変更してください

![08.png](https://qiita-image-store.s3.amazonaws.com/0/75221/9e5d1016-4f59-9700-516e-489c3ff52d75.png "08.png")
![09.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c10013bb-0e8b-9724-1e80-6c4a7fce9709.png "09.png")

いいかんじの夜景の色を選んでください。

## シーンを保存
### ✏️ メニューバーの「File」から「Save Scene」を選択し、「AngrySanta」という名前で保存してください(cmd + S)

![10.png](https://qiita-image-store.s3.amazonaws.com/0/75221/69bcfbb5-4155-bf37-0495-90379d95f194.png "10.png")

![11.png](https://qiita-image-store.s3.amazonaws.com/0/75221/76c317e3-1aee-1c93-be58-b666aa801938.png "11.png")

### ✏️ ProjectビューのAssetsフォルダ以下に「AngrySanta」という名前のシーンができていることを確認してください

![12.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c181cd35-f30d-7d27-fd12-1e211d2dc672.png "12.png")

<br>

# スプライトを配置

## 必要なファイルをインポート
アプリ内で使用する画像を以下のリンクからダウンロードし、Unityにインポートしましょう。
[【ダウンロード】](http://www.mediafire.com/download/ui0k2eeaqc23e9q/assets.zip)

### ✏️ Assets以下にImagesディレクトリを作成してください

Projectビュー上で右クリックで、「Create」から「Folder」を選択

![13.png](https://qiita-image-store.s3.amazonaws.com/0/75221/e3369c41-5090-a63b-61bc-a83e8effd5da.png "13.png")

以下のように、Imagesディレクトリができると思います。

![14.png](https://qiita-image-store.s3.amazonaws.com/0/75221/30729a5e-afd5-c319-c628-bf7eb8587edd.png "14.png")

### ✏️ ダウンロードしたImages以下のファイルをさきほど作成したImagesディレクトリにドラッグ&ドラップで移動してください

![15.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/c9d03650-4d33-c87d-97de-aa634f420103.gif "15.gif")

### ✏️ ダウンロードしたStandard AssetsディレクトリをAssetsディレクトリにドラッグ&ドロップで移動してください

![16.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/fd69eee3-151a-0fa7-6abf-62301e3059a0.gif "16.gif")

## 地面を配置
ゲームの土台となる地面を配置していきます。

### ✏️ snowblockをSceneビューに移動させてください
Imagesディレクトリの**snowblock**をSceneビューにドラッグ&ドロップします。

![17.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/ed6771e1-0901-35dc-4e77-119048a28489.gif "17.gif")

### ✏️ Transformを調整してください
Hierarchyビューからsnowblockを選択し、以下のようにTransformを調整してください。

![18.png](https://qiita-image-store.s3.amazonaws.com/0/75221/7efc4e89-8009-08a7-534d-972891a65c31.png "18.png")

### ✏️ コライダー2Dを追加してください
snowblockを選択した状態で、Add Componentをクリックしてください。

![19.png](https://qiita-image-store.s3.amazonaws.com/0/75221/13aacbb7-dbf9-60d3-bb26-797297890e8b.png "19.png")

Physics 2Dをクリックしてください。

![20.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c1ee5c4a-45ff-edca-8179-56bbb2107cb1.png "20.png")

Box Collider 2Dをクリックしてください。

![21.png](https://qiita-image-store.s3.amazonaws.com/0/75221/8114441a-4318-ff52-5e0a-7b948d6ea636.png "21.png")

以下のようにオブジェクトにコライダーが追加されます。

![22.png](https://qiita-image-store.s3.amazonaws.com/0/75221/3769b24d-ef53-df21-8fc6-8d325853c822.png "22.png")

### 💡 コライダーとは
ゲームオブジェクトに物理的な性質を与えるものです。

## 建物を配置

### ✏️ TreeblockをSceneビューに移動させてください
Imagesディレクトリの**Treeblock**を2つSceneビューにドラッグ&ドロップします。

![23.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/06bdd140-4700-7ff6-3144-78c5becd4565.gif "23.gif")

### ✏️ ブロックのScaleを調整してください

1つ目のブロックを以下のScaleにしてください。

![24.png](https://qiita-image-store.s3.amazonaws.com/0/75221/61eb9759-ffd3-010e-4c5f-4104841a8d72.png "24.png")

2つ目のブロックを以下のScaleにしてください。

![25.png](https://qiita-image-store.s3.amazonaws.com/0/75221/b710f315-21f8-6462-e79f-aee20b97bed6.png "25.png")

### ✏️ blockタグを追加してください
InspectorビューのTagをクリックしてください。

![26.png](https://qiita-image-store.s3.amazonaws.com/0/75221/66196e79-4ed8-5f05-b974-06a828b5602b.png "26.png")

Add Tag...をクリックしてください。

![27.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c9774795-3cb5-6e3d-835d-1020155aac9a.png "27.png")

プラスマークをクリックしてください。

![28.png](https://qiita-image-store.s3.amazonaws.com/0/75221/3a4a0c58-5f5f-8fd5-e44c-f1d888d53906.png "28.png")

**block**という名前のタグを追加してください。

![29.png](https://qiita-image-store.s3.amazonaws.com/0/75221/1153453d-23ee-64ef-207d-cd2f620558ed.png "29.png")

### ✏️ 2つのブロックにblockタグを設定してください

![30.png](https://qiita-image-store.s3.amazonaws.com/0/75221/713c046e-9078-b364-5f81-e7e4e62fab20.png "30.png")

### ✏️ 2つのTreeblockにコライダー2Dを追加してください

![31.png](https://qiita-image-store.s3.amazonaws.com/0/75221/d3d1f5b3-d1fb-8b28-e7b4-ba642ab3824f.png "31.png")

### ✏️ 2つのTreeblockにリジッドボディを追加してください

2つのTreeblockを選択した状態で、Add Componentをクリックしてください。

![32.png](https://qiita-image-store.s3.amazonaws.com/0/75221/a352cd33-dfc2-255a-b25a-e37a55e9509a.png "32.png")

Physics 2Dをクリックしてください。

![20.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c1ee5c4a-45ff-edca-8179-56bbb2107cb1.png "20.png")

Rigidbody 2Dをクリックしてください。

![33.png](https://qiita-image-store.s3.amazonaws.com/0/75221/ec00d3b7-47fd-9cb9-a9b4-caa5a6c158ae.png "33.png")

以下のようにオブジェクトにリジッドボディが追加されます。

![34.png](https://qiita-image-store.s3.amazonaws.com/0/75221/ba85800a-afea-4834-96b5-f1854e083a9f.png "34.png")

### 💡 リジッドボディとは
衝突判定をしたい時などに使用します。

### ✏️ リジッドボディの設定をしてください
Treeblockのリジッドボディを以下のように設定してください。

![35.png](https://qiita-image-store.s3.amazonaws.com/0/75221/315a2cb9-a254-6d10-716b-d0c98d06d01c.png "35.png")

### ✏️  好きなように建物を建ててください
Hierarchyビューの部品の上で右クリックをして、Duplicateを選択すれば部品のコピーをすることができます。

![36.png](https://qiita-image-store.s3.amazonaws.com/0/75221/6e5356ae-50a5-9669-224d-d8a961d3240f.png "36.png")

以下のように、崩れるか崩れないかの建物を建てましょう。

![37.png](https://qiita-image-store.s3.amazonaws.com/0/75221/19bf83dc-5bf0-16cd-269d-e66f4472e7db.png "37.png")

## 敵キャラ（トナカイ）を配置
### ✏️ tonakaiを3つSceneビューに移動させてください
Imagesディレクトリの**tonakai**をSceneビューにドラッグ&ドロップします。

![38.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/8c669fc7-2ab7-a51c-88b8-6524f6df1a18.gif "38.gif")

### ✏️ tonakaiのScaleを調整してください
tonakai3つを以下のScaleに調整してください。

![39.png](https://qiita-image-store.s3.amazonaws.com/0/75221/d9bc9a5a-4820-8ee6-da9e-c68bd489c26b.png "39.png")

### ✏️ tonakaiタグを追加してください

![40.png](https://qiita-image-store.s3.amazonaws.com/0/75221/e8a01dfd-27c9-fb5c-16e0-cd0a7809d739.png "40.png")

### ✏️ tonakai3つにtonakaiタグを設定してください

![41.png](https://qiita-image-store.s3.amazonaws.com/0/75221/d989a490-680d-038c-e1c6-9c8150357e2b.png "41.png")

### ✏️ tonakai3つにコライダー2Dを追加してください

![42.png](https://qiita-image-store.s3.amazonaws.com/0/75221/30b529f3-4e05-a526-300e-8902fe8cb5af.png "42.png")

### ✏️ Circle Collider 2Dを設定してください
以下のようにCircle Collider 2Dを設定してください。

![43.png](https://qiita-image-store.s3.amazonaws.com/0/75221/04c738d9-d3df-1d90-243b-ef29aef1eeba.png "43.png")

### ✏️ tonakai3つにリジッドボディを追加してください

### ✏️ リジッドボディの設定をしてください
tonakai3つのリジッドボディを以下のように設定してください。

![35.png](https://qiita-image-store.s3.amazonaws.com/0/75221/315a2cb9-a254-6d10-716b-d0c98d06d01c.png "35.png")

## サンタを配置
### ✏️ santaをSceneビューに移動させてください
Imagesディレクトリの**santa**をSceneビューにドラッグ&ドロップします。

![44.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/d85a8fac-f85e-07be-9e33-7ee9b3504cc1.gif "44.gif")

### ✏️ santaのScaleを調整してください
santaを以下のScaleに調整してください。

![45.png](https://qiita-image-store.s3.amazonaws.com/0/75221/49d50f12-b298-0a43-8ac6-1cee5f86b904.png "45.png")

### ✏️ santaにコライダー2Dを追加してください

![42.png](https://qiita-image-store.s3.amazonaws.com/0/75221/30b529f3-4e05-a526-300e-8902fe8cb5af.png "42.png")

### ✏️ Circle Collider 2Dを設定してください
以下のようにCircle Collider 2Dを設定してください。

![46.png](https://qiita-image-store.s3.amazonaws.com/0/75221/48a998ed-3405-0531-c8a5-20f24afacd40.png "46.png")

### ✏️ santaにリジッドボディを追加してください

### ✏️ リジッドボディの設定をしてください
santaのリジッドボディを以下のように設定してください。

![35.png](https://qiita-image-store.s3.amazonaws.com/0/75221/315a2cb9-a254-6d10-716b-d0c98d06d01c.png "35.png")

## スコアを表示するGUI Textを配置
### ✏️ スコアを表示するためのGUI Textを配置してください
メニューバーの「GameObject」から「Create Empty」を選択してください。

![47.png](https://qiita-image-store.s3.amazonaws.com/0/75221/6cb46f71-302e-e0ce-6dac-1a7a76e4e85d.png "47.png")

GameObjectを選択して、InspectorビューからAdd Componentをクリックしてください。

![48.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c818ab37-a84f-f6a6-cc33-f347377df6c9.png "48.png")

「gui」と検索して、GUI Textをクリックしてください。

![49.png](https://qiita-image-store.s3.amazonaws.com/0/75221/41c6f946-f26d-f279-c496-1e05e276ca57.png "49.png")

以下のように設定してください。

![50.png](https://qiita-image-store.s3.amazonaws.com/0/75221/c4a3c6c8-ffd5-87e1-6de1-177159239a82.png "50.png")

## メッセージを表示するGUI Textを配置
### ✏️ メッセージを表示するためのGUI Textを配置してください

以下のように設定してください。

![51.png](https://qiita-image-store.s3.amazonaws.com/0/75221/79a9c14c-791a-e590-bf40-2fd134f923ff.png "51.png")

<br>

# スクリプトを用意
## ディレクトリ作成

### ✏️ Scriptsディレクトリを作成してください

![52.png](https://qiita-image-store.s3.amazonaws.com/0/75221/37ddb906-b3c6-d1e9-259f-bcd856b889f8.png "52.png")

##  スクリプトを作成
### ✏️ santa用のスクリプトを作成してください
Scriptsディレクトリ内で右クリックをし、「santa」というファイル名でC# Scriptを作成してください。

![53.png](https://qiita-image-store.s3.amazonaws.com/0/75221/7afcdfc4-94f7-97df-e786-ca212ae18c10.png "53.png")

### ✏️ tonakai用のスクリプトを作成してください
Scriptsディレクトリ内で右クリックをし、「tonakai」というファイル名でC# Scriptを作成してください。

以下のようになっていれば大丈夫です。

![54.png](https://qiita-image-store.s3.amazonaws.com/0/75221/9b6332c7-d956-e7b1-7758-3071052aa892.png "54.png")

### ✏️ santaスクリプトを開いてください
ダブルクリックをするとスクリプトファイルを開くことができます。

MonoDevelopが開き、以下のような画面になると思います。

![55.png](https://qiita-image-store.s3.amazonaws.com/0/75221/ac7fa850-164b-65f0-c37c-4f9cdd397f4d.png "55.png")

### ✏️ santaスクリプトを以下のように編集してください

```C#:santa.cs
using UnityEngine;
using System.Collections;

public class santa : MonoBehaviour {

	float d = 1f;
	Vector2 defaultPosition;
	bool clickFlag = false;
	bool checkFlag = false;
	static int santas = 3;
	public static bool gameFlag = true;
	public static float score = 0f;

	// Use this for initialization
	void Start () {
		d = 100.0f * Time.deltaTime;
		defaultPosition = new Vector2 (transform.position.x, transform.position.y);
	}
	
	// Update is called once per frame
	void Update () {
		if (!santa.gameFlag) {
			return;
		}
		float x = Input.mousePosition.x;
		float y = Input.mousePosition.y;
		Vector2 v = Camera.main.WorldToScreenPoint (transform.position);
		float dx = x - v.x;
		float dy = y - v.y;
		if (dx > 150) {
			dx = 150f;
		}
		if (dy > 150) {
			dy = 150f;
		}

		if (!clickFlag) {
			if (Input.GetMouseButtonDown (0)) {
				santa.santas--;
				GetComponent<Rigidbody2D> ().AddForce (new Vector2 (d * dx, d * dy));
				clickFlag = true;
			}
		} else {
			if (Input.GetMouseButtonUp (0)) {
				checkFlag = true;
			}
		}
		showScore ();
	}

	void FixedUpdate() {
		if (checkFlag) {
			checkTonakai ();
			checkSanta ();
		}
	}

	static void showScore() {
		GameObject.Find ("score").GetComponent<GUIText> ().text = "スコア\n" + (int)santa.score + "\nSantas\n" + santa.santas;
	}

	void checkTonakai() {
		GameObject[] tonakais = GameObject.FindGameObjectsWithTag ("tonakai");
		if (tonakais.Length == 0) {
			santa.gameFlag = false;
			santa.score += santa.santas * 100;
			GameObject.Find ("message").GetComponent<GUIText> ().text = "クリア";
		}
	}

	void checkSanta() {
		Vector2 v = GetComponent<Rigidbody2D> ().velocity;
		if (v.x * v.x + v.y * v.y == 0) {
			if (santas > 0) {
				transform.position = defaultPosition;
				Quaternion q = transform.rotation;
				q.z = 0f;
				transform.rotation = q;
				clickFlag = false;
				checkFlag = false;
			} else {
				santa.gameFlag = false;
				GameObject.Find ("message").GetComponent<GUIText> ().text = "ゲームオーバー";
			}
		}
	}
}
```

### ✏️ tonakaiスクリプトを以下のように編集してください

```C#:tonakai.cs
using UnityEngine;
using System.Collections;

public class tonakai : MonoBehaviour {

	float press = 0;

	// Use this for initialization
	void Start () {

	}
	
	// Update is called once per frame
	void Update () {
		if (!santa.gameFlag) {
			return;
		}
		if (press > 50.0) {
			santa.score += 100;
			GameObject.Destroy (gameObject);
		}
	}

	void OnCollisionStay2D(Collision2D collision) {
		if (!santa.gameFlag) {
			return;
		}
		if (collision.gameObject.tag == "block") {
			Vector2 v = collision.rigidbody.velocity - GetComponent<Rigidbody2D> ().velocity;
			float p = Mathf.Sqrt (v.x * v.x + v.y * v.y);
			press += p * p;
			santa.score += p;
		}
	}

}
```
⚠️ ソースコードの内容は割愛します。

## キャラクターとスクリプトを紐づける
### ✏️ santaにsantaスクリプトを紐づけてください
santaを選択して、Add Componentをクリックし、Scriptsを選択してください。

![56.png](https://qiita-image-store.s3.amazonaws.com/0/75221/ec26f43f-d395-4cc6-1788-09ec86d083ad.png "56.png")

santaスクリプトを選択してください。

![57.png](https://qiita-image-store.s3.amazonaws.com/0/75221/7591b63f-9aeb-27c0-2457-27c4c42780de.png "57.png")

これで、santaオブジェクトとsantaスクリプトが紐付きました。

### ✏️ tonakaiにtonakaiスクリプトを紐付けてください
 tonakaiスクリプトを選択してください。
 
 ![58.png](https://qiita-image-store.s3.amazonaws.com/0/75221/a96a9d4b-627b-ef92-1fe7-d4f3f6ac286a.png "58.png")

これで、tonakaiオブジェクトとtonakaiスクリプトが紐付きました。

<br>

# ゲームを再生

##  動作チェック
### ✏️ 再生マークを押してゲームを開始してください

![59.png](https://qiita-image-store.s3.amazonaws.com/0/75221/a079cfcd-e209-9176-0f25-0658478c5ae1.png "59.png")

どうでしたか？
うまく動かなかったら、Tag名とオブジェクト名が正しい名前になっていることを確認してください。

## ルール
サンタのストックは3体
サンタが3体なくなる前に、トナカイを全部消せればクリアです。消せなければゲームオーバーとなります。

![60.png](https://qiita-image-store.s3.amazonaws.com/0/75221/17c453b2-4915-300f-9b77-e3036291f94c.png "60.png")


<br>

# プラスα

## せっかくなので雪を降らせてみましょう🎅
### ✏️ Standard Assetsディレクトリ以下のParticles以下のMiscのなかにある**Light Snow**をHierarchyビューにドラッグ&ドロップしてください

![61.gif](https://qiita-image-store.s3.amazonaws.com/0/75221/0cd606d4-709d-99fd-04ee-db7b97aea5f4.gif "61.gif")

### ✏️ Light SnowのScaleを以下のように設定してください

![62.png](https://qiita-image-store.s3.amazonaws.com/0/75221/151c4ebb-eb12-f279-eda3-ad46a6f09686.png "62.png")


# 完成
これで**アングリーサンタ**の完成です。大変お疲れ様でした。
 
よいクリスマスをお過ごしください。
🎁Merry Christmas🎁

![santa.png](https://qiita-image-store.s3.amazonaws.com/0/75221/cf812355-d595-a80e-61a2-759ea29b3197.png "santa.png")