Войти на сайт

Авторизация, ждите ...
×

ТЕМА: [MV][MZ] Обработка нажатий на клавиатуру и мышь

[MV][MZ] Обработка нажатий на клавиатуру и мышь 10 мес. 4 нед. назад #129455

  • Phileas
  • Phileas аватар
  • Вне сайта
  • Мастер
  • Сообщений: 188
  • Спасибо получено: 276
  • Проект месяца 3 местоПроект месяца 1 местоПроект месяца 2 местоВетеран
Предисловие

Иногда при разработке механик или мини-игр хочется нестандартно обрабатывать нажатия на клавиши клавиатуры или мыши. Например, совершать игровое действие по нажатию на произвольную клавишу (стрельба, прыжок, лечение), управлять интерфейсом (открывать игровую карту, ещё какое-то меню) и много что ещё.
Существует несколько способов это делать.

Способ 0

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

Способ 1

Небольшая справка: событие - это сообщение, которое возникает при выполнении определённых условий. Например, если пользователь пошевелил мышь или тыкнул по клавише - в системе происходит соответствующее событие.

С помощью функции document.addEventListener(<событие, <функция>) можно назначить функции-обработчики на различные события.
Можно обрабатывать нажатие на клавишу:
document.addEventListener("keydown", keyDownHandler);
 
function keyDownHandler(event) {
    if (Input.keyMapper[event.keyCode] == "ok") {
        // Ваш код
    }
};

"keydown" - это название события нажатия на клавишу клавиатуры. Внутри функции обработчика мы проверяем, не помечена ли нажатая клавиша, как "ok" в Input.keyMapper.
Однако мы можем действовать свободнее и сверять напрямую с числовым кодом клавиши:
document.addEventListener("keydown", keyDownHandler);
 
function keyDownHandler(event) {
    // 70 - это код клавиши F
    if (event.keyCode == 70) {
        // Ваш код
    }
};

Существуют различные события, которые можно обрабатывать в играх. Вот некоторые:
// Нажатие на клавишу клавиатуры:
document.addEventListener("keydown", keyDownHandler);
 
// Нажатие на клавишу мыши:
document.addEventListener("click", mouseClickHandler);
 
// Двойное нажатие на клавишу мыши:
document.addEventListener("dblclick", mouseDoubleClickHandler);
 
// Игрок пошевелил мышкой:
document.addEventListener("mousemove", keyDownHandler);

Давайте немного подробнее про использование мыши. Возможно, вам хочется различать клавиши мыши (да, можно тело функции-обработчика писать прямо при добавлении слушателя событию).
document.body.addEventListener("mousedown", event => {
    if (event.button == 0) {
        // Нажата левая кнопка
    }
    else if (event.button == 2) {
        // Правая кнопка
    }
    else { 
        // Другая кнопка
    }
}

Способ 2
В коде движка есть функции, которые обрабатывают нажатия на клавиши мыши (сюда же относится обработка сенсорного интерфейса).

Во-первых, в rmmz_core.js можно найти функции, которые делают примерно то, о чём я писал выше:
TouchInput._setupEventHandlers = function() {
    const pf = { passive: false };
    document.addEventListener("mousedown", this._onMouseDown.bind(this));
    document.addEventListener("mousemove", this._onMouseMove.bind(this));
    document.addEventListener("mouseup", this._onMouseUp.bind(this));
    document.addEventListener("wheel", this._onWheel.bind(this), pf);
    document.addEventListener("touchstart", this._onTouchStart.bind(this), pf);
    document.addEventListener("touchmove", this._onTouchMove.bind(this), pf);
    document.addEventListener("touchend", this._onTouchEnd.bind(this));
    document.addEventListener("touchcancel", this._onTouchCancel.bind(this));
    window.addEventListener("blur", this._onLostFocus.bind(this));
};
 
TouchInput._onMouseDown = function(event) {
    if (event.button === 0) {
        this._onLeftButtonDown(event);
    } else if (event.button === 1) {
        this._onMiddleButtonDown(event);
    } else if (event.button === 2) {
        this._onRightButtonDown(event);
    }
};

Во вторых, мы можем расширить функционал функций, которые обрабатывают различные события. Для примера возьмём событие отмены с помощью сенсорного интерфейса (сюда же относится нажатие на правую клавишу мыши, если у вас мышь для праворуких):
const Origin_TouchInput_onCancel = TouchInput._onCancel;
TouchInput._onCancel = function(x, y) {
    // Ваш код
    Origin_TouchInput_onCancel.apply(this, [x, y])
};

Сначала вы выполняем код, после (что важно!) вызываем оригинальный метод. Можно ваш код выполнять после кода движка. Но обязательно вызывайте Origin_TouchInput_onCancel, иначе стандартная обработка нажатия движком не выполнится.

Ещё момент. Напрямую это не относится к тему, но может быть полезно.
$gameTemp.reserveCommonEvent(N);
С помощью этой функции можно вызвать общее событие. N - номер события в Базе данных проекта. К примеру, вы можете по нажатию на какую-то клавишу вызывать общее событие, где и описана ваша уникальная игровая логика.

Вот здесь демо-проект с реализацией такой идеи.
После запуска новой игры попробуйте нажать на F и ПКМ мыши.

Буду дополнять этот гайд по необходимости, пишите ваши предложения и замечания.
Последнее редактирование: 10 мес. 4 нед. назад от Phileas.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: VarVarKa, Alx_Yago, IGPB, shirokkuu
Время создания страницы: 0.413 секунд