В игре очень важно правильно определять столкновения . Никто не собирается играть в игру, где вещи начинают взрываться, даже если они на расстоянии нескольких пикселей друг от друга. Помимо графики и звуков, это еще одна вещь, которую вы должны стараться сохранить как можно точнее.
В этом руководстве вы узнаете об обнаружении и отладке коллизий в деталях.
Обнаружение и игнорирование хитов
Прежде чем вы сможете обнаружить какие-либо столкновения, вам нужно добавить компонент Collision к объекту. Этот компонент успешно обнаружит столкновение между любыми двумя выпуклыми многоугольниками. Этот компонент имеет два события: HitOn и HitOff . Событие HitOn срабатывает при столкновении. Он не будет запущен снова, пока не прекратятся столкновения этого конкретного типа. Событие HitOff срабатывает при прекращении столкновения.
Если вы проверяете наличие столкновения с несколькими компонентами, и все эти столкновения происходят одновременно, каждое столкновение вызовет свое собственное событие HitOn . Данные, полученные из события столкновения, действительны только до тех пор, пока столкновение все еще происходит.
Вы можете использовать метод .checkHits() для выполнения проверок коллизий всех объектов с указанным компонентом. Многократный вызов этого метода не приведет к множественным избыточным проверкам.
Имейте в виду, что проверка попадания выполняется при входе в каждый новый кадр. Допустим, есть два объекта, которые еще не столкнулись, когда выполняется проверка попадания. Теперь, если один из объектов перемещается в новое местоположение и перекрывается со вторым объектом позже в том же кадре, события попадания не будут срабатывать, пока проверка столкновения не будет выполнена снова в следующем кадре.
Если вам нужно обнаружить только первое столкновение между различными объектами, вы можете использовать метод .ignoreHits(String componentList) . Переменная componentList представляет собой разделенный запятыми список компонентов, с которыми вы больше не хотите обнаруживать коллизии. Если аргументы не предоставлены, он остановит обнаружение столкновения со всеми объектами. Вот пример:
|
1
2
3
4
|
littleBox.bind(«HitOn», function(hitData) {
Crafty(«Obstacle»).color(‘red’);
this.ignoreHits(‘Obstacle’);
});
|
Вы можете видеть, что Crafty начинает обнаруживать не только событие HitOn но и событие HitOff . Вот почему цвет большой коробки не меняется обратно на черный.
Другой аналогичный метод с именем .resetHitChecks(String componentList) можно использовать для повторной проверки на наличие конфликтов между конкретными компонентами. Этот метод будет HitOn событие HitOn снова и снова, пока столкновение все еще происходит.
Отладочные коллизии
Когда объекты движутся непрерывно, очень трудно увидеть, запускаются ли столкновения в нужное время. В приведенной выше демонстрации это выглядит так, как будто событие HitOn немного раньше фактического события. Лукавый дает вам возможность рисовать хитбоксы вокруг сущностей, чтобы вы могли реально видеть, что происходит.
Есть два компонента, которые вы можете использовать для целей отладки. Это WiredHitBox и SoldHitBox .
Первый компонент позволит вам использовать метод .debugStroke([String strokeColor]) , который будет рисовать контур вокруг объекта с заданным цветом. Если цвет не указан, красный цвет используется для рисования контура.
Аналогично, второй компонент используется для заливки объектов заданным цветом с использованием .debugFill([String fillStyle]) . Если цвет не указан, используется красный цвет. Вот демонстрация с .debugStroke() .
Создание пользовательского Hit Box
Вы также можете создать собственный хит-бокс для обнаружения столкновений. Это полезно, когда вы используете в игре спрайты изображений, которые не являются прямоугольными. Метод .collision() , который можно использовать для создания настраиваемой области попадания, принимает один параметр, который используется для установки координат нового поля попадания.
Эти координаты могут быть предоставлены в форме объекта многоугольника, массива пар координат x, y или списка пар координат x, y. Точки многоугольника отмечены по часовой стрелке, и они расположены относительно не повернутого состояния нашей сущности. Пользовательская область попадания будет автоматически вращаться, когда сущность вращается.
Есть несколько вещей, которые вы должны учитывать при использовании пользовательских областей попадания. Определяемая вами область попадания должна сформировать выпуклый многоугольник, чтобы обнаружение столкновений работало правильно Для тех, кто не знаком с этим термином, выпуклый многоугольник — это многоугольник со всеми внутренними углами менее 180 °. Вы также можете увидеть небольшое снижение производительности, когда определенная вами область попадания находится вне самой сущности.
Определенная вами область попадания не будет иметь никакого эффекта, если вы не добавите компонент Collision к каждому объекту, с которым ваша область попадания должна обнаруживать столкновение.
|
1
2
3
|
littleBox.collision(80, 0, 100, 100, 50, 100)
.debugStroke(‘green’)
.checkHits(‘Obstacle’);
|
В приведенной выше демонстрации мы определили настраиваемый блок попаданий, который находится за пределами оранжевого поля. Как видите, большой блок становится синим только тогда, когда он сталкивается с треугольником. Положение оранжевого поля не имеет значения.
Давайте посмотрим на другой пример, который использует космический корабль Gumichan01 . Хит-бокс по умолчанию для космического корабля — это граница самого спрайта. В текущем сценарии верхний правый угол космического корабля первым касается блока, но это пространство фактически пусто. Для пользователей, которые играют в вашу игру, это случай плохого обнаружения столкновений.
Здесь вы можете определить свою собственную область попадания, используя треугольную форму, как показано в следующем коде. Пользовательский полигон хит-бокса, который вы определяете, может иметь столько сторон, сколько вы хотите. Просто убедитесь, что это все еще выпуклый многоугольник.
|
1
|
spaceShip.collision(8, 0, 0, 48, 70, 48);
|
Вывод
После завершения всех этих уроков вы сможете создавать свои собственные маленькие игры с великолепной графикой, приятными звуковыми эффектами, сценами и обнаружением столкновений. Я должен напомнить вам, что я использовал Crafty версии 0.7.1 в этом руководстве, и демоверсии могут не работать с другими версиями библиотеки.
JavaScript стал одним из де-факто языков работы в сети. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
Если у вас есть какие-либо вопросы, дайте мне знать в комментариях.