Главная » Хабрахабр » [Перевод] Создаём файтинг в Unity: реализация Hitbox и Hurtbox

[Перевод] Создаём файтинг в Unity: реализация Hitbox и Hurtbox

image

Объяснение

Что же такое hitbox и hurtbox? Разве это не одно и то же?

Ответ может зависеть от того, кому вы зададите вопрос, но в статье мы будем придерживаться мнения, что hitbox и hurtbox — это два различных понятия с разным применением, как это бывает в любой достойной игре-файтинге.

Hitbox — это невидимый прямоугольник (или сфера), определяющий, куда попадает атака.

Hurtbox — это тоже невидимый прямоугольник (или сфера), но определяющий место, в которое игрок или объект может ударить с помощью Hitbox.

На этом изображении из Street Fighter IV красный прямоугольник — это hitbox, а зелёный — hurtbox
Стоит заметить, что размер и позиция hitbox-ов и hurtbox-ов зависит от воспроизводимого кадра анимации:

Gif из Killer Instinct. Заметьте, что hitbox-ы появляются только в кадрах удара и движутся вместе с мечом

В примере из Killer Instinct мы также видим ещё один тип прямоугольников, а именно Pushbox (жёлтый прямоугольник; Hurtbox — это пустые зелёные прямоугольники). Pushbox — это область, обозначающая пространство, физически занимаемое персонажем, не позволяющее им накладываться друг на друга.

В большинстве игр жанра fighting и beat 'em up существует ещё два типа областей, которые мы для простоты не будем рассматривать:

Grab или throw box определяет область, за которую персонажа можно схватить или бросить, а block box определяет область, в которой атакуемый игрок, нажимающий кнопку «назад», начинает блокировать атаку вместо движения назад.

Hitbox-ы и Hurtbox-ы атак определяют не только количество кадров, в которых атака наносит урон, но и слепые зоны этой атаки, а также уязвимые места игрока. С точки зрения дизайна все эти области очень важны.

Хорошее объяснение этого на примере Street Fighter представлено в видео.

Итак, разобравшись с терминологией, давайте приступать к работе.

Чего мы хотим

Давайте рассмотрим каждый тип области, с которым мы хотим работать, и скажем, чего мы от них хотим:

Pushbox-ы должны взаимодействовать только с другими pushbox-ами. Pushbox: нам нужно, чтобы два pushbox-а соприкасались, но не накладывались друг на друга (именно поэтому они называются «областями отталкивания» (pushbox) — они толкают другого персонажа).

Hurtbox-ы должны взаимодействовать только с Hitbox-ами. Hurtbox: он может регистрировать удар, но не должен выполнять коллизии в физическом смысле.

Он должен взаимодействовать только с Hurtbox-ами. Hitbox: мы должны иметь возможность проверки наложения его на Hurtbox в произвольных кадрах.

Использование стандартных компонентов Unity

В первую очередь мы можем попробовать привязать разные типы областей к стандартным компонентам Unity. Очевидным выбором будет какой-нибудь Collider.

Он будет вести себя точно так, как нам нужно — реагировать на коллизии с объектами и не накладываться на другие Pushbox-ы. Pushbox можно непосредственно реализовать как Collider плюс Rigidbody.

Если вы знакомы с системой физики Unity, то уже знаете, что решение заключается в использовании слоёв и матрицы коллизий слоёв. Единственное, о чём нам нужно беспокоиться (кроме правильной настройки Rigidbody) — о реализации свойства "может иметь коллизии только с другими Pushbox-ами". Для понятности мы можем создать слой с названием Pushbox, назначить его нашему объекту и настроить матрицу коллизий таким образом, чтобы Pushbox выполнял коллизии только с Pushbox.

Для Hurtbox-ов мы можем взять Collider, использующий isTrigger. Так мы гарантируем, что он не будет выполнять коллизии в физическом смысле и будет только регистрировать другие коллайдеры, попадающие в его область. Для самой регистрации удара нам нужно добавить в тот же объект скрипт, реализующий событие OnTriggerEnter, возможно, с проверкой тэга входящего коллайдера, чтобы убедиться, что вызвавший событие коллайдер является нужным нам, а затем выполнить вычисления урона и здоровья, необходимые игре. Вероятно, вам знаком такой подход.

