{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очень часто натыкался на то, что разработчики (в основном молодые), делая интерфейс для своего приложения, сваливают его весь в сцене и открывают\\закрывают нужные им экраны и окна, просто включая и выключая их. Для прототипа, который надо сварганить на коленке за один день - это нормально. Также, если весь интерфейс это кнопка \"Начать\" и Hud, то заморачиваться конечно же не стоит. Но если у нас экранов больше, и если они включают в себя разнообразный графический контент, то такой подход неправильный. Все эти экраны и вся графика для них висит в памяти и отжирает не малый её кусок. А также подгрузка сцены становится сложнее и дольше.","type":"unstyled","key":"mvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель:","type":"header-two","key":"f5ve8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данной статье хочу продемонстрировать простой способ работы с экранами интерфейса, также его можно применять и для различных других ресурсов.\nЗаодно хочу показать работу с Unity UI Elements для CustomEditor, притом (чисто для эксперимента и разнообразия) сделать это из кода, без использования .uxml.","type":"unstyled","key":"1kiko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"План:","type":"header-two","key":"49dht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написать систему, которая будет подгружать префабы с экранами из ресурсов и инстанцировать их в сцене.\nТакже - написать эдитор для неё с использованием UI Elements.","type":"unstyled","key":"abcsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Система подгрузки префабов:","type":"header-two","key":"3sbrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала нам нужен класс для информации о префабе. В качестве полей у него будет: \nУникальный идентификатор, по которому можно будет находить префаб в базе.\nПуть к префабу. Тут надо пояснить, что нужен именно путь, а не ссылка на него. Если хранить ссылки, то и все префабы прилинкованные к базе будут храниться в памяти, а этого мы и хотим избежать. Префабы должны лежать в папке Resources, оттуда и будем их доставать по надобности.\nИ для эдитора сохраняем юнитевый guid. Это нужно для того, чтобы в случае переименования или перемещения префаба система сама нашла к нему новый путь.\nНа всякий случай сохраним также инстанцированный экземпляр для быстрого доступа к нему в случае, если будут необходимы несколько обращений к нему.","type":"unstyled","key":"aa2ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1247,"offset":0,"style":"ITALIC"}],"text":"using System;\nusing UnityEngine;\n\n///

\n/// Описание экрана\n///

