До сих пор для вывода здоровья мы использовали консоль, но у игроков нет окна консоли, да и выглядит это некрасиво. Чтобы отображать состояние персонажа в играх используют пользовательский интерфейс (UI), который накладывает изображения и текст сцену для отображения информации. Это также называется проекционным дисплеем (HUD).
Наша задача - добавить пользовательский интерфейс в нашу игру , чтобы показать текущее состояние здоровья Ruby.
Пользовательский интерфейс в Unity отображает компоненты пользовательского интерфейса, такие как изображения, ползунки и кнопки, с помощью GameObject , называемого компонентом Canvas . Canvas определяет, как каждый элемент пользовательского интерфейса должен отображаться на экране, и заботится об отображении всех компонентов пользовательского интерфейса , которые являются его дочерними элементами.
Первым шагом при создании пользовательского интерфейса является создание Canvas (холста). Щелкните правой кнопкой мыши по пустому месту в окне иерархии или используя кнопку "+" вверху этого окна и выберите UI > Canvas:
В иерархии появится два игровых объекта - один игровой объект Canvas и другой, который называется EventSystem. Это объект со специальным компонентом, который обрабатывает события и взаимодействие с UI, например щелчок мышью. Мы не будем его использовать в этой игре, поэтому его можно удалить.
Теперь давайте найдем объект холста на сцене. Проскрольте сцену до тех пор пока не увидите полностью прямоугольник - это и есть холст пользовательского интерфейса, который отображается отдельно от игровой сцены.
Так сделано, чтобы холст не пересекался с игровой сценой, и было удобно создавать пользовательские интерфейсы. Слева внизу находится игровая сцена, вы можете всегда вернуться к ней. Все элементы интерфейса должны располагаться на этом большом прямоугольнике, а элементы игры на игровой сцене. Нельзя размещать элементы пользовательского интерфейса на игровой сцене!
Посмотрим на инспектор объекта Canvas.
Первое отличие состоит в том, что здесь вместо компонента Transform присутствует компонент Rect Transform.
Rect Transform является расширением компонента Transform, поэтому его можно использовать и как Transform в своих скриптах. Отличие в том, что у него есть дополнительные данные пользовательского интерфейса, которые мы рассмотрим далее.
Canvas определяет, как пользовательский интерфейс отображается в игре:
- Screen Space - Overlay (пространство экрана — наложение): этот режим по умолчанию позволяет Unity отображать пользовательский интерфейс поверх игры. В этом режиме холст масштабируется для заполнения всего экрана, а затем рисуется напрямую, не ссылаясь на сцену или камеру (интерфейс написуется даже если в сцене вообще нет камеры). Большинство приложений используют этот режим, потому что пользовательский интерфейс в этом случае отображает всю информацию на плоскости.
- Screen Space - Camera (пространство экрана — камера): в этом режиме пользовательский интерфейс отображается как бы нарисованным на плоском объекте на некотором расстоянии от камеры. Размер плана таков, что он всегда заполняет экран, поэтому вы можете перемещать камеру, и плоскость будет двигаться вместе с камерой, чтобы выглядеть так же, как наложение. Любые объекты сцены, расположенные ближе к камере, чем плоскость интерфейса, будут отрисованы “над” интерфейсом. Объекты, расположенные ближе будет отрисованы "за" плоскостью интерфейса.
- World Space (пространство мира): в этом режиме интерфейс отрисовывается в любой точке мира, как если бы он был плоским объектом сцены. При этом плоскость интерфейса не обязана быть перпендикулярной направлению камеры, и может быть ориентирована как угодно. Например, в этом случае можно расположить холст на экране компьютера в игре, на стене или поверх своего персонажа. В этом режиме элементы пользовательского интерфейса становятся меньше с расстоянием.
В нашем проекте воспользуемся настройкой по умолчанию - Screen Space - Overlay, так как HUD здоровья Ruby должно отображаться всегда одинаково и не скрываться другими объектами.
В Canvas есть компонент Canvas Scaler , который определяет, как пользовательский интерфейс масштабируется при разных размерах экрана. Некоторые игроки, например, могут запускать вашу игру с разрешением 800 x 600, а другие — с разрешением 1920 x 1080 - эти варианты требуют разных размеров экрана и соотношений.
Есть три размера Canvas Scaler :
- Constant Pixel Size (постоянный пиксельный размер): режим, когда положение и размеры элементов пользовательского интерфейса задаются в пикселях. Это позволяет пользовательскому интерфейсу оставаться одного размера, независимо от размера или формы экрана, что делает его читаемым на любых экранах. Но на небольших экранах пользовательский интерфейс может занимать слишком много места, что выглядит некрасиво.
- Scale With Screen Size (масштаб по размером экрана): позволяет масштабировать пользовательский интерфейс в зависимости от размера экрана, установленного в качестве эталонного разрешения. Например, если вы установите для эталонного разрешения значение 800 x 600 , а ширина вашего экрана составляет 1600 пикселей , пользовательский интерфейс увеличится в два раза. Таким образом, пользовательский интерфейс всегда занимает одну и ту же часть экрана, независимо от размера экрана. Но это может привести к тому, что пользовательский интерфейс будет слишком маленьким для чтения, если ваш эталонный размер большой, а кто-то играет в игру на гораздо меньшем экране. И наоборот - интерфейс будет размытым и пиксельным, если вы сделаете его для небольших экранов, а кто-то запустит его на слишком большом экране.
- Constant Physical Size (постоянный физический размер): в этом режиме положение и размеры элементов пользовательского интерфейса указываются в физических единицах, например, миллиметрах.
Наконец, последний компонент Canvas — это Graphic Raycaster. Он позволяет элементам, являющимся частью холста, например кнопкам, определять, когда на них нажимают.
Теперь, когда мы настроили Canvas можно добавить индикатор здоровья в пользовательский интерфейс. Он будет состоять из двух частей:
- фоновое изображение, которое представляет собой портрет Ruby
- слот для индикатора здоровья. Синий индикатор, нарисованный сверху, будет динамически меняться в зависимости от текущего состояния здоровья персонажа.
Чтобы добавить изображение, выберите Canvas в окне иерархии, нажмите «+» (или кликните правой кнопкой мыши на объект Canvas) и выберите UI > Image.
Это создаст новый объект изображения как дочерний элемент Canvas, и внутри белого прямоугольника появится белый квадрат, так как мы еще не назначили спрайт нашему изображению.
Обратите внимание, что это изображение относится НЕ к игровой сцене, а к пользовательскому интерфейсу.
Давайте изменим этот белый прямоугольник на нужное нам изображение, перетащив спрайт под названием UIHealthFrame из папки Art > Sprites > UI в свойство Source Image объекта изображения:
Изображение сжимается, поскольку сохраняет размер исходного квадрата. Чтобы изменить установить размер изображения по размерам спрайта, нажмите кнопку «Set Native Size» в инспекторе. Теперь ваше изображение станет слишком большим:
Это потому, что спрайт имеет ширину 1336 пикселей, а экран меньшего размера. Давайте изменим его масштаб до нужного размера. Выберите изображение и убедитесь, что на панели инструментов выбран инструмент «Rect tool». Перетащите углы или стороны, чтобы изменить размер изображения, удерживаете клавишу Shift во время перетаскивания. Так вы сохраните правильное соотношение сторон при изменении размера, и ваше изображение будет масштабироваться равномерно. Разместите изображение в верхнем левом углу, перетащив его мышкой в это положение так, чтобы оно зафиксировалось в этом положении:
Чтобы проверить, как элемент интерфейса выглядит в игре, перейдите во вкладку Game:
Элемент линейки здоровья располагается слева в верхнем углу. Но если изменить разрешение экрана, то линейка здоровья "съедет". Элементы интерфейса вне зависимости от разрешения экрана должны располагаться на строго определенном месте. В частности, линейка здоровья должна находиться в верхнем левом углу и никуда не "уезжать".
Чтобы исправит эту проблему используют якоря. Выберите изображение в окне иерархии и посмотрите на сцену:
Голубой кружок в центре объекта - это точка Pivot. Каждый элемент интерфейса имеет точку Pivot, относительно которой происходит трансформация объекта. А крестик в центре экрана — это якоря вашего изображения, с помощью которых можно "привязать" углы элемента к Canvas. На самом деле это четыре отдельных якоря, которые обозначаются треугольником, которые сошлись в одной точке. Каждый якорь отвечает за привязку одного из углов элемента интерфейса. По умолчанию якорь любого элемента находится в центре холста.
Нам же нужно привязать изображение к углу. Для этого нажмите на квадрат в верхнем левом углу компонента Rect Transform:
Вы увидите стандартные варианты настройки якорей. Выберите расположение якорей как в верхнем левом варианте:
Обратите внимание, что все четыре якоря переместятся в левый верхний угол. Убедитесь, что ваше изображение находится в углу вне зависимости от разрешения экрана.
Переименуйте объект изображения на Health, чтобы мы знали, что это пользовательский интерфейс здоровья.
