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

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

демо available¹, И если у вас нет геймпада, вы все еще можете насладиться демо с помощью клавиатуры .

Клавиатура Резервная Link

Там также приложений, как Joypad²(IOS) и Окончательный Gamepad³(Android), что позволит вам подключить смартфон к компьютеру с помощью приемника “” приложение.Приемник приложения имитировать ввод с клавиатуры, в отличие от геймпада .

Какие геймпады работу?Link

Любое геймпад, что понимается под операционной системой либо в качестве Xinput или DirectInput устройства будут работать с API Gamepad.Получение других контроллеров консоли работать можно, но это потребует либо аппаратных преобразователей или дополнительное программное обеспечение .

⁴

Поддержка браузеров Link

Потому что это API, является относительно новой и экспериментальной, поддержка браузеров limited⁶и W3C documentation⁷еще рабочий проект .

Тем не менее, реализация браузер выше50% ⁸, Который включает в себя все основные браузеры.В API даже делает свой путь в мобильном мире, с Chrome для Android является первый мобильный браузер для поддержки его .

На Wii U от Nintendo браузере, геймпад Wii U доступны.К сожалению, Nintendo пока не реализован API Gamepad;вместо этого, Устройство имеет свой собственный property⁹в окне (window.wiiu.gamepad) и сохраняет свои состояния кнопки как шестнадцатеричные значения, с конкретными флагами каждой кнопки .

Функция обнаружения Link

Мы можем проверить, поддерживает ли браузер геймпада API с этого фрагмента:

if(!!navigator.getGamepads){
    // Browser supports the Gamepad API
}

Чтение геймпада States Link

Оператор Gamepadгосударства доступны с:

var gamepads = navigator.getGamepads();

В настоящее время в Chrome и Opera, это вернет GamepadListдо четырех GamepadОбъекты .

GamepadList {0: Gamepad, 1: Gamepad, 2: undefined, 3: undefined}

Firefox, а не возвращает JavaScript Arrayиз Gamepadс, что, теоретически, бесконечно.(Я имел девять геймпады, подключенные в то же время.)

Array [ Gamepad, Gamepad ]

Опрос Link

Мы можем опрашивать GamepadГосударства, использующие requestAnimationFrame,В зависимости от количества геймпадов вы хотите, чтобы поддержать, это приведет к увеличению сложности, как вы используете Gamepadсостояния.Если вы хотите поддержать только один геймпад, можно опрашивать для первого геймпада в коллекции, как так:

var gamepad = navigator.getGamepads()[0];

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

Каждый Gamepadобъект выглядит так: Link

axes: Array[4]
buttons: Array[16]
connected: true
id: "Xbox 360 Controller (XInput STANDARD GAMEPAD)"
index: 0
mapping: "standard"
timestamp: 12

Это Gamepadобъектом Microsoft Xbox 360 контроллер для Windows¹⁰.

Примечание: Оператор idне согласуется во всех браузерах.Например, это 45e-28e-Wireless 360 Controllerв Mozilla Firefox¹¹, Которая отличается от какой Google Chrome¹²обеспечивает выше .

Информация Link

Оси Link

На геймпады, которые аналоговые джойстики, то axesМассив будет содержать число, которые варьируются между минимальным и максимальным для каждой оси, обычно -1и 1.

Применение __66 мертвая зона |Link

Потому что аналог палку колеблется между 43 ~ |и 1Если палка не коснулся и находится в положении центральной, то, теоретически, значение должно быть 0,Тем не менее, это не всегда так на дешевых контроллеров или геймпадов, которые носят или повреждены или имеют “волнистые” большой палец палочки (да, геймпад ваш друг всегда удобно пытается дать вам) .

А “мертвая зона” представляет собой порог для предотвращения значения ниже определенной суммы от использования для управления игрой .

Следующая функция применяется мертвую зону.Порог также вычитают из любого значения aboveпорог, так что значение на пороге равно 0, а не внезапного 0,25, например .

