🎨 UI в Unity: Часть 1 – Canvas в Unity
Графический интерфейс в Unity строится на трёх китах: Canvas, Raycaster и Canvas Scaler. Давайте разберём, как они работают вместе!
🖼 Canvas — холст для UI
Что делает?
1. Контейнер для всех UI-элементов (кнопки, тексты, изображения)
2. Определяет пространство рендеринга:
2.1. Screen Space (поверх камеры)
2.2. World Space (как 3D-объект в сцене)
2.3. Camera Space (привязан к камере)
🎯 Graphic Raycaster — обработка кликов
Зачем нужен?
1. Отвечает за взаимодействие с UI (клики, наведение)
2. Работает только с объектами внутри Canvas
Совет:
1. Для World Space UI добавьте Physics Raycaster на камеру – он нужен для обработки кликов в мировом пространстве.
📏 Canvas Scaler — контроль масштаба
Решает проблему: Как UI должен выглядеть на разных разрешениях?
Режимы масштабирования:
1. Constant Pixel Size — UI всегда одного размера в пикселях(Десктоп-приложения)
2. Scale With Screen Size — Масштабируется относительно разрешения(Мобильные игры)
3. Constant Physical Size — Сохраняет размер в реальных единицах (мм/дюймах)(AR/VR)
Настройки для Scale With Screen Size:
Reference Resolution (например, 1920x1080)
Match (Width/Height) — что в приоритете
🔗 Как они связаны?
Canvas рендерит UI-элементы
Canvas Scaler адаптирует их под разные экраны
Graphic Raycaster обрабатывает ввод (клики, тачи)
💡 Практические советы
Для мобильных игр используйте:
Scale Mode: Scale With Screen Size
Screen Match Mode: Expand (чтобы UI не обрезался)
Оптимизация:
Объединяйте элементы в одном Canvas (меньше draw calls)
Отключайте Raycaster для статичных UI
World Space UI:
Настройте Event Camera в Graphic Raycaster
Добавьте Physics Raycaster на основную камеру
⚠️ Частые ошибки
1. UI не кликается → Проверьте:
1.1. Наличие Graphic Raycaster
1.2. Блокирующие прозрачные объекты
1.3. Order in Layer
2. Размытый текст → Выберите правильный Render Mode в Canvas
3. UI "уплывает" → Для World Space настройте Rect Transform
Post #39
52