【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第１回）

# はじめに
この記事は、Unity初心者が2Dゲームの作成に慣れることを目的としたチュートリアルとなります。

## 対象読者
対象読者は以下のとおりです。

* Unityを使ってゲームを作ろうとしたけれども、よくわからずに放置している
* Unityで2Dのゲームを作りたい
* プログラムの知識は多少ある
	* C#を知っていると良い
	* 知らなくてもC++やJavaの知識があればOK
* ゲームは作ったことがなくてもOK

スクリプト言語にC#を使用するので、変数や関数やクラスについての知識が必要となります。できるだけわかりやすく説明したつもりですが、プログラム言語の知識があったほうが読み進めやすいと思います。

なお、開発環境はWindowsを想定しています。

## 目次

* 【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第１回）※今のページ
* [【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回）](http://qiita.com/2dgames_jp/items/fc8aabe89402577f96e7 "【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回）")
* [【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第３回）](http://qiita.com/2dgames_jp/items/36f315874f6bf2d14699 "【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第３回）")

全部で3ページのチュートリアルです。ボリュームはそれほどなく、「1〜2時間」でUnityで2Dゲームを作るときのコツがわかるようになっています。

## サンプル
今回作成するサンプルは、このようなミニゲームとなります。

![thumb.png](https://qiita-image-store.s3.amazonaws.com/0/43772/15e3aa42-34d3-6e12-f613-7bba8dc1a537.png "thumb.png")

画面を動き回るたこ焼きをクリックして破壊するミニゲームとなります。ゲームとしてはとても微妙ですが、Unityの操作に慣れるという目的には適切なのでこの題材を選びました。

## 使用する素材
使用する素材は以下のものとなります。

* http://syun777.sakura.ne.jp/wordpress/unity/tutorial_minigame/Materials.zip

こちらに今回作成するミニゲームで使用する画像と、スクリプトが含まれています

# チュートリアル（第１回）
## プロジェクトの作成
Unityはインストール済みとします。まずはUnityを起動してプロジェクトを作成します。するとProject Wizardが表示されます。

![02-01.png](https://qiita-image-store.s3.amazonaws.com/0/43772/4d7f43f1-8f9f-0806-b24d-d6fad817cad3.png "02-01.png")

「Create New Project」タブを選択して、Project Locationに任意のフォルダを指定します。初期状態だとマイドキュメントとなっていますが、デスクトップなどアクセスしやすいフォルダにしておくとよいでしょう。Import the following packagesの設定は特に不要なのでチェックは何もしません。Set up defaults fror: は「2D」にしておきます。設定できたら「Create」ボタンを押してプロジェクトを作成します。

## レイアウトの設定をする
プロジェクトが作成できたら、Unityエディタの右上にある「Layout」ドロップダウンから「2 by 3」を選択します。

![02-02.png](https://qiita-image-store.s3.amazonaws.com/0/43772/0fe13507-f46c-5fe3-27e5-925c885a6531.png "02-02.png")

このチュートリアルでは、この「2 by 3」のレイアウトで説明をします。

## Unityエディタの説明
レイアウトが設定できたので、Unityエディタの各機能を説明します。

![02-03.png](https://qiita-image-store.s3.amazonaws.com/0/43772/2b6421aa-8fea-e20a-4654-078119f9ad96.png "02-03.png")

まず左上にある枠がSceneビューです。ここにゲームオブジェクトを配置してゲームを作っていきます。すぐ下にあるのがGameビューで、ここでは実行結果を確認できます。真ん中にあるのがHierarchyビューです。ここにはSceneビューに配置されているゲームオブジェクトを一覧で見ることできます。その隣にあるのが、Projectビューです。ここでゲームで使用するデータ（アセット）を管理します。
もしこのProjectビューが縦2つに分かれていない場合は、左上のカギマークのとなりあるアイコンを選んで、ドロップダウンから「Two Colums Layout」にチェックを入れてください。

![02-04.png](https://qiita-image-store.s3.amazonaws.com/0/43772/c04019b1-0871-a200-990c-00e787574d36.png "02-04.png")

そしてProjectビューの一番下にあるスライダーを左端まで移動します。

![02-04a.png](https://qiita-image-store.s3.amazonaws.com/0/43772/4f2bfd55-c589-b202-4b1e-cd1432e26676.png "02-04a.png")

これでここに表示されるアイコンが小さくなります。スクリーンショットではAssetsフォルダの下に「UnityVS」がありますが、これはUnityとVisual Studioを連携するためのプラグインです。ゲーム作りとは関係ないので、このフォルダの存在は無視してしまって構いません。

そしてUnityエディタの一番左にあるのがInspectorビューです。選択しているオブジェクトやリソースの詳細な情報がここに表示されます。

### コラム：UnityとVisual Studioの連携 
もしUnityとVisual Studioを連携させる環境づくりに興味があれば以下のページを参考にインストール・セットアップしておくとよいでしょう。

* [Visual Studio Community 2013を早速インストールしてみた！インストール方法をご紹介します](http://www.lancork.net/2014/11/how-to-install-visual-studio-community-2013/ "Visual Studio Community 2013を早速インストールしてみた！インストール方法をご紹介します")
* [VisualStudioTools for Unity のインストールとデバッグ方法](http://qiita.com/nishiken1112/items/87b38b19ca9a5f4a5798 "VisualStudioTools for Unity のインストールとデバッグ方法")

### コラム：バージョン管理するための設定
バージョン管理とは、スクリプトやゲームデータなどを「誰が」「いつ」「何を変更したか」を管理することです。これを活用すると、何か動作に問題が起きた場合に、前のバージョンをたどって問題を追求したり、前のバージョンに復元したりすることができます。このバージョン管理を持つシステムをバージョン管理システムと呼び、「Subversion」「Git」などがあります。ゲーム開発は長期に渡る作業であることが多いので、バージョン管理システムの導入は必須と考えてよいです。
そのバージョン管理なのですが、Unityはいくつかのデータをバイナリデータで保持しています。ですがバイナリファイルは「変更履歴がわかりにくい」「マージできない」という欠点があります。そこで、Unityの設定を変更して、データをテキストで保持するようにします。
メインメニューから「Edit > Project Settings > Editor」を選びます。

![02-05.png](https://qiita-image-store.s3.amazonaws.com/0/43772/3e8d5381-24a6-f11f-da45-5a51ec540711.png "02-05.png")

するとInspectorビューに「Editor Settings」が表示されます。
![02-06.png](https://qiita-image-store.s3.amazonaws.com/0/43772/722bb429-ef46-0b74-8ddb-e756c84123aa.png "02-06.png")

これらの項目から、Asset Serializationを「Force Text」にすると、データが可能な限りテキストで保存されるようになります。ただこの設定をしても同じシーンを編集したりするとコンフリクト（衝突）が発生して問題が起きることが多いので、基本は同じシーンを別々の人が編集しないように運用ルールでなんとかする、ということが多いようです。それとVersion ControlのModeを「Visible Meta Files」とすると、meta情報ファイルが隠しファイルでなくなります。

また、プロジェクト内のフォルダに含まれる「Library」「Temp」「Obj」
フォルダは、プロジェクトを開いた際に自動で作られるものなので、これらは無視リストに登録しておいて、バージョン管理から外しておきます。

## 素材データの説明
素材データは以下のURLにあります。

* http://2dgames.jp/unity/tutorial_minigame/Materials.zip

このデータに含まれる内容は以下のとおりです。

```
Materials: 素材データ
 +-- minigame: ミニゲーム用素材
       +-- bg_back.png : 背景画像
       +-- effect1.png : エフェクト画像
       +-- tako.png : 敵画像（たこ焼き）
       +-- Script : スクリプト素材
             +-- Token.cs : ゲームオブジェクトのラッパークラス
             +-- Util.cs : ユーティリティクラス
```

## 画像の登録
まずは画像を登録します。と、その前に画像データを格納するフォルダを作成します。Unityエディタに戻って、ProjectビューにあるAssetsフォルダを右クリックします。するとポップアップが表示されます。
![02-08.png](https://qiita-image-store.s3.amazonaws.com/0/43772/ce914827-ab6a-49df-85cf-961003e98389.png "02-08.png")

ここから「Create > Folder」を選びます。そうするとフォルダが作成されるので名前を「Sprites」とします。
![02-09.png](https://qiita-image-store.s3.amazonaws.com/0/43772/ff04bb2f-87eb-1a02-6cbf-a818cfe22b9c.png "02-09.png")

Unityにおいて画像を2D表示する場合は「スプライト」という単位でデータを扱います。なので、このフォルダ名としました。

では、素材フォルダに戻って、「Materials/minigame」にあるすべてのPNGファイル（bg_back.png / effect.png / tako.png）をまとめてUnity上のProjectビューにある「Assets/Sprites」にドラッグ＆ドロップします（フォルダではなく画像ファイルをドラッグ＆ドロップします）。
![02-10.png](https://qiita-image-store.s3.amazonaws.com/0/43772/89e1f54d-486b-7e98-5dfc-a9cb4bcafba9.png "02-10.png")

1つずつ、画像をドラッグ＆ドロップしてもOKです。そうすると、Spritesフォルダの下に「bg_back」「effect1」「tako」の3つのスプライトが作成されます。
![02-11.png](https://qiita-image-store.s3.amazonaws.com/0/43772/b534e656-ea9b-c49b-793b-0754a46b831a.png "02-11.png")

間違ってAssetsフォルダの直下に配置してしまったら、配置したスプライトを選択して、Spritesフォルダにドラッグ＆ドロップすると移動できます。
それではまず背景を表示してみます。「bg_back」スプライトを、Sceneビューにドラッグ＆ドロップします。
![02-12.png](https://qiita-image-store.s3.amazonaws.com/0/43772/35a356ce-db1a-e443-9f90-641c3b7501d1.png "02-12.png")

そうすると背景画像が表示されます。そしてHierarchyビューには「bg_back」というゲームオブジェクトが作成されています。
![02-13.png](https://qiita-image-store.s3.amazonaws.com/0/43772/eedc3b6f-f214-5f36-d2a6-f1b96b8fc8eb.png "02-13.png")

Unityは、このようにスプライトをSceneビューにドラッグ＆ドロップすると、そのスプライトを持ったゲームオブジェクトを自動で作成してくれます。ここでHierarchyビューから「bg_back」オブジェクトを選択して、Inspectorビューに注目します。
![02-14.png](https://qiita-image-store.s3.amazonaws.com/0/43772/0c67c0e4-e699-c887-0c55-92f865a9eb53.png "02-14.png")

色々項目があって混乱しそうですが、ひとまず重要なのは「Transform」と「Sprite Renderer」という項目です。ゲームオブジェクトはコンポーネント指向という設計で作られています。コンポーネント指向とは、最初からすべての機能をもたせるのではなく、必要に応じて機能を組み合わせてものを作るという考えです。今回であれば「bg_back」は「Transform」と「Sprite Renderer」という2つのコンポーネントを組み合わせて、背景を表示しています。「Transform」とは「変形」の意味で、座標や回転、拡大縮小の値を保持しています。「Sprite Renderer」はスプライトを描画する機能です。
例えば、Transformの項目から、Positionの「X / Y / Z」の値をすべて「0」にしてみてください。
![02-15.png](https://qiita-image-store.s3.amazonaws.com/0/43772/e7bbe4e4-c0d4-9bd7-6884-1321f759030f.png "02-15.png")

そうすると、背景画像がSceneビューの中心に配置されるようになります。次にSprite Rendererの項目から、Spriteのところの右端にある歯車のようなアイコンをクリックします。
![02-16.png](https://qiita-image-store.s3.amazonaws.com/0/43772/54ba8757-864e-484d-15dc-7e50c7e40b29.png "02-16.png")
スプライト選択ウィンドウが表示されるので、effect1 や tako を選ぶと表示されるスプライトが変化します。ただスプライトを変更する必要はないので、この項目から変更できる、ということが確認できたら「bg_back」に戻してウィンドウを閉じます。

## シーンの保存
Unityは1つの画面を「シーン」という単位で管理しています。このシーンを保存します。まずは保存場所となるフォルダを作ります。ProjectビューからAssetsフォルダを右クリックして、「Create > Folder」でフォルダを作成し、名前を「Scenes」とします。
![02-17.png](https://qiita-image-store.s3.amazonaws.com/0/43772/4fdbef37-4db3-829c-8d79-c0562ece615f.png "02-17.png")

Scenesフォルダが作れたら、メインメニューから「File > Save Scene」を選択します。
![02-18.png](https://qiita-image-store.s3.amazonaws.com/0/43772/9e31b311-36c6-3a37-1211-d2f5ce721bf2.png "02-18.png")

シーンの保存ダイアログが表示されます。Scenesフォルダをダブルクリックして中に入り、ファイル名に「Main」と入力したら保存ボタンを押して保存します。
![02-19.png](https://qiita-image-store.s3.amazonaws.com/0/43772/108277b8-6010-4fb3-2f4c-1e69b44d8081.png "02-19.png")

するとProjectビューの「Assets/Scenes」フォルダにMainというファイルが作られ、Mainシーンが保存できていることが確認できます。
![02-20.png](https://qiita-image-store.s3.amazonaws.com/0/43772/0afde89b-6bf9-3f2a-ffa2-459005b72955.png "02-20.png")

## カメラの設定
背景は表示されましたが、画面に対して小さいですね。これを修正するために、カメラの設定を変更します。Hierarchyビューから「Main Camera」オブジェクトを選択します。これがこのゲームで使われるメインのカメラとなります。このカメラの視界が大きくて背景が小さくなっているので、InspectorビューからCameraコンポーネントのSizeを「2.4」にして小さくします。
![02-21.png](https://qiita-image-store.s3.amazonaws.com/0/43772/98ff7fba-ea4a-dde4-cd67-22f6699228bd.png "02-21.png")

するとGameビューの背景が大きくなったのですが、まだフチの方が紺色になったままです。そこでGameビューの「Free Aspect」のドロップダウンを選択して「4:3」にします。
![02-22.png](https://qiita-image-store.s3.amazonaws.com/0/43772/6fd03f3f-91d9-8e6a-6622-398612228fbe.png "02-22.png")

すると背景がぴったりおさまりました。はみ出している部分が黒色になり、そこには描画されなくなります。

## 次回
ひとまず背景が表示されたところで第１回は終了です。
次回は敵を表示させて、動かすところを実装していきます。

■次のチュートリアルに進む
→ [【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回）](http://qiita.com/2dgames_jp/items/fc8aabe89402577f96e7 "【Unity2D】Unityで2Dミニゲームを作るチュートリアル（第２回）")

----
----

# 宣伝
ここの記事を含むチュートリアルをまとめたKindle本を配信しました。
![unity2d.jpg](https://qiita-image-store.s3.amazonaws.com/0/43772/d376c624-2f74-13f2-2fe4-2d1175f5e458.jpeg)
[Unity4.6/5.0でつくる 2Dゲーム制作入門　[改訂第二版]](https://amzn.to/3qsD4NU)

2Dシューティングゲーム・2Dアクションゲームの作り方を解説した本です。詳細は以下のページで紹介しているので、よろしければ見てみてくださいね。

* [「Unity4.6/5.0でつくる 2Dゲーム制作入門」を配信開始しました](https://2dgames.jp/unity_2d_game/ "「Unity4.6/5.0でつくる 2Dゲーム制作入門」を配信開始しました")