はじめに
これは、Adobe XDからPrefabを自動生成できるライブラリAkyuiUnityをオススメする際に、
「そもそもUIをAdobe XDで作れると何が嬉しいの？」と聞かれた時用の記事です。
この記事では「デザイナーさん」と「プログラマーさん」という2人の登場人物が出てきます。
個人または少人数の開発で、これらを1人でやっている人も多いでしょう。
それでも、この2つの作業を頭の切替なしに出来るとは思いません。
そのため、ここでは「デザイナーさん」と「プログラマーさん」の2人がいるという体で話を進めます。
また、今回作ったライブラリがAdobe XD用なのでAdobe XDと書いてますが、特にXDに限った話ではないのでsketchでもPhotoshopでも適当に読み替えてください。
今まで
これら2人のよくあるワークフローを見てみましょう。
[1] デザイナーさん：どういう画面にするか構成を考える（UXを考えるというやつ）
↓
[2] デザイナーさん：必要な画像素材を作る（Photoshopとか）
↓
[3] デザイナーさん：配置して画面イメージを作る（Adobe XDとか）
↓
[4] みんな：「これでいこう！」ってなる
↓
[5] デザイナーさん or プログラマーさん：3を元に、2の素材をUnity上で配置する
↓
[6] プログラマーさん : コーディングしてUIと機能を繋ぎこむ
そもそも、[3]のステップを既にやっているチームでは[5]が飛ばせる。という理由だけで十分でしょう。
ここからは「[3]のステップいる？直接Unityで作ればいいじゃん。」って方向けです。
本題。なぜ嬉しいのか
なぜUnityではなくAdobe XDで画面イメージが作れると嬉しいのか。
答えはめちゃくちゃ単純で、UnityEditorは、UIデザインをするのは向いてない/事故りやすいからです。
そして、Adobe XDは画面レイアウトを作るために作られたツールで、機能が必要最小限に絞られていて使いやすく確認しやすいからです。
餅は餅屋ってやつですね。
具体的な問題
- 画像を1個配置するにも、どこのディレクトリに入れて、圧縮設定はどうするか、とか考えないといけない
- 自動化することも出来ますが、それでも画像を使わなくなった場合の削除処理とかは結構ややこしいことになります
- もう使ってない素材がSpriteAtlasに入ってるとか、SpriteAtlasに入れ忘れたとかあるある
- うっかりUIでは使ってはいけないフォントやスプライトへの参照を握ってしまい、AssetBundleがでかくなる
- 素材を組み込むとき、必要以上に大きな素材サイズのまま入れてしまう事故がよくある
- 素材を作る時点では大きく表示する予定だったが、レイアウト調整により小さくすることになった素材とか
- テクスチャ節約のために9SliceSpriteにして！とかも人間がやる作業じゃない
などなど、Unityは色んなことが出来ますが、機能が多いが故の事故も起こりがちです。
まとめ
Adobe XDからPrefabを自動生成できるAkyuiUnity、ぜひ使いましょう。
まあまだPreview版なんですけど。
- Adobe XDなら、そのままリアルタイムでデバイスでプレビューしたり出来るし便利
- うっかり変なスプライトに参照する事故がなくなる
- 素材のインポートもスクリプトで制御出来るので、無駄にデカイサイズになったりする事故が起きない
ところで
一度作ったUI Prefab、仕様変更とかなんだとかで更新する、というのはよくあることです。
その時、「あー！SerializeFieldの参照が剥がれた！！」みたいな事故、よくありませんか？
Prefab、直接人間がいじるとこれまた事故りがちです。
そんな需要に答えて作ったのがAnKuchen。
これを使うと、スクリプトから
var hogeButton = root.Get<Button>("HogeButton");
と呼び出すことで、対象のPrefab内のどの階層にHogeButtonがあっても取ってくることが出来ます。
ぜひ合わせてご検討ください。