Также нам понадобится создать слои Hurtbox и Hitbox, и мы снова воспользуемся Layer Collision Matrix, чтобы Hurtbox выполнял коллизии только с Hitbox, и наоборот.

  • Заметьте, что нам не нужен Rigidbody, но только потому, что я считаю, что каждый добавляемый нами триггер будет дочерним объектом объекта Pushbox, у которого уже есть Rigidbody. Это важно, потому что Collider-ы без Rigidbody внутри себя или какого-то из своих родительских объектов будут определяться движком Unity как Static и их перемещение не приведёт ни к каким действиям.
  • Кроме того, нам, вероятно, потребуется различать Hitbox игрока от Hitbox одного из врагов. То же самое относится и к Hurtbox-ам. Благодаря этому Hitbox игрока сможет ударять только по Hurtbox врагов, а Hitbox-ы врагов смогут бить только по Hurtbox-ам игрока. Если вы хотите разрешить наносить урон союзникам, но здесь следует быть аккуратными, чтобы игрок не мог ударить собственный Hurtbox.

Hitbox-ы реализовать сложнее всего. Чтобы избежать физической коллизии, мы можем использовать Collider с isTrigger, на самом деле у нас нет коллайдеров, «входящих» в Hitbox. Решить эту задачу можно другим способом: Hitbox «входит в» (или проверяет наложение с) Hurtbox-ом. Как бы то ни было, нам нужен Collider, в противном случае Unity никогда не вызовет OnTriggerEnter в нашем Hurtbox.

Мы можем сделать это также другим способом: вызываемым для обоих Collider-ов OnTriggerEnter. Для нанесения урона Hurtbox-у нам нужно добавить скрипт в тот же объект, чтобы наш Hurtbox мог использовать GetComponent<T> и получал его, чтобы узнать, сколько урона нужно нанести. Для этого мы просто может отключать скрипт, поскольку в соответствии с документацией события Trigger передаются отключенным MonoBehaviours, чтобы позволить включать Behaviours в ответ на коллизии. Также нам нужно найти способ делать наш Hitbox активным только тогда, когда мы хотим, а не в каждом кадре и не тогда, когда персонаж не атакует.

Мы можем включать и отключать коллайдер или добавить в скрипт булево значение, сообщающее, должен ли он ударять, или нет.

Проблемы

  • Иерархия: нам нужно иметь скрипт в каждом объекте с Collider-ом, чтобы иметь возможность реагировать на OnTriggerEnter. Если вы предпочитаете ради порядка содержать все скрипты в одном месте, то вам потребуется создать скрипт, просто чтобы делегировать вызов всем другим объектам.
  • Чрезмерность: при таком подходе у наших Hitbox-ов есть огромный функционал, который нам не потребуется.
  • События: наш функционал основывается на OnTriggerEnter. Использование событий Unity может и не быть проблемой. но существуют причины по крайней мере для того, чтобы задуматься об их необходимости. Чтобы знать больше, также стоит изучить это (в разделе «Avoiding expensive calls to the Unity API»).
  • Визуальный шум: если для разных атак вы хотите использовать разные Hitbox-ы, то снова проявляются не только упомянутые выше проблемы, но и возникает визуальная зашумлённость в окне редактора.
  • Низкая гибкость: при использовании в качестве Hitbox-ов Collider-ов означает, что при изменении формы коллайдера, например, с Box на Sphere, вам придётся вручную удалять все BoxCollider и добавлять SphereCollider (или писать скрипт редактора, делающий эту работу за вас)

Создаём всё сами

Как вы наверно поняли из сказанного выше, Pushbox-ы и Hurtbox-ы достаточно удобно реализуются стандартными компонентами Unity.

У Hurtbox-ов всё ещё есть вышеупомянутые проблемы, и мы решим некоторые из них, но основной сущностью, требующей собственного абстрагирования, является Hitbox.

Для этого вам понадобится скрипт, строго делегирующий вызовы OnTriggerEnter активной атаке или выполняющий нечто подобное. Если вы создаёте файтинг со множеством атак и комбо, то вероятно хотите, чтобы все атаки были хорошо упорядочены в объекте и имелась возможность создания для каждой из них несколько сочетаний Hitbox-ов.

image

Мы не хотим создавать отдельный объект Hitbox для каждой из атак, и здесь мы можем использовать одни и те же, меняя их размер!

Hitbox-ы

Нам нужно, чтобы новый компонент решал следующие задачи:

  1. Обладать поведением Hitbox-а: он должен иметь возможность проверять наложение на Hurtbox в произвольных кадрах. Он обязан взаимодействовать только с Hurtbox-ами.
  2. Иметь визуальное представление в окне Scene.
  3. Быть настраиваемым и гибким.
  4. В идеале не зависеть от событий Unity API.
  5. Быть достаточно независимым, чтобы можно было использовать скрипт для другого объекта.
  6. Не быть привязанным к конкретной атаке. Hitbox-ы должны быть применимыми к нескольким разным атакам.

