15.10.14, 19:46
0 комментарий
  Уроки

HTML5: Pointer Lock API позволяет вам скрывать указатель мыши из виду

Браузеры постепенно становятся полноценными игровыми платформами. Благодаря HTML5 и javascript стала возможна разработка комплексных приложений, хотя для этого пока еще требуется много усилий. Некоторые типы игр подразумевают управление процессов при помощи клавиатуры, и в таком случае постоянно мелькающий на экране указатель мыши может раздражать. Теперь вы можете воспользоваться новым Pointer Lock API, чтобы скрывать указатель при необходимости.

Pointer Lock API: с легкостью скрываем и отображаем указатель мыши

Метод “requestPointerLock()”, привязанный к случайному элементу, просит браузер скрыть указатель мыши. Браузер делает это, но не без помощи пользователя. Это значит, что вы не можете скрыть курсор при загрузке страницы. Вместо этого, придется воспользоваться хотя бы событием “click”, чтобы указатель исчез.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
  this.requestPointerLock();
}, false);


В нашем примере указатель скрывается как только пользователь кликает по элементу 'canvas'. Подобно тому, как браузеры работают с Fullscreen API, появится всплывающее окно, в котором будет сказано что, что Pointer Lock API пытается скрыть курсор, и что вернуть его можно, нажав на клавишу ESC.

Пока указатель деактивирован (или скрыт), он остается на том же месте, где вы его оставили. Никакое движение не передвинет указатель с того места. Это также подразумевает невозможность убрать курсор за пределы окна браузера. Однако браузер по прежнему будет реагировать на нажатия клавиш мыши.

Чтобы вернуть указатель обратно, нужно воспользоваться методом “exitPointerLock()”. Используя его вкупе с параметром “pointerLockElement”, мы можем скрывать и отображать указатель, кликая по элементу, к которому привязана необходимая операция. Как только курсор будет скрыт, значением “pointerLockElement” станет DOM-элемент, на который и ведет API. В других случаях, значение будет “null”. При помощи, предположим, “pointerLockElement.nodeName” мы можем запросить название элемента – в нашем случае, мы используем “CANVAS” в качестве значения.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
  if (document.pointerLockElement == null) {
    this.requestPointerLock();
  } else {
    document.exitPointerLock();
  }
}, false);


В этом примере, мы проверяем, имеет ли “pointerLockElement” значение null. Таким образом, мы проверяем, скрыт ли указатель мыши, или отображен. “requestPointerLock()” или “exitPointerLock()” выполняются соответствующим образом. В отличие от “requestPointerLock()”, “exitPointerLock()” не требует каких-либо действий от пользователя. Нам не нужно начинать метод при помощи события “click”.

В то время, как “requestPointerLock()” можно привязать к любому элементу, “exitPointerLock()” необходимо привязывать к “document”. Не забудьте проставить нужные приставки, так как Pointer Lock API – это кое-что новенькое. “webkitRequestPointerLock()” и “webkitExitPointerLock()” сделают все необходимое.

Продвинутое использование Pointer Lock API: определяем движение указателя мыши

Вместе с Pointer Lock API мы получили два новых параметра для определения движения указателя мыши. На данный момент у нас есть возможность запросить координаты указателя (внутри окна браузера) при помощи event-параметров “clientX” и “clientY”. Новые параметры “movementX” и “movementY” делают немного больше – они способны определять движение указателя мыши, а не просто его расположение.

document.addEventListener("mousemove", function(e) {
  document.title = e.clientX + " " + e.movementX;
}


В данном примере, мы позволяет событию “mousemove” запустить функцию, которая вписывает последние значения “clientX” и “movementX” в заголовок документа. В то время, как “clientX” сообщает нам значение расположения на момент запроса, “movementX” сообщает нам о движении указателя по оси X, относительно последнего запуска функции. Чем быстрее двигается указатель, тем выше поднимается значение “movementX”. Движение вправо (“movementX”) и вниз (“movementY”) всегда выдаст в ответ положительное значение, а перемещение влево и вверх будет выдавать отрицательные значения. Если движения не происходит вообще, то значение останется на 0.

В данном случае значения “clientX” и “clientY” останутся неизменными. У них будут те значения, которые были выставлены при деактивации. Параметры “movementX” и “movementY” не имеют никаких зависимостей от Pointer Lock API, и их также можно использовать с полностью видимыми указателями.

Не забывайте использовать правильные приставки к новым параметрам. К примеру, вместе с “webkitMovementX” и “webkitMovementY”.

Pointer-Lock-API и непредвиденные ситуации: реагирование на изменения статуса и ошибки

Pointer Lock API знаком с двумя слушателями событий. Первый называется “pointerlockchange”, и он всегда исполняет функцию либо при сокрытии, либо при отображении указателя мыши.

document.addEventListener("pointerlockchange", function() {
  if (document.pointerLockElement == null) {
    alert("The mouse pointer is now visible.");
  } else {
    alert("The mouse pointer is now hidden.");
  }
}, false);


Этот пример ведет к диалоговому окну, которое будет показано как при сокрытии, так и при отображении указателя. Используя параметр “pointerLockElement”, мы определяем последний статус, и открываем соответствующее сообщение.

Второй слушатель событий, “pointerlockerror” позволяет нам реагировать на ошибки, которые могут произойти в процессе сокрытия или отображения указателя мыши. Как мы уже отметили ранее, браузер будет реагировать только на сокрытие указателя, так как метод “requestPointerLock()” запускается посредством события “click”. Если мы запустим “requestPointerLock()” посредством “load”, браузер не отреагирует на сокрытие, и вместо этого запустится “pointerlockerror”.

document.addEventListener("pointerlockerror", function() {
  alert("I could not hide the mouse pointer.");
}, false);


“pointerlockchange” и “pointerlockerror” реагируют на специфические для браузеров варианты как “webkitpointerlockchange” и “webkitpointerlockerror”.

Браузерная поддержка

На момент написания этой статьи, Pointer Lock API поддерживается настольными версиями Chrome и Firefox. Мобильные браузеры абсолютно не поддерживают этот API, даже мобильные версии Chrome и Firefox не способны предоставить соответствующую поддержку. Так как API имеет большое влияние в сфере игр, есть вероятность, что людям придется устанавливать указанные браузеры, чтобы иметь возможность с удовольствием поиграть во что-нибудь. Если и дальше будет движение в этом направлении, то стоит ожидать, что соответствующая поддержка появится во всех популярных браузерах.

Напишите своё мнение