[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(1)ステージ配置

#ブロック崩しのチュートリアル
Unityのサイトに昔からあるチュートリアルに、以下があります。
[「はじめてのUnity」(旧）
http://tutorial.unity3d.jp/archive/my-first-unity/](http://tutorial.unity3d.jp/archive/my-first-unity/)
これを独自にC#化したものをベースとしています。

この解説は以下の段階があります、前の内容を実行した上でのものとして参照して下さい。現時点(20151026)では、[新しい「はじめてのUnity」の玉転がしゲーム](https://github.com/unity3d-jp/FirstTutorial/wiki)が公開されています。本サイトのブロック崩しと併せて学習すると広がりがあり、初期の学習にはとても有効です。


* [__[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(1)ステージ配置__](http://qiita.com/JunShimura/items/cbb0db8087a5cc75735e)
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(2)色を変える](http://qiita.com/JunShimura/items/1b2b4842e983022075de )
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(3)動くボール](http://qiita.com/JunShimura/items/dfb2bdbbc328869f62ec )
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(4)ラケットを動かす]
(http://qiita.com/JunShimura/items/5fac20966bba6b223427)
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(5)消えるブロック](http://qiita.com/JunShimura/items/867179092a2a564bc88c)
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(6)ブロックを手作業で並べる](http://qiita.com/JunShimura/items/1f39e52414171c67bc71)



#どういうものを作るか
想定しているのは、以下の仕様とします。

0. 縦長の長方形ステージを配置
0. ボールが勝手に縦横で直線的に動いて、長方形ステージで跳ね返る
0. プレイヤーが動かせる箱が下に在り、ボールが跳ね返る
0. ブロックが配置されている
0. ブロックとボールが衝突すると消える

必要最低限だとこうなりますが、更に、

* ブロックとボールがぶつかると点数が入る
* 下のステージの壁にぶつかるとゲームオーバー

とすれば、無限に点数が入らないので、「点数を入れるゲーム」として成り立ちます。更に面白さを加えるならば、攻略性を考える部分を仕込んでいく形になります。

それでは実際に作っていきましょう。

#基礎部分の制作
先ずは、基礎をUnityエディタで作ります。
##プロジェクトを作る
今回は`block`という名前で作っています。
[![Gyazo](http://i.gyazo.com/dea1830fb8739f3b48b199b3f87960bd.png)](http://gyazo.com/dea1830fb8739f3b48b199b3f87960bd)

適宜、プロジェクトを創りたいフォルダを指定して、`Create Project`を押して下さい。
[![Gyazo](http://i.gyazo.com/06e877362f8228acd20bb3cd53d4f89f.png)](http://gyazo.com/06e877362f8228acd20bb3cd53d4f89f)
起動直後の画面は、何もない状態です。Unityは画面の構成を適宜、使いたいように変えられますが、わかりにくくならないように、今回はこのままで説明していきます。
起動直後は`Game`のタブ（ゲーム実行時の画面の状態）が中央にありますが、これを`Scene`のタブを押して切り替えて下さい。そうすると、ゲーム設計するための画面表示になります。
その状態でこれからは進めます。
***
##ステージを作る
ここから箱を使ってステージを作ります。

###箱を出す
上に在るメニューの[GameObject]>[3D Object]>[Cube]を選択して下さい。
[![Gyazo](http://i.gyazo.com/a401d69d2a423a3aeae5e24ca6d826ac.gif)](http://gyazo.com/a401d69d2a423a3aeae5e24ca6d826ac)
すると、画面の中央に白い箱(`Cube`)が登場します。
[![Gyazo](http://i.gyazo.com/55aee5ffe0581c1ed8c58ad484b9c927.png)](http://gyazo.com/55aee5ffe0581c1ed8c58ad484b9c927)
***
###ステージの上部分にする
この箱の形と位置を変えて、ステージの上部分にしましょう。

####箱の大きさを変える
大きさを変えたい場合は、[Inspector]タブの[Transform]を使います。[Inspector]タブの内容は、ステージ上に置いてある物のどれを選んでいるかで変わります。
この箱を、スタージ上部にするために、横長にしましょう。横長にするには、[Scale]を変更します。横方向はxになるので、[x]の値を変えてみましょう。[x]の部分にマウスを重ねると、カーソルが左右矢印（⇔）に変わります、その状態でスクラブ(マウスボタンを押したまま横にに動かす)と、[x]の値が変わると同時に形状が変化します。
[![Gyazo](http://i.gyazo.com/55a505a913b44d79bdfd3b6e7deef9f7.gif)](http://gyazo.com/55a505a913b44d79bdfd3b6e7deef9f7)
これで見ながら変えてもいいのですが、後から他の部分と接合して作るので、きちんとした値の方が便利です。ここでは、値を10にします。
[![Gyazo](http://i.gyazo.com/927113fba536cbd11d986cab815b6aa8.png)](http://gyazo.com/927113fba536cbd11d986cab815b6aa8)
他の方向の大きさも変えられますが、今回はそのまま`1`にしておきます。

#####箱の位置を変える
次に、今ある場所からステージの上部になるような形の場所に移動させます。
######見やすい方向からの表示に切り替える
このままだと、今見ている所が左斜め上の手前から見た状態になっています。これだと少し見にくいので、観てる視点の位置を変えます。
[Scene]タブの右上に、矢印のような物があります、これのコーンの部分をクリックすると、その座標が視点の方向に切り替わります。
[![Gyazo](http://i.gyazo.com/e9286e5d303520295e4c7138601ff143.gif)](http://gyazo.com/e9286e5d303520295e4c7138601ff143)

垂直、水平などの位置から見たい場合、これを使います。真ん中の箱をクリックすると、遠近感の有り無しが切り替わります。遠くにある物体と幅や高さを較べたい場合に有効です。今回のステージはxz平面に創ろうと思います。見やすいのはy座標の方向からになるので、画面の状態にしましょう。上がzで右がxです。
[![Gyazo](http://i.gyazo.com/1235eaec71499c71801b8116902b5e98.png)](http://gyazo.com/1235eaec71499c71801b8116902b5e98)
このままだと縦長にステージを配置するには全体が捉えらないので、少しズームアウトしましょう。
縦のスクロール操作(Windowsのマウスならホイール、タッチパッドなら2本指で上下)でズーム操作が出来ます。
[![Gyazo](http://i.gyazo.com/de5384d2d62e9414ef14bbf416719bed.gif)](http://gyazo.com/de5384d2d62e9414ef14bbf416719bed)
視点の方向をそのままに、位置を変えたい場合は、エディタの左上にある手のひらに切り替えます。
その状態でドラッグすると、視点になっている場所が平行移動します。
[![Gyazo](http://i.gyazo.com/f7640ce7262c77b562483a17707e3088.gif)](http://gyazo.com/f7640ce7262c77b562483a17707e3088)
今の箱をステージの上部分として全体が見えるよう、以下の状態の表示にします。
[![Gyazo](http://i.gyazo.com/7e83c69b612f563d6150b2ba7719558b.png)](http://gyazo.com/7e83c69b612f563d6150b2ba7719558b)

####数値入力で位置を移動する
箱の位置を変えます。数値で正確に入れたほうが後から便利なので、ここでは[Inspector]の[Transform]で変えていきます。位置を変えるのは[Position]です。
前に大きさを変えたように、値をスクラブすることでも変更できます。
[![Gyazo](http://i.gyazo.com/551e6cddc041ab7acaada103ec759ec1.gif)](http://gyazo.com/551e6cddc041ab7acaada103ec759ec1)
ここでは、これを上にするので、`z`を10にしましょう。
[![Gyazo](http://i.gyazo.com/1e72a88fdb62c16e540d7fe665674e2b.png)](http://gyazo.com/1e72a88fdb62c16e540d7fe665674e2b)

####後からわかるように名前を変える
移動が出来たので名前を変えます。[Inspector]で名前を`TopWall`としました。
[![Gyazo](http://i.gyazo.com/9206e93289de659c010485bf754ea8e2.png)](http://gyazo.com/9206e93289de659c010485bf754ea8e2)
***
###コピーして下の壁にする
他の部分を作ります。これで上部分は出来ており、これと同じ大きさを画面の真下に配置すると良いですね。
####複製する
`TopWall`を複製します。`TopWall`を選択したままで、メニューの[Edit]>[Duplicate]を選びます。
[![Gyazo](http://i.gyazo.com/a0775f346a47e86c83654ffbd27eb9cd.gif)](http://gyazo.com/a0775f346a47e86c83654ffbd27eb9cd)
出来上がったオブジェクトは`TopWall1`となって、出来上がっています。左上の[Hierarchy]タブで確認して下さい。
[![Gyazo](http://i.gyazo.com/8451dfb19485d1f95c5482f66de1cae4.png)](http://gyazo.com/8451dfb19485d1f95c5482f66de1cae4)

####複製したオブジェクトを移動する
新しいオブジェクトが選択されている状態で[Inspector]の[Transform]で変えていきます。位置を変えるのは[Position]でしたね。ここでは画面下方向なのでｚ座標を変えていきます。
[![Gyazo](http://i.gyazo.com/bc5a97b35b092d7118ea70bcc54b8a29.gif)](http://gyazo.com/bc5a97b35b092d7118ea70bcc54b8a29)
ここでは、原点にして対象の部分とすると分かりやすいので、`z`を`-10`にしました。
[![Gyazo](http://i.gyazo.com/8846094cea39579b85f6bc0e2d3fbbc8.png)](http://gyazo.com/8846094cea39579b85f6bc0e2d3fbbc8)

####後からわかるように名前を変える
移動が出来たので名前を変えます。[Inspector]で名前を`BottomWall`としました。
[![Gyazo](http://i.gyazo.com/dd6462d19e0928eaa46224f50cc234d5.png)](http://gyazo.com/dd6462d19e0928eaa46224f50cc234d5)
***
###左の壁を作る
左の壁を作りましょう。他の部分も同様の方法で作れます。

####とりあえず作成し、配置する
上に在るメニューの[GameObject]>[3D Object]>[Cube]を選択して下さい。出来上がった`Cube`を移動させて、左にします。`TopWall`,`BottomWall`は`Scale`の`x`が`10`でしたから、左だと`x`が`-5`で丁度、くっつくはずです。
[![Gyazo](http://i.gyazo.com/fe30592b38d9b4b8bc40ced4aa33662b.png)](http://gyazo.com/fe30592b38d9b4b8bc40ced4aa33662b)
[![Gyazo](http://i.gyazo.com/ede2d72993ad00e55fa6f1002545bf92.png)](http://gyazo.com/ede2d72993ad00e55fa6f1002545bf92)

####位置の調整
接合部分を拡大すると、こうなっています。ポリゴンが食い込んでいるのが判ります。
[![Gyazo](http://i.gyazo.com/4894856a08a7de8d1d405b35fce45609.png)](http://gyazo.com/4894856a08a7de8d1d405b35fce45609)
これは、物体の座標を管理している点が、重心になっているためです。幅が`1`なので、左右に動かして接着した形にしたい場合は、大きさを意識した値にする必要があります。`x`が`-5.5`だと、丁度になります。
[![Gyazo](http://i.gyazo.com/741f3c55aa73fdc9e4aaca0270d37dd0.png)](http://gyazo.com/741f3c55aa73fdc9e4aaca0270d37dd0)

[![Gyazo](http://i.gyazo.com/8aa2616a01e485cccfa9743dc5eb6ca8.png)](http://gyazo.com/8aa2616a01e485cccfa9743dc5eb6ca8)

####名前の設定
名前を変えていなかったので、変えましょう。ここでは`LeftWall`としています。
[![Gyazo](http://i.gyazo.com/b468a86972a0859f11dc17625d554650.png)](http://gyazo.com/b468a86972a0859f11dc17625d554650)
***
###右の壁を作る
右の壁は、上の壁から下の壁を複製したのと同様で作れます。

####複製する
`LeftWall`を複製します。`LeftWall`を選択したままで、メニューの[Edit]>[Duplicate]を選びます。
[![Gyazo](http://i.gyazo.com/c12f5ea85f6ddd4bb9708a51a78cca27.gif)](http://gyazo.com/c12f5ea85f6ddd4bb9708a51a78cca27)

####複製したオブジェクトを移動する
新しいオブジェクトが選択されている状態で[Inspector]の[Transform]で変えていきます。位置を変えるのは[Position]でしたね。ここでは画面右方向なのでx座標を変えていきます。
[![Gyazo](http://i.gyazo.com/133286564735116dc8dab9b206e2286f.png)](http://gyazo.com/133286564735116dc8dab9b206e2286f)
位置を原点で左右対称にしたいのならば、`LeftWall`のx座標`-5.5`の反数にすればいいので、`5.5`に設定します。
####名前の設定
名前を変えていなかったので、変えましょう。ここでは`RightWall`としています。
[![Gyazo](http://i.gyazo.com/708260ab114b9d1397ab70cb5e25bdf9.png)](http://gyazo.com/708260ab114b9d1397ab70cb5e25bdf9)

四角い枠の配置が完成です。
[![Gyazo](http://i.gyazo.com/8749e2fe42649cd10befd24fff285f2e.png)](http://gyazo.com/8749e2fe42649cd10befd24fff285f2e)

***

#ここまでのまとめ
ここまでに学習した内容は、以下になります。覚えているか、確認しましょう。

* 座標空間は3次元で、xが左右、yが上下、Zが奥行き。
* [Game]タブはゲーム実行画面、編集したいときは[Scene]タブ
* [Scene]タブで視点を変えたいときは
 * 右上のxyzの矢印で角度操作
 * ホィールで奥、手のひらで平行移動
* 四角い箱を出したいときはメニューから[GameObject]>[3D Object]>[Cube]
* 大きさを数値で変えたいときは、[Inspector]タブの`Transform`>`Scale`
* 位置を数値で変えたいときは、[Inspector]タブの`Transform`>`Position`
* 複製はメニューの[Edit]>[Duplicate]

これらを理解しているとして、以降を説明します。自信がない場合は、もう一度、繰り返すと良いでしょう。「同じものを作るのは無駄だ」と思うかもしれませんが、そんなことはありません。後々、楽になるなら、ここで復習しておいたほうが得策です。これから先の方が長いので、そこで楽ができるならトータルでかなり楽になる、ということです。

***
続きはこちらです。

この解説は以下の段階があります、前の内容を実行した上でのものとして参照して下さい。

* [__[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(1)ステージ配置__](http://qiita.com/JunShimura/items/cbb0db8087a5cc75735e)
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(2)色を変える](http://qiita.com/JunShimura/items/1b2b4842e983022075de )
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(3)動くボール](http://qiita.com/JunShimura/items/dfb2bdbbc328869f62ec )
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(4)ラケットを動かす]
(http://qiita.com/JunShimura/items/5fac20966bba6b223427)
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(5)消えるブロック](http://qiita.com/JunShimura/items/867179092a2a564bc88c)
* [[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で::(6)ブロックを手作業で並べる](http://qiita.com/JunShimura/items/1f39e52414171c67bc71)