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

##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にインストールします。

インストール先は

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

となっています。

###PSDサンプルの場所

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

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

このPhotoshopデータのレイヤー設定を見て見ましょう。
出力用のタグが確認できると思います。

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

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

####PNG

####Text

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

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

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

出力される素材は、

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

となります。

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

設定する項目は

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

そのほかにも、タグ設定されていないレイヤーへのデフォルト設定も可能です。
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を使い、イベントでの実装は避ける