Unityy C# Tutorialを触ってみる1.1 - Clock -

# Unity Tutorialとは
Unityについて調べていたらとても素晴らしいTutorialを見つけました。

http://catlikecoding.com/unity/tutorials/

Unityの勉強に丁度いいと思ったのでやってみます。
なお筆者の英語力は戦闘力5にも満たないので、解釈を間違っていたらすいません
と先に保険をかけておきます。

# Clock
まずはTutorial 1-1 Clockから始めます。
完成形は以下の図です。
（わかりにくいですが、一応時計です）


![2017-03-03_183850.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/8a44bf9f-4584-78bb-874c-4c5c8d540fa7.jpeg)


今回行う要素としてはざっと以下の通り(最初のチュートリアルなのでかなり基本的なことから）
* オブジェクトの作成
* スクリプトの作成
* オブジェクトの回転
* 時間の取得

ではTutorialに沿って順番にやってみます。


# 1.Creating the clock
まずは時計の針の作成ですね。
針のオブジェクトにはCubeを使用します。
まず、Hierarchyから時計の針を格納する空のオブジェクト（Clock)と
それぞれの針に対応する空のオブジェクト(Hours, Minutes, Seconds)を作成し
その配下に針（Cube）を作成します。

![2017-03-03_155718.png](D:\Fukumoto\30.勉強会\02.Qiita\170303_Tutorial1\img\2017-03-03_155718.png)

Cubeのサイズはそれぞれ
* Hours : position(0, 1, 0)  scale(0.5, 2. 0.5)
* Minutes : position(0, 1.5, 0)  scale(0.25, 3, 0.25)
* Seconds : position(0. 2. 0) scale(0.1, 4. 0.1)

と設定します。
なぜCubeをそれぞれオブジェクトの配下で作成しているのでしょうか。
見やすくする為という理由もあるかもしれませんが、おそらく今回は針の回転処理を楽にするためだと思います。
時計の針は針の根本から回転しますが、そのまま針（Cube)を回転させるとオブジェクトの中央で回転してしまいます。
ですのでオブジェクト(Hours,Minutes,Seconds)の中心に針（Cube)の回転軸が来るように配置し、オブジェクトを回転させれば針が根本から回転するという仕組みですね。
これについては回転の時にも少し説明します。

# 2.Animating the clock
次は針を回転させるスクリプトを作成します。
まずClockAnimatorという名前のC#スクリプトを作成し、Clockにアタッチします。

![2017-03-03_160615.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/94d4d3b6-e8f3-b53a-6cbf-73dcf18b44dd.jpeg)

次に作成したスクリプトにそれぞれの針の状態を格納する変数を宣言します。

    using UnityEngine;

    public class ClockAnimator : MonoBehaviour {
    
    	public Transform hours, minutes, seconds;
        
    }
    
publicで変数を宣言することで、Inspectorから値を観測することが出来ます。
そこにそれぞれ作成したオブジェクトをドラッグしてアタッチします。

![2017-03-03_181353.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/0a63d85e-5dc7-7d0a-cb7a-eaec71489942.jpeg)

次に単位時間あたりの回転角を定義します。
回転の角度は1時間が360/12度、分・秒が360/60度です。

	private const float
		hoursToDegrees = 360f / 12f,
		minutesToDegrees = 360f / 60f,
		secondsToDegrees = 360f / 60f;

最後に現在の時刻を取得し、回転を行います。
時間を取得するにはDateTimeというクラスを使用しますが、使用するには Systemをインクルードする必要があります。

    using System
    
    private void Update () {
		DateTime time = DateTime.Now;
		hours.localRotation =
			Quaternion.Euler(0f, 0f, time.Hour * -hoursToDegrees);
		minutes.localRotation =
			Quaternion.Euler(0f, 0f, time.Minute * -minutesToDegrees);
		seconds.localRotation =
			Quaternion.Euler(0f, 0f, time.Second * -secondsToDegrees);
	}

Update()はフレーム毎に呼ばれる関数です。

		DateTime time = DateTime.Now;

で時間を取得し

    Transform.localRotation
    
を使用して回転します。
Quaternionについては長くなるので詳しい説明は割愛しますが（自分も理解しきれていない）

    Quaternion.Euler(x, y, z)
    
は、(x,y,z)のそれぞれの軸に対して入力された角度回転します。
この時回転する中心点は、1でも触れましたがオブジェクトの中心です。
2.で作成したTransformをCubeにそれぞれアタッチして回転させると以下のような回転をします（短針だけ離れていますが気にしないでください）。

![2017-03-03_180113.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/2a83f5d5-b018-e811-1a32-fe4801456c75.jpeg)

図の通りオブジェクトの中心を軸に回転しています。
また、ワールド座標で回転させた場合でも、回転方向はワールド基準ですが、回転の軸はオブジェクトの中心になるようです。


ちなみに回転軸をエディターで見るには、表示をPivotにする必要があるそうです（左上にあるやつです）。

![2017-03-03_181426.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/6b629f50-9ed9-f5a5-b18c-ced86dd93e9c.jpeg)

センターだとこうなります。

![2017-03-03_181418.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/98b82376-6b01-cdad-7c85-e694e77bb748.jpeg)


Tutorialのように表示するにはPivotに設定してください。

あとはこのまま実行すれば現在の時刻が表示されると思います。

![2017-03-03_181314.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/8b2e59f8-1e28-7f26-1770-36e41a4ee992.jpeg)


# 3.improvinig the clock
今のままだと、針はそれぞれ時、分、秒単位でしか動きません。
この項目では滑らか（アナログ）な動きを選択できるようにします。

DataTimeでは整数単位でしか値を取得出来ないので、TimeSpanを使用します。

	public bool analog;
    private void Update () {
		if (analog) {
			TimeSpan timespan = DateTime.Now.TimeOfDay;
			hours.localRotation = Quaternion.Euler(
				0f, 0f, (float)timespan.TotalHours * -hoursToDegrees);
			minutes.localRotation = Quaternion.Euler(
				0f, 0f, (float)timespan.TotalMinutes * -minutesToDegrees);
			seconds.localRotation = Quaternion.Euler(
				0f, 0f, (float)timespan.TotalSeconds * -secondsToDegrees);
		}
		else {
			DateTime time = DateTime.Now;
			hours.localRotation =
				Quaternion.Euler(0f, 0f, time.Hour * -hoursToDegrees);
			minutes.localRotation =
				Quaternion.Euler(0f, 0f, time.Minute * -minutesToDegrees);
			seconds.localRotation =
				Quaternion.Euler(0f, 0f, time.Second * -secondsToDegrees);
		}
	}
    
timeSpanはdoubleで値が帰ってくるのでfloatでキャストしています。
また、アナログな動きを選択できるようするためフラグを宣言し、場合分けしています。

これで時計の完成です。
この動きに関しては画像では伝えることが出来ないですが、一度作成してみればすぐにわかると思います。



針だけだと何かわからないので、透明の円で囲んでみました。
あとは数字があれば時計っぽくなるかも。



![2017-03-03_184335.jpg](https://qiita-image-store.s3.amazonaws.com/0/163818/c6214a55-6be3-fb31-769f-9fc8bb8f4f14.jpeg)