UIElements 最高！ 一番好きなUIフレームワークです！

cluster.unity #3 https://cluster.mu/e/3201a546-7f90-4299-87a1-2a8d2543c5e1

Transcript

1. UIElements ࠷ߴʂ Ұ൪޷͖ ͳUIϑϨʔϜϫʔΫͰ͢ʂ 2020/08/21 cluster.unity #3 noir_neo 1
2. noir_neo • Ͷ͓ΓΜ / ͸ͱΓΜ • Ϋϥελʔגࣜձࣾ ιϑτ΢ΣΞΤϯδχΞ • ࠷ۙ͸৸ΔલʹΠΤʔΨʔϚΠελʔ ΛγϣοτͰҿΜͰ͍Δ 2
3. ֓ཁ • UIElements Ͱ݁ߏϦονΊͳΤσΟλ֦ுΛॻ͍ͨͱ͖ʹ౿Μ ͩ᠘ͨͪ • جຊతʹ Unity 2019.4.8f1 Ͱಈ࡞֬ೝ͍ͯ͠·͢ • εϥΠυதͷίʔυ͸ɺಡ·ͤΔͭ΋Γ͕͋Γ·ͤΜ (ޙ΄Ͳެ ։͠·͢) 3
4. UIElements ͰΤσΟλ ֦ு جຊฤ 4
5. ֦ு͞ΕΔ class 5
6. public class SerializationBehaviour : MonoBehaviour { [SerializeField] Serialization serialization; } [Serializable] public class Serialization { [SerializeField] EnumTest enumTest; } public enum EnumTest { A, B, C } 6
7. public enum EnumTest { A, B, C } 7
8. [Serializable] public class Serialization { [SerializeField] EnumTest enumTest; } 8
9. public class SerializationBehaviour : MonoBehaviour { [SerializeField] Serialization serialization; } 9
10. ૉͷΤσΟλ͸ 10
12. ݟ׳ΕͨޫܠͰ͢Ͷ 12
13. ·ͣ͸؆୯ʹ 13
14. [CustomEditor(typeof(SerializationBehaviour))] public sealed class SerializationBehaviourEditor : Editor { public override VisualElement CreateInspectorGUI() { var container = new VisualElement(); var serializationProperty = serializedObject.FindProperty("serialization"); var enumProperty = serializationProperty.FindPropertyRelative("enumTest"); var enumField = new EnumField(enumProperty.displayName, (EnumTest)enumProperty.enumValueIndex) { bindingPath = enumProperty.propertyPath }; container.Add(enumField); return container; } } 14
15. [CustomEditor(typeof(SerializationBehaviour))] public sealed class SerializationBehaviourEditor : Editor { } 15
16. public override VisualElement CreateInspectorGUI() { var container = new VisualElement(); var serializationProperty = serializedObject.FindProperty("serialization"); var enumProperty = serializationProperty.FindPropertyRelative("enumTest"); var enumField = new EnumField(enumProperty.displayName, (EnumTest)enumProperty.enumValueIndex) { bindingPath = enumProperty.propertyPath }; container.Add(enumField); return container; } 16
19. Property Drawer Ͱॻ͖ ͍ͨ 19
20. [CustomPropertyDrawer(typeof(Serialization))] public class EnumFieldPropertyDrawer : PropertyDrawer { public override VisualElement CreatePropertyGUI(SerializedProperty property) { var container = new VisualElement(); var enumProperty = property.FindPropertyRelative("enumTest"); // 2019.3 or newer var enumField = new EnumField(enumProperty.displayName, (EnumTest)enumProperty.enumValueIndex) { bindingPath = enumProperty.propertyPath }; container.Add(enumField); return container; } } 20
21. [CustomPropertyDrawer(typeof(Serialization))] public class EnumFieldPropertyDrawer : PropertyDrawer { } 21
22. public override VisualElement CreatePropertyGUI(SerializedProperty property) { var container = new VisualElement(); var enumProperty = property.FindPropertyRelative("enumTest"); // 2019.3 or newer var enumField = new EnumField(enumProperty.displayName, (EnumTest)enumProperty.enumValueIndex) { bindingPath = enumProperty.propertyPath }; container.Add(enumField); return container; } 22
24. ! 24
25. CustomPropertyDrawer Ͱ VisualElement Λ࢖ ͍͍ͨͱ͖͸ Editor ͔ Βॻ͘ 25
26. [CustomEditor(typeof(SerializationBehaviour))] public sealed class SerializationBehaviourEditor : Editor { public override VisualElement CreateInspectorGUI() { var container = new VisualElement(); var serializationProperty = serializedObject.FindProperty("serialization"); var serializationField = new PropertyField(serializationProperty); container.Add(serializationField); return container; } } 26
27. public override VisualElement CreateInspectorGUI() { var container = new VisualElement(); var serializationProperty = serializedObject.FindProperty("serialization"); var serializationField = new PropertyField(serializationProperty); container.Add(serializationField); return container; } 27
29. ͪͳΈʹ 29
30. ͜͏͍͏ class Λ࡞ͬͯ ͓͍ͯ 30
31. public class VisualElementEditor : Editor { public override VisualElement CreateInspectorGUI() { var container = new VisualElement(); var iterator = serializedObject.GetIterator(); if (!iterator.NextVisible(true)) return container; while (iterator.NextVisible(false)) { var propertyField = new PropertyField(iterator.Copy()) { name = "PropertyField:" + iterator.propertyPath }; if (iterator.propertyPath == "m_Script" && serializedObject.targetObject != null) propertyField.SetEnabled(false); container.Add(propertyField); } return container; } } 31
32. ܧঝ͢Δͱָ 32
33. [CustomEditor(typeof(SerializationBehaviour))] public sealed class SerializationBehaviourEditor : VisualElementEditor { } 33
34. UIElements ͰΤσΟλ ֦ு পฤ 34
35. γϦΞϥΠθʔγϣϯ Λ࠶ؼͤͨ͘͞ͳΔ͜ ͱɺ͋Γ·͢ΑͶ? 35
36. [Serializable] public class Serialization { [SerializeField] EnumTest enumTest; [SerializeField] Recursion recursion; } [Serializable] public class Recursion { [SerializeField] Serialization serialization; } 36
37. ૉͷΤσΟλ͸ 37
40. warning ͸ͱΓ͋͑ͣ ແࢹͯ͠΋Ζͯ… 40
41. ී௨ʹॻ͍ͯΈΔ 41
42. [CustomPropertyDrawer(typeof(Serialization))] public class EnumFieldPropertyDrawer : PropertyDrawer { public override VisualElement CreatePropertyGUI(SerializedProperty property) { var container = new VisualElement(); var enumProperty = property.FindPropertyRelative("enumTest"); var enumField = new EnumField(enumProperty.displayName, (EnumTest)enumProperty.enumValueIndex) { bindingPath = enumProperty.propertyPath }; container.Add(enumField); var recursionProperty = property.FindPropertyRelative("recursion"); var recursionField = new PropertyField(recursionProperty); container.Add(recursionField); return container; } } 42
43. var recursionProperty = property.FindPropertyRelative("recursion"); var recursionField = new PropertyField(recursionProperty); container.Add(recursionField); 43
45. ! 45
47. ! 47
49. Debug ͰݟΔͱ int field ʹͳͬͯΔ 49
50. int ͩͱࢥ͍ࠐ·ΕͯΔ enum Λ Popup Ͱදࣔ ͯ͋͛͠Δ 50
51. static VisualElement CreateEnumFieldAsInteger(SerializedProperty property) { var container = new VisualElement(); Assert.AreEqual(property.propertyType, SerializedPropertyType.Integer); var integerField = new IntegerField { bindingPath = property.propertyPath, style = { display = new StyleEnum<DisplayStyle>(DisplayStyle.None) } }; container.Add(integerField); var popupField = new PopupField<EnumTest>(property.displayName, Enum.GetValues(typeof(EnumTest)).Cast<EnumTest>().ToList(), property.intValue); popupField.RegisterValueChangedCallback(e => { var newValue = (int)(object) e.newValue; if (property.intValue == newValue) return; property.intValue = newValue; property.serializedObject.ApplyModifiedProperties(); }); container.Add(popupField); integerField.RegisterValueChangedCallback(e => { var newValue = (EnumTest)(object) e.newValue; popupField.SetValueWithoutNotify(newValue); }); return container; } 51
52. var integerField = new IntegerField { bindingPath = property.propertyPath, style = { display = new StyleEnum<DisplayStyle>(DisplayStyle.None) } }; container.Add(integerField); 52
53. var popupField = new PopupField<EnumTest>(property.displayName, Enum.GetValues(typeof(EnumTest)).Cast<EnumTest>().ToList(), property.intValue); popupField.RegisterValueChangedCallback(e => { var newValue = (int)(object) e.newValue; if (property.intValue == newValue) return; property.intValue = newValue; property.serializedObject.ApplyModifiedProperties(); }); container.Add(popupField); 53
54. // Undo ରԠ integerField.RegisterValueChangedCallback(e => { var newValue = (EnumTest)(object) e.newValue; popupField.SetValueWithoutNotify(newValue); }); 54
55. enum ͷ৔߹͸͖ͬ͞ͱ ಉ͡ 55
56. static VisualElement CreateEnumFieldAsEnum(SerializedProperty property) { Assert.AreEqual(property.propertyType, SerializedPropertyType.Enum); // 2019.3 or newer var field = new EnumField(property.displayName, (EnumTest)property.enumValueIndex) { bindingPath = property.propertyPath }; field.Bind(property.serializedObject); return field; } 56
57. switch ͯ͠ 57
58. static VisualElement CreateEnumField(SerializedProperty property) { switch (property.propertyType) { case SerializedPropertyType.Enum: { return CreateEnumFieldAsEnum(property); } case SerializedPropertyType.Integer: { return CreateEnumFieldAsInteger(property); } default: throw new ArgumentOutOfRangeException(); } } 58
59. ͜ΕΛ࢖͏ 59
60. public override VisualElement CreatePropertyGUI(SerializedProperty property) { var container = new VisualElement(); var enumProperty = property.FindPropertyRelative("enumTest"); var enumField = CreateEnumField(enumProperty); container.Add(enumField); var recursionProperty = property.FindPropertyRelative("recursion"); var recursionField = new PropertyField(recursionProperty); container.Add(recursionField); return container; } 60
62. 2ճ͔͠දࣔ͞Εͳ͍ 62
63. PropertyField Λ࢖͏ͷ Λ΍Ίͯ࠶ؼΛॻ͘ 63
64. static VisualElement CreateSerializationField(SerializedProperty property) { Assert.AreEqual(property.type, nameof(Serialization)); var container = new VisualElement(); var enumProperty = property.FindPropertyRelative("enumTest"); var enumField = CreateEnumField(enumProperty); container.Add(enumField); var recursionProperty = property.FindPropertyRelative("recursion.serialization"); var recursionField = CreateSerializationField(recursionProperty); container.Add(recursionField); return container; } 64
65. public override VisualElement CreatePropertyGUI(SerializedProperty property) { return CreateSerializationField(property); } 65
67. NullRef ͬͯݴΘΕΔͷ Ͱ 67
68. ճ਺੍ݶ͸ࣗ෼Ͱ؅ཧ static VisualElement CreateSerializationField(SerializedProperty property, int depth = 0) { if (depth > 3) return new VisualElement(); Assert.AreEqual(property.type, nameof(Serialization)); var container = new VisualElement(); var enumProperty = property.FindPropertyRelative("enumTest"); var enumField = CreateEnumField(enumProperty); container.Add(enumField); var recursionProperty = property.FindPropertyRelative("recursion.serialization"); var recursionField = CreateSerializationField(recursionProperty, depth + 1); container.Add(recursionField); return container; } 68
70. Ͱ͖ͨ 70
71. / / 2019.3 or newer 71
72. EnumField ͸ 2019.3 Ҏ ߱͡Όͳ͍ͱͪΌΜͱ bind ͯ͘͠Εͳ͍ 72
73. static VisualElement CreateEnumFieldAsString(SerializedProperty property) { Assert.AreEqual(property.propertyType, SerializedPropertyType.Enum); var enumField = new PopupField<string>(property.displayName) { bindingPath = property.propertyPath }; return enumField; } https:/ /forum.unity.com/threads/cant-create-bindings-for-an-enum- not-compatible.728111/#post-4873661 73
74. ͍͞͝ʹ • UIElements ͸ؒҧ͍ͳ͘ Unity ্࢙࠷ߴͷUIϑϨʔϜϫʔΫ • ᠘͸(·ͩ)ଟ͍͕ɺΤσΟλ֦ுʹ͸ͥͻ࠾༻͢΂͖ 74
75. ΫϥελʔࣾͰ͸ιϑ τ΢ΣΞΤϯδχΞΛ ੵۃ࠾༻தͰ͢!!!!! 75