Введение
API Pointer Lock помогает правильно реализовать элементы управления шутером от первого лица в браузерной игре. Без относительного движения мыши курсор игрока может, например, попасть в правый край экрана, и любые дальнейшие движения вправо будут не учитываться - изображение не будет продолжать панорамироваться вправо, и игрок не сможет преследовать плохое ребят и обстреливать их из своего пулемета. Игрок будет разбит и расстроен. При блокировке указателя такое неоптимальное поведение невозможно.
API Pointer Lock позволяет вашему приложению выполнять следующие действия:
- Получите доступ к необработанным данным мыши, включая относительные движения мыши.
- Направьте все события мыши на определенный элемент
В качестве побочного эффекта включения блокировки указателя курсор мыши скрывается, что позволяет вам при желании нарисовать указатель для конкретного приложения или оставить указатель мыши скрытым, чтобы пользователь мог перемещать рамку с помощью мыши. Относительное движение мыши — это отклонение положения указателя мыши от предыдущего кадра, независимо от абсолютного положения. Например, если указатель мыши переместился из (640, 480) в (520, 490), относительное перемещение будет (-120, 10). Ниже приведен интерактивный пример, показывающий необработанные изменения положения мыши.
В этом руководстве рассматриваются две темы: основные моменты активации и обработки событий блокировки указателя, а также реализация схемы управления шутером от первого лица. Да-да, когда вы закончите читать эту статью, вы узнаете, как использовать блокировку указателя и реализовать элементы управления в стиле Quake для вашей собственной браузерной игры!
Совместимость с браузером
Механика блокировки указателя
Обнаружение функций
Чтобы определить, поддерживает ли браузер пользователя блокировку указателя, вам необходимо проверить наличие pointerLockElement или версии с префиксом поставщика в объекте документа. В коде:
var havePointerLock = 'pointerLockElement' in document ||
'mozPointerLockElement' in document ||
'webkitPointerLockElement' in document;
В настоящее время блокировка указателя доступна только в Firefox и Chrome. Opera и IE пока не поддерживают его.
Активация
Активация блокировки указателя представляет собой двухэтапный процесс. Сначала ваше приложение запрашивает блокировку указателя для определенного элемента, и сразу после того, как пользователь дает разрешение, срабатывает событие pointerlockchange . Пользователь может отменить блокировку указателя в любой момент, нажав клавишу Escape. Ваше приложение также может программно выйти из блокировки указателя. Когда блокировка указателя отменяется, срабатывает событие pointerlockchange .
element.requestPointerLock = element.requestPointerLock ||
element.mozRequestPointerLock ||
element.webkitRequestPointerLock;
// Ask the browser to lock the pointer
element.requestPointerLock();
// Ask the browser to release the pointer
document.exitPointerLock = document.exitPointerLock ||
document.mozExitPointerLock ||
document.webkitExitPointerLock;
document.exitPointerLock();
Приведенный выше код — это все, что нужно. Когда браузер заблокирует указатель, появится всплывающее окно, сообщающее пользователю, что ваше приложение заблокировало указатель, и сообщающее им, что они могут отменить его, нажав клавишу «Esc».
Обработка событий
Есть два события, для которых ваше приложение должно добавить прослушиватели. Первый — pointerlockchange , который срабатывает всякий раз, когда происходит изменение состояния блокировки указателя. Второй — mousemove , который срабатывает всякий раз, когда мышь перемещается.
// Hook pointer lock state change events
document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
// Hook mouse move events
document.addEventListener("mousemove", this.moveCallback, false);
Внутри обратного вызова pointerlockchange вы должны проверить, был ли указатель только что заблокирован или разблокирован. Определить, включена ли блокировка указателя, просто: проверьте, равен ли document.pointerLockElement элементу, для которого была запрошена блокировка указателя. Если это так, ваше приложение успешно заблокировало указатель, а если нет, то указатель был разблокирован пользователем или вашим собственным кодом.
if (document.pointerLockElement === requestedElement ||
document.mozPointerLockElement === requestedElement ||
document.webkitPointerLockElement === requestedElement) {
// Pointer was just locked
// Enable the mousemove listener
document.addEventListener("mousemove", this.moveCallback, false);
} else {
// Pointer was just unlocked
// Disable the mousemove listener
document.removeEventListener("mousemove", this.moveCallback, false);
this.unlockHook(this.element);
}
Когда блокировка указателя включена, clientX , clientY , screenX и screenY остаются постоянными. movementX и movementY обновляются с учетом количества пикселей, на которое указатель переместился бы с момента доставки последнего события. В псевдокоде:
event.movementX = currentCursorPositionX - previousCursorPositionX;
event.movementY = currentCursorPositionY - previousCursorPositionY;
Внутри обратного вызова mousemove данные относительного движения мыши могут быть извлечены из полей movementX и movementY события.
function moveCallback(e) {
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0,
movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0;
}
Обнаружение ошибок
Если при входе или выходе из блокировки указателя возникает ошибка, срабатывает событие pointerlockerror . К этому событию не прикреплены никакие данные.
document.addEventListener('pointerlockerror', errorCallback, false);
document.addEventListener('mozpointerlockerror', errorCallback, false);
document.addEventListener('webkitpointerlockerror', errorCallback, false);
Требуется полноэкранный режим?
Первоначально блокировка указателя была привязана к API FullScreen. Это означает, что элемент должен находиться в полноэкранном режиме, прежде чем на него можно будет зафиксировать указатель. Это уже не так, и блокировку указателя можно использовать для любого элемента вашего приложения в полноэкранном или нет.
Пример управления шутером от первого лица
Теперь, когда у нас включена блокировка указателя и мы получаем события, пришло время для практического примера. Вы когда-нибудь хотели узнать, как работают элементы управления в Quake? Пристегнитесь, потому что я собираюсь объяснить это с помощью кода!
Управление в шутере от первого лица построено на четырех основных механиках:
- Перемещение вперед и назад по текущему вектору вида.
- Перемещение влево и вправо по текущему вектору стрейфа.
- Вращение обзора (влево и вправо)
- Вращение угла обзора (вверх и вниз)
Игра, реализующая эту схему управления, требует всего три части данных: положение камеры, вектор обзора камеры и постоянный вектор вверх. Вектор вверх всегда равен (0, 1, 0). Все четыре вышеперечисленных механизма просто по-разному манипулируют положением камеры и вектором обзора камеры.
Движение
Первое на палубе — это движение. В приведенной ниже демонстрации движение сопоставлено стандартным клавишам W, A, S и D. Клавиши W и S перемещают камеру вперед и назад. При этом клавиши A и D управляют камерой влево и вправо. Перемещать камеру вперед и назад просто:
// Forward direction
var forwardDirection = vec3.create(cameraLookVector);
// Speed
var forwardSpeed = dt * cameraSpeed;
// Forward or backward depending on keys held
var forwardScale = 0.0;
forwardScale += keyState.W ? 1.0 : 0.0;
forwardScale -= keyState.S ? 1.0 : 0.0;
// Scale movement
vec3.scale(forwardDirection, forwardScale * forwardSpeed);
// Add scaled movement to camera position
vec3.add(cameraPosition, forwardDirection);
Стрейф влево и вправо требует направления стрейфа. Направление стрейфа можно вычислить с помощью векторного произведения:
// Strafe direction
var strafeDirection = vec3.create();
vec3.cross(cameraLookVector, cameraUpVector, strafeDirection);
Как только вы определите направление стрейфа, реализация стрейфа будет аналогична движению вперед или назад.
Следующий шаг — поворот изображения.
рыскание
Отклонение от курса или горизонтальное вращение обзора камеры — это просто вращение вокруг постоянного вектора вверх. Ниже приведен общий код для вращения вектора обзора камеры вокруг произвольной оси. Он работает путем создания кватерниона , представляющего вращение радианов deltaAngle вокруг axis , а затем использует кватернион для вращения вектора обзора камеры:
// Extract camera look vector
var frontDirection = vec3.create();
vec3.subtract(this.lookAtPoint, this.eyePoint, frontDirection);
vec3.normalize(frontDirection);
var q = quat4.create();
// Construct quaternion
quat4.fromAngleAxis(deltaAngle, axis, q);
// Rotate camera look vector
quat4.multiplyVec3(q, frontDirection);
// Update camera look vector
this.lookAtPoint = vec3.create(this.eyePoint);
vec3.add(this.lookAtPoint, frontDirection);
Подача
Реализация наклона или вертикального вращения изображения камеры аналогична, но вместо вращения вокруг вектора вверх вы применяете вращение вокруг вектора стрейфа. Первый шаг — вычислить вектор стрейфа, а затем повернуть вектор обзора камеры вокруг этой оси.
Краткое содержание
API Pointer Lock позволяет вам контролировать курсор мыши. Если вы создаете веб-игры, вашим игрокам понравится, когда их перестанут фрагментировать, потому что они взволнованно вытащили мышь из окна, а ваша игра перестала получать обновления мыши. Использование простое:
- Добавьте прослушиватель событий
pointerlockchangeдля отслеживания состояния блокировки указателя. - Запросить блокировку указателя для определенного элемента
- Добавьте прослушиватель событий
mousemove, чтобы получать обновления