From 3bdf816d88901ab6b0f79e8f4cf63c366e7ed1e4 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sun, 10 Mar 2024 10:17:46 +0700
Subject: [PATCH] Updated How to create custom touch control layout (markdown)

---
 How-to-create-custom-touch-control-layout.md | 109 ++++++++++++++++++-
 1 file changed, 108 insertions(+), 1 deletion(-)

diff --git a/How-to-create-custom-touch-control-layout.md b/How-to-create-custom-touch-control-layout.md
index 9f1249e..186337b 100644
--- a/How-to-create-custom-touch-control-layout.md
+++ b/How-to-create-custom-touch-control-layout.md
@@ -25,5 +25,112 @@
 ## Getting started
 1. Do all the preparation steps.
 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).
+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.