メニュー

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

eyecatch_unity

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

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

[card2 id=”17346″ target=”_blank”]

目次

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

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

[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とても便利です。

全記事一覧

  • URLをコピーしました!

Unityに関する参考記事・ツール・書籍のまとめ

Unityの参考書籍

著:北村 愛実
¥2,970 (2023/01/14 00:41時点 | Amazon調べ)
著:吉谷幹人, 著:布留川英一, 著:一條貴彰, 著:西森丈俊, 著:藤岡裕吾, 著:室星亮太, 著:車谷勇人, 著:湊新平, 著:土屋つかさ, 著:黒河優介, 著:中村優一, 著:牙竜, 著:コポコポ, 著:かせ, 著:hataken, 著:monmoko
¥4,400 (2023/01/14 00:41時点 | Amazon調べ)
著:森哲哉, 著:布留川英一, 著:西森丈俊, 著:車谷勇人, 著:一條貴彰, 著:打田恭平, 著:轟昂, 著:室星亮太, 著:井本大登, 著:細田翔, 著:西岡陽, 著:平井佑樹, 著:コポコポ, 著:すいみん, 著:Maruton, 著:karukaru, 著:ハダシA, 著:notargs, 著:EIKI`, 著:おれんじりりぃ, 著:黒河優介, 著:中村優一, 著:藤岡裕吾
¥8,151 (2023/01/14 00:41時点 | Amazon調べ)
ボーンデジタル
¥5,060 (2023/01/14 00:41時点 | Amazon調べ)
技術評論社
¥4,620 (2023/01/14 20:57時点 | Amazon調べ)

Unityの人気アセット

目次