\n[Serializable]\npublic class ScreenAsset\n{\n ///

\n /// Уникальный идентификатор\\название экрана\n ///

\n public string UID;\n ///

\n /// Путь к префабу в папке с ресурсами\n ///

\n public string Path;\n#if UNITY_EDITOR\n ///

\n /// Guid в Unity проекте, для легкого поиска в редакторе\n ///

\n public string Guid;\n#endif\n ///

\n /// Несериализуемый экземпляр для инстанцирования\n /// в единичном экземпляре\n ///

\n [NonSerialized] public GameObject Instance;\n\n ///

\n /// Дефолтный конструктор для инспектора\n ///

\n public ScreenAsset()\n {\n }\n\n ///

\n /// Конструктор\n ///

\n /// Уникальный идентификатор\\название экрана\n /// Путь к префабу в папке с ресурсами\n /// Guid в Unity проекте,\n /// для легкого поиска в редакторе\n public ScreenAsset(string uid, string assetPath, string guid)\n {\n UID = uid;\n Path = assetPath;\n#if UNITY_EDITOR\n Guid = guid;\n#endif\n }\n}","type":"unstyled","key":"aeksk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создаем саму базу с префабами. Для меня это префабы экранов. База будет представлять из себя ScripableObject, который можно будет прилинковать в будущем к нужной системе.","type":"unstyled","key":"12j7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4854,"offset":0,"style":"ITALIC"}],"text":"using System.Collections.Generic;\nusing System.Linq;\nusing UnityEngine;\nusing Object = UnityEngine.Object;\n\n///

\n/// База префабов с UI экранами в ресурсах\n///

\n#if UNITY_EDITOR\n[CreateAssetMenu(fileName = \"Data\",\n menuName = \"Chrono/CrerateScreensDataBase\", order = 2)]\n#endif\npublic class ScreensDataBase : ScriptableObject\n{\n ///

\n /// Путь к папке с ресурсам\n ///

\n private const string ResourcesPath = \"Assets/Resources/\";\n ///

\n /// расширение объектов префабов\n ///

\n private const string ResourcesExtensions = \".prefab\";\n ///

\n /// Список экранов с ссылками на префабы.\n ///

\n [SerializeField] private List _screens;\n ///

\n /// Список описаний экранов с ссылками на префабы. Только для чтения\n ///

\n public List Screens => _screens;\n ///

\n /// Получить описание экрана\n ///

\n /// Уникальный идентификатор\\название экрана\n /// Описание найденного экрана\n public ScreenAsset GetScreenAsset(string uid)\n {\n return _screens.FirstOrDefault(s => s.UID == uid);\n }\n ///

\n /// Получение префаба из папки с ресурсами\n ///

\n /// Уникальный идентификатор\\название экрана\n /// Префаб для инстанцирования\n public Object GetScreenObject(string uid)\n {\n //Находим описание нужного экрана\n var screen = GetScreenAsset(uid);\n if (screen == null) return null;\n //проверяем что префаб лежит в папке с ресурсами\n //и он нужного расширения\n if (screen.Path.StartsWith(ResourcesPath)\n && screen.Path.EndsWith(ResourcesExtensions))\n {\n //Находим нужный префаб в ресурсах\n //Перед этим удаляем из пути ту часть, что ведет к папке\n //с ресурсами Assets/Resources/ и удаляем расширение,\n //так как Resources.Load нужен путь без этой информации\n var asset = Resources.Load(screen.Path\n .Remove(screen.Path.Length - ResourcesExtensions.Length,\n ResourcesExtensions.Length)\n .Remove(0, ResourcesPath.Length));\n return asset;\n }\n //В случае, если ресурс не там лежит, то сообщаем об этом\n Debug.LogWarning($\"{screen.UID} not in {ResourcesPath}\");\n return null;\n }\n ///

\n /// Инстанцирование экрана\n ///

\n /// Уникальный идентификатор\\название экрана\n /// Transform где необходимо инстацировать\n /// Единственный экземпляр в сцене?\n /// Если да и такой экран уже в сцене,\n /// то возвращаете старый, если нет, то создаете новый\n /// Инстанцированный экран\n public GameObject InstanceScreen(string uid, RectTransform parent = null,\n bool single = false)\n {\n //Находим описание нужного экрана\n var asset = GetScreenAsset(uid);\n //Если экземпляр должен быть единичный и он уже существует,\n //то возвращаем его.\n if (single)\n {\n if (asset.Instance != null)\n {\n return asset.Instance;\n }\n }\n //Находим префаб\n var screenObject = GetScreenObject(uid);\n if (screenObject == null) return null;\n //Инстанцируем префаб как ребенка для указанной Transform\n var instance = Instantiate(screenObject, parent) as GameObject;\n //Обозначаем инстанцированный объект как экземпляр\n //для этого описания экрана,\n //чтобы использовать при повторных вызовах с единичным экземпляром\n asset.Instance = instance;\n return instance;\n }\n ///

\n /// Инстанцирование экрана с необходимым компонентом\n ///

\n /// Уникальный идентификатор\\название экрана\n /// Transform где необходимо инстациировать\n /// Единственный экземпляр в сцене?\n /// Если да и такой экран уже в сцене,\n /// то возвращаете старый, если нет, то создаете новый\n /// Тип компонента в корневом объекте\n /// Компонент необходимого типа\n public T InstanceScreen(string uid, RectTransform parent = null,\n bool single = false)\n {\n //Инстанцируем сам объект\n var gameObject = InstanceScreen(uid, parent, single);\n if (gameObject != null)\n {\n //находим у него компонент необходимого типа\n var component = gameObject.GetComponent();\n return component;\n }\n\n return default;\n }\n}","type":"unstyled","key":"4p935"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь по коду все понятно, что и для чего там нужно. Как это использовать? Система, который нужен будет соответствующий экран, может обратиться к этой базе и по идентификатору инстанцировать его в нужном месте. Можно сразу передавать тип компонента, который должен быть у корневого объекта.\nС заполненной базой легко работать, но как её правильно заполнить? Тут вступает в игру Editor для базы.","type":"unstyled","key":"dt44j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"UI Elements в CustomEditor","type":"header-two","key":"cn498"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут главный момент, что мы в редакторе добавляем ссылку на объект, но так как нам её хранить нельзя, мы получаем с неё нужные нам параметры (путь и guid) и сохраняем их. Для отображения в редакторе нужных объектов мы также используем сохраненные параметры, по ним находим сам объект и отображаем в редакторе.","type":"unstyled","key":"45t1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11219,"offset":0,"style":"ITALIC"}],"text":"using System;\nusing UnityEditor;\nusing UnityEditor.UIElements;\nusing UnityEngine;\nusing UnityEngine.UIElements;\n\n///

\n/// Эдитор для ScreensDataBase\n///

\n[CustomEditor(typeof(ScreensDataBase))]\npublic class ScreensDataBaseEditor : Editor\n{\n ///

\n /// Экземпляр объекта для отображения в Инспекторе\n ///

\n private ScreensDataBase _target;\n ///

\n /// Сериализованный объект редактируемого экземпляра\n /// Необходим для работы с его сериализуемыми полями\n ///

\n private SerializedObject _targetSerializedObject;\n // UI Elements для работы с добавлением нового префаба\n private ObjectField _newPrefab;\n private TextField _newScreenUID;\n private VisualElement _listScreens;\n // Поисковый запрос для фильтрации префабов в базе\n private string _searchText = String.Empty;\n\n ///

\n /// Отрисовка Инспектора объекта\n ///

\n /// \n public override VisualElement CreateInspectorGUI()\n {\n //Сохраняем экземпляр редактируемой базы\n _target = target as ScreensDataBase;\n if (_target == null) return null;\n \n _targetSerializedObject = new SerializedObject(_target);\n\n //Создаем корневой UI Element в котором будут отрисовываться остальные\n var root = new VisualElement();\n root.Clear();\n root.AddToClassList(\"root\");\n \n //Создаем блок для добавления нового экрана в список\n var addNewBlock = new VisualElement();\n //Присваиваем стили бля блока\n addNewBlock.AddToClassList(\"body\");\n addNewBlock.AddToClassList(\"horizontalLayout\");\n //Поле ввода UID нового экрана\n _newScreenUID = new TextField();\n _newScreenUID.AddToClassList(\"chrono-textfield\");\n //Поле для линка на префаб для добавления в список\n _newPrefab = new ObjectField {allowSceneObjects = false, objectType = typeof(GameObject)};\n _newPrefab.style.width = 140;\n //Кнопка Добавить с колбэком на нажатие OnNewButtonClick\n var newButton = new Button(OnNewButtonClick) {text = \"Add\"};\n newButton.AddToClassList(\"chrono-button\");\n newButton.AddToClassList(\"hero-button\");\n //Добавляем элементы ввода UID, линк на префаб и кнопку в блок addNewBlock\n addNewBlock.Add(_newScreenUID);\n addNewBlock.Add(_newPrefab);\n addNewBlock.Add(newButton);\n //Добавляем блок addNewBlock к корневому объекту\n root.Add(addNewBlock);\n \n //Создаем элемент поиска для фильтрации в списке экранов\n var search = new ToolbarSearchField();\n search.style.flexShrink = 1;\n //Регистрируем колбэк на изменение текста в поисковой строке\n search.RegisterValueChangedCallback(OnSearch);\n //Добавляем строку поиска к корневому элементу\n root.Add(search);\n\n //Создаем блок с списком экранов. Храним этот блок в переменной для управления содержимым\n //при фильтрации с помощью поисковой строки\n _listScreens = new VisualElement();\n _listScreens.AddToClassList(\"body\");\n //Отрисовываем список в отдельном переиспользуемом методе\n DrawScreens();\n //Добавляем список к корневому элементу\n root.Add(_listScreens);\n \n //Находим стили и добавляем их корневому элементу\n var uss = AssetDatabase.LoadAssetAtPath(\"Assets/Editor/UI/ChronoStyle.uss\");\n root.styleSheets.Add(uss);\n \n //Возвращаем корневой элемент как используемый для отрисовки в инспекторе\n return root;\n }\n\n ///

\n /// Колбэк при изменении поискового запроса\n ///

\n /// эвент изменения\n private void OnSearch(ChangeEvent evt)\n {\n //Сохраняем текст поиска\n _searchText = evt.newValue;\n //Отрисовываем блок со списком экранов, на основании введенного текста\n DrawScreens();\n }\n \n ///

\n /// Отрисовываем список добавленных экранов\n ///

\n private void DrawScreens()\n {\n //Очищаем предыдущий список\n _listScreens.Clear();\n //Находим список экранов в базе как SerializedProperty\n //Необходимо работать именно с SerializedProperty для сохранения изменения в редакторе\n var listProperty = _targetSerializedObject.FindProperty(\"_screens\");\n //Проходимся по списку экранов в базе\n for (var ii = 0; ii < _target.Screens.Count; ii++)\n {\n //Находим отдельный элемент в списке как SerializedProperty\n var prop = listProperty.GetArrayElementAtIndex(ii);\n //Если текст в поисковом запросе содержится в UID или в пути и названии префаба,\n //то отмечаем что его нужно отобразить в инспекторе\n var needShow = _searchText == String.Empty ||\n prop.FindPropertyRelative(\"UID\").stringValue.ToLower().Contains(_searchText.ToLower()) ||\n prop.FindPropertyRelative(\"Path\").stringValue.ToLower().Contains(_searchText.ToLower());\n if (needShow)\n {\n //Отрисовываем разделительную линию\n var sep = new VisualElement();\n sep.AddToClassList(\"distinction\");\n _listScreens.Add(sep);\n //Добавляем отрисовку элемента через метод DrawScreenAsset\n _listScreens.Add(DrawScreenAsset(prop, ii));\n }\n }\n }\n\n ///

\n /// Отрисовываем элемент списка экранов\n ///

\n /// SerializedProperty этого элемента\n /// порядковый номер элемента\n /// верстка элемента\n private VisualElement DrawScreenAsset(SerializedProperty property, int number)\n {\n //Блок, в котором будет все отрисовываться, с горизонтальным расположением элементов\n var block = new VisualElement();\n block.AddToClassList(\"horizontalLayout\");\n \n //Текстовое поле с отображением и изменением UID\n var screenUID = new TextField();\n //Связываем значение текстового поля с SerializedProperty UID\n screenUID.BindProperty(property.FindPropertyRelative(\"UID\"));\n screenUID.AddToClassList(\"chrono-textfield\");\n //В случае изменения названия, вызываем автосохранение ассетов проекта\n screenUID.RegisterValueChangedCallback(evt => { AssetDatabase.SaveAssets(); });\n block.Add(screenUID);\n \n //Поле с префабом\n var prefab = new ObjectField\n {\n //Не использовать объекты на сцене (только в Ассетах)\n allowSceneObjects = false,\n //Использовать только тип GameObject\n objectType = typeof(GameObject),\n //Находим прилинкованный префаб по ранее сохраненному guid\n value = GetByGUID(property.FindPropertyRelative(\"Guid\").stringValue)\n };\n prefab.style.width = 140;\n //В случае перелинковки префаба обновляем параметры\n prefab.RegisterValueChangedCallback(evt =>\n {\n _targetSerializedObject.Update();\n //Сохраняем путь к прилинкованному префабу\n property.FindPropertyRelative(\"Path\").stringValue = AssetDatabase.GetAssetPath(evt.newValue);\n //Сохраняем его guid\n property.FindPropertyRelative(\"Guid\").stringValue = GetGUID(evt.newValue as GameObject);\n //Сохраняем\\сериализуем новые значения\n _targetSerializedObject.ApplyModifiedProperties();\n AssetDatabase.SaveAssets();\n });\n block.Add(prefab);\n \n //На случай, если префаб был переименован или перемещен, проверяем его текущий путь\n var path = AssetDatabase.GUIDToAssetPath(property.FindPropertyRelative(\"Guid\").stringValue);\n //Если текущий путь и сохраненный не совпадают, то обновляем эту информацию\n if (property.FindPropertyRelative(\"Path\").stringValue != path)\n {\n _targetSerializedObject.Update();\n property.FindPropertyRelative(\"Path\").stringValue = path;\n _targetSerializedObject.ApplyModifiedProperties();\n AssetDatabase.SaveAssets();\n }\n \n //Кнопка удаления элемента из списка\n var delButton = new Button {text = \"Del\"};\n //Добавляем делегат на нажатие кнопки\n delButton.clicked += () => ClickDelete(number);\n delButton.AddToClassList(\"chrono-button\");\n delButton.AddToClassList(\"community-button\");\n block.Add(delButton);\n \n //Возвращаем верстку\n return block;\n }\n\n ///

\n /// Удаление элемента из списка экранов\n ///

\n /// \n private void ClickDelete(int screenAssetNumber)\n {\n _targetSerializedObject.Update();\n //Находим список экранов\n var listProperty =_targetSerializedObject.FindProperty(\"_screens\");\n //Удаляем элемент\n listProperty.DeleteArrayElementAtIndex(screenAssetNumber);\n //Сохраняем изменения\n _targetSerializedObject.ApplyModifiedProperties();\n AssetDatabase.SaveAssets();\n //Периресовываем список в инспекторе\n DrawScreens();\n }\n\n ///

\n /// Добавление нового экрана в список\n ///

\n private void OnNewButtonClick()\n {\n //Проверяем, выбран ли префаб и введен ли UID\n if (_newPrefab.value == null || _newScreenUID.value == String.Empty) return;\n _targetSerializedObject.Update();\n //Находим список с экранами\n var listProperty =_targetSerializedObject.FindProperty(\"_screens\");\n //Создаем новый элемент списка в самом верху\n listProperty.InsertArrayElementAtIndex(0);\n //Берем вновь созданный элемент для заполнения\n var newElementProperty = listProperty.GetArrayElementAtIndex(0);\n //Записываем UID\n newElementProperty.FindPropertyRelative(\"UID\").stringValue = _newScreenUID.value;\n //Находим путь и записываем его\n newElementProperty.FindPropertyRelative(\"Path\").stringValue = AssetDatabase.GetAssetPath(_newPrefab.value);\n //Находим guid и записываем его\n newElementProperty.FindPropertyRelative(\"Guid\").stringValue = GetGUID(_newPrefab.value as GameObject);\n //Сохраняем изменения в списке\n _targetSerializedObject.ApplyModifiedProperties();\n AssetDatabase.SaveAssets();\n //Перерисовываем список в испекторе\n DrawScreens();\n }\n \n ///

\n /// Находим guid префаба\n ///

\n /// префаб\n /// guid\n private string GetGUID(GameObject prefab)\n {\n var fullPath = AssetDatabase.GetAssetPath(prefab);\n return AssetDatabase.AssetPathToGUID(fullPath);\n }\n\n ///

\n /// Находим префаб по guid\n ///

\n /// guid\n /// префаб\n private GameObject GetByGUID(string guid)\n {\n return AssetDatabase.LoadAssetAtPath(AssetDatabase.GUIDToAssetPath(guid), typeof(GameObject)) as GameObject;\n }\n}","type":"unstyled","key":"ajg10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если объект был перемещен или переименован, то по отрисовке этого элемента эдитор находит этот объект по guid и автоматом переписывает путь на новый.","type":"unstyled","key":"3cc2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В результате у нас получается вот такое редактор","type":"unstyled","key":"39obv"},{"data":{"image":{"id":"5f85985a01c3532acc186259"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"drcsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В верхнее поле перемещаем нужный для сохранения префаб, прописываем ему название и нажимаем \"Add\". Префаб сохраняется в список.\nДалее идет поле поиска, оно для фильтрации списка. Поиск осуществляется как по названию, так и по пути. Когда списки становятся большими, это очень необходимо.\nНу и сам список. Тут можно переименовать объект, можно перелинковать на другой, а также можно удалить ненужный из списка.","type":"unstyled","key":"3am6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работать с этой системой просто. В нужном месте вызываем инициализацию нужного объекта и используем по назначению.","type":"unstyled","key":"fkpd5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":722,"offset":0,"style":"ITALIC"}],"text":"private void AddBookmark(ChronoObjectLogged objectLogged)\n {\n if (_db == null) return;\n var screenName = \"\";\n switch (objectLogged)\n {\n case ChronoObjectCommunity _:\n screenName = \"BookmarkCommunity\";\n break;\n case ChronoObjectEnvironment _:\n screenName = \"BookmarkEnvironment\";\n break;\n case ChronoObjectHero _:\n screenName = \"BookmarkHero\";\n break;\n }\n var bookmark = _db.InstanceScreen(screenName, _bookmarksBlock);\n bookmark.Setup(objectLogged, _bookmarkGroup);\n _bookmarks.Add(objectLogged.UID, bookmark.Bookmark);\n }","type":"unstyled","key":"dq7ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итого:","type":"header-two","key":"f4bof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Думаю, что все это не сложно и прозрачно. Такую систему я использую очень часто и она очень помогает при работе с интерфейсами и не забивает ими память.","type":"unstyled","key":"d59kp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"xNdetTNpIauuczRquaYJ"}],"entityMap":{}},"mentions":[]}