UI и сцены: Canvas, кнопки, меню

1. Системы UI в Unity

• uGUI — первая система UI Unity, основана на GameObject; ей делаются интерфейсы игр и приложений. Именно с ней мы работаем в этом конспекте.
• UI Toolkit — новая система, пришедшая из веб-разработки; позволяет создавать расширения для редактора Unity и интерфейсы реального времени.
• IMGUI — система «из кода»: инструменты отладки и пользовательские инспекторы редактора; для игровых интерфейсов не рекомендуется.

2. Холст (Canvas)

Создание: правая кнопка мыши в иерархии → UI → Canvas (или через меню GameObject). Появятся два объекта: Canvas — холст, на котором размещаются элементы интерфейса, и EventSystem — обработчик нажатий на холст. На объекте Canvas четыре компонента: Rect Transform (Transform, созданный специально под UI), Canvas (сам холст), Canvas Scaler (изменение размера холста) и Graphics Raycaster (попадание указателя в элементы).

В Canvas важна иерархия: чем выше объект в списке иерархии, тем ниже его приоритет отрисовки — нижние в списке рисуются поверх верхних.

Canvas Scaler — первое, что настраивается на холсте, чтобы интерфейс не разваливался при разных размерах окна. Режим Scale With Screen Size: холст масштабируется вслед за экраном; Reference Resolution — эталонное разрешение (практичный выбор — 1920×1080, 16:9); Screen Match Mode: Expand — за основание берётся самая узкая сторона, и элементы масштабируются пропорционально.

3. RectTransform и якоря

У любого объекта на холсте вместо Transform — компонент RectTransform: позиция, ширина и высота — плюс новый элемент, якорь (Anchor). Якорь — точка (или рамка) на холсте, от которой отсчитывается положение элемента. Кнопка с якорем в левом нижнем углу «держится» за этот угол при любом разрешении; кнопка с якорем-растяжкой меняет размер вместе с экраном.

4. Элементы: Image, Text (TMP), Button (TMP)

Image — картинка на холсте. Вместе с ней добавляется Canvas Renderer (он игнорирует геометрию элемента там, где прозрачность близка к нулю). Параметры: Source Image — спрайт; Color — цвет; Material — материал; Raycast Target — участвует ли элемент в попадании указателя; Maskable — применяется ли маска родителя.

Text (TMP) — текст. Использовать стоит именно TMP-версию (TextMeshPro), а не Legacy Text: функциональность заметно шире, а настройки привычны по текстовым редакторам. При первом создании TMP-элемента Unity предложит импортировать ресурсы — нажимаем Import TMP Essentials.

Button (TMP) — кнопка: при создании появляются компоненты Image и Button и дочерний объект Text (TMP). У кнопки настраиваются цвета состояний: обычное (Normal), наведение (Highlighted), нажатие (Pressed), выбор (Selected) и выключенное (Disabled — кнопка выключается снятием галочки Interactable). Главное в кнопке — событие OnClick() (Unity Event): список действий, выполняемых по нажатию.

5. Практика: кнопки двигают шар

Основа — сцена из A05. Сначала оградим площадку «забором» из растянутых кубов с отдельным материалом, чтобы шар не выкатывался, и поставим камеру над полем. Затем в иерархии создадим пустой объект UI — родителя для кнопок — и внутри него четыре кнопки Button — TextMeshPro с надписями направлений; расставим их по холсту и закрепим якорями.

Скрипт движения:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(Rigidbody))]
public class BallMove : MonoBehaviour
{
    private Rigidbody ball;                            // ссылка на компонент Rigidbody

    [SerializeField] private float powerImpulse = 80f; // сила толчка; видна в инспекторе

    void Start()
    {
        ball = gameObject.GetComponent<Rigidbody>();
    }

    public void MoveUp()    { ball.AddForce(Vector3.forward * powerImpulse); }
    public void MoveDown()  { ball.AddForce(-Vector3.forward * powerImpulse); }
    public void MoveLeft()  { ball.AddForce(Vector3.left * powerImpulse); }
    public void MoveRight() { ball.AddForce(-Vector3.left * powerImpulse); }
}

