Part 7 https://dzen.ru/a/Y7-9ob6mAwrk-krr
Прежде чем мы приступим с созданию "врагов", давайте определимся со сценарием окончания игры и напишем для него скрипт, поскольку он нам понадобится при создании "врагов".
Цель игры - провести Джона Лимона к выходу из дома так, чтобы его не заметили опасные обитатели дома. Если игрок это сделал, то он выиграл. Если кот был обнаружен и пойман при попытке к бегству, то игра проиграна. Если игрок проиграет, то мы должны плавно сменить вид игры на черный фон, а если выиграет, то добавить на черный фон картинку победы. Таким образом мы реализуем конец игры.
Мы использовали уже до этого компоненты пользовательского интерфейса в 2D проектах. Пользовательский интерфейс (UI) в Unity - это набор компонентов, которые позволяют быстро и просто реализовать взаимодействие игрока с интерфейсом игры. К ним относятся кнопки, которые пользователь может нажимать; картинки, которые отображают полезную информацию; слайдеры, при помощи которых можно регулировать значения каких-либо параметров и т.д. Все эти компоненты пользовательского интерфейса находятся на канве (объект Canvas), который добавляется автоматически вместе с любым компонентом пользовательского интерфейса. Черный фон по окончании игры мы можем добавить через элемент пользовательского интерфейса Image с черной заливкой.
В окне иерархии объектов нажмите кнопку "+" и выберите пункт UI > Image.
Чтобы компоненты пользовательского интерфейса могли реагировать на действия пользователя вместе с канвой добавляется еще один объект EventSystem, который контролирует действия пользователя с компонентами канвы.
В нашей игре компонент Image нам необходим для реализации эффекта завершения игры и никаких взаимодействий с пользователем нам не нужно. Поэтому объект EventSystem можно удалить.
Объект Canvas и весь пользовательский интерфейс на нем создается отдельно от игровой сцены. Двойной клик на этом объекте в иерархии изменит вид игровой сцены на созданную канву следующим образом:
Я изменила обзор сцены, сделав его более удобным, потому что изначально канва отображается как бы с обратной стороны. Каркас прямоугольника в центре - это и есть наша канва пользовательского интерфейса, а белый квадрат в нижней левой части этого прямоугольника - это объект Image. Игровая сцена, как видно располагается отдельно от канвы внизу, а белые линии внизу - это область обзора нашей камеры. При работе с канвой удобно перейти в режим 2D, поскольку канва все же не трехмерный объект.
Давайте рассмотрим инспектор объекта канвы. Компонент Transform здесь отличается от тех, что вы видели раньше. Игровые объекты, которые являются частью системы пользовательского интерфейса, нуждаются в более точном и гибком управлении своим положением, поэтому здесь используется компонент Rect Transform . Для Canvas в корне иерархии пользовательского интерфейса параметры Rect Transform доступны только для чтения.
Компонент Canvas управляет визуализацией элементов пользовательского интерфейса. Есть три режима визуализации элементов канвы на игровую сцену:
- Screen Space - Overlay — канва заполняет экран, а все элементы пользовательского интерфейса канвы отображаются поверх всего остального независимо от настроек камеры.
- Screen Space - Camera — канва заполняет экран, но отображается для какой-то конкретной камеры и зависит от расстояния до камеры.
- World Space — пользовательский интерфейс существует в сцене и отображается перед или позади других объектов (например, теги имен над персонажами в трехмерном мире).
Вам нужно растянуть изображение по экрану и отобразить его поверх всего остального. Это означает, что режим Screen Space — Overlay, который стоит по умолчанию идеально подходит.
Следующий компонент Canvas Scaler . Он используется как простой способ управления относительными размерами элементов пользовательского интерфейса, когда они отображаются на экранах разных размеров. Ваше изображение будет растянуто на весь экран, поэтому вам не нужно беспокоиться о его относительном масштабе. Щелкните значок с тремя точками в правом верхнем углу компонента Canvas Scaler, чтобы открыть контекстное меню и выберите "Remove Component".
И последний компонент игрового объекта Canvas — это "Graphic Raycaster". Он используется для обнаружения событий пользовательского интерфейса, таких как клики. Он определит, какой элемент пользовательского интерфейса был нажат, и отправит событие этому элементу, чтобы соответствующий компонент мог отреагировать. Игрок не будет взаимодействовать с пользовательским интерфейсом в нашей игре, поэтому этот компонент не нужен. Щелкните значок с тремя точками в правом верхнем углу компонента Graphic Raycaster, чтобы открыть контекстное меню и выберите "Remove Component".
Теперь давайте растянем изображение на весь экран, но сначала разберемся как работает компонент Rect Transform.
До этого мы работали с компонентом Transform, который указывал положение центра игрового объекта относительно родителя этого игрового объекта. Центр - это просто точка, которая имеет три координаты. Но элементы пользовательского интерфейса это не просто точка - это некая область, поэтому положение элемента относится к области своего родителя. Эта область родителя представлена якорями.
Вы видите эти якоря на канве, они выглядят вот так:
Это похоже на цветок, но на самом деле это просто четыре якоря, по умолчанию сходящиеся в одну точку. Соответственно сейчас наше изображение привязано к центру канвы и находится на определенном расстоянии от него. Положение элементов пользовательского интерфейса измеряется в пикселях, но не все экраны имеют одинаковое количество пикселей, а нам бы хотелось, чтобы положение элемента всегда было в одном и том же месте независимо от размера экрана. Именно поэтому использование якорей - это универсальный подход, который позволяет размещать элементы независимо от количества пикселей на экране.
Наше изображение должно покрывать весь экран, независимо от его формы или размера. Чтобы добиться этого, нужно расставить якоря точно по краям канвы.
Для этого выбираем элемент Image в иерархии. Затем в инспекторе нажимаем на кнопку установки якорей, после чего нажимаем и держим клавишу Alt. Тип якорей сменится на привязку по краям. Убедитесь, что тип якорей точно такой же, как на рисунке ниже и выберите нижний правый элемент, который расставит якоря точно по краям канвы без каких-либо смещений.
Изображение автоматически растянется на всю канву и теперь можно увидеть, что якоря располагаются по углам канвы:
Теперь перейдите к компоненту Image. Первое свойство называется "Source Image". Оно позволяет задать конкретную картинку, но если оставить это поле пустым, то получится прямоугольник сплошного цвета. В данном случае у нас белый прямоугольник, но давайте изменим цвет на черный, чтобы получить просто черный экран при завершении игры. Откройте окно выбора цвета и установите для каналов RGB значение (0, 0, 0). Четвертый канал "А", составляющий Color - это прозрачность цвета (Alpha). Чем ниже значение Alpha, тем более прозрачен GameObject. Настройка прозрачности изображения будет ключом к его постепенному появлению и исчезновению.
Теперь добавим изображение, которое будет отображаться поверх черного экрана. В окне иерархии переименуйте текущий объект Image в ExitImageBackground. Щелкните правой кнопкой мыши по этому объекту ExitImageBackground и в появившемся контекстном меню выберите UI > Image. Это создаст дочерний объект по отношению к текущему. Переименуйте созданное изображение в ExitImage.
В свойстве "Source Image" этого дочернего изображения выберите из появившегося списка в самом конце изображение "Won".
А теперь проделайте с якорями этого изображения то же самое, что с родительским - в инспекторе установите якоря точно по краям канвы при помощи кнопки установки якорей и клавиши Alt. А чтобы изображение не было растянутым, в компоненте Image найдите галочку "Preserve Aspect" и установите ее:
Далее давайте рассмотрим, как заставить эти элементы пользовательского интерфейса появляться и исчезать, когда вы этого хотите. Вы уже знаете, что можно отрегулировать значение альфа-канала компонента изображения, чтобы оно пропадало. Но поскольку теперь есть два изображения, вам нужно будет изменить прозрачность обоих этих изображений. Чтобы помочь вам в этом, существует компонент под названием Canvas Group, который позволяет вам управлять свойствами UI-элементов вместе с их дочерними элементами.
Чтобы добавить компонент Canvas Group в окне иерархии объектов выберите игровой объект ExitImageBackground и в инспекторе добавьте компонент Canvas Group:
Измените свойство Alpha у этого компонента на 0. Изображение станет полностью прозрачным и пропадет с экрана, но это нормально. В иерархии объектов вы всегда можете удостовериться, что объект изображения никуда не пропал, а просто стал прозрачным:
На этом подготовительный этап создания окончания игры закончен. Не забудьте отключить режим 2D!
Осталось создать необходимые коллайдеры и написать для них скрипт.
Part 9 https://dzen.ru/a/Y8F9L0Me-RGcLy4S
