Публикация была переведена автоматически. Исходный язык: Русский
UI в Unity (по крайней мере старая система) - может быстро превратиться в основной источник боли: экраны множатся, требования меняются, художники хотят «чуть подвинуть», продюсер — «чуть перекрасить», а программисты каждый раз всё собирают заново. В один момента в нашей игре
• 12 одинаковых картинок фона для окна
• 9 красных крестиков разного размера
• 7 иконок на каждую валюту
• 6 почти идентичных зеленых кнопок
и так далее...
В итоге - мы решили эту проблему через модульную архитектуру интерфейса на базе uGUI, где всё строится от нескольких базовых префабов и их вариантов.
Единый фундамент: BaseWindow и базовые элементы
Отправная точка — один базовый префаб окна, BaseWindow.
Любое окно в проекте — это его префаб-вариант.
BaseWindow задаёт:
• жизненный цикл (инициализация, показ, скрытие, обновление);
• стандартную анимацию появления/исчезновения;
• единые правила блокировки ввода и затемнения фона;
• базовый набор скриптов для работы с данными.
Благодаря этому новое окно — не «ещё один уникальный случай», а ожидаемо ведущий себя элемент, который вписывается в общую систему.
По тому же принципу мы выстроили базовые «атомы» интерфейса:
• BaseText — текст с заранее настроенным шрифтом, авторазмером и материалами;
• BaseIcon — изображение с предсказуемыми размерами и поведением;
• BaseButton — кнопка с общими анимациями и состояниями.
Все они существуют не как разрозненные копии, а как префаб-варианты базовых элементов. Каждое новое окно, кнопка или иконка наследуют:
• базовые скрипты и единое поведение;
• стандартные анимации;
• общие материалы и цвета для изображений.
Правка в одном базовом префабе каскадом обновляет десятки экранов. Это не только визуальная целостность, но и функциональная.
Молекулярный элемент: «иконка + текст»
Один из самых частых элементов в игре — блок, где иконка стоит рядом с числом: валюта, ключи, ресурсы, опыт, награды. Мы сделали его универсальным и самоадаптивным, чтобы он спокойно жил во всех экранах.
Он строится вокруг трёх идей:
1. Автоматическая компоновка
Внутри используется обычная горизонтальная layout-группа, которая сама раскладывает иконку и текст. Художник может менять размеры и отступы — композиция остаётся аккуратной без ручного выравнивания.
2. Нормальное поведение при любой длине текста
Число может быть коротким или очень длинным, локализация может удлинять строки — блок растёт и сжимается предсказуемо, не ломая сетку.
3. Один базовый префаб — много вариантов
Все вариации (деньги, бутылки, ключи, опыт) — префаб-варианты одного базового блока. Если мы меняем, например, расстояние между иконкой и текстом или тип шрифта, обновляются все ресурсные блоки в игре.
Из таких «молекул» потом собираются более крупные конструкции: панели ресурсов, карточки персонажей, элементы магазина.
Шрифты и материалы: один источник истины для текста.
Чтобы не превратить проект в «зоопарк» из шрифтов и теней, мы ввели единый базовый префаб текста — BaseText.
В нём заранее настроены несколько материалов для одного шрифта:
• базовый чистый текст;
• вариант с обводкой;
• вариант с мягкой тенью.
Любой текст в UI — это префаб-вариант BaseText.
Поэтому, если нам нужно:
• сменить шрифт;
• усилить или убрать обводку;
• скорректировать стиль теней,
мы делаем это один раз в базовом префабе — и изменения автоматически подтягиваются во весь интерфейс: в кнопках, заголовках, карточках, всплывающих окнах.
Шрифтовой стиль становится не «набором ручных настроек», а централизованным решением.
Система панелей: структура вместо хаоса Canvas’ов
Поверх окон мы используем систему панелей, которая помогает держать интерфейс структурированным.
Панель в нашей логике — это самостоятельный блок ответственности. Она:
• знает, кто её открывает и в каком контексте;
• понимает, когда ей нужно обновить данные;
• управляет своими анимациями появления и скрытия;
• корректно взаимодействует с другими панелями (например, статус-панель ресурсов и окно магазина не конфликтуют за место и фокус).
Так мы избегаем ситуации, когда каждый новый UI-элемент создаётся «как придётся» и живёт собственной жизнью. Панели встраиваются в общую систему и следуют общим правилам.
Почему эта архитектура реально помогает команде
Здесь нет «магического фреймворка», только дисциплинированное использование префаб-вариантов и базовых элементов, но эффект получился ощутимым.
1. Интерфейс собирается как конструктор
Окна строятся из атомов (текст, иконка, кнопка), молекул (иконка + число, карточка ресурса) и панелей. Программисту не нужно заново придумывать каждый экран — он комбинирует уже проверенные блоки.
2. Художники работают визуально, а не через запросы к коду
Художник может сам:
• подвинуть элементы,
• скорректировать отступы,
• заменить иконку или материал,
и увидеть результат сразу в сцене. Система layout’ов и наследования гарантирует, что всё при этом не развалится.
3. Визуальный стиль остаётся цельным даже при активной разработке.
Шрифты, цвета, анимации и поведение берутся из базовых префабов. Если меняется художественное решение — оно меняется системно, а не через ручные правки в десятке сцен.
4. Поддержка и рефакторинг не превращаются в кошмар
Когда проект живёт долго, интерфейс обычно страдает первым. В нашем случае любой рефакторинг UI опирается на понятную структуру: есть базовые элементы, есть их варианты, есть панели. Это сильно уменьшает цену изменений.
Итог
Модульная UI-архитектура на uGUI, основанная на нескольких базовых префабах и их вариантах, позволила нам превратить интерфейс Mafia Stories: Idle Tycoon из набора отдельных экранов в связанную систему.
Для команды это означало меньше рутинных задач, больше контролируемой визуальной свободы и возможность развивать игру, не боясь, что любое правка цвета или шрифта превратится в многочасовой марафон по сценам.
Такой подход не требует сложных сторонних библиотек — он требует лишь один раз продумать фундамент и дисциплинированно от него наследоваться.
UI в Unity (по крайней мере старая система) - может быстро превратиться в основной источник боли: экраны множатся, требования меняются, художники хотят «чуть подвинуть», продюсер — «чуть перекрасить», а программисты каждый раз всё собирают заново. В один момента в нашей игре
• 12 одинаковых картинок фона для окна
• 9 красных крестиков разного размера
• 7 иконок на каждую валюту
• 6 почти идентичных зеленых кнопок
и так далее...
В итоге - мы решили эту проблему через модульную архитектуру интерфейса на базе uGUI, где всё строится от нескольких базовых префабов и их вариантов.
Единый фундамент: BaseWindow и базовые элементы
Отправная точка — один базовый префаб окна, BaseWindow.
Любое окно в проекте — это его префаб-вариант.
BaseWindow задаёт:
• жизненный цикл (инициализация, показ, скрытие, обновление);
• стандартную анимацию появления/исчезновения;
• единые правила блокировки ввода и затемнения фона;
• базовый набор скриптов для работы с данными.
Благодаря этому новое окно — не «ещё один уникальный случай», а ожидаемо ведущий себя элемент, который вписывается в общую систему.
По тому же принципу мы выстроили базовые «атомы» интерфейса:
• BaseText — текст с заранее настроенным шрифтом, авторазмером и материалами;
• BaseIcon — изображение с предсказуемыми размерами и поведением;
• BaseButton — кнопка с общими анимациями и состояниями.
Все они существуют не как разрозненные копии, а как префаб-варианты базовых элементов. Каждое новое окно, кнопка или иконка наследуют:
• базовые скрипты и единое поведение;
• стандартные анимации;
• общие материалы и цвета для изображений.
Правка в одном базовом префабе каскадом обновляет десятки экранов. Это не только визуальная целостность, но и функциональная.
Молекулярный элемент: «иконка + текст»
Один из самых частых элементов в игре — блок, где иконка стоит рядом с числом: валюта, ключи, ресурсы, опыт, награды. Мы сделали его универсальным и самоадаптивным, чтобы он спокойно жил во всех экранах.
Он строится вокруг трёх идей:
1. Автоматическая компоновка
Внутри используется обычная горизонтальная layout-группа, которая сама раскладывает иконку и текст. Художник может менять размеры и отступы — композиция остаётся аккуратной без ручного выравнивания.
2. Нормальное поведение при любой длине текста
Число может быть коротким или очень длинным, локализация может удлинять строки — блок растёт и сжимается предсказуемо, не ломая сетку.
3. Один базовый префаб — много вариантов
Все вариации (деньги, бутылки, ключи, опыт) — префаб-варианты одного базового блока. Если мы меняем, например, расстояние между иконкой и текстом или тип шрифта, обновляются все ресурсные блоки в игре.
Из таких «молекул» потом собираются более крупные конструкции: панели ресурсов, карточки персонажей, элементы магазина.
Шрифты и материалы: один источник истины для текста.
Чтобы не превратить проект в «зоопарк» из шрифтов и теней, мы ввели единый базовый префаб текста — BaseText.
В нём заранее настроены несколько материалов для одного шрифта:
• базовый чистый текст;
• вариант с обводкой;
• вариант с мягкой тенью.
Любой текст в UI — это префаб-вариант BaseText.
Поэтому, если нам нужно:
• сменить шрифт;
• усилить или убрать обводку;
• скорректировать стиль теней,
мы делаем это один раз в базовом префабе — и изменения автоматически подтягиваются во весь интерфейс: в кнопках, заголовках, карточках, всплывающих окнах.
Шрифтовой стиль становится не «набором ручных настроек», а централизованным решением.
Система панелей: структура вместо хаоса Canvas’ов
Поверх окон мы используем систему панелей, которая помогает держать интерфейс структурированным.
Панель в нашей логике — это самостоятельный блок ответственности. Она:
• знает, кто её открывает и в каком контексте;
• понимает, когда ей нужно обновить данные;
• управляет своими анимациями появления и скрытия;
• корректно взаимодействует с другими панелями (например, статус-панель ресурсов и окно магазина не конфликтуют за место и фокус).
Так мы избегаем ситуации, когда каждый новый UI-элемент создаётся «как придётся» и живёт собственной жизнью. Панели встраиваются в общую систему и следуют общим правилам.
Почему эта архитектура реально помогает команде
Здесь нет «магического фреймворка», только дисциплинированное использование префаб-вариантов и базовых элементов, но эффект получился ощутимым.
1. Интерфейс собирается как конструктор
Окна строятся из атомов (текст, иконка, кнопка), молекул (иконка + число, карточка ресурса) и панелей. Программисту не нужно заново придумывать каждый экран — он комбинирует уже проверенные блоки.
2. Художники работают визуально, а не через запросы к коду
Художник может сам:
• подвинуть элементы,
• скорректировать отступы,
• заменить иконку или материал,
и увидеть результат сразу в сцене. Система layout’ов и наследования гарантирует, что всё при этом не развалится.
3. Визуальный стиль остаётся цельным даже при активной разработке.
Шрифты, цвета, анимации и поведение берутся из базовых префабов. Если меняется художественное решение — оно меняется системно, а не через ручные правки в десятке сцен.
4. Поддержка и рефакторинг не превращаются в кошмар
Когда проект живёт долго, интерфейс обычно страдает первым. В нашем случае любой рефакторинг UI опирается на понятную структуру: есть базовые элементы, есть их варианты, есть панели. Это сильно уменьшает цену изменений.
Итог
Модульная UI-архитектура на uGUI, основанная на нескольких базовых префабах и их вариантах, позволила нам превратить интерфейс Mafia Stories: Idle Tycoon из набора отдельных экранов в связанную систему.
Для команды это означало меньше рутинных задач, больше контролируемой визуальной свободы и возможность развивать игру, не боясь, что любое правка цвета или шрифта превратится в многочасовой марафон по сценам.
Такой подход не требует сложных сторонних библиотек — он требует лишь один раз продумать фундамент и дисциплинированно от него наследоваться.
Поделиться
