VueUse useGamepad 游戏手柄

VueUse useGamepad 游戏手柄,为Gamepad API提供响应式绑定。

代码示例

由于Gamepad API的工作原理，你必须在它被检测到之前使用Gamepad与页面进行交互。

<script setup>
import { computed } from 'vue'
import { useGamepad } from '@vueuse/core'

const { isSupported, gamepads } = useGamepad()
const gamepad = computed(() => gamepads.find(g => g.mapping === 'standard'))
</script>
<template>
  <span>
    {{ gamepad.id }}
  <span>
</template>

Gamepad Updates

目前，手柄API没有事件支持来更新手柄的状态。为了更新手柄状态，requestAnimationFrame用于轮询手柄的变化。您可以通过使用useGamepad提供的暂停和恢复函数来控制这个轮询

import { useGamepad } from '@vueuse/core'

const { pause, resume, gamepads } = useGamepad()

pause()

// gamepads object will not update

resume()

// gamepads object will update on user input

连接和断开事件

onConnected和onDisconnected事件将在手柄连接或断开时触发。

const { gamepads, onConnected, onDisconnected } = useGamepad()

onConnected((index) => {
  console.log(`${gamepads.value[index].id} connected`)
})

onDisconnected((index) => {
  console.log(`${index} disconnected`)
})

Vibration 振动

使用前检查 Gamepad Haptics API兼容性。

<script setup>
import { mapGamepadToXbox360Controller } from '@vueuse/core'


const controller = mapGamepadToXbox360Controller(gamepad)
</script>


<template>
  <span>{{ controller.buttons.a.pressed }}</span>
  <span>{{ controller.buttons.b.pressed }}</span>
  <span>{{ controller.buttons.x.pressed }}</span>
  <span>{{ controller.buttons.y.pressed }}</span>
</template>

Mappings

为了让Gamepad API更容易使用，我们提供了映射，将控制器映射到控制器按钮布局。

<script setup>
import { mapGamepadToXbox360Controller } from '@vueuse/core'

const controller = mapGamepadToXbox360Controller(gamepad)
</script>
<template>
  <span>{{ controller.buttons.a.pressed }}</span>
  <span>{{ controller.buttons.b.pressed }}</span>
  <span>{{ controller.buttons.x.pressed }}</span>
  <span>{{ controller.buttons.y.pressed }}</span>
</template>

源码：https://github.com/vueuse/vueuse/blob/main/packages/core/useGamepad/index.ts