[Unity] Presetでちょっぴり楽するUI組み立て / Assemble the UI using Preset

by lycoris102

Slide 1

Slide 1 text

Unity UIエンジニアリング勉強会 LT枠青木とと@lycoris102 Presetで楽する UI組み立てちょっぴり

Slide 2

Slide 2 text

だれ？ 2 @lycoris102 青木ととねんれい:29 しごと: 株式会社キッズスターかぞく: 妻と3歳の息子・Unityアンバサダー・Gotanda.unity ・UnityDesigner’sCafe ・勉強会主催/サポート・ゆるふわゲームクリエイター

Slide 3

Slide 3 text

だれ？ 3 #unity1week でゲームを作るのも好きです https://unityroom.com/users/lycoris102

Slide 4

Slide 4 text

4 Preset Presetについて今日のお題 Unity2018でリリースされた機能です

Slide 5

Slide 5 text

5 Presetについてコンポーネントの設定を保存できるコンポーネント右上のアイコンを選択し Select Preset Window を開いて [Save current to…] 導線から現状の設定を保存できる

Slide 6

Slide 6 text

6 Presetについて保存したPresetをコンポーネントに適応できる

Slide 7

Slide 7 text

7 Presetについてアセットの設定も保存/適応できる

Slide 8

Slide 8 text

8 Presetについて ProjectSettingsも保存/適応できる設定配布したり、ビルド試す前にバックアップ取ったり、なんか色々使えそう

Slide 9

Slide 9 text

9 Presetについて保存したPresetをデフォルト値に設定できる Presetを選択した状態で [Set as (ComponentName) Default]を適応

Slide 10

Slide 10 text

10 Presetについて保存したPresetをデフォルト値に設定できるデフォルト値に設定したPresetは自動的に適応される

Slide 11

Slide 11 text

11 Presetについて保存したPresetをデフォルト値に設定できるデフォルト値は ProjectSettings -> PresetManager で確認できる

Slide 12

Slide 12 text

12 Presetについて保存したPresetをデフォルト値に設定できるただしHierarchy/Menu経由でCreateした場合にデフォルト値が適応されないので注意が必要明示的にPresetを適当するかResetする必要がある

Slide 13

Slide 13 text

13 Presetについて保存したPresetをデフォルト値に設定できるただしHierarchy/Menu経由でCreateした場合にデフォルト値が適応されないので注意が必要 Unity2019.2 リリースノート uGUIオブジェクトをHierarchy/Menu経由で生成したときに default Presets を使用するよ！やったー！

Slide 14

Slide 14 text

14 Presetについて PresetをUI組み立てに適応できそうなパターンを見ていくぞ！

Slide 15

Slide 15 text

15 パターン(1) 予期しない当たり判定の無効化パターン(1) 予期しない当たり判定の無効化

Slide 16

Slide 16 text

16 パターン(1) 予期しない当たり判定の無効化クリックすると俺たちの冒険が始まる… このLTのために素材探してタイトル画面だけ作りました……

Slide 17

Slide 17 text

17 パターン(1) 予期しない当たり判定の無効化始まらない

Slide 18

Slide 18 text

18 パターン(1) 予期しない当たり判定の無効化 EventSystem下部から閲覧できるEventSystemビューから現在のPointerEventDataを確認することができる

Slide 19

Slide 19 text

19 パターン(1) 予期しない当たり判定の無効化犯人は前面に配置したFrame(枠)

Slide 20

Slide 20 text

20 パターン(1) 予期しない当たり判定の無効化 FrameのImageコンポーネントのraycastTarget = falseにしてようやく俺たちの冒険が始まる……

Slide 21

Slide 21 text

21 パターン(1) 予期しない当たり判定の無効化 FrameのImageコンポーネントのraycastTarget = falseにしてようやく俺たちの冒険が始まる…… raycastTargetに気遣って生きたくない！ Textコンポーネントでも結構やりがち

Slide 22

Slide 22 text

22 パターン(1) 予期しない当たり判定の無効化 Presetを使って解消する raycastTarget = false の状態にした Imageコンポーネント / TextコンポーネントのPresetを作ってデフォルト値に設定しておくプロジェクト作ったら最初にやりましょう！

Slide 23

Slide 23 text

23 パターン(2) デザインガイドラインを作るパターン(2) デザインガイドラインを作る

Slide 24

Slide 24 text

24 パターン(2) デザインガイドラインを用意するどういう場面でどういう文字設定にするか決まっていると迷わなくてよいし、アプリ全体で統一感が出る一覧できるSceneを作っておくと色々試せて良い

Slide 25

Slide 25 text

25 パターン(2) デザインガイドラインを用意するそれぞれのTypographyルールを Presetで用意するアプローチちょっと待ちな！ CanvasのSortOrder周りもこんな感じで定義しておくと良さそう

Slide 26

Slide 26 text

26 パターン(2) デザインガイドラインを用意する Preset Prefab 変更に追従できる様々なコンポーネント変更に追従できない単一コンポーネント責務が大きい責務が小さい既に配置したものに反映できない配置済みのものに一括反映が可能 PrefabとPresetは一長一短

Slide 27

Slide 27 text

27 パターン(2) デザインガイドラインを用意する TextBody TextBody-Dialog TextBody-Default Text以外のコンポーネントの差異を Prefabで吸収する TextコンポーネントのTypographyルールを持つ (ルールをUnity上に置いておくことで適応しやすく) 変更時には各Prefabに適応する (修正範囲をなるべく小さく) チーム/中・大規模プロジェクトになると触る人が増えるのである程度ルールがあると破綻しない SceneB SceneA SceneC

Slide 28

Slide 28 text

28 パターン(3) 画像アセットのデフォルト設定を作るパターン(3) 画像アセットのデフォルト設定を作る

Slide 29

Slide 29 text

29 パターン(3) 画像アセットのデフォルト設定を作る Pixels Per Unit / Wrap Mode 等素材毎に共通させたい項目はデフォルトPresetを作ってインポート時に反映させる

Slide 30

Slide 30 text

30 パターン(3) 画像アセットのデフォルト設定を作る【Unity】新機能のPresets について - ゴイサギ日記より  https://goisagi-517.hatenablog.com/entry/2018/05/28/090245 Texture/SpriteでPresetの設定を分けたいケース等インポート時に任意のPresetを適応する AssetPostprocessor を用意するアプローチも！

Slide 31

Slide 31 text

31 まとめ Presetはいいぞ！ UI組み立て以外でもバリバリ使えるはずなので活用していきましょう！

Slide 32

Slide 32 text

Unity UIエンジニアリング勉強会 LT枠青木とと@lycoris102 Presetで楽する UI組み立てちょっぴり