【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を再起動

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

参考

https://gamegame-game.com/archives/unity-settings-cs6

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);
        }
    }
}

感想

はじめて使った当初はすごく便利に感じたのですが、

慣れてくるともっとこうしたいなという改善点はでてくるもので、

いつか自分でコンバートツールを作成したいと思っています。