Amazonで商品を見るセール会場へ

UnityでPSDをuGUIへ変換するBaum2の使い方【旧版保守】

Baum2は、PhotoshopのPSDから中間ファイルと画像を書き出し、UnityのuGUI用Prefabを生成するツールです。

既存のBaum2案件を保守する人向けに、導入、命名、フォント、生成結果の確認を整理します。

対応版:開発者が動作環境として挙げているのはUnity 2017/2018/2019、Photoshop CC 2018/2019です。

追加機能の更新予定はないと説明されています。

Unity 6での導入・動作はこの記事では再検証していません。

旧プロジェクトはコピーを作ってから確認してください。

Baum2の配布元・README

目次

Baum2でできることと記事の対象

  • PSDの画像・文字・グループをuGUI用の階層へ変換する。変換対象はuGUIで、UI ToolkitのUXMLではありません。
  • レイヤー/グループ名からButton、Slider、Scrollbar、Listなどを判別する。ボタンを押した後の処理は別途設定します。
  • 出力後は文字、サイズ、アンカー、操作を確認する。PSDとすべて同じ表示になる保証や、未測定の工数削減率は示しません。
スポンサーリンク

1. 配布ファイルを保存し、旧環境へ導入する

取得したリポジトリの版を記録し、PhotoshopScript内のBaum.jsと、配布されているBaum2.unitypackageを使います。

READMEの表記とメニュー名は配布版に合わせて確認してください。

Photoshop側の配置

Baum.jsを使用中のPhotoshopのPresets/Scriptsへ配置します。

次は旧CC 2017でのパス例で、CC 2018/2019などでは製品フォルダ名が異なります。

Photoshopがスクリプトを認識しない場合は再起動し、ファイルの場所を確認します。

C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts

Unity側の配置

作業用コピーを開き、Assets → Import Package → Custom PackageからBaum2.unitypackageを取り込みます。

まずConsoleの最初のエラーを確認し、コンパイルが通るまではPSDの取り込みへ進みません。

旧UnityでCS1644が出る場合

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# 4.0として処理できないことを示します。

旧版の対応例はEdit → Project Settings → Player → Other Settings → Scripting Runtime Versionで.NET 4.6相当へ切り替え、再起動する方法です。

次の画像は旧設定画面で、Unity 6で同じ項目を探す手順ではありません。

別のエラーにこの対処を一律に適用しないでください。

Scripting Runtime Versionの設定

2. PSDの命名とフォントを準備する

PhotoshopでのUI作成
  • テキストレイヤー:取り込み側のコードはUnityEngine.UI.Textを生成します。TextMeshProへの自動変換ではありません。
  • ボタン:グループ名の末尾をButtonにする。操作後の処理や押せる範囲はUnity側で確認します。
  • スライダー:末尾がSliderのグループにFillを含める。ScrollbarはHandleを含める。
  • リスト:List@Scroll=VerticalなどのグループにItem1/Item2等の項目と表示範囲を用意する。
  • 変換しない要素:名前の先頭を半角の#にする。

リストの表示範囲は、確認した取り込みコードでは子の画像要素Areaを検索します。

単に「Mask」という名前へ変更すると同じ結果になるとは限りません。

使用版のSamplePsdとコードを合わせ、Area not foundが出たら配置と名前を先に確認します。

ListElementの処理

非表示にしたレイヤーも、書き出しから除外されるとは限りません。

確認したBaum.jsは、複製した文書の非表示レイヤーを表示状態へ戻して処理します。

書き出したくない要素は、名前の先頭に半角の#を付ける方法を使ってください。

元PSDの表示状態だけで判断せず、出力した画像とPrefabの階層も確認します。

フォントが見つからない場合

PSDで使うフォントは、目印ファイルBaumFontsのあるディレクトリへ配置します。

「Assets/Baum2/Sample/Fonts」固定ではありません。

確認したGetFontの実装は、PSDから記録されたフォント名をファイル名として.ttf、続いて.otfを探します。

名前と配置、利用できるフォントファイルであることを確認してください。

拡張子だけの変更は形式変換になりません。

フォントの利用条件も確認します。

フォントの検索処理

