GamePad API: O'yin Kontrolleri Kiritishni Boshqarish bo'yicha To'liq Qo'llanma

GamePad API veb-brauzerlardan to'g'ridan-to'g'ri o'yin kontrollerlariga kirishning standartlashtirilgan usulini taqdim etadi. Bu qiziqarli va interaktiv veb-asosidagi o'yinlar va ilovalarni yaratish uchun ajoyib imkoniyatlar ochadi. Ushbu to'liq qo'llanma sizga GamePad API'dan samarali foydalanish uchun kerak bo'lgan hamma narsani, asosiy sozlashdan tortib ilg'or texnikalargacha o'rgatadi.

GamePad API nima?

GamePad API bu veb-ilovalarga o'yin kontrollerlaridan (geympadlar, joystiklar va h.k.) keladigan kiritishni aniqlash va unga javob berish imkonini beruvchi JavaScript API'dir. U ishlab chiquvchilarga tugmalar, o'qlar (analog stiklar) va triggerlar kabi standart geympad kiritishlari yordamida boshqarilishi mumkin bo'lgan o'yinlar va interaktiv tajribalarni yaratishga imkon beradi.

GamePad API'dan oldin veb-brauzerlarda o'yin kontrolleri kiritishini boshqarish bo'lak-bo'lak va ishonchsiz tajriba bo'lib, ko'pincha brauzerga xos plaginlar yoki murakkab aylanma yo'llarni talab qilar edi. GamePad API o'yin kontrollerini qo'llab-quvvatlashni veb-ilovalarga integratsiya qilish jarayonini soddalashtirib, izchil va kross-brauzer yechimini taqdim etadi.

Brauzer mosligi

GamePad API zamonaviy brauzerlarda, jumladan, quyidagilarda keng qo'llab-quvvatlanadi:

