自分が本当に欲しかった AdobeXD to Unity 変換ライブラリ、AkyuiUnityを作りました

AkyuiUnity Akyui AdobeXD Release

github.com

AkyuiUnity、読み方は あきゅい ゆにてぃ です。

まえがき

「そもそもUIをAdobe XDで作れると何が嬉しいの？」という方は、こちらをお読みください。

「AdobeXDで作ったUIをUnityで使いたい！」と思い[Unity AdobeXD]でググると、たくさんのライブラリがヒットします。
検索に引っかかるもの全て試しましたが、気に入るものが無かったので自作することにしました。

自分は以前、Baum2というPhotoshop to Unity変換ライブラリを作っていたのですが、
運用していると様々な課題が見えてきたので、それらもAkyuiUnityでは全て解決しています。

AkyuiUnityの特徴

青字はBaum2との比較です。

インポートがUnityのみで完結する

  • XDファイルをドラッグ&ドロップするだけ。
    • インポートするために、わざわざAdobe XDを開く必要はありません。
  • 全てがUnity上で完結するため、CIなどに任せることも出来ます。
  • 一番のこだわりポイントで、Baum2の時の以下のような不満を解決しています。
    • デカイファイルになるとPhotoshopScriptが遅い。
    • layoutファイルとassetファイルが別々に出力されることでインポート手順が複雑化する。
    • いちいちPhotoshopを開くのがめんどくさい。

XDファイルの更新に追従できる

  • デザイナーはずっとAdobe XD上でUI制作を続けることが出来ます。
  • 差分だけをインポートするので、2回目以降のインポート時間は短縮されます。
  • ちょっと画像の位置をズラしただけなのに画像が全て再インポートされるので時間がかかる、ということが無くなりました。

ランタイムに関与しない

  • AkyuiUnityが行うのは、あくまでPrefabを作るだけでランタイム時には一切コストはかかりません。
  • Baum2でもPrefabを作るところだけ使いたい、という話があったのでランタイムは別ライブラリに切り分けました。

カスタマイズ性が高い

  • あなたのプロジェクトにあったPrefabを生成出来るように、簡単にトリガー(拡張スクリプト)を書くことが出来ます。
    • 例えば、以下のようなことはパッケージに含まれているトリガーで実現出来ます。
      • 素材を自動的に9SliceSpriteに変換し、テクスチャを節約する。
      • uGUIのTextではなく、TextMeshProを使う。
      • XDファイル上で特定の名前のオブジェクトはUnityに変換しない。
  • 以前は直接ライブラリ内のコードを変更する必要がありましたが、外部から差し込めるようになり、アップデートにも対応出来るようになりました。

このように、本当に欲しかった AdobeXD to Unity 変換ライブラリとなっています。

使い方

github.com

Akyuiの夢

実はこのAdobeXD to Unityは、Akyuiのほんの一部分でしかありません。
そもそもAkyuiとは、UIレイアウト定義ファイルのフォーマットの名前です。
AkyuiUnity.Xdが何をしているかというと、XDファイルからAkyuiファイルを生成し、AkyuiファイルからUnityPrefabを生成しています。
これにより可能になることは、

  • Sketchが使いたくなった時は「SketchファイルからAkyuiファイルを生成する」部分さえ書けば、AkyuiファイルからUnityPrefabを生成する部分が使い回せる。
  • やっぱりUnityはやめてUE4を使いたくなった時は「AkyuiファイルからUE4に持っていく」部分さえ書けば、XDファイルからAkyuiファイルを生成する部分は使い回せる。

というように、一度Akyuiファイルを経由することで色んなツールから色んなツールにUI定義を持っていける。というのをゴールとしています。

少なくとも当分の間はXD to Unityをメインにメンテナンスしていくのでそこはご心配なく。