Поведение

Во-первых, как нам проверить, что какая-то область накладывается на Collider? Ответ заключается в использовании UnityEngine.Physics.

Мы можем указать нужную нам форму (Box, Sphere, Capsule), а также при желании получить Collider-ы, которые мы ударяем (если они есть) в виде массива или передать массив, чтобы заполнить его этими Collider-ами. В Physics есть множество методов, способных выполнить эту задачу. Пока мы не будем об этом думать, но в первом случае выделяется новый массив, а во втором мы просто заполняем уже существующий.

Для этого мы можем использовать OverlapBox. Давайте начнём с того, что будем проверять, ударяет ли по чему-нибудь прямоугольная область.

Для этого нам требуется центр прямоугольника, его половинная величина, поворот и слои, которые он должен ударять. Нам нужно задать размеры проверяемого прямоугольника. Половинная величина — это половины размеров в каждом из направлений, например, если у нас есть прямоугольник с размером (2, 6, 8) то его половинная величина будет равна (1, 3, 4).

В качестве центра мы можем использовать transform position GameObject-а, а для поворота — transform rotation GameObject-а, или добавить общие переменные для задания конкретных значений.

Половинная величина — это просто Vector3, поэтому мы сделаем его общим и будем использовать.

Это позволит нам выбирать слои в инспекторе. Для слоёв, которые можно ударять, мы создадим публичное свойство типа LayerMask.

Collider[] colliders = Physics.OverlapBox(position, boxSize, rotation, mask); if (colliders.Length > 0)

В случае правильной настройки и при наложении проецируемого прямоугольника на Collider в соответствующей маске при вызове мы должны увидеть сообщение в консоли.

Визуальное представление

Всё это здорово… но не слишком функционально. Пока мы не можем увидеть заданный где-то прямоугольник, будет очень сложно указать подходящие размеры и расположение Hitbox-ов.

С помощью OnDrawGizmos. Так как же нам отрисовать прямоугольник в окне Scene, но не в самой игре?

Именно то, что нам нужно! Как сказано в документации, Gizmos предназначены для визуальной отладки или вспомогательных построений в окне scene.

То есть мы просто создаём матрицу с позицией, поворотом и масштабом transform-а. Мы дадим нашему Gizmo цвет и матрицу преобразований.

