【Unity】psdデータからuGUIにコンバートする方法

psd-to-ugui

psdデータからuGUIにコンバートするアセットはストアに幾つかあるのですが、

無料なのと、以前自動で9スライスされるOnionRingも良かったので、Baum2を試してみました。

www.cg-method.com

スポンサーリンク

参考&データダウンロード

[Unity] psdからUIを作るライブラリ"Baum2"公開しました – Qiita

GitHub – kyubuns/Baum2: Psd to Unity UI(uGUI)

データをダウンロードします。

スポンサーリンク

環境構築

  • PhotoshopScriptごとC:\Program Files\Adobe\Adobe Photoshop CC <バージョン>\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)

f:id:min0124:20180114111254p:plain

Edit > Project Settings > Player

から Configuration>Scripting Runtime VersionをExperimental(.NET 4.6E quivalent)にしてUnityを再起動

これでエラーが無くなります。

参考

Unity2017 で .NET 4.6 (C# 6.0) を使う方法
Unity2017で.NET 4.6, C#6.0 を利用するための設定方法をまとめます。
スポンサーリンク

PhotoshopでUIの作成

f:id:min0124:20171021213247p:plain

命名規則

文字

Text(レイヤー)

→テキストレイヤーであればそのままテキストとして変換される

ボタン

○○Button(グループ)

→ボタンに変換される

ゲージ

○○Slider(グループ)

LFill

LBackground

→ゲージに変換される

スクロール+スクロールバー

○○List@Scroll=Vertical (+Areaの大きさのマスク)

LItem1

LItem2

LArea

L○○Scrollbar(グループ)

 LHandle

 LBackground

→スクロール(垂直)に変換される

除外

(レイヤー)→コメント(除外される)

フォントデータの格納

  • Assets\Baum2\Sample\Fontsにフォントを格納(BaumFontsの空データの場所)

フォントの拡張子が.ttfではない場合は、スクリプトか拡張子の命名を変更する

※フォントの格納場所にあわせてBaumFontsの場所を変更してやる

スポンサーリンク

Unityへコンバート

  • ファイル>スクリプト>BaumからAssets\Baum2\Importを指定して実行
スポンサーリンク

Unityで確認

f:id:min0124:20171021215702p:plain

  • Canvasを作成して、生成されたPSD名のPrefabを入れて確認

とくにエラーもなく一発でコンバート出来ました。

とくに大きいズレもなく、それぞれの機能も動作するので、いい感じです!

f:id:min0124:20171022003743g:plain

スクロールの挙動の確認方法

サンプルスクリプト(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とても便利です。

コメント