psdデータからuGUIにコンバートするアセットはストアに幾つかあるのですが、
無料なのと、以前自動で9スライスされるOnionRingも良かったので、Baum2を試してみました。
[card2 id=”17346″ target=”_blank”]
参考＆データダウンロード
[Unity] psdからUIを作るライブラリ"Baum2"公開しました – Qiita
GitHub – kyubuns/Baum2: Psd to Unity UI(uGUI)
データをダウンロードします。
環境構築
PhotoshopScriptごとC:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scriptsに格納しますBaum2.unitypackageをUnityを開いて解凍します
エラーが出た場合
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
C#のバージョンを上げましょう（.NET3.5から.NET4.6）
Edit ＞ Project Settings ＞ Player
から Configuration＞Scripting Runtime VersionをExperimental(.NET 4.6E quivalent)にしてUnityを再起動
これでエラーが無くなります。
参考
https://gamegame-game.com/archives/unity-settings-cs6
PhotoshopでUIの作成
命名規則
文字
Text（レイヤー）
→テキストレイヤーであればそのままテキストとして変換される
ボタン
○○Button（グループ）
→ボタンに変換される
ゲージ
○○Slider（グループ）
LFill
LBackground
→ゲージに変換される
スクロール+スクロールバー
○○List@Scroll=Vertical （+Areaの大きさのマスク）
LItem1
LItem2
LArea
L○○Scrollbar（グループ）
LHandle
LBackground
→スクロール（垂直）に変換される
除外
＃（レイヤー）→コメント（除外される）
フォントデータの格納
AssetsBaum2SampleFontsにフォントを格納（BaumFontsの空データの場所）
※フォントの拡張子が.ttfではない場合は、スクリプトか拡張子の命名を変更する
※フォントの格納場所にあわせてBaumFontsの場所を変更してやる
Unityへコンバート
- ファイル＞スクリプト＞Baumから
AssetsBaum2Importを指定して実行
Unityで確認
- Canvasを作成して、生成されたPSD名のPrefabを入れて確認
とくにエラーもなく一発でコンバート出来ました。
とくに大きいズレもなく、それぞれの機能も動作するので、いい感じです！
スクロールの挙動の確認方法
サンプルスクリプト（sample,cs）を使用
使わない所をコメントアウトして、命名直して、アタッチ
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;
ImageSample();
ButtonSample();
ListSample();
}
public void Update()
{
SliderSample();
}
public void ImageSample()
{
// UI.Get("Image1").SetActive(false);
// UI.Get("Image2").SetActive(false);
}
public void ButtonSample()
{
// var welcomeText = UI.Get<Text>("Welcome/Text");
// var list = UI.Get<List>("PiyoList");
//
// UI.Get<Button>("Button").onClick.AddListener(() =>
// {
// welcomeText.text = "Welcome to Hoge!";
// UI.Get("Image1").SetActive(true);
// UI.Get("Image2").SetActive(false);
// list.Resize(++ListSize);
// });
// UI.Get<Button>("FugaButton").onClick.AddListener(() =>
// {
// welcomeText.text = "Welcome to Fuga!";
// UI.Get("Image1").SetActive(false);
// UI.Get("Image2").SetActive(true);
// list.Resize(--ListSize);
// });
}
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;
//ui.Get<Text>("ListText").text = string.Format("Piyo: {0}", 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とても便利です。
