UIの実装効率を100万倍にして5000兆円稼ぐ


![スクリーンショット_2017_09_03_0_59.png](https://qiita-image-store.s3.amazonaws.com/0/50702/9e3dd6f8-8052-3cf4-cda7-1607171bc086.png "スクリーンショット_2017_09_03_0_59.png")

##Psd 2 Unity uGUI Pro
PhotoshopデータからGameObjectとして、まとめてAssetをインポートできるツール。
https://assetstore.unity.com/packages/tools/gui/psd-2-unity-ugui-pro-16131

##導入
Assstストアにて$32.5で販売中。
Unityパッケージとして、プロジェクト単位でインストール
対応しているPSDデータは、AdobePhotoshop CS5+(CC+)

PSDデータをPhotshopでスクリプトを使い、レイヤー単位で画像を出力

##レイヤーにタグ付け
レイヤー単位でタグ付けし、まとまった画像として出力してくれます。
ここで大事なのが、レイヤーに対してタグをつけると、Unityに取り込んだ際にコンポーネントの設定も、まとめて行ってくれます。

|タグ|機能|
|:--|:--|
|name=PNG|Ping画像として出力してくれます|
|name=JPG|JPEGで出力してくれます|
|name=JPG:8|クオリティ設定したJPEGを出力してくれます(0~12)|
|name=Text|テキストオブジェクトとして出力してくれます|
|name=Button|ボタンオブジェクトとして出力してくれます|

そのほかにも、タグをつけると、各コンポーネントのアンカー設定などもしてくれます。
例：name=PNG[Anchor:st,Pivot:lt,
PackingTag:CustomName]

```
Export layer with extra(optional) settings.
Anchor: Two characters representing horizontal and vertical anchor.
• Horizontal:
• l: Left
• c: Center
• r: Right
• s: Stretch
• Vertical:
• t: Top
• m: Middle
• b: Bottom
• s: Stretch
Pivot: Two characters representing horizontal and vertical pivot.
• Horizontal:
• l: Left
• c: Center
• r: Right
• Vertical:
• t: Top
• m: Middle
• b: Bottom
PackingTag: Any text. The sprite’s packing tag.
```

##PSDデータをスクリプトで出力
まず、Psd２UnityuGUIProのフォルダ内にある、Photoshop用のスクリプトファイルを自身のPCにインストールします。

![Photoshop_Scripts.png](https://qiita-image-store.s3.amazonaws.com/0/50702/c669d157-9c2a-67d6-c3e2-d21f5c2c8276.png "Photoshop_Scripts.png")

インストール先は

* OSX: /Applications/Adobe Photoshop XXX/Presets/Scripts/
* Windows: [Adobe Photoshop Installation Path]\Presets\Scripts\

となっています。

###PSDサンプルの場所

Unityでパッケージをインストールすると、サンプルファイルが含まれています。
こちらのデータで説明をしましょう。


![Sample.png](https://qiita-image-store.s3.amazonaws.com/0/50702/71b40040-d1dc-cfc0-3c62-cd3e1321c1bc.png "Sample.png")

このPSDデータをPhotoshopで開いてみましょう。

![Scene_Store_psd___50___Buy__RGB_8___.png](https://qiita-image-store.s3.amazonaws.com/0/50702/fae194a2-4116-8d0a-c4d9-e28525c473e5.png "Scene_Store_psd___50___Buy__RGB_8___.png")

このPhotoshopデータのレイヤー設定を見て見ましょう。
出力用のタグが確認できると思います。
![Scene_Store_psd___50___Buy__RGB_8___.png](https://qiita-image-store.s3.amazonaws.com/0/50702/1fa1d346-d3f9-4d1d-cbab-a9869ac6d8eb.png "Scene_Store_psd___50___Buy__RGB_8___.png")

このスクリプトの便利な点は、タグをつけた一番上のレイヤー(フォルダ)を軸に、それ以下のレイヤーを対象にエクスポート設定をしてくれます。
ここで注意しなくてはいけないのが、階層構造を持つレイヤーに親子でタグをつけてしまうと、子供のレイヤーの画像出力と、親のレイヤーでまとめられた画像２つが出力されてしまいます。

###レイヤーに設定するタグ
現状良く使用する設定タグを説明します。
現状JPEGで出力することはないので、今回は主にPNGタグを使用します。

####PNG
![Function_tests_psd___100___With_options_PNG_Anchor_st_Pivot_lt_PackingTag_Custom_Tag___RGB_8___.png](https://qiita-image-store.s3.amazonaws.com/0/50702/eb2ec296-4185-e257-0cb8-dbd30aa35151.png "Function_tests_psd___100___With_options_PNG_Anchor_st_Pivot_lt_PackingTag_Custom_Tag___RGB_8___.png")


####Text

![Function_tests_psd___100___As_text_1_Text__RGB_8___.png](https://qiita-image-store.s3.amazonaws.com/0/50702/f9fec7cb-2adb-493e-8dde-851b907e6bd1.png "Function_tests_psd___100___As_text_1_Text__RGB_8___.png")

####Button
Buttonタグは、Unityへインポートした時に、Buttonクラスを設定してくれます。
イベントに関してはインスペクターから手動にて設定する必要がありますが、取り込みが完了した時点では標準の値が設定されています。

###スクリプトで出力
Photoshopのファイルメニュー→スクリプト→参照から、インポートしたスクリプトを選択し、Assetを出力します。

![スクリーンショット_2017-09-03_12_25_42.png](https://qiita-image-store.s3.amazonaws.com/0/50702/267cc6b1-e3d2-d421-d3ab-1c66b37f8cfa.png "スクリーンショット_2017-09-03_12_25_42.png")

スクリプトを実行すると、各タグに準じた設定でPSDデータと同じ階層のフォルダに出力されます。
Unityに取り込んでいるものであれば、そのままUnityに画像や設定情報が取り込まれます。

![Sample.png](https://qiita-image-store.s3.amazonaws.com/0/50702/fa2b637e-4e9f-080d-ebe9-db948b4a634e.png "Sample.png")

出力される素材は、

* 画像ファイル
* 設定情報

となります。


##Unityに取り込み
出力された素材を、Sceneに追加します。
設定画面を開き、各素材(Object)を参照します。

![スクリーンショット_2017-09-03_12_23_11.png](https://qiita-image-store.s3.amazonaws.com/0/50702/e34f2b0d-547a-42de-67ab-0f2cc3dde790.png "スクリーンショット_2017-09-03_12_23_11.png")

設定する項目は

* 設定ファイル(JSON)
* 画像フォルダ
* フォント
* ルートのGameObject(Canvas)

![Unity_5_6_3p1_Personal__64bit__-_Untitled_-_PSD2Unity_-_PC__Mac___Linux_Standalone__Personal___OpenGL_4_1_.png](https://qiita-image-store.s3.amazonaws.com/0/50702/6cda314e-45ee-4fd4-73a8-9bf315d51de9.png "Unity_5_6_3p1_Personal__64bit__-_Untitled_-_PSD2Unity_-_PC__Mac___Linux_Standalone__Personal___OpenGL_4_1_.png")


そのほかにも、タグ設定されていないレイヤーへのデフォルト設定も可能です。
Compose!ボタンの下で設定しましょう。

各設定が完了したら、Compose!ボタンを押してヒエラルキー上にインスタンスしましょう。

###使用上の注意＆ルール設定
Unityへの取り込みが完了したら、それぞれのGameObjectにクラスを設定するかと思われます。
その時に、UIの変更があると、再度取り込み直しとなってしまいます。

私のケースだといくつかパターンがありますが、

* GameObjectに変更はないが画像をブラッシュアップ
* 追加のオブジェクト(レイヤー)がある

の2パターンです。

###共通して設定するルール
基本的には、Photoshopのタグを設定したレイヤー名を固定とし、一度Unityにインポートしたレイヤー名を変更しないという設定が必要です。
これは後から、画像の変更、スクリプトの参照関係を維持するために必要です。

###GameObjectに変更はないが画像をブラッシュアップ
画像のブラッシュアップに関しては、変更後の画像を` Unityを介さず `Finderから上書きします。
この方式かつPhotoshopでレイヤー名を変更されていない状態だと、Unity側でGUIDが変更されずそのままファイル名で素材を参照してくれます。

###追加のオブジェクト(レイヤー)がある
この場合は、新しくルートCanvasを設定し、手動で元のCanvasへ移動します。
取り込み直しをしてしまうと、GameObjectに設置したクラスなどがリセットされてしまうのを防ぐためです。

###ViewControllerクラス
以上の流れを意識した上で、面倒な再インポートなどの手間、参照関係の破綻を防ぐために、Viewクラスを実装しましょう。
`[シーン名]ViewController.cs`などでクラス名を設定するのが理想です。

```GameLogicViewController.cs

using UnityEngine;
using UnityEngine.UI;

	public class GameLogicView : MonoBehaviour
	{
		[SerializeField] private GameLogic _gameLogic;
		
		[SerializeField] private Text _LifeText_you;
		
		[SerializeField] private Button finish_buttone;		
		
		public void Init()
		{
			_gameLogic = GameObject.Find("GameLogic").GetComponent<GameLogic>();
			
			_LifeText_you = GameObject.Find("life_you_num").GetComponent<Text>();
			
			finish_buttone = GameObject.Find("finish_buttone").GetComponent<Button>();			
			_LifeText_you.text = CoreDate.INIT_LIFE.ToString();
			
			finish_buttone.onClick.AddListener (() => { _gameLogic.EndPhase(); });
		}

		void Awake(){
			Init();
		}
}

```
実装のコツとしては、

* GameObject名 = 参照する変数名が同じ
* nullだったら`new`された時点でエラーが出る
* Buttonに関しては`AddListener`を使い、イベントでの実装は避ける