【Unity】AdobeXDで作成したカンプをUnityへコンバートする方法

unity-convert-adobexd-to-unity

Unity #2 Advent Calendar 2018 10日目の記事です。

普段はさまざまなDCCツール(Digital Content Creationの略。PhotoshopとかMaya等のツール)を扱っているので、今回はその経験を活かした「AdobeXDでデザインしたカンプ(完成見本図)をUnityへ自動でコンバートする方法」を紹介します。

AdobeXDって?

2017年に正式版がリリースとなったソフトです。

Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。

と書かれている通り、Adobeの新しいソフトで、軽量で直感的で、一度体験してしまうとPhotoshopやIllustratorでの作業がストレスに感じでしまいます。

そしてAdobeXDは正確な設計ができ、またシンボルで適切な素材管理をしつつ、プロトタイピングやUIアニメーションまで作成できて、さらには機械的に仕様書まで出力できるので、とても重宝しています。

AdobeXDの使い方の一例紹介

ゲームのUIを作成する時はたとえばこんな使い方が想定できます。

  1. 仕様書を元にワイヤーフレーム(画面設計図)やプロトタイピング(試作)を作成。(※AdobeXDを使うと早い)

  2. ワイヤーフレームを元にIllustrator(以下AI)やPhotoshop(以下PS)を使って素材を作成。(※フラットデザインであればXDですが、UIを作り込む場合は、XDでは厳しいのでPSやAIで作成します)

  3. AdobeXD(以下XD)へ素材を配置して、デザインカンプを作成(完成見本図)(※Creative Cloudライブラリを活用するとAdobeXDと常に素材リンクできて便利です)

  4. AdobeXDでUIに関する仕様書を自動出力(※端末でも遷移を確認できる「公開プロトタイプ」や要素の詳細な情報を調べることができる「デザインスペック」などの機能があります)

今回の目的

DCCツールで作成したデザインカンプをUnityへ反映する場合、

  1. カンプを元に、Unityで一から画面を作成する
  2. 作成されたデータをExtendScriptなどで作られたコンバートツールで移植する
  3. 1と2の複合

の主にだいたい3種類の方法があると思っています。

非常に長くなるので割愛しますが、1、2、3それぞれメリット・デメリットがあって、状況や環境に応じて使い分けるしかないです。(デザインも実装も全て一人が担当すれば移植問題は解消されるのですが…)

今回はデザイナーとしてはXDを活用してデザイン(設計)して、そしてデータのままの状態でUnityへ移植したい!という目的で、2の方法をチャレンジしてみます。

ワークフロー

簡潔に説明するとAdobeXDで作成したデータをPhotoshopへ持っていき、そこから変換ツールでUnityへコンバートする方法を考えております。

しかし残念ながらAdobeXDには、UnityやPhotoshopへデータ移植できるような出力機能は今の所ないです!(※逆のPSDデータをAdobeXDで直接読み込むことは可能です)

そこで最新(2018.10)のAdobeXDでアップデートされたAfterEffects(以下AE)の出力機能を活用してみます。

想定手順

1. XDのデータをAEへコンバート

2. AEのデータをPSへコンバート

3. PSのデータをUnityへコンバート

UI素材を作るところから使うツールを数えると

Illustrator▶Photoshop▶AdobeXD▶AfterEffects▶Unity

ですね…多い^^;

でもやってみると機能をポチポチしていくだけなので、非常に簡単です。

DCCツール駆使してUnityへコンバートする方法

前提

PSやAIでUI素材を作成して、XDで素材を配置して、カンプ(完成見本図)ができている状態から説明します。

AdobeXD ▶ AfterEffectsへ変換

  • 書き出したいアートボードまたはパーツを選択

  • ファイル(Windowsならハンバーガーメニュー)>書き出し>AfterEffects…を押す

  • AfterEffectsが起動して、コンバートされた状態のコンポジションが作成されます。素材も全て格納済み。

※ここで注意したいのが、AfterEffectsのバージョンがCC2018以降が良いです。古いバージョンはXDでの書き出しがそもそも実行できない可能性があります。

※AEの時点では、パスはほとんどシェイプに変換されている状態です。

AfterEffects ▶ Photoshopへ変換

  • コンポジション>フレームを保存>Photoshopレイヤー…を押してPSDで書き出します。

出力されたPSDはもちろんピクセルで出力されてしまいますが、PSで編集はする気はないのそのまま突き進みます。

Photoshop ▶ Unityへ変換

変換方法ですがPS▶Unityのコンバートツールは色々あるのですが、今回は、以前紹介させていただいた@kyubunsさんの「Baum2」でコンバートします。

Baum2の使い方

GitHubからデータをダウンロード(UnityのアセットとPhotoshopのスクリプトが格納されています)

②Unityで.unitypackageを展開

③Photoshopで先のPSDを開いて、スクリプト(Baum.js)を実行。

詳しいやり方はこちらの記事を参考!

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

Unityで確認

PSDを開いたら、データ整理などせずに、即Baum2を実行して(出力先はImportフォルダ)Unityへコンバートしてしまいます。

Prefabが生成されたことを確認したら、uGUIのCanvasを設置してPrehfabを入れて確認します。

ちゃんと移植できていることを確認したら、あとはデータの整理や素材の最適化をします。

ツールを通しているので、正確にデザイン通りコンバートできているはずです。(※システムフォントだけは微妙にずれることもあります)

まとめ

Unityほとんど出てこないじゃん!と突っ込まれそうですが、実は今回は「デザイナーがUnityを一切触れない/触らせてくれない場合」を想定しています。

エンジニアにはデザインカンプ通りにUnityでUIを作成して欲しいし、そもそもデザイナー側も正確なデザイン(設計)に基づいたデータ作成を目指したい。

ということで、AdobeXDの特徴を生かしたデザインをしつつ、そのデータをそのままUnityへ機械的に移植するアプローチを力技ですが考えてみました。

※もちろんそんな面倒なツールの経由をせずにAdobeXD▶Unityの拡張機能を作る方が良いのですが…

ちなみにAdobeXDからPSDへのエクスポートの機能実装のリクエストがあるので是非投票しましょう!(この機能があると今回のフローがもっとシンプルになります)

Export to Photoshop / PSD format

明日は ritsukaさんの記事になります。