Adobe XDと、AkyuiUnityというライブラリを用いて、効率よくゲームUIを構築する方法を紹介します。 個人開発からチーム開発まで、あらゆる開発規模で効率化を図ることが出来ます。 [講演動画](https://www.youtube.com/watch?v=jTPrI3DGR5A) --- Gotanda.unity #17の発表資料です。 https://meetup.unity3d.jp/jp/events/1279

1. Adobe XDを使うと、
きゅぶんず (@kyubuns)
こんなに効率よく
ゲームUIが作れちゃうの！？
Gotanda.unity #17

2. 話すこと
✕ キレイなUIをデザインする方法
✕ UI制御プログラムのキレイな書き方
⃝ 頭に思い浮かんだUIを素早くUnity上で表示させる方法
⃝ UIを試して変えてのサイクルを高速化する方法
この早さこそが効率の良さ！

3. 個人開発から
大規模チーム開発まで
全員にオススメ

4. Adobe XD
• Adobe製のUI/UXデザインツール。プロトタイピングツールとも。
• https://www.adobe.com/jp/products/xd.html
• つまり何？
• UIを作るために作られたツール。

5. でもAdobe XDって・・・
• 高いんでしょう？
• 無料プランあります。
• macOSでは動かないんじゃ？
• WindowsでもmacOSでも動きます。

6. AkyuiUnity.Xd
• MITライセンスで使える XD -> Unity 変換ライブラリ
• https://github.com/kyubuns/AkyuiUnity/

7. ボタンはもちろん、スクロールリストなんかも再現可能。
（このサンプルはAkyuiUnityのリポジトリに含まれています。）

8. 実演 / Adobe XDを使ってみる
• 画面レイアウトを作るために作られたツールなので、
直感的で素早くUI構築が出来る
• 全部の画面をまとめて見れるし、遷移の確認も出来る、
その上モバイルプレビューも出来るので、
Unityに取り込むまでもなく画面の確認が出来る

9. 実演 / Unityに取り込む
• ドラッグ&ドロップするだけでXDファイルをUnityに持っていける
• 「やっぱりここ変えよう！」となっても、
XD上で編集してボタン1つ押すだけ

10. AnKuchen
• 生成されたPrefabをどうやって扱うかの一例として、
オススメライブラリの紹介
• Scriptから文字列指定でGameObject, Componentを取ってこれる

11. スクリプトとの繋ぎ込み例
[SerializeField] private UICache uiCache;
public void Start()
{
uiCache.Get<Text>("HogeText").text = "Hello!";
uiCache.Get<Button>("HogeButton").onClick.AddListener(() => Debug.Log("Click Button”));
}
GameObject.Findと違い、キャッシュされているので十分に早い。
transform.Findと違い、どの階層にHogeText, HogeButtonがあっても取ってこれる。

12. VisualScripting(Unity2021) との繋ぎ込み例

13. おまけ
[SerializeField] private UICache uiCache;
public void Start()
{
var hogeUi = new HogeUiElements(uiCache);
hogeUi.Text.text = "Hello!";
hogeUi.Button.onClick
.AddListener(() => Debug.Log("Click Button"));
}
public class HogeUiElements : IMappedObject
{
public IMapper Mapper { get; private set; }
public Text Text { get; private set; }
public Button Button { get; private set; }
public HogeUiElements(IMapper mapper)
{
Initialize(mapper);
}
public void Initialize(IMapper mapper)
{
Mapper = mapper;
Text = mapper.Get<Text>("HogeText");
Button = mapper.Get<Button>("HogeButton");
}
}
型が付いている状態で
UI制御のコードが書ける！
テストも走らせれる！

14. 実現出来ること
• 画面を素早く作って素早くUnityに持っていって試せる！
• 変更したい箇所が出てきても、XD上で編集したらボタン1個で反映。
開発サイクルを高速化できる！
• 例 : プランナーが仮素材で必要な要素をXD上で作っておけば、
プログラムの組み込みと、デザイン作業が並列で出来る

15. Adobe XDを使うと、
こんなに効率よく
ゲームUIが作れちゃう！

16. もっと知りたい方はこちら！
https://www.youtube.com/watch?v=bJC9ueWZp28

17. ご清聴
ありがとう
ございました。
## AkyuiUnity ☆13
1
Adobe XD to Unit
y
github.com/kyubuns/AkyuiUnity
## AnKuchen ☆4
1
Control UI Prefab from Script Librar
y
github.com/kyubuns/AnKuchen
## AnimeTask ☆9
6
Task Animation Library for Unit
y
github.com/kyubuns/AnimeTask
## Auto9Slicer ☆7
7
Auto 9 slice sprite generator on Unit
y
github.com/kyubuns/Auto9Slicer
## Baum2 ☆21
8
Photoshop(psd) to Unit
y
github.com/kyubuns/Baum2
良いなと思ったら、ぜひStarをお願いします！
kyubuns.dev