Updated How to create custom touch control layout (markdown)

redphx 2024-03-10 10:17:46 +07:00
parent 3ddb21e79d
commit 3bdf816d88

@ -27,3 +27,110 @@
2. Open Chrome DevTools, enable `Toggle device emulation`, reload page.
3. Load the game you want to create custom layout for. It must not having official touch support. In this guide I'll pick [DOOM (1993)](https://www.xbox.com/en-US/play/games/doom-1993/9PLZPHBNHTMF).
![image](https://github.com/redphx/better-xcloud/assets/96280/d57753b2-3b2b-4ed9-89bf-35ad4a6d99cd)
4. Switch to `Console panel` in `Chrome DevTools`. Click on the 🚫 button to clear the console.
5. We'll pass the custom layout to the `BX_EXPOSED.test_touch_control()` function to test it. Paste this code into the console then press Enter to reset back to default layout:
```javascript
BX_EXPOSED.test_touch_control(
{
"left": {
"inner": [
{
"type": "joystick",
"expand": false,
"axis": {
"input": "axisXY",
"output": "leftJoystick",
"deadzone": {
"threshold": 0.05,
"radial": true
}
}
}
],
"outer": [
null,
null,
[
{
"type": "directionalPad"
}
],
{
"type": "button",
"action": "leftThumb"
},
null,
{
"type": "button",
"action": "leftTrigger"
},
{
"type": "button",
"action": "leftBumper"
}
]
},
"right": {
"inner": [
{
"type": "button",
"action": "gamepadY"
},
{
"type": "button",
"action": "gamepadB"
},
{
"type": "button",
"action": "gamepadA"
},
{
"type": "button",
"action": "gamepadX"
}
],
"outer": [
{
"type": "button",
"action": "rightBumper"
},
{
"type": "button",
"action": "rightTrigger"
},
null,
{
"type": "button",
"action": "rightThumb"
},
[
{
"type": "joystick",
"axis": {
"input": "axisXY",
"output": "rightJoystick",
"deadzone": {
"threshold": 0.05,
"radial": true
}
}
}
]
]
},
"upper": {
"right": [
{
"type": "button",
"action": "menu"
},
{
"type": "button",
"action": "view"
}
]
}
}
)
```
6. Use the [Touch Adaptation Kit documentation](https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/game-streaming/game-streaming-touch-touch-adaptation-kit-overview) to design your own layout.