Разбор нового:

• [RequireComponent(typeof(Rigidbody))] — атрибут перед объявлением класса: принудительно добавляет объекту компонент Rigidbody, раз он нужен скрипту. Своеобразная «защита от дурака»; так можно требовать до трёх компонентов.
• [SerializeField] private float powerImpulse — приватное поле, которое благодаря атрибуту видно и редактируется в инспекторе: сила остаётся закрытой для других скриптов, но настраивается без правки кода.
• gameObject — объект, на котором висит скрипт; GetComponent<Rigidbody>() возвращает ссылку на компонент указанного в угловых скобках типа. Ссылку сохраняем в Start — это то самое кэширование из A07.
• AddForce(Vector3.forward * powerImpulse) — приложить к телу физическую силу; направление задаётся готовыми векторами (forward, left), умноженными на силу. Методы публичные — к ним будут обращаться кнопки.

Прикрепляем методы к кнопкам: скрипт — на шар; затем у каждой кнопки в поле OnClick() нажимаем «плюс», перетаскиваем шар из иерархии в поле объекта и выбираем в списке нужный метод — BallMove → MoveUp и так далее. Запускаем: шар катится по нажатию кнопок.

6. Сцены и главное меню

Игра не должна начинаться сразу с игрового процесса — по карте игрового процесса из A01 первым идёт главное меню. Создание сцены: в папке Assets/Scenes — правая кнопка мыши → Create → Scene; назовём её MainMenu. Чтобы меню не выглядело скучным, его можно «оживить»: скопировать площадку из игровой сцены, наклонить её, убрать одну стенку — а скрипт будет создавать шар в случайной точке, шар скатится, упадёт и уничтожится, и всё повторится.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;   // работа со сценами

public class MainMenuScript : MonoBehaviour
{
    [SerializeField] private GameObject ballPrefab;      // префаб шара
    [SerializeField] private float xBound = 6f;          // границы появления по X
    [SerializeField] private float zBound = 5.3f;        // границы появления по Z
    [SerializeField] private float destroyBorder = -15f; // высота уничтожения

    private GameObject ball;                             // текущий шар на сцене

    private void Update()
    {
        BallSpawner();
        BallDestroy(destroyBorder);
    }

    private void BallSpawner()
    {
        if (ball != null)
        {
            return;                                      // шар уже есть — выходим
        }

        float rXBound = Random.Range(-xBound, xBound);
        float rZBound = Random.Range(-zBound, zBound);
        Vector3 ballPos = new Vector3(rXBound, transform.position.y, rZBound);
        ball = Instantiate(ballPrefab, ballPos, Quaternion.identity);
        ball.transform.parent = transform;               // шар — дочерний к спаунеру
    }

    private void BallDestroy(float value)
    {
        if (ball.transform.position.y < value)
        {
            Destroy(ball);                               // упал ниже границы — уничтожаем
        }
    }

    public void AppExit()
    {
#if UNITY_EDITOR
        UnityEditor.EditorApplication.ExitPlaymode();    // в редакторе — выйти из Play
#endif
        Application.Quit();                              // в сборке — закрыть приложение
        Debug.Log("Exit");
    }

    public void LoadNextScene()
    {
        SceneManager.LoadScene(1);                       // загрузить сцену с индексом 1
    }
}

Разбор нового:

• using UnityEngine.SceneManagement — пространство имён для работы со сценами; SceneManager.LoadScene(1) загружает сцену по индексу из Build Settings.
• Instantiate(префаб, позиция, поворот) — создаёт экземпляр префаба; Quaternion.identity — «нулевой» поворот (кватернионы — способ записи поворотов; вдаваться в их математику сейчас не нужно).
• Random.Range(-xBound, xBound) — случайное число в границах; сравните с атомарной механикой «Случай» из A02.
• Destroy(ball) — уничтожение объекта; в связке со спаунером получается вечный цикл «создать → скатился → уничтожить».
• #if UNITY_EDITOR … #endif — платформозависимая компиляция: этот фрагмент попадает в код только в редакторе. Application.Quit() закрывает собранное приложение, но не режим Play — поэтому для редактора добавлена своя строка.

