Жесты: pinch, swipe, tap

В PlayCanvas поддержка жестов является важной частью взаимодействия с пользователем, особенно для мобильных устройств и сенсорных экранов. Среди основных жестов, которые используются для управления элементами игры или интерфейса, можно выделить три основных: pinch, swipe и tap. Каждый из них имеет свою специфику, и правильная настройка этих жестов позволяет создать более интуитивно понятное и удобное управление.

Tap

Жест tap является одним из самых простых и распространённых. Он имитирует короткое прикосновение к экрану. В PlayCanvas для отслеживания этого жеста используется событие touchstart или mousedown в зависимости от устройства. Реагировать на tap можно различными способами, например, нажатие кнопки в интерфейсе или активация какого-либо объекта в сцене.

Пример обработки жеста Tap:

var TapHandler = pc.createScript('tapHandler');

TapHandler.prototype.initialize = function() {
    // Подключаем обработчик события "tap"
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onTap, this);
};

TapHandler.prototype.on Tap = function(event) {
    console.log('Tap detected at: ' + event.x + ', ' + event.y);
};

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

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

Swipe

Жест swipe представляет собой движение пальцем или мышью по экрану, и его можно использовать для создания прокрутки, переключения между состояниями или перемещения объектов в пространстве. В отличие от tap, swipe включает в себя перемещение в каком-то направлении. Для отслеживания этого жеста в PlayCanvas используется событие перемещения касания или мыши, обычно это touchmove или mousemove.

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

Пример обработки жеста Swipe:

var SwipeHandler = pc.createScript('swipeHandler');

SwipeHandler.prototype.initialize = function() {
    this.touchStartX = 0;
    this.touchStartY = 0;
    this.app.mouse.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    this.app.mouse.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
};

SwipeHandler.prototype.onTouchSt art = function(event) {
    // Сохраняем начальную позицию касания
    this.touchStartX = event.x;
    this.touchStartY = event.y;
};

SwipeHandler.prototype.onTouchM ove = function(event) {
    var deltaX = event.x - this.touchStartX;
    var deltaY = event.y - this.touchStartY;

    // Распознаём движение по оси X (горизонтальный свайп)
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
            console.log('Свайп вправо');
        } else {
            console.log('Свайп влево');
        }
    }
    // Распознаём движение по оси Y (вертикальный свайп)
    else {
        if (deltaY > 0) {
            console.log('Свайп вниз');
        } else {
            console.log('Свайп вверх');
        }
    }
};

В этом примере происходит отслеживание движения пальца или мыши на экране. Если перемещение больше по горизонтали, чем по вертикали, то распознаётся свайп влево или вправо, если наоборот — вверх или вниз. Это простая реализация, которая помогает различать типы свайпов.

Pinch

Жест pinch используется для увеличения или уменьшения масштаба объекта или сцены. Он требует одновременного взаимодействия с двумя пальцами на сенсорном экране и определяется как изменение расстояния между ними. В PlayCanvas для отслеживания жеста pinch используются события touchstart, touchmove и touchend, а также координаты касаний двух пальцев.

Пример обработки жеста Pinch:

var PinchHandler = pc.createScript('pinchHandler');

PinchHandler.prototype.initialize = function() {
    this.touchStartDistance = 0;
    this.app.mouse.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    this.app.mouse.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
};

PinchHandler.prototype.onTouchSt art = function(event) {
    if (event.touches.length == 2) {
        // Сохраняем начальное расстояние между двумя пальцами
        var touch1 = event.touches[0];
        var touch2 = event.touches[1];
        this.touchStartDistance = this.calculateDistance(touch1, touch2);
    }
};

PinchHandler.prototype.onTouchM ove = function(event) {
    if (event.touches.length == 2) {
        var touch1 = event.touches[0];
        var touch2 = event.touches[1];
        var currentDistance = this.calculateDistance(touch1, touch2);
        
        // Если расстояние увеличилось — масштабируем в сторону увеличения
        if (currentDistance > this.touchStartDistance) {
            console.log('Pinch: Увеличение масштаба');
        }
        // Если расстояние уменьшилось — масштабируем в сторону уменьшения
        else if (currentDistance < this.touchStartDistance) {
            console.log('Pinch: Уменьшение масштаба');
        }
    }
};

PinchHandler.prototype.calculateDistance = function(touch1, touch2) {
    var dx = touch2.x - touch1.x;
    var dy = touch2.y - touch1.y;
    return Math.sqrt(dx * dx + dy * dy);
};

В данном примере отслеживается расстояние между двумя касаниями. Когда это расстояние увеличивается, считается, что пользователь делает pinch-out (увеличение масштаба), а если уменьшается — pinch-in (уменьшение масштаба). Этот подход позволяет легко управлять взаимодействием с объектами в 2D и 3D пространствах.

Обработка нескольких жестов одновременно

PlayCanvas позволяет отслеживать несколько жестов одновременно, что дает возможность для создания сложных и многофункциональных интерфейсов. Например, можно использовать pinch для изменения масштаба и swipe для прокрутки контента в том же самом приложении. Важно, чтобы события не перекрывались, и управление ими было чётким и логичным.

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

Пример комбинированной обработки жестов:

var GestureHandler = pc.createScript('gestureHandler');

GestureHandler.prototype.initialize = function() {
    this.isSwiping = false;
    this.app.mouse.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    this.app.mouse.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
    this.app.mouse.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
};

GestureHandler.prototype.onTouchSt art = function(event) {
    if (event.touches.length == 1) {
        // Начинаем отслеживать свайп
        this.isSwiping = true;
    } else if (event.touches.length == 2) {
        // Начинаем отслеживать pinch
        this.isSwiping = false;
    }
};

GestureHandler.prototype.onTouchM ove = function(event) {
    if (this.isSwiping && event.touches.length == 1) {
        // Логика свайпа
    } else if (event.touches.length == 2) {
        // Логика pinch
    }
};

GestureHandler.prototype.onTouch End = function(event) {
    this.isSwiping = false;
};

В этом примере события свайпа и pinch обрабатываются в зависимости от количества пальцев, и можно динамически переключать режимы обработки жестов.

Заключение

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