UI: Canvas, текст, кнопки и счёт на экране

Очки, здоровье, кнопка «Старт» — это интерфейс. В Unity весь UI живёт на специальном объекте Canvas и работает по своим координатам.

Суть: весь интерфейс рисуется на Canvas — особом объекте поверх игры. UI-элементы (текст, кнопки, картинки) используют RectTransform вместо обычного Transform и привязываются к краям экрана через якоря (anchors). Текст обновляют из скрипта, кнопки вызывают методы.

Игровой мир и интерфейс — разные слои. Герой живёт в мировых координатах, а счёт и здоровье — поверх экрана, всегда на виду. Поэтому весь UI вешают на Canvas. Любой UI-элемент должен быть его ребёнком.

UI-элементы используют не обычный Transform, а RectTransform — он добавляет ширину, высоту и якоря. Якорь говорит: «держись этого угла экрана». Привязал счёт к левому верхнему углу — он останется там на любом разрешении, от телефона до 4K-монитора.

Как работает под капотом

Canvas (рисуется поверх игры)
   |
   +-- Текст "Счёт: 0"   (RectTransform, якорь = верх-лево)
   +-- Текст "HP: 100"   (RectTransform, якорь = верх-право)
   +-- Кнопка "Пауза"    (RectTransform, якорь = верх-центр)
   +-- Панель "Game Over"(скрыта, включается при проигрыше)

Для текста сейчас используют TextMeshPro (TMP) — он чётче и гибче старого Text. Чтобы показать счёт, ты держишь ссылку на текстовый элемент и переписываешь его строку из скрипта:

using UnityEngine;
using TMPro;

public class ScoreUI : MonoBehaviour
{
    [SerializeField] private TMP_Text scoreText;
    private int score = 0;

    public void AddPoints(int amount)
    {
        score += amount;
        scoreText.text = "Счёт: " + score;   // обновляем UI
    }
}

Кнопки работают через событие OnClick: в Inspector кнопки указываешь объект и его публичный метод, который вызвать при клике. Логика обновления интерфейса языко-независима — смоделируем «модель счёта и здоровья + текстовое представление» на Python:

# Модель состояния и функция, формирующая текст для UI
state = {"score": 0, "hp": 100}

def render_ui(state):
    return f"Счёт: {state['score']}   |   HP: {state['hp']}"

print(render_ui(state))            # стартовый интерфейс

# Подобрали 3 монеты по 10 очков, получили урон 25
state["score"] += 3 * 10
state["hp"] -= 25
print(render_ui(state))            # интерфейс обновился

if state["hp"] <= 0:
    print("Показать панель Game Over")
else:
    print("Игра продолжается")

Та же логика на Python ▶ — ключевая идея: есть состояние (модель) и есть представление (текст на экране). Меняешь состояние — перерисовываешь представление. В Unity это scoreText.text = ....

Частые ошибки

• UI-элемент вне Canvas. Текст или кнопка обязаны быть детьми Canvas, иначе не отрисуются.
• Игнорировать якоря. Без правильных якорей интерфейс «разъезжается» на других разрешениях экрана.
• Собирать строку счёта каждый кадр в Update. Обновляй текст только когда счёт реально изменился — постоянная сборка строк нагружает память.
• Старый Text вместо TextMeshPro. TMP чётче и мощнее; новые проекты используют его.

Best practices

• Используй TextMeshPro для всего текста.
• Настрой Canvas Scaler на режим «Scale With Screen Size», чтобы UI выглядел одинаково на разных экранах.
• Разделяй данные и отображение: храни счёт в переменной, а UI обновляй отдельным методом при изменении.

Итоги: весь UI живёт на Canvas, элементы используют RectTransform с якорями для привязки к краям экрана. Текст (TextMeshPro) обновляют из скрипта, кнопки вызывают методы по OnClick. Главный принцип — разделяй состояние и его отображение: меняется состояние, перерисовывается UI.

Три режима Canvas

У Canvas есть режим отрисовки (Render Mode), и от него зависит вся работа с интерфейсом. Screen Space - Overlay рисует UI поверх всего, прямо на экране — это твой выбор для счёта, здоровья, меню. Screen Space - Camera привязывает UI к камере, позволяя добавлять ему эффекты и перспективу. World Space делает Canvas обычным объектом в мире — так делают полоски здоровья над головами врагов или экран компьютера, на который герой смотрит внутри игры. Для большинства задач новичка нужен Overlay. Вторая обязательная настройка — компонент Canvas Scaler в режиме «Scale With Screen Size» с заданным эталонным разрешением: без него интерфейс, идеальный на твоём мониторе, расползётся на телефоне или 4K-экране. Эти две настройки решают 90 процентов проблем «у меня UI съехал».