Download as PDF, PPTX
![スクリプトとの繋ぎ込み例
[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があっても取ってこれる。](https://image.slidesharecdn.com/gotanda-210320185137/85/Adobe-XD-UI-11-320.jpg)
![おまけ
[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制御のコードが書ける！
テストも走らせれる！](https://image.slidesharecdn.com/gotanda-210320185137/85/Adobe-XD-UI-13-320.jpg)
Uploaded bykyu buns
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの！？
Adobe XDと、AkyuiUnityというライブラリを用いて、効率よくゲームUIを構築する方法を紹介します。 個人開発からチーム開発まで、あらゆる開発規模で効率化を図ることが出来ます。 [講演動画](https://www.youtube.com/watch?v=jTPrI3DGR5A) --- Gotanda.unity #17の発表資料です。 https://meetup.unity3d.jp/jp/events/1279
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの！？
- 1.
- 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.
- 8. 実演 / AdobeXDを使ってみる • 画面レイアウトを作るために作られたツールなので、 直感的で素早くUI構築が出来る • 全部の画面をまとめて見れるし、遷移の確認も出来る、 その上モバイルプレビューも出来るので、 Unityに取り込むまでもなく画面の確認が出来る
- 9. 実演 / Unityに取り込む •ドラッグ&ドロップするだけでXDファイルをUnityに持っていける • 「やっぱりここ変えよう！」となっても、 XD上で編集してボタン1つ押すだけ
- 10.
- 11. スクリプトとの繋ぎ込み例 [SerializeField] private UICacheuiCache; 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.
- 13. おまけ [SerializeField] private UICacheuiCache; 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.
- 16.
- 17. ご清聴 ありがとう ございました。 ## AkyuiUnity ☆13 1 AdobeXD 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