3. 書き出してPrefabを確認する

  1. Photoshopのファイル → スクリプトからBaumを実行し、中間ファイルの出力先をUnityプロジェクトのAssets/Baum2/Importへ指定する。
  2. Unityへ戻り、Consoleにエラーがないか確認する。生成先はBaumPrefabsという目印ファイルのあるディレクトリ。
  3. PSD名に対応するPrefabをCanvasの子へ置き、基準解像度で画像・文字・階層を照合する。
  4. Gameビューの解像度を変えて表示を確認し、Playモードでボタン・スクロールの操作とスライダーの値表示を確認する。確認した生成コードはSliderのinteractableをfalseにするため、そのままドラッグできるとは限りません。
Unityでの確認

取り込みコードの配置先判定はBaumFonts/BaumPrefabs等の目印ファイルを使います。

移動した場合は目印の有無と重複を確認してください。

再書き出しは既存Prefabを更新するため、手動調整した箇所の差分を保存してから実行します。

配置先を探す処理

書き出し後のcomplete!表示だけでは、ファイルが生成されたと判断できません。

確認したBaum.jsには、保存先の選択をキャンセルした後も完了表示へ進む処理があります。

出力先に今回の中間ファイルと画像が生成されているか、更新日時も含めて確認してください。

続いてUnityのConsoleと生成Prefabを確認し、以前の出力を取り違えないようにします。

PSDのサイズが変わる場合

確認したBaum.jsは内部の版表記が0.6.1で、maxLength = 1334の設定があります。

大きなPSDを元の寸法のまま出力すると想定せず、元PSDと出力画像の寸法を比較してください。

変更するときはスクリプトを複製し、変えた値と出力結果を記録します。

書き出しスクリプト

幅と高さのうち長い辺が1334を超えると、縦横の比率を保って長辺を1334へ縮小する処理です。

例えば2668×1334なら、縮小処理だけを計算すると1334×667になります。

これはコードからの計算例で、Photoshopでの書き出し実測値ではありません。

4. 既存のスクロール確認コードを使う

次は既存記事の確認用コードです。

こちらでUnityを実行して確認した新しいサンプルではありません。

Canvas側のオブジェクトにuiTest.csを付け、UIPrefabへ生成Prefabを指定する構成を想定しています。

List/Scrollbar/Sliderという取得名、Item1/Item2という項目名を生成物と合わせます。

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

リストが見つからない、スライダーでNullReferenceExceptionが出る場合は、コードで取得する名前とPrefabの名前・階層・コンポーネントを照合します。

リストだけを試す場合はSliderSampleへの呼び出しを外すなど、機能を分けて切り分けてください。

この例のスライダーはUpdateで毎フレーム値を書き換える表示テストです。

手動操作を試す場合はこの自動更新を外し、生成物のInteractable、クリックを受けるGraphic、EventSystemも確認します。

動作確認

出力先を固定する既存コード

毎回のフォルダ選択を省く旧記事の例です。

まず選択式で書き出しが通ることを確認し、変更前のBaum.jsを保存します。

this.saveFolder = Folder.selectDialog("保存先フォルダの選択");

以下のDドライブのパスは例です。

実在する作業用プロジェクトのImportフォルダへ置き換え、JavaScript文字列内のバックスラッシュを二重にします。

確認したBaum.jsはsaveFolderを文字列と連結して使うため、文字列への変更自体を不具合とは判断していません。

Photoshop上の実行は未検証です。

this.saveFolder = "D:\\Baum2-master\\Unity\\Assets\\Baum2\\Import";

変換できないときの確認順

  • Prefabがない:Consoleのコンパイルエラー → 中間ファイル → Importフォルダ → BaumPrefabsの順で確認する。
  • 文字がない:BaumFonts、フォント名、.ttf/.otf、収録文字を確認する。
  • リストがない:Listの命名、Itemの構成、Areaの画像要素を確認する。
  • 表示がずれる:元PSDと出力寸法、Canvas Scaler、RectTransform、文字の改行を比較する。
  • 再取り込みで調整が消えた:バックアップとの差分を確認し、元PSDでの修正とUnity側の追加処理を分ける。

XDからの移行は別の記事で扱います。

2D PSD ImporterによるSprite/キャラクター用Prefabと、Baum2のuGUI変換は出力の目的が異なります。

スポンサーリンク

関連するUnityの記事

2026年10月25日に配布元READMEと公開ソースを再確認しました。

掲載された旧画像・GIFと既存コードを残しています。

Photoshopの書き出し、Unityへの導入、画面の再現は今回未実施です。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Unityのおすすめ書籍

開発PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次