ผมสร้างระบบรองรับ Gamepad ด้วย JavaScript

ผมใช้เวลาช่วงวันหยุดสุดสัปดาห์ในการทำ reverse-engineering ระบบอินพุตของคอนโทรลเลอร์สำหรับเกมบนเบราว์เซอร์ ผมนั่งจ้องอาเรย์ว่างเปล่าตอนตีสอง โดยที่ไม่มีข้อมูลอะไรแสดงขึ้นมาเลย

ประสบการณ์นั้นสอนผมเกี่ยวกับ browser APIs และการทำ hardware polling ได้มากกว่าบทเรียนไหนๆ

วงการเกมบนเว็บกำลังเติบโตขึ้น ด้วย WebGL และ WebGPU ทำให้เกมบนเบราว์เซอร์มีคุณภาพสูงขึ้นมาก ผู้เล่นคาดหวังว่าจะสามารถเสียบจอย Xbox หรือ PS5 แล้วใช้งานได้ทันที

หากคุณกำลังสร้างเกม, เครื่องมือเพื่อการเข้าถึง (accessibility tools) หรือแดชบอร์ดแบบกำหนดเอง คุณจำเป็นต้องรู้จัก HTML5 Gamepad API มันใช้งานได้ใน Chrome, Firefox และ Edge โดยไม่ต้องใช้ไลบรารีใดๆ

นี่คือสิ่งที่ผมได้เรียนรู้:

  • API นี้ทำงานแบบ event-driven สำหรับการเชื่อมต่อ แต่ทำงานแบบ polling-based สำหรับการรับอินพุต
  • คุณต้องใช้ requestAnimationFrame เพื่ออ่านค่าอินพุตอย่างต่อเนื่อง
  • เบราว์เซอร์จะไม่แสดงคอนโทรลเลอร์จนกว่าผู้ใช้จะกดปุ่มใดปุ่มหนึ่ง นี่เป็นฟีเจอร์ด้านความเป็นส่วนตัวเพื่อป้องกันการทำ hardware fingerprinting

การจัดการข้อมูล:

  • ใช้ gamepad.mapping เพื่อตรวจสอบเลย์เอาต์แบบ "standard" การทำ mapping แบบมาตรฐานจะช่วยให้มั่นใจว่าปุ่ม 0 จะเป็นปุ่มด้านล่างเสมอ
  • ตรวจสอบ gamepad.id เพื่อดู Vendor และ Product IDs ซึ่งจะช่วยให้คุณระบุฮาร์ดแวร์เฉพาะเจาะจงได้ เช่น Sony DualSense
  • ควรทำ deadzone filter เสมอ เพราะอนาล็อกสติ๊กไม่เคยอยู่ตรงกลางอย่างสมบูรณ์แบบ หากไม่มี deadzone ตัวละครหรือกล้องของคุณจะไหล (drift) ตลอดเวลา

วิธีจัดการ deadzone แบบง่ายๆ: หาก Math.abs(axis) > 0.1 ให้ใช้ค่านั้น

Haptic feedback: คุณสามารถใช้ gamepad.vibrationActuator.playEffect เพื่อสั่งให้สั่น (rumble) ได้ ซึ่งใช้งานได้ดีใน Chrome และ Edge ส่วน Firefox รองรับเพียงบางส่วน และ Safari ยังไม่รองรับ

สรุปประเด็นสำคัญสำหรับโปรเจกต์ของคุณ:

  • คอยดักฟัง (listen) เหตุการณ์ gamepadconnected และ gamepaddisconnected
  • ติดตามสถานะปุ่มก่อนหน้าเพื่อแยกแยะระหว่างการ "กด" (press) กับการ "กดค้าง" (hold)
  • ใช้ค่า threshold ของ deadzone เพื่อเพิกเฉยต่อการขยับเพียงเล็กน้อยของสติ๊ก
  • ทดสอบกับเบราว์เซอร์หลายๆ ตัว
  • อย่าลืมว่า navigator.getGamepads() จะคืนค่าเป็น snapshot คุณต้องเรียกใช้ฟังก์ชันนี้ภายใน loop เพื่อให้ได้ข้อมูลล่าสุดเสมอ

หากคุณต้องการทดสอบฮาร์ดแวร์ก่อนเริ่มเขียนโค้ด ให้ใช้ GamepadTester.pro ซึ่งจะแสดงข้อมูล API ดิบและค่าแกน (axis values) แบบเรียลไทม์

แหล่งที่มา: https://dev.to/grezalazar23453/i-built-gamepad-support-into-my-web-app-using-pure-javascript-heres-everything-i-learned-51a5