Финальные шаги. Создаём на сцене меню пустой объект Spawner, размещаем его над площадкой, добавляем на него MainMenuScript и перетаскиваем префаб шара в поле Ball Prefab. Кнопкам меню назначаем методы через OnClick(): «Начать игру» — LoadNextScene, «Выход» — AppExit.

6.1. Порядок сцен и освещение

Чтобы LoadScene(1) загрузил игровой уровень, сцены должны попасть в список сборки: File → Build Settings, перетаскиваем обе сцены в окно и сортируем — меню первым (индекс 0), уровень вторым (индекс 1).

Последний штрих: при переходе между сценами освещение иногда становится не таким, каким его настроили. Лечится генерацией: Window → Rendering → Lighting → кнопка New напротив Lighting Settings Asset → Generate Lighting; в остальных сценах вместо создания новых настроек выбираем уже созданные и тоже генерируем.

Контрольные вопросы

• Какие два объекта создаются командой UI → Canvas и за что отвечает каждый?
  Canvas — холст, на котором размещаются элементы интерфейса (с компонентами Rect Transform, Canvas, Canvas Scaler, Graphics Raycaster), и EventSystem — обработчик нажатий на холст.
• Как настроить холст, чтобы кнопки не «убегали» при смене разрешения?
  В Canvas Scaler выбрать режим Scale With Screen Size, задать эталонное разрешение (Reference Resolution, например 1920×1080) и Screen Match Mode: Expand; каждому элементу назначить якорь у края, за который он должен держаться.
• Что такое якорь в RectTransform?
  Точка или рамка на холсте, от которой отсчитывается положение (и при растяжке — размер) элемента. Кнопка с якорем в углу держится за угол при любом разрешении; якорь-растяжка меняет размер элемента вместе с экраном.
• Что делает атрибут [RequireComponent] и зачем он нужен?
  Ставится перед объявлением класса и принудительно добавляет объекту указанный компонент (до трёх), который нужен скрипту, — защита от ситуации, когда скрипт добавили, а необходимый компонент забыли.
• Зачем нужен [SerializeField], если поле и так можно сделать public?
  Атрибут делает приватное поле видимым и редактируемым в инспекторе, не открывая его другим скриптам: настройка без правки кода сохраняется, а инкапсуляция не нарушается.
• Как кнопка вызывает метод скрипта?
  Через событие OnClick() компонента Button: в списке события добавляется запись, в поле объекта перетаскивается объект со скриптом, из выпадающего списка выбирается публичный метод. По нажатию Unity вызовет его.
• Почему AppExit содержит и Application.Quit(), и код под #if UNITY_EDITOR?
  Application.Quit() закрывает только собранное приложение и не действует в редакторе. Директива платформозависимой компиляции добавляет в редакторе выход из режима Play (EditorApplication.ExitPlaymode), а в сборку этот код не попадает.
• Что определяет индекс сцены в SceneManager.LoadScene(1)?
  Порядок сцен в File → Build Settings: первая сцена списка имеет индекс 0, вторая — 1 и так далее. Сцена, не добавленная в список, загрузиться не может.

Источники

1. Unity UI (uGUI) // Unity Documentation : [сайт]. — URL: https://docs.unity3d.com/Packages/com.unity.ugui@latest (дата обращения: 08.07.2026).
2. Basic Layout (Rect Transform, Anchors) // Unity Documentation : [сайт]. — URL: https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html (дата обращения: 08.07.2026).
3. SceneManager // Unity Scripting API : [сайт]. — URL: https://docs.unity3d.com/ScriptReference/SceneManagement.SceneManager.html (дата обращения: 08.07.2026).
4. Кватернион // Википедия : свободная энциклопедия. — URL: https://ru.wikipedia.org/wiki/Кватернион (дата обращения: 08.07.2026).
5. Platform dependent compilation // Unity Documentation : [сайт]. — URL: https://docs.unity3d.com/Manual/platform-dependent-compilation.html (дата обращения: 08.07.2026).