var applyDeadzone = function(number, threshold){
   percentage = (Math.abs(number) - threshold) / (1 - threshold);

   if(percentage < 0)
      percentage = 0;

   return percentage * (number > 0 ? 1 : -1);
}

Он может быть использован, как это:

var joystickX = applyDeadzone(gamepad.axes[0], 0.25);

Это игнорирует значения между -0.25 и 0.25 и вычисляет десятичную процент, с учетом заданного порогового значения.Если вы применили это обоих осей х и у, это даст мертвую зону, которая выглядит, как это, когда на графике:

¹³

Примечание: Оси не всегда аналог.Некоторые контроллеры переключения между значениями.Например, некоторые D-колодки переключения между максимальной, минимальной и центрального значения для каждой оси, например, -10и 1.

Кнопки Link

Для buttonsмассивом, GamepadButtonОбъект представлен для каждого элемента.В большинстве случаев, valueнедвижимость прямо коррелирует с pressedимущество.Например, valueбудет переключаться между 0и 1потому что pressedпереключает между falseи true.

Кнопка выхода Link

GamepadButton
  pressed: false
  value: 0

Нажатии кнопки Link

GamepadButton
  pressed: true
  value: 1

Аналоговые Кнопки Link

Большинство геймпады седьмого поколения (такие как контроллер Xbox 360) имеют аналоговые кнопки, такие как левого и правого триггеров.В этом случае valueв интервале от 0 до 1, соответственно.Хотя pressedработает, используя его не рекомендуется для не-цифровых кнопок;Вместо этого, используйте порог против value, Который может быть также просто, как это:

if(gamepad.buttons[7].value > 0.5){
  // FIRE!
}

Примечание: Поскольку кнопка также аналог, мертвая зона, возможно, необходимо применять здесь тоже .

Различной планировки Link

Каждый контроллер отличается, что означает длину из axesи buttonsбудет отличаться;это же относится к различным преобразователей и / или драйверов связи.В соответствии со спецификацией, браузеры должны отобразим axesи buttonsкак можно ближе к предложенной “Стандарт gamepad¹⁵. “Не все геймпады будут иметь все эти кнопки;отсутствующие появятся кнопки как в нажатом состоянии (для кнопок) или нейтральным государством (для осей) в объекте.Добавление «Параметры управления» область для вашей игры будет хорошей идеей, если вы планируете поддерживать странные и удивительные геймпады, давая игрокам свободу для настройки их геймпад как они хотят и давая пользователям различных геймпадов возможность вручную сопоставить их управления, чтобываша игра .

Microsoft Xbox 360 контроллер для Windows,Link

Водитель я использую для подключения к Mac является доступно на GitHub¹⁶.

¹⁷

РЭШ контроллер Link

Вот макет оригинального NES контроллера, используя конвертер 15-контактный для USB-(макет может отличаться от производителя).Данный одним использует топоры для направленного ввода, а не кнопок .

¹⁹

Saitek SP550 флешку колодок Link

Это имеет 12 кнопок (14 на устройстве, с двумя площадку триггеров, имеющих такую ​​же функциональность как спусковой и большого пальца кнопки джойстика), и трех осей (третья ось дроссельной заслонки является слайдер рядом с джойстика).Джойстик часть контроллера может быть отдельно стоящий, оставляя только площадку.Делать это отключить контроллер и подключите его в другом контроллере, это означает, что сведения о возвращенный Gamepadобъект будет изменить, тоже: idбудет меняться от SP550 Stick & Pad Combo (Vendor: 06a3 Product: 100a)до SP550 Pad (Vendor: 06a3 Product: 100b)И макет будет отличаться также.В режиме “палкой и площадки”, направленный площадка находится в buttonsМассив (четыре кнопки), но в режиме “площадки”, направленный площадка находится в axesМассив (две оси) .

…

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 18.11.2015 by coding.smashingmagazine.com