PSDファイルからUnityのuGUIに自動変換できるBaum2の使い方を紹介します。
PhotoshopでUIを作成し、そのままUnityにコンバートできる便利なツールです。
目次
Baum2のダウンロード
GitHubからデータをダウンロードします。
ダウンロード：https://github.com/kyubuns/Baum2
環境構築
Photoshopの設定
ダウンロードしたファイルの中にある「PhotoshopScript」フォルダを以下の場所に格納します。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\ScriptsUnityの設定
「Baum2.unitypackage」をUnityにインポートします。
エラーが出た場合
以下のエラーが表示された場合は、C#のバージョンを上げる必要があります。
Assets/Baum2/Scripts/RawData.cs(8,43): error CS1644: Feature `auto-implemented property initializer' cannot be used because it is not part of the C# 4.0 language specification
対処方法：
- Edit → Project Settings → Playerを開く
- Configuration → Scripting Runtime Versionを「Experimental (.NET 4.6 Equivalent)」に変更
- Unityを再起動
PhotoshopでUIを作成する
Baum2はレイヤー名やグループ名で変換先のUIコンポーネントを判別します。命名規則に従ってPSDを作成してください。
命名規則
テキスト
- Text（レイヤー）→ テキストレイヤーはそのままTextコンポーネントに変換
ボタン
- ○○Button（グループ）→ Buttonコンポーネントに変換
スライダー/ゲージ
- ○○Slider（グループ）
- ├ Fill
- └ Background
スクロール + スクロールバー
- ○○List@Scroll=Vertical（グループ + Areaサイズのマスク）
- ├ Item1
- ├ Item2
- ├ Area
- └ ○○Scrollbar（グループ）
- ├ Handle
- └ Background
除外（コメント）
- #○○（レイヤー名の先頭に#）→ 変換から除外される
フォントデータの格納
使用するフォントをAssets/Baum2/Sample/Fontsに格納します。
注意点：
- フォントの拡張子が.ttfでない場合は、スクリプトか拡張子の命名を変更する
- フォントの格納場所に合わせてBaumFontsの参照先を変更する
Unityへコンバート
- Photoshopでファイル → スクリプト → Baumを選択
- 保存先として「Assets/Baum2/Import」を指定して実行
Unityで確認
- Canvasを作成
- 生成されたPSD名のPrefabをCanvasに配置
- 動作を確認
特にエラーもなく一発でコンバートでき、各機能も正常に動作します。
スクロールの挙動確認用スクリプト
サンプルスクリプトを参考に、スクロール機能をテストできます。
using UnityEngine;
using UnityEngine.UI;
using Baum2;
namespace Baum2.Sample
{
public class uiTest : MonoBehaviour
{
[SerializeField]
private GameObject UIPrefab;
private UIRoot UI;
private int ListSize;
public void Start()
{
UI = BaumUI.Instantiate(gameObject, UIPrefab);
ListSize = 10;
ListSample();
SliderSample();
}
public void Update()
{
SliderSample();
}
public void ListSample()
{
var list = UI.Get<List>("List");
list.Scrollbar = UI.Get<Scrollbar>("Scrollbar");
list.Spacing = 10;
list.UISelector = (int index) =>
{
return index % 2 == 0 ? "Item1" : "Item2";
};
list.UIFactory = (UIRoot ui, int index) =>
{
ui.gameObject.name = "ListItem" + index;
var button = ui.Get<Button>("Button", true);
if (button != null)
{
button.onClick.AddListener(() => Debug.Log(index));
}
};
list.Resize(ListSize);
}
public void SliderSample()
{
UI.Get<Slider>("Slider").value = Mathf.Clamp01(Time.time % 1.0f);
}
}
}保存先パスを直接指定する方法
毎回フォルダを選択するのが面倒な場合は、スクリプトを編集してパスを直接指定できます。
変更前：
this.saveFolder = Folder.selectDialog("保存先フォルダの選択");変更後：
this.saveFolder = "D:\\Baum2-master\\Unity\\Assets\\Baum2\\Import";まとめ
Baum2の特徴：
- PSDから直接uGUIに変換できる
- レイヤー名の命名規則でコンポーネントを自動判別
- ボタン、スライダー、スクロールなどに対応
- 位置やサイズのズレが少ない
- 無料で使用可能
デザイナーがPhotoshopでUIを作成し、そのままUnityに反映できるため、ワークフローの効率化に役立ちます。
