Unity2D+NGUIでゲーム作るよ！ その4 さくっとNGUI

いろいろ立て込んで3ヶ月ぶりの更新。。
UnityからUnity2Dチュートリアルが出てました。
http://japan.unity3d.com/developer/document/tutorial/2d-shooting-game/

今回の記事はNGUIをさくっと覚えたい人向け。多分ラスト

いままで
[Unity2D+NGUIでゲーム作るよ！ その0](http://qiita.com/keidroid/items/23b6bed567f96af55715)
[Unity2D+NGUIでゲーム作るよ！ その1 Scene](http://qiita.com/keidroid/items/0d6a40b97afd4288f97d)
[Unity2D+NGUIでゲーム作るよ！ その2 Spriteで画像表示](http://qiita.com/keidroid/items/f387b493e8e7dae12b22)
[Unity2D+NGUIでゲーム作るよ！ その3 AnimationとMecanim](http://qiita.com/keidroid/items/fa8e88193b2858777502)

# 4.1 NGUIとは..
現行のUnity4.3ではゲーム関連の機能がパワフルなもののGUI系の処理がムムム..
ということでAssetStoreにあるNGUIというAssetでGUIを作る方が多いようです。
http://u3d.as/content/tasharen-entertainment/ngui-next-gen-ui/2vh

※Unity4.6ではuGUIというパワフルでクールなGUIの機能が追加されるようです

NGUI公式サイト
http://www.tasharen.com/?page_id=140

個人的な感想としてはかなり頻繁にバージョンアップが行われています。
(2014.4.24現在、最新バージョンは3.5.8)
今回は3.0.7以上/モバイルUIの作成を対象とします。
作成手順は今回はなるべくシンプルに、Texture形式はSpriteのみ使用します。

| Version | だいたいこんな感じ |
|:---|:------------|
|3.5.x|データバインディング対応 Delegateパラメータ対応 など|
|3.0.7|Unity2D対応(2DSprite対応) ←|
|3.0.x|ワークフロー改善 など|
|2.x.x|(ネットに情報が多いです)
|2.7.0|2014.4.24現在、条件付きでフリー公開中|

# 4.2 いろいろ作る

NGUIでこんな画面を作ってみたよ(文字表示/画像/スクロールビュー)
※音が出ます
[WebPlayer] https://db.tt/8Taw7sXA

![スクリーンショット 2014-05-27 23.22.07.png](https://qiita-image-store.s3.amazonaws.com/0/19692/a00a2612-010f-988c-3b96-ef2817ef61a6.png)

画像素材は以下フリーコンテンツを利用しています
ジュエルセイバーFREE
URL：[http://www.jewel-s.jp/]

音声素材はAssetStoreのものを使用しています

## 4.2.1 下準備
NGUIがインポートされたプロジェクトでは画面上部にNGUIメニューが作成されます。
Create > 2D UI を選択すると UI Root、Cameraが作成されます。

![スクリーンショット 2014-05-28 0.17.00.png](https://qiita-image-store.s3.amazonaws.com/0/19692/c77bfd80-b6fc-6b43-0577-aa43a861d8a3.png)


UI RootにはUIRootコンポーネントがあります。
Scaling Styleをまず設定します

| Style | 概要 |
|:---|:------------|
|PixelPerfect|解像度による拡大縮小を行いません|
|FixedSize|解像度による拡大縮小を行います|
|FixedSizeOnMobile|モバイル出力のみ解像度による拡大縮小を行います|


## 4.2.2 基本パーツ
http://www.tasharen.com/ngui/docs/annotated.html
以下をよく使います

| Style | 概要 |
|:---|:------------|
|UIWidget|UIコンポーネントの基底クラス。alpha設定やdepth(表示優先度)設定に使う。UIを持たないノードのような扱い方も可|
|UIPanel|UI群をPanelで分ける時に使用。UIPanelのdepthはUIPanel同士で比較される|
|UILabel|文字表示用|
|UI2DSprite|Unity4.3からのSpriteを利用した画像表示|
|UISprite|UnityのTextureで画像表示。タイル表示やストレッチが可能|

## 4.2.2 文字表示を作る
NGUI > Create > Label を指定。

![スクリーンショット 2014-05-27 23.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/19692/52329914-23c0-75d0-d3cf-f40d51288399.png)

ダイナミックフォント・ビットマップフォントに対応。
影付き表示やアウトライン表示も可能です。次！

## 4.2.3 画像を表示する
Spriteでやります。
NGUI > Create > UI 2D Sprite を指定。

![スクリーンショット 2014-05-27 23.43.48.png](https://qiita-image-store.s3.amazonaws.com/0/19692/94b191a8-531a-a7ba-6f62-cf1369e3f68b.png)

![スクリーンショット 2014-05-27 23.44.12.png](https://qiita-image-store.s3.amazonaws.com/0/19692/7c7a9b18-1c67-5e65-e7d6-ff591e727082.png)

Scaleではもちろん、Demensionsで画像の大きさが指定できます。
snapをクリックするとでオリジナルサイズ表示も可能です。次！

## 4.2.4 ボタンを作成
4.2.3で作成した画像を選択し、NGUI > Attach > Collider を指定。

![スクリーンショット 2014-05-27 23.46.10.png](https://qiita-image-store.s3.amazonaws.com/0/19692/9e21479f-25f1-b955-455c-ee887b4d7021.png)

![スクリーンショット 2014-05-27 23.47.14.png](https://qiita-image-store.s3.amazonaws.com/0/19692/70f28471-9533-4cea-1a1b-867dec293f32.png)

Box Coliderが追加されます。
(UI2DSpriteのauto-djust to matchにチェックを入れるとSpriteの大きさからColliderを自動調節してくれます)
上記でクリック範囲が取得できるようになったので以下のようなスクリプトを追加すればクリックによる処理が可能です

```
public class TestButton : MonoBehaviour
{
	void OnPress(bool isDown)
	{
		//test
		UnityEngine.Debug.Log("click:"+isDown);
	}
}

```

取得できるイベントはOnClick、OnDragなど・・以下にのっています。
(SendMessageで同GameObjectにAttachされたMonoBehaviourにイベントが飛んできます)
http://www.tasharen.com/ngui/docs/class_u_i_event_listener.html

## 4.2.5 アニメーションのあるボタンを作成
こちらはNGUIで作成したGameObjectにUnity標準のAnimatorをAdd Componentすれば実現できます

![スクリーンショット 2014-05-27 23.59.17.png](https://qiita-image-store.s3.amazonaws.com/0/19692/fad8676e-1358-9e20-bf6d-6929c7e5950b.png)

```
[RequireComponent(typeof(Animator))]
public class TestButton : MonoBehaviour
{
	private Animator animator;

	void Awake()
	{
		animator = GetComponent<Animator>();
	}

	void OnPress(bool isDown)
	{
		if(isDown) {
			animator.SetTrigger("click");
		} else {
			//クリック時の処理
		}
	}
}
```

## 4.2.6 ScrollViewの作成
ありがちなUIなので念のため。
NGUI > Create > Scroll Viewで作成します。

![スクリーンショット 2014-05-28 0.02.25.png](https://qiita-image-store.s3.amazonaws.com/0/19692/d80db117-1227-9e6b-e2ea-214da65bd11a.png)


スクロールさせる要素は、ScrollViewの子GameObjectとして作成します。
UI2DSprite,BoxColider,UIDragScrollViewを持つ要素をScrollViewの子になるように作成します。

![スクリーンショット 2014-05-28 0.08.36.png](https://qiita-image-store.s3.amazonaws.com/0/19692/f3d61516-c7ea-01e8-a8c5-a7098ddd04ce.png)

![スクリーンショット 2014-05-28 0.11.34.png](https://qiita-image-store.s3.amazonaws.com/0/19692/b4dfcbfe-c75e-5547-7963-990fdc8b0eb9.png)

(UIDragScrollViewはAdd Componentから追加してください。NGUI > Interaction > Drag Scroll Viewがそれです)

![スクリーンショット 2014-05-28 0.07.18.png](https://qiita-image-store.s3.amazonaws.com/0/19692/438bba41-3596-4ede-f6ab-ced59ebef5fa.png)


# 4.3 参考
以下画面を作成するにあたって参考にさせていただきましたmm
https://db.tt/8Taw7sXA

NGUIのUILabelを一文字ずつ書き出す
http://qiita.com/otmb/items/711efe39c4149a70ffa1

テラシュールウェア - [Unity][NGUI]面倒なスクロールビュー作成が簡単になってた
http://terasur.blog.fc2.com/blog-entry-651.html

おわり(ヽ'ω`)