• Chrome (desktop va mobil)
• Firefox (desktop va mobil)
• Safari (desktop va mobil, ba'zi cheklovlar bilan)
• Edge
• Opera

Brauzerlarni qo'llab-quvvatlash odatda yaxshi bo'lsa-da, turli brauzerlarda amalga oshirish va funksiyalar mavjudligida nozik farqlar bo'lishi mumkin. Ilovaning izchil ishlashini ta'minlash uchun uni bir nechta brauzerda sinovdan o'tkazish har doim yaxshi amaliyotdir.

GamePad API bilan ishlashni boshlash

GamePad API bilan ishlashni boshlash bo'yicha qadam-baqadam qo'llanma:

1. Geympad ulanishini aniqlash

navigator.getGamepads() metodi hozirda ulangan geympadlarni ifodalovchi Gamepad obyektlari massivini qaytaradi. Geympadlar ulanganda yoki uzilganda brauzer mos ravishda gamepadconnected va gamepaddisconnected hodisalarini ishga tushiradi. Siz ilovangiz holatini yangilash uchun ushbu hodisalarni tinglashingiz mumkin.

            window.addEventListener("gamepadconnected", function(e) {
  console.log("Geympad %d indeksida ulandi: %s. %d tugma, %d o'q.",
    e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length);
  gamepadHandler(e, true);
});

window.addEventListener("gamepaddisconnected", function(e) {
  console.log("Geympad %d indeksidan uzildi: %s",
    e.gamepad.index, e.gamepad.id);
  gamepadHandler(e, false);
});

function gamepadHandler(event, connecting) {
  var gamepad = event.gamepad;
  if (connecting) {
    gamepads[gamepad.index] = gamepad;
  } else {
    delete gamepads[gamepad.index];
  }
}

var gamepads = {};

            

              
                Copy
              
            
          

Ushbu kod parchasi gamepadconnected va gamepaddisconnected hodisalari uchun hodisa tinglovchilarini sozlaydi. gamepadHandler funksiyasi ulangan geympadlarni kuzatib borish uchun gamepads obyektini yangilaydi.

2. Geympad holatini so'rov orqali tekshirish

GamePad API asosan hodisalarga asoslangan, ammo uzluksiz kiritish uchun (analog stik harakati kabi) siz geympad holatini requestAnimationFrame tsiklida so'rashingiz kerak bo'ladi. Bu navigator.getGamepads() ni qayta-qayta chaqirish va Gamepad obyektlarining buttons va axes xususiyatlarini tekshirishni o'z ichiga oladi.

            function update() {
  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
  for (var i = 0; i < gamepads.length; i++) {
    var gp = gamepads[i];
    if (gp) {
      // Geympad kiritishini shu yerda qayta ishlang
      for (var j = 0; j < gp.buttons.length; j++) {
        if (gp.buttons[j].pressed) {
          console.log("Tugma " + j + " bosildi");
        }
      }
      for (var j = 0; j < gp.axes.length; j++) {
        console.log("O'q " + j + ": " + gp.axes[j]);
      }
    }
  }
  requestAnimationFrame(update);
}

requestAnimationFrame(update);

            

              
                Copy
              
            
          

Ushbu kod parchasi requestAnimationFrame yordamida geympad holatini doimiy ravishda yangilab boradi. U ulangan geympadlar bo'ylab aylanib chiqadi va ularning tugmalari va o'qlari holatini tekshiradi.

3. Geympad xususiyatlarini tushunish

Har bir Gamepad obyekti quyidagi asosiy xususiyatlarga ega:

• id: Geympadni aniqlovchi qator (masalan, "Xbox Controller (XInput STANDARD GAMEPAD)").
• index: Geympadning navigator.getGamepads() massividagi indeksi.
• connected: Geympadning hozirda ulanganligini ko'rsatuvchi mantiqiy qiymat.
• buttons: Geympad tugmalarini ifodalovchi GamepadButton obyektlari massivi.
• axes: Geympad o'qlarini (analog stiklar va triggerlar) ifodalovchi raqamlar massivi.
• mapping: Geympad tugmalari xaritasini ko'rsatuvchi qator ("standard" yoki "").

4. Geympad tugmalari bilan ishlash

Har bir GamepadButton obyekti quyidagi xususiyatlarga ega:

• pressed: Tugma hozirda bosilganligini ko'rsatuvchi mantiqiy qiymat.
• value: Tugmaga qo'llanilgan bosimni ifodalovchi 0 dan 1 gacha bo'lgan raqam (triggerlar kabi bosimga sezgir tugmalar uchun).

Siz tugma holatiga uning buttons massividagi indeksi orqali kirishingiz mumkin. Masalan, gamepad.buttons[0].pressed agar birinchi tugma bosilgan bo'lsa, true qiymatini qaytaradi.

5. Geympad o'qlari bilan ishlash

axes massivi geympadning analog stiklari va triggerlari qiymatlarini ifodalovchi raqamlarni o'z ichiga oladi. Qiymatlar odatda -1 dan 1 gacha bo'ladi, bu yerda -1 eng chap/eng yuqori pozitsiyani, 1 esa eng o'ng/eng past pozitsiyani bildiradi.

Siz o'q qiymatiga uning axes massividagi indeksi orqali kirishingiz mumkin. Masalan, gamepad.axes[0] chap analog stikning gorizontal pozitsiyasini qaytaradi.

Standart Geympad Xaritasi

GamePad API "standart" geympad xaritasini belgilaydi, bu esa muayyan geympad modelidan qat'i nazar, umumiy geympad tugmalari va o'qlariga kirishning izchil usulini ta'minlaydi. Ushbu xarita mapping xususiyatining "standard" ga o'rnatilganligi bilan aniqlanadi.

Standart geympad xaritasi quyidagi tugmalarni o'z ichiga oladi:

• Tugma 0: A (odatda pastki o'ng tugma)
• Tugma 1: B (odatda o'ng tugma)
• Tugma 2: X (odatda chap tugma)
• Tugma 3: Y (odatda yuqori tugma)
• Tugma 4: Chap bamper (LB)
• Tugma 5: O'ng bamper (RB)
• Tugma 6: Chap trigger (LT)
• Tugma 7: O'ng trigger (RT)
• Tugma 8: Select (yoki Back)
• Tugma 9: Start
• Tugma 10: Chap stik tugmasi (LS)
• Tugma 11: O'ng stik tugmasi (RS)
• Tugma 12: D-pad Yuqori
• Tugma 13: D-pad Past
• Tugma 14: D-pad Chap
• Tugma 15: D-pad O'ng
• Tugma 16: Guide (yoki Home)

Standart geympad xaritasi quyidagi o'qlarni o'z ichiga oladi:

• O'q 0: Chap stik, gorizontal o'q (-1 = chap, 1 = o'ng)
• O'q 1: Chap stik, vertikal o'q (-1 = yuqori, 1 = past)
• O'q 2: O'ng stik, gorizontal o'q (-1 = chap, 1 = o'ng)
• O'q 3: O'ng stik, vertikal o'q (-1 = yuqori, 1 = past)

Shuni ta'kidlash kerakki, barcha geympadlar standart xaritani qo'llab-quvvatlamaydi. Standart xaritani qo'llab-quvvatlamaydigan geympadlarda mapping xususiyati uchun bo'sh qator bo'ladi va siz geympadni aniqlash va uning tugmalari va o'qlarini mos ravishda xaritalash uchun id xususiyatidan foydalanishingiz kerak bo'ladi.

Nostandart Geympadlarni Boshqarish

Nostandart geympadlar bilan ishlaganda, siz geympadni uning id xususiyatiga asoslanib aniqlashingiz va uning tugmalari va o'qlari uchun maxsus xarita yaratishingiz kerak bo'ladi. Bu qiyin vazifa bo'lishi mumkin, chunki har biri o'zining noyob tugma va o'q tartibiga ega bo'lgan ko'plab turli xil geympad modellari mavjud.

Nostandart geympadlarni boshqarish uchun ba'zi strategiyalar:

• Geympadlar ma'lumotlar bazasi: Geympad id qatorlari va ularning mos keladigan tugma va o'q xaritalari ma'lumotlar bazasini yarating. Bu sizga ma'lum geympadlar uchun tugma va o'qlarni avtomatik ravishda xaritalash imkonini beradi.
• Foydalanuvchi konfiguratsiyasi: Foydalanuvchilarga o'z geympadlari uchun tugma va o'q xaritalarini sozlashga ruxsat bering. Bu noyob geympadlarga ega foydalanuvchilar uchun moslashuvchanlikni ta'minlaydi.
• Evristik xaritalash: Tugmalar va o'qlar soni va ularning odatiy foydalanish namunalariga asoslanib, tugma va o'q xaritalarini taxmin qilish uchun evristikadan foydalaning.

Keng turdagi geympadlarni qo'llab-quvvatlashni amalga oshirish muhim vazifa bo'lishi mumkin. Birinchi navbatda eng mashhur geympad modellarini qo'llab-quvvatlashga e'tibor qarating va kerak bo'lganda asta-sekin ko'proq geympadlar uchun qo'llab-quvvatlashni qo'shing.

Ilg'or Texnikalar

1. O'lik zonalar

Analog stiklar ko'pincha markaziy pozitsiya atrofida "o'lik zonaga" ega bo'ladi, bu yerda stikka tegilmaganda ham xabar qilingan qiymat noldan farq qiladi. Bu sizning o'yiningizda istalmagan harakat yoki titrashga olib kelishi mumkin. Buni hal qilish uchun, agar o'q qiymati nol atrofidagi ma'lum bir diapazonga tushsa, uni nolga sozlash orqali o'lik zonani amalga oshirishingiz mumkin.

            function applyDeadZone(value, threshold) {
  var percentage = (Math.abs(value) - threshold) / (1 - threshold);
  if (percentage < 0) {
    percentage = 0;
  }
  return percentage * (value > 0 ? 1 : -1);
}

var axisValue = gamepad.axes[0];
var deadZoneThreshold = 0.1;
var adjustedAxisValue = applyDeadZone(axisValue, deadZoneThreshold);

            

              
                Copy
              
            
          

Ushbu kod parchasi o'q qiymatiga o'lik zonani qo'llaydi. Agar o'qning mutlaq qiymati deadZoneThreshold dan kichik bo'lsa, sozlanga qiymat nolga teng bo'ladi. Aks holda, sozlanga qiymat asl qiymatning ishorasini saqlab qolgan holda 0-1 oralig'iga masshtablanadi.

2. Eksponensial Silliqlash

Analog stik kiritishi ba'zan shovqinli bo'lishi mumkin, bu esa keskin yoki oldindan aytib bo'lmaydigan harakatga olib keladi. Kiritishni silliqlash uchun siz eksponensial silliqlashni qo'llashingiz mumkin. Bu joriy kiritish qiymatini oldingi silliqlangan qiymat bilan o'rtacha hisoblashni o'z ichiga oladi, bunda oldingi qiymatga ko'proq og'irlik beriladi.

            var smoothedAxisValue = 0;
var smoothingFactor = 0.1;

function smoothAxisValue(axisValue) {
  smoothedAxisValue = smoothingFactor * axisValue + (1 - smoothingFactor) * smoothedAxisValue;
  return smoothedAxisValue;
}

var axisValue = gamepad.axes[0];
var smoothedValue = smoothAxisValue(axisValue);

            

              
                Copy
              
            
          

Ushbu kod parchasi o'q qiymatiga eksponensial silliqlashni qo'llaydi. smoothingFactor joriy qiymatga beriladigan og'irlikni belgilaydi. Kichikroq silliqlash omili silliqroq, ammo kechikishli kiritishga olib keladi.

3. Tugma Titrashini Oldini Olish

Tugmalar ba'zan mexanik tebranishlar tufayli bosilganda yoki qo'yib yuborilganda bir nechta hodisalarni ishga tushirishi mumkin. Bu sizning o'yiningizda kutilmagan xatti-harakatlarga olib kelishi mumkin. Buni hal qilish uchun siz tugma titrashini oldini olishni (debouncing) amalga oshirishingiz mumkin. Bu oldingi hodisadan keyin qisqa vaqt ichida sodir bo'lgan tugma hodisalarini e'tiborsiz qoldirishni o'z ichiga oladi.

            var buttonStates = {};
var debounceDelay = 100; // millisekundlar

function handleButtonPress(buttonIndex) {
  if (!buttonStates[buttonIndex] || Date.now() - buttonStates[buttonIndex].lastPress > debounceDelay) {
    console.log("Tugma " + buttonIndex + " bosildi (tebranishsizlantirilgan)");
    buttonStates[buttonIndex] = { lastPress: Date.now() };
    // Harakatni shu yerda bajaring
  }
}

for (var j = 0; j < gp.buttons.length; j++) {
  if (gp.buttons[j].pressed) {
    handleButtonPress(j);
  }
}

            

              
                Copy
              
            
          

Ushbu kod parchasi tugma titrashini oldini olishni amalga oshiradi. U har bir tugma oxirgi marta qachon bosilganligini kuzatib boradi. Agar tugma debounceDelay ichida yana bosilsa, hodisa e'tiborsiz qoldiriladi.

Qulaylik Masalalari

Geympad qo'llab-quvvatlashiga ega o'yinlarni ishlab chiqishda nogironligi bo'lgan o'yinchilar uchun qulaylikni hisobga olish muhimdir. O'yiningizni yanada qulayroq qilish uchun ba'zi maslahatlar:

• Sozlanadigan boshqaruvlar: O'yinchilarga o'zlarining individual ehtiyojlariga mos ravishda tugma va o'q xaritalarini sozlashga ruxsat bering.
• Alternativ kiritish usullari: Geympaddan foydalana olmaydigan o'yinchilar uchun klaviatura va sichqoncha kabi alternativ kiritish usullarini taqdim eting.
• Aniq vizual qayta aloqa: Barcha harakatlar uchun aniq vizual qayta aloqani ta'minlang, shunda o'yinchilar o'yinda nima bo'layotganini osongina tushunishlari mumkin.
• Sozlanadigan qiyinchilik: Har xil mahorat darajasidagi o'yinchilarga mos keladigan sozlanishi mumkin bo'lgan qiyinchilik darajalarini taklif qiling.

Ushbu ko'rsatmalarga rioya qilish orqali siz kengroq o'yinchilar uchun yoqimli va qulay bo'lgan o'yinlar yaratishingiz mumkin.

GamePad API va Virtual Reallik

GamePad API WebVR (vebdagi Virtual Reallik) kontekstida ham dolzarbdir. Ko'pincha VR eshitish vositalari bilan birgalikda ishlatiladigan VR kontrollerlari tez-tez GamePad API orqali taqdim etiladi. Bu ishlab chiquvchilarga o'zaro ta'sir uchun ushbu kontrollerlardan foydalanadigan VR tajribalarini yaratishga imkon beradi.

VR ilovalarini ishlab chiqishda Gamepad obyekti 3D fazodagi uning pozasi (pozitsiyasi va yo'nalishi) bilan bog'liq qo'shimcha xususiyatlarga ega bo'lishi mumkin. Ushbu xususiyatlarga GamePadPose obyektini qaytaradigan pose xususiyati yordamida kiriladi. GamePadPose obyekti kontrollerning pozitsiyasi, yo'nalishi (kvaternion sifatida), chiziqli tezligi va burchak tezligi haqida ma'lumot beradi.

WebVR bilan GamePad API'dan foydalanish ishlab chiquvchilarga foydalanuvchining harakatlariga va VR kontrollerlari bilan o'zaro ta'siriga javob beradigan qiziqarli va interaktiv VR tajribalarini yaratishga imkon beradi.

Misol: Oddiy O'yin Kontrolleri Testeri

Mana ulangan geympadlar holatini ko'rsatadigan oddiy o'yin kontrolleri testeri misoli:

            <!DOCTYPE html>
<html>
<head>
  <title>Geympad Testeri</title>
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Geympad Testeri</h1>
  <div id="gamepads"></div>

  <script>
    var gamepadsDiv = document.getElementById("gamepads");
    var gamepads = {};

    function updateGamepads() {
      var gamepadList = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);

      gamepadsDiv.innerHTML = "";

      for (var i = 0; i < gamepadList.length; i++) {
        var gamepad = gamepadList[i];
        if (gamepad) {
          var gamepadDiv = document.createElement("div");
          gamepadDiv.innerHTML = "<h2>Geympad " + i + ": " + gamepad.id + "</h2>";

          var buttonsDiv = document.createElement("div");
          buttonsDiv.innerHTML = "<h3>Tugmalar</h3>";
          for (var j = 0; j < gamepad.buttons.length; j++) {
            var button = gamepad.buttons[j];
            var buttonDiv = document.createElement("div");
            buttonDiv.innerHTML = "Tugma " + j + ": Bosilgan = " + button.pressed + ", Qiymat = " + button.value;
            buttonsDiv.appendChild(buttonDiv);
          }
          gamepadDiv.appendChild(buttonsDiv);

          var axesDiv = document.createElement("div");
          axesDiv.innerHTML = "<h3>O'qlar</h3>";
          for (var j = 0; j < gamepad.axes.length; j++) {
            var axisValue = gamepad.axes[j];
            var axisDiv = document.createElement("div");
            axisDiv.innerHTML = "O'q " + j + ": " + axisValue;
            axesDiv.appendChild(axisDiv);
          }
          gamepadDiv.appendChild(axesDiv);

          gamepadsDiv.appendChild(gamepadDiv);
        }
      }
    }

    function update() {
      updateGamepads();
      requestAnimationFrame(update);
    }

    window.addEventListener("gamepadconnected", function(e) {
      console.log("Geympad %d indeksida ulandi: %s. %d tugma, %d o'q.",
        e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length);
      gamepads[e.gamepad.index] = e.gamepad;
    });

    window.addEventListener("gamepaddisconnected", function(e) {
      console.log("Geympad %d indeksidan uzildi: %s",
        e.gamepad.index, e.gamepad.id);
      delete gamepads[e.gamepad.index];
    });

    requestAnimationFrame(update);
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Ushbu misol ulangan geympadlar, jumladan ularning ID'si, tugma holatlari va o'q qiymatlari haqida ma'lumot ko'rsatadigan oddiy veb-sahifa yaratadi. Siz ushbu misoldan o'zingizning GamePad API ilovalaringizni sinash va disk raskadrovka qilish uchun boshlang'ich nuqta sifatida foydalanishingiz mumkin.

Eng Yaxshi Amaliyotlar

• Geympad holatini so'rang: Silliq va sezgir kiritishni ta'minlash uchun geympad holatini muntazam ravishda so'rash uchun requestAnimationFrame dan foydalaning.
• Ulanish uzilishlarini boshqaring: Xatoliklarni oldini olish uchun gamepaddisconnected hodisasini tinglang va geympad uzilishlarini to'g'ri boshqaring.
• Standart xaritadan foydalaning: Turli geympadlarda izchil tajribani ta'minlash uchun iloji boricha standart geympad xaritasidan foydalaning.
• Konfiguratsiya variantlarini taqdim eting: Foydalanuvchilarga o'zlarining individual ehtiyojlariga mos ravishda tugma va o'q xaritalarini sozlashga ruxsat bering.
• Bir nechta brauzerda sinovdan o'tkazing: Izchil ishlashni ta'minlash uchun ilovangizni bir nechta brauzerda sinovdan o'tkazing.
• Qulaylikni hisobga oling: Nogironligi bo'lgan o'yinchilarga mos kelishi uchun o'yiningizni qulaylikni hisobga olgan holda loyihalashtiring.

Xulosa

GamePad API veb-brauzerlardan o'yin kontrollerlariga kirishning kuchli va standartlashtirilgan usulini taqdim etadi. GamePad API'ni o'zlashtirib, siz turli o'yin kontrollerlaridan foydalanuvchi kiritishiga javob beradigan qiziqarli va interaktiv veb-asosidagi o'yinlar va ilovalarni yaratishingiz mumkin.

Ushbu qo'llanma GamePad API haqida, asosiy sozlashdan tortib ilg'or texnikalargacha bo'lgan hamma narsani qamrab olgan keng qamrovli sharhni taqdim etdi. Ushbu qo'llanmada keltirilgan maslahatlar va eng yaxshi amaliyotlarga rioya qilish orqali siz o'yin kontrollerini qo'llab-quvvatlashni veb-ilovalaringizga samarali integratsiya qilishingiz va foydalanuvchilaringiz uchun qiziqarli tajribalar yaratishingiz mumkin.

Izchil ishlashni ta'minlash uchun ilovangizni turli brauzerlar va geympadlarda sinchkovlik bilan sinab ko'rishni unutmang. Nogironligi bo'lgan o'yinchilar uchun qulaylikni hisobga oling va foydalanuvchilarga boshqaruvni o'z xohishlariga ko'ra sozlash imkonini beradigan konfiguratsiya variantlarini taqdim eting. Biroz harakat bilan siz keng doiradagi o'yinchilar uchun yoqimli va qulay o'yinlar yaratishingiz mumkin.

Qo'shimcha Resurslar

• MDN Veb Hujjatlari: Gamepad API
• W3C Gamepad Spetsifikatsiyasi
• Gamepad Test: Onlayn geympad testeri