Input-события на элементах: mousedown, touchstart

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

Основы работы с событиями ввода

PlayCanvas использует стандартный механизм событий браузера, но предоставляет дополнительные функции для работы с 3D-сценой. Это позволяет обрабатывать события ввода в контексте трехмерной графики. События mousedown и touchstart являются основными для определения начала взаимодействия пользователя с объектами в сцене.

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

Обе эти функции используются для инициализации взаимодействия с элементами на экране, как например, нажатие кнопки или захват объекта.

Обработка события mousedown

Событие mousedown срабатывает, когда пользователь нажимает одну из кнопок мыши. В PlayCanvas оно может быть связано с камерой или определенным элементом на сцене. Для того чтобы обработать это событие, необходимо подписаться на событие через объект app.mouse.

Пример:

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

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

MyScript.prototype.onMouseD own = function(event) {
    // Проверка, какая кнопка была нажата
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        console.log('Левая кнопка мыши нажата');
    }
};

В этом примере событие mousedown обрабатывается в методе onMouseDown. Мы проверяем, была ли нажата левая кнопка мыши (с помощью event.button). Такое событие может быть использовано для активации взаимодействия с объектами в сцене или выполнения других действий.

Важные моменты:

  • В PlayCanvas можно обработать разные кнопки мыши с помощью констант pc.MOUSEBUTTON_LEFT, pc.MOUSEBUTTON_RIGHT, pc.MOUSEBUTTON_MIDDLE.
  • Событие также содержит информацию о координатах курсора и о том, был ли нажат модификатор клавиш, такой как Shift или Ctrl.

Работа с touchstart

На мобильных устройствах основным способом взаимодействия с элементами является касание экрана. Событие touchstart аналогично событию mousedown, но для мобильных устройств. Оно срабатывает при первом касании экрана и может быть использовано для активации действий или манипуляции объектами на сцене.

Пример:

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

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

MyTouchScript.prototype.onTouchSt art = function(event) {
    // Получаем координаты касания
    var touch = event.touches[0];
    console.log('Касание на позиции: ' + touch.x + ', ' + touch.y);
};

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

Особенности работы с touchstart:

  • Мобильные устройства могут поддерживать несколько одновременных касаний (многокасание), и это можно обрабатывать через массив event.touches.
  • В отличие от мыши, на мобильных устройствах события могут быть связаны с различными жестами, такими как свайпы, масштабирование и другие.
  • Координаты касания можно получить через объекты x, y из каждого касания, что важно при создании интерактивных интерфейсов.

Сравнение и использование обоих событий

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

Пример универсальной обработки ввода:

var MyInputScript = pc.createScript('myInputScript');

MyInputScript.prototype.initialize = function() {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onInputStart, this);
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.onInputStart, this);
};

MyInputScript.prototype.onInputSt art = function(event) {
    var isMouse = event instanceof pc.MouseEvent;
    var isTouch = event instanceof pc.TouchEvent;
    
    if (isMouse) {
        console.log('Мышь нажата на позиции: ' + event.x + ', ' + event.y);
    } else if (isTouch) {
        var touch = event.touches[0];
        console.log('Касание на позиции: ' + touch.x + ', ' + touch.y);
    }
};

В этом примере используется оба типа событий: mousedown для десктопных устройств и touchstart для мобильных. Программа определяет, какой тип события был вызван, и выводит соответствующую информацию.

Заключение

Работа с событиями ввода mousedown и touchstart в PlayCanvas позволяет создавать интерактивные элементы для десктопных и мобильных устройств. Правильное использование этих событий требует внимания к особенностям каждой платформы, что обеспечит более точное и удобное взаимодействие с пользователем.

Оглавление