private void OnDrawGizmos() { Gizmos.color = Color.red; Gizmos.matrix = Matrix4x4.TRS(transform.position, transform.rotation, transform.localScale); Gizmos.DrawCube(Vector3.zero, new Vector3(boxSize.x * 2, boxSize.y * 2, boxSize.z * 2)); // Потому что размер - это половинная величина }

При желании можно использовать OnDrawGizmosSelected, чтобы отрисовывать прямоугольник только при выборе объекта.

Настраиваемость и гибкость

Настраиваемость — это обширная тема, она во многом зависит от типа создаваемой игры и необходимого функционала.

Если вы используете Anima2D или какую-то скелетную анимацию, то вам возможно потребуется. В нашем случае мы позволим вносить быстрые изменения в форму и цвет хитбокса. чтобы Hitbox масштабировался в соответствии с масштабом костей.

Для настройки сферы необходимо будет добавить публичное свойство радиуса. Для изменения формы достаточно всего лишь добавить булево свойство и менять OverlapBox на любую другую форму, например на OverlapSphere. Не забывайте, что для отрисовки новой формы нужно будет изменить событие OnDrawGizmos (в нашем примере это будет DrawSphere).

Оно позволяет нам изменять форму хитбокса в зависимости от атаки (или даже для одной и той же атаки). Следует учесть, что мы не добавляем новый компонент и ничего не удаляем, а просто создали булево значение, которое будет выбирать накладываемую форму при проверке коллизий.

Позже нам понадобятся эти состояния для логики, так что давайте их добавим. Что касается цвета, то я хочу, чтобы Hitbox менял цвет при следующих состояниях: он неактивен, он проверяет наличие коллизий или он обнаружил коллизию с чем-то.

Мы создадим enum для состояния и три цвета, которые добавим как свойства нашего Hitbox-а.

public enum ColliderState { Closed, Open, Colliding }

Ваш класс может выглядеть примерно так:

public class Hitbox: MonoBehaviour { public LayerMask mask; public bool useSphere = false; public Vector3 hitboxSize = Vector3.one; public float radius = 0.5f; public Color inactiveColor; public Color collisionOpenColor; public Color collidingColor; private ColliderState _state; /* здесь методы */ }

Теперь мы можем обновлять gizmos, заменив строку Gizmos.color = Color.red; на вызов нового метода:

private void checkGizmoColor() { switch(_state) { case ColliderState.Closed: Gizmos.color = inactiveColor; break; case ColliderState.Open: Gizmos.color = collisionOpenColor; break; case ColliderState.Colliding: Gizmos.color = collidingColor; break; } }

Так где же мы будем изменять состояние? Нам нужны три элемента:

  1. способ сказать Hitbox-у начать проверку коллизий
  2. способ сказать ему прекратить
  3. способ проверки коллизии

Первые два очевидны:

public void startCheckingCollision() { _state = ColliderState.Open; } public void stopCheckingCollision() { _state = ColliderState.Closed; }

Теперь, когда Hitbox активен, мы хотим проверять в каждом кадре, нет ли у него с чем-нибудь коллизий, пока он активен. При этом мы переходим к следующему пункту.

Независимость от Unity Events API

Как вы возможно знаете, для проверки чего-то в каждом кадре мы можем использовать Update (ради упрощения я не добавляю проверку на изменение размера):

private void Update() { if (_state == ColliderState.Closed) { return; } Collider[] colliders = Physics.OverlapBox(position, boxSize, rotation, mask); if (colliders.Length > 0) { _state = ColliderState.Colliding; // Здесь мы должны сделать что-то с коллайдерами } else { _state = ColliderState.Open; } }

Как вы видите, мы выполняем возврат, только если текущее состояние имеет значение «Closed». Это значит, что мы по-прежнему проверяем коллизии, если Hitbox с чем-то сталкивается, что позволяет Hitbox-у ударять несколько объектов одновременно, а не только первый ударенный. В своей игре вы можете выполнять обработку иначе.

Решение может заключаться в создании собственного публичного метода обновления, который можно назвать hitboxUpdate (содержимое его будет таким же, как и у метода Update), и вызывать только в Hitbox-ах, используемых в текущей атаке. Мы используем Update, но не хотим зависеть от Unity Events API!

Очевидно, что нам понадобится вызывать Update() в каких-то объектах выше по иерархии, но нам точно не нужно использовать их в каждом Hitbox-е постоянно просто потому, что они есть.

Использование Hitbox-а скриптом в другом объекте

Помните — проблема использования Collider заключалась в том, что для реализации OnTriggerEnter нам нужен был скрипт в том же GameObject? Так как мы используем собственный скрипт и можем добавлять его к чему угодно, решение достаточно очевидно.

Мы добавим объект в качестве свойства, чтобы можно было вызывать для него какой-то метод при коллизии Hitbox-а.

Для решения этой задачи можно использовать разные подходы:

  • Мы можем добавить публичный GameObject и использовать SendMessage (у этого способа очень низкая скорость).
  • Можно сделать то же самое с Monobehaviour, использующим метод, который вызывается при коллизии Hitbox-а. У этого способа есть свой недостаток: если мы хотим, чтобы Hitbox-ы использовали разные скрипты, то необходимо будет добавлять все эти свойства или наследовать от базового скрипта, который содержит вызываемый метод
  • Можно создать интерфейс с методом, который необходимо вызывать, и реализовать его в каждом классе, который должен использовать Hitbox-ы.

С точки зрения структуры для меня очевидным выбором является interface. Единственная проблема в Unity заключается в том, что редактор по умолчанию не отображает интерфейсы как публичные свойства, поэтому мы не можем назначить его в редакторе. В следующем пункте я расскажу, почему это не является серьёзной проблемой.

Давайте создадим и применим интерфейс:

public interface IHitboxResponder { void collisionedWith(Collider collider); }

Добавим его как свойство в наш Hitbox…

public class Hitbox : MonoBehaviour { ... private IHitboxResponder _responder = null; ... /* и оставшаяся часть класса */ }

Также при желании можно использовать вместо одного респондента массив.

Давайте используем респондента:

public void hitboxUpdate() { if (_state == ColliderState.Closed) { return; } Collider[] colliders = Physics.OverlapBox(position, boxSize, rotation, mask); for (int i = 0; i < colliders.Length; i++) { Collider aCollider = colliders[i]; responder?.collisionedWith(aCollider); } _state = colliders.Length > 0 ? ColliderState.Colliding : ColliderState.Open; }

Если вам незнаком оператор "?", то прочитайте это.

Но как нам задать свойство _responder. Отлично! Давайте добавим сеттер и рассмотрим его в следующем пункте.

public void useResponder(IHitboxResponder responder) { _responder = responder; }

Hitbox-ы должны быть применимыми к нескольким разным атакам, а не привязаны к одной

В этом разделе я объясню, почему не важно то, что мы не можем задать HitboxResponders с помощью редактора.

В выбранном нами для реализации Hitbox-ов подходе респондентом является любой класс, который должен что-то делать, когда Hitbox находится в коллизии с Collider-ом, то есть реализует IHitboxResponder. Сначала давайте поговорим об этих «респондентах». Для примера можно взять скрипт атаки: мы хотим, чтобы он наносил урон тому, что мы ударим.

Так как мы хотим, чтобы он не был связан с какой-то конкретной атакой и его можно было использовать многократно, задание респондентов в редакторе ничего бы нам не дало, потому что мы хотим иметь возможность менять респондентов на лету.

Так как обе эти атаки выполняются одной конечностью, давайте используем один Hitbox. Допустим, у нас есть два типа атак — прямой удар и апперкот той же рукой, и у каждого их них есть свой скрипт, сообщающий, в каких кадрах анимации он должен ударять, сколько урона наносить и тому подобное.

public class Attack: Monobehaviour, IHitboxResponder { ... public int damage; public Hitbox hitbox; ... public void attack() { hitbox.setResponder(this); // выполняем всё остальное для атаки } void collisionedWith(Collider collider) { Hurtbox hurtbox = collider.GetComponent<Hurtbox>(); hurtbox?.getHitBy(damage); } }

Отлично! Мы создали работающие хитбоксы. Как видно из кода выше, мы добавили Hurtbox-ам метод getHitBy(int damage). Давайте посмотрим, сможем ли мы его улучшить.

Усовершенствование Hurtbox-ов

В идеале для Hurtbox-ов мы хотим реализовать более-менее те же пункты, что и для Hitbox-ов. Это должно быть проще, потому что у Collider-а есть необходимый нам функционал. Также нам нужно использовать Collider, иначе Physics.Overlap… не будет сообщать об ударе.

Заметьте, что благодаря тому, как мы структурировали код, нам не нужно ни для чего использовать OnTriggerEnter, мы получаем скрипт с помощью GetComponent.

Для обеспечения такой же гибкости, как у Hitbox-ов, нам нужно добавлять и удалять коллайдеры на лету, а для настраиваемости мы можем рисовать на коллайдере цвет в зависимости от его состояния. Это даёт нам настраиваемость и гибкость.

public class Hurtbox : MonoBehaviour { public Collider collider; private ColliderState _state = ColliderState.Open; public bool getHitBy(int damage) { // Делаем что-то с уроном и состоянием } private void OnDrawGizmos() { // Можно просто снова использовать код из хитбокса, // но получая размер, поворот и масштаб из коллайдера } }

Добавлять и удалять Collider-ы на лету не так просто, как Hitbox-ы. Я не нашёл удовлетворительного способа для выполнения этой задачи. Мы можем добавить к скрипту несколько разных Collider-ов и выбирать нужный с помощью булевого значения, как мы делали это в Hitbox-ах. Проблема здесь заключается в том, что необходимо добавлять в качестве компонента каждый нужный Collider и в результате у нас получится сильная визуальная зашумлённость в редакторе и на объекте.

Ещё одним подходом будет добавление и удаление компонентов через код, но такое решение прибавит кучу ненужного мусора и вероятно будет не таким точным.

Было бы идеально, чтобы Hurtbox наследовал от Collider-а, а вся его логика форм была внутренней и мы могли бы отрисовывать только ту форму, которую сейчас используем, но мне не удалось заставить эту систему работать так, как хотелось.

Что дальше?

Если вы повторяли внимательно следили и повторяли за операциями в посте, то теперь у вас есть реализованные в Unity hitbox-ы, hurtbox-ы и pushbox-ы. Но что более важно, теперь мы знаем эти абстракции, и это сильно упростит работу, если вы будете надстраивать что-то поверх них.

Вероятно, сейчас инспектор скриптов у вас выглядит ужасно, но не волнуйтесь, это мы рассмотрим в следующем посте:

Мы можем превратить это...

Во что-то вроде этого!


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Классный тимлид ответит за сервис

Кто такой тимлид в Яндексе? Чем хороший отличается от плохого и стоит ли приглашать на эту должность человека со стороны — в нашем интервью с Алексеем Шаргаевым, занимающим одну из руководящих должностей в поисковых службах Яндекса. — Чем ты занимаешься ...

Job system и поиск пути

Карта В предыдущей статье я разобрал, что из себя представляет новая система задач Job system, как она работает, как создавать задачи, наполнять их данными и выполнять многопоточные вычисления и лишь в двух словах объяснил где можно использовать эту систему. В ...