Gotanda.unity #13 in CyberAgent@渋谷 https://gotanda-unity.connpass.com/event/134867/ 登壇者：御厨

1. UnityでUI開発を高速化した件
御厨 雄輝
2019/07/24 Gotanda.unity #13

2. 話すこと
• 自己紹介
• Kick-Flight
• UI開発高速化のために行ったこと（3点）

3. 自己紹介
御厨 雄輝（みくりや ゆうき）
株式会社サイバーエージェント
2013年度入社
エンジニア
▼趣味
地下アイドル
ボルダリング
ポケモンカード

5. Kick-Flight

6. UI開発高速化のために行ったこと
Q. なぜ高速化した？

7. UI開発高速化のために行ったこと
TGS
2018
闘会議
2019
CBT
2018/09 2019/01 2019/05

8. UI開発高速化のために行ったこと
TGS
2018
闘会議
2019
CBT
2018/09 2019/01 2019/05
インゲーム 新キャラ サーバ

9. UI開発高速化のために行ったこと
A. 高速化しないと間に合わない
（ゲームの面白さを伝える部分の開発に比重をおいていた）

10. UI開発高速化のために行ったこと
Q. 何をした？

11. UI開発高速化のために行ったこと
A1. UI基盤機能を作る

12. UI開発高速化のために行ったこと
Unityのデフォルト機能で補えないもの

13. UI基盤機能を作る
▼要件が不明でも必須なもの
• 画面遷移
• 画面
• ダイアログ
• ボタン
▼要件によって必要なもの
• ドラッグアンドドロップ
• グリッドスクローラー（列、行）
• スナップスクローラー（iOSホーム画面）
• etc

14. UI基盤機能を作る
▼画面設計方針
• 画面用ライフサイクルを作る
• 画面遷移マネージャで各処理を呼ぶ
▼移動前画面
OnDisableStart
OnDisableCoroutine
OnDisableEnd
▼移動後画面
OnEnableStart
OnEnableCoroutine
OnEnableEnd
遷移

15. UI基盤機能を作る
▼ダイアログ設計方針
• ダイアログ用ライフサイクルを作る
• ダイアログマネージャで各処理を呼ぶ
▼ダイアログ
OnCreate
OnOpen
OnClose
開く
閉じる

16. UI基盤機能を作る
▼ボタン設計方針
• イベント用のインターフェースを実装
• タッチ、リリース、クリック、長押しを実装
• 外から処理を設定し使用する
• アニメーション、SEは継承クラスで実装
▼ボタン
IPointerClickHandler
IPointerDownHandler
IPointerUpHandler
Update(LongPress)

17. UI基盤機能を作る
▼意識すべきこと
• プロジェクト固有化しない
• サードパーティ製のアセットありきにしない
→ 別案件でも展開できるくらいの深さ(余計なものを作らない)
→ それより先は継承して作る

18. UI開発高速化のために行ったこと
A2. デザインのレギュレーション
を決める

19. デザインのレギュレーションを決める
有象無象なUIデザインが生まれると
有象無象なUI実装が生まれる

20. デザインのレギュレーションを決める

21. デザインのレギュレーションを決める
▼デザイナに伝えたUnityのあれこれ
• 9Slice
• Color（乗算）
• SpriteAtlas
• Mask

22. デザインのレギュレーションを決める
▼9Slice
• ImageのSlice機能を用いて余計な画像を作ってしま
うロスを減らす
• エンジニアがどの素材を使えばいいか悩むロスを減
らす

23. デザインのレギュレーションを決める
▼Color（乗算）
• 白色画像に色をのせてUIをつくり余計な画像を作っ
てしまうロスを減らす
• プログラムで色を定義することで素材作成でのミス
を減らす

24. デザインのレギュレーションを決める
▼SpriteAtlas
• パフォーマンス観点で無限に画像素材を増やしたくない理由
の説明（ドローコール、メモリ）
• レギュレーションの指標にする
→ まとめることができるところをまとめる

25. デザインのレギュレーションを決める
▼Mask
• パフォーマンス観点で修正される可能性のある多用した
くない表現の説明
• Maskを使わない素材の作り方
はじめからMaskされた素材を使う フレームをのせてMaskを使用しないデザインにする

26. UI開発高速化のために行ったこと
A3. レギュレーションをもとに
Prefab化

27. レギュレーションをもとにPrefab化
▼本件に必要だったもの
• ダイアログ
• ボタン
• サムネイル

28. レギュレーションをもとにPrefab化
レイアウトさせる箇所を減らす
（エンジニア、デザイナ問わず）

29. レギュレーションをもとにPrefab化
Nested Prefabでやりやすくなった

30. レギュレーションをもとにPrefab化

31. レギュレーションをもとにPrefab化
AnchorでPrefabを置いた親に合わせて
適切なレイアウトになるように設定する

32. レギュレーションをもとにPrefab化
AnchorでPrefabを置いた親に合わせて
適切なレイアウトになるように設定する

33. レギュレーションをもとにPrefab化
AnchorでPrefabを置いた親に合わせて
適切なレイアウトになるように設定する

34. レギュレーションをもとにPrefab化

35. UI開発高速化のために行ったこと
▼まとめ
• UI基盤機能を作る
• デザインのレギュレーションを決める
• レギュレーションをもとにPrefab化

36. UI開発高速化のために行ったこと
▼まとめ
• UI基盤機能を作る
• デザインのレギュレーションを決める
• レギュレーションをもとにPrefab化
→ レイアウトするオブジェクトも
共通化することが重要

37. UI開発高速化のために行ったこと
▼まとめ
• UI基盤機能を作る
• デザインのレギュレーションを決める
• レギュレーションをもとにPrefab化
→ UIのレギュレーション整備は
UXに好影響

38. ありがとうございました！