アートボードに配置されたノードの情報をもとにuGUIのプレハブを自動生成するツールを作りました。
環境
Unity 2018.3以降 （プレハブの仕組みが変わったため）
.Net 4.x
AdobeXD 14.0
リポジトリ
AdobeXDからプレハブ生成用の中間ファイルを出力するためのプラグイン
XDA Exporter
中間ファイルからUnityのプレハブを作り出すツール
Xd2uGUI
概要
AdobeXDでゲームのUIのモックを作ってから実際にUnityで作り始めるのは完成系が早い段階で見えるという点で非常に有効です。
しかし、デザイナーが作ったモックからUnityのプレハブをまた一から作る作業は非常に面倒な上に結構工数とられます。
当時、PSDからuGUIのプレハブを自動生成するツールはあったのですが、AdobeXDから生成するツールはなかったので自作にいたりました。
同じく、AdobeXDからプレハブを生成するitouh2-i0plusさんの以下の記事があります。
https://qiita.com/itouh2-i0plus/items/6a948aa40acada879ce7
こちらの記事のプラグインはBaum2用に作られているのに対して、Xd2uGUIはプレハブを作るツールでしかなく、UIの実装には全く依存しないというメリットがあります。
使い方手順
- プラグインをインストールする
- Unity側に画像素材をあらかじめ入れておく
- AdobeXDのアートボードをXDAファイルとして出力する
- XDAからプレハブを生成する。
Unity、AdobeXDのプラグインをインストールする
Xd2uGUIのインストール
こちらからリポジトリにとぶ
Unityを開いた状態でダウンロードしたファイルを開くと以下のポップアップがでるのでInstallしたら完了です。
エラーが出た場合はUnityの環境を確認してみてください。
XDA Exporterのインストール
ない場合はAdobeXDのバージョンを確認してみてください。
Unity側に画像素材をあらかじめ入れておく
Xd2uGUIで画像の出力はしないので、自分であらかじめUnityにインポートします。
画像ファイルの場所はどこでも大丈夫ですが、画像名とAdobeXDのノード名は一致させてください。
Imageとして使うので形式はSpriteにしておきます。
AdobeXDのアートボードをXDAファイルとして出力する
アートボード内のノードを選択し、プラグイン > Export XDAで出力できます。
XDAからプレハブを生成する。
Xd2uGUIが入っていればUnityにインポートするだけで隣にプレハブが生成されます。
手動で生成したい場合にはReimportします。
まとめ
デフォルトでは非常にシンプルな生成ロジックになっています。
生成ロジックはカスタマイズ可能なので、より正確に生成されるようにしたりTextMeshProで生成できるようにするなどぜひぜひ拡張してみてください！
(プルリクしていただけるととても嬉しいです)