Адаптация ввода: touch vs mouse

Веб-разработка в последние годы значительно изменилась с появлением мобильных устройств с сенсорными экранами. В результате возникла необходимость в создании гибких решений, которые бы адаптировались как под традиционные устройства с мышью, так и под сенсорные экраны. Библиотека PlayCanvas предоставляет мощные инструменты для реализации взаимодействия с пользователем через различные устройства ввода, включая сенсорные экраны и мышь.

Разница в обработке событий

События ввода на устройствах с мышью и на сенсорных экранах различаются как по типу, так и по поведению. Например, при использовании мыши события включают такие как mousedown, mousemove, mouseup, а при работе с сенсорами — события touchstart, touchmove, touchend и другие.

События для мыши

При взаимодействии с веб-страницей через мышь, браузер генерирует события, такие как:

  • mousedown: активируется при нажатии кнопки мыши.
  • mousemove: возникает при движении мыши.
  • mouseup: срабатывает, когда кнопка мыши отпускается.

События для сенсорных экранов

Сенсорный экран, с другой стороны, использует события для отслеживания касаний:

  • touchstart: возникает при начале касания экрана.
  • touchmove: генерируется, когда палец перемещается по экрану.
  • touchend: срабатывает при отпускании пальца.

Кроме того, для сенсорных экранов существует событие touchcancel, которое активируется, если система или браузер решает прервать событие касания, например, из-за потери сигнала.

Обработка ввода в PlayCanvas

PlayCanvas использует события ввода, связанные с мышью и сенсорами, через систему input. Встроенные методы позволяют легко адаптировать поведение объекта к разным устройствам ввода.

Мышь

PlayCanvas поддерживает стандартные события мыши, такие как mousedown, mouseup и mousemove. Для их использования достаточно получить доступ к объекту app.mouse, который предоставляет информацию о текущем состоянии мыши, включая её позицию и состояние кнопок.

Пример обработки ввода мышью:

var MyScript = pc.createScript('myScript');

MyScript.prototype.initialize = function() {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
    this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
};

MyScript.prototype.onMouseD own = function(event) {
    console.log('Mouse button pressed at: ', event.x, event.y);
};

MyScript.prototype.onMouseM ove = function(event) {
    console.log('Mouse moved to: ', event.x, event.y);
};

Этот код показывает, как подписаться на события мыши, используя объект app.mouse в PlayCanvas, и обрабатывать их в методах скрипта.

Сенсорный экран

Для сенсорных устройств PlayCanvas предоставляет доступ к событиям через объект app.touch. Этот объект позволяет работать с несколькими одновременными касаниями, что является важной особенностью при взаимодействии с многокасательными экранами. Основные события сенсора включают touchstart, touchmove, touchend и touchcancel.

Пример обработки ввода на сенсорном экране:

var MyTouchScript = pc.createScript('myTouchScript');

MyTouchScript.prototype.initialize = function() {
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
};

MyTouchScript.prototype.onTouchSt art = function(event) {
    console.log('Touch started at: ', event.touches[0].x, event.touches[0].y);
};

MyTouchScript.prototype.onTouchM ove = function(event) {
    console.log('Touch moved to: ', event.touches[0].x, event.touches[0].y);
};

Здесь событие touchstart срабатывает, когда пользователь касаются экрана, а событие touchmove отслеживает движение касания. Массив event.touches позволяет работать с несколькими касаниями одновременно.

Объединение ввода от мыши и сенсора

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

Пример объединения ввода:

var MyUniversalInputScript = pc.createScript('myUniversalInputScript');

MyUniversalInputScript.prototype.initialize = function() {
    if (this.app.mouse) {
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onInputDown, this);
        this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onInputMove, this);
    }

    if (this.app.touch) {
        this.app.touch.on(pc.EVENT_TOUCHSTART, this.onInputDown, this);
        this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onInputMove, this);
    }
};

MyUniversalInputScript.prototype.onInputD own = function(event) {
    var x = event.x || event.touches[0].x;
    var y = event.y || event.touches[0].y;
    console.log('Input down at: ', x, y);
};

MyUniversalInputScript.prototype.onInputM ove = function(event) {
    var x = event.x || event.touches[0].x;
    var y = event.y || event.touches[0].y;
    console.log('Input move to: ', x, y);
};

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

Оптимизация для мобильных устройств

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

Пример дебаунсинга для сенсорных экранов:

var MyDebouncedTouchScript = pc.createScript('myDebouncedTouchScript');

MyDebouncedTouchScript.prototype.initialize = function() {
    this.lastTouchTime = 0;
    this.debounceInterval = 100;  // миллисекунды

    this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
};

MyDebouncedTouchScript.prototype.onTouchM ove = function(event) {
    var currentTime = Date.now();
    if (currentTime - this.lastTouchTime > this.debounceInterval) {
        this.lastTouchTime = currentTime;
        var x = event.touches[0].x;
        var y = event.touches[0].y;
        console.log('Touch moved to: ', x, y);
    }
};

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

Итоги адаптации ввода

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

Оглавление