diff --git a/How-to-create-custom-touch-control-layout.md b/How-to-create-custom-touch-control-layout.md index dfdf503..42b1c92 100644 --- a/How-to-create-custom-touch-control-layout.md +++ b/How-to-create-custom-touch-control-layout.md @@ -3,9 +3,10 @@ ## Limitations - Doesn't support custom layout assets -- Only supports one layout for the entire game (cannot dynamically switch layout based on context) +- Cannot dynamically switch layouts based on the game's context (one layout for the entire game, unless you manually switch it) ## Requirements +- [Visual Studio Code](https://code.visualstudio.com/) - Have Chrome/Edge or any Chromium browsers installed. - Have an Android device with Kiwi Browser installed if you want to test on real device. - Basic knowgledge about: @@ -13,6 +14,111 @@ - [Chrome DevTools](https://developer.chrome.com/docs/devtools/) and its [Console Panel](https://developer.chrome.com/docs/devtools/console) - Get familiar with the [Touch Adaptation Kit](https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/system/overviews/game-streaming/game-streaming-touch-touch-adaptation-kit-overview). This is the same tech that is being used to create touch control layouts in xCloud and Better xCloud. The tool isn't provided publicly so we have to create the layout manually. +## How to create layout +1. Install [TAK CLI](https://github.com/microsoft/xbox-game-streaming-tools) and [Touch Adaptation Kit Editor extension](https://marketplace.visualstudio.com/items?itemName=xbox-tools.vscode-xbox-input-editor-extension) in VS Code. +2. Read [Touch Adaptation Kit Editor extension's documentation](https://marketplace.visualstudio.com/items?itemName=xbox-tools.vscode-xbox-input-editor-extension) to create an empty bundle and play around with the layout. +3. 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. You can also look at [other custom layouts](https://github.com/redphx/better-xcloud/tree/gh-pages/touch-layouts/layouts) for references. +4. One you're satisfied with the layout, go to the next section. + +Here is the default layout if you need it: +```json +{ + "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/master/touch-adaptation-kit/schemas/layout/v4.0/layout.json", + "content": { + "left": { + "inner": [ + { + "type": "joystick", + "expand": false, + "axis": { + "input": "axisXY", + "output": "leftJoystick" + } + } + ], + "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" + } + } + ] + ] + }, + "upper": { + "right": [ + { + "type": "button", + "action": "menu" + }, + { + "type": "button", + "action": "view" + } + ] + } + } +} +``` + ## Preparations for testing on desktop 1. Open the xCloud website in Chrome/Edge/Chromium browser. 2. Open the `Chrome DevTools`. @@ -40,118 +146,26 @@ 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: +5. We'll pass the custom layout to the `BX_EXPOSED.test_touch_control()` function to test it. Paste the entire content of the layout that you created in VS Code to the console, then press Enter: ```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" - } - ] + "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/v4.0/layout.json", + "content": { + ... } } ) ``` -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. You can also look at [other custom layouts](https://github.com/redphx/better-xcloud/tree/gh-pages/touch-layouts/layouts) for references. -7. Pass your modified layout to the `BX_EXPOSED.test_touch_control()` function to update it. Do this step again and again until you satisfy with the result. ## Submit layout -1. Fork the [`gh-pages`](https://github.com/redphx/better-xcloud/tree/gh-pages) branch: +1. Remove `"$schema"` line from the layout -2. Create two files: `.json` and `layouts/.json` +2. Add `"name": "Layout Name"` line into the layout (Replace "Layout Name" with the real name) + +3. Fork the [`gh-pages`](https://github.com/redphx/better-xcloud/tree/gh-pages) branch: + +4. Create two files: `touch-layouts/.json` and `touch-layouts/layouts/.json` - `.json`: - To find the value of `XBOX_TITLE_ID`: 1. Find the game on [dbox.tools](https://dbox.tools). [Here](https://dbox.tools/store/products/9PLZPHBNHTMF/) is the page for DOOM 1993. @@ -173,17 +187,14 @@ BX_EXPOSED.test_touch_control( { "schema_version": 1, "layouts": { - "LAYOUT_ID": { - "name": "Layout Name", - "content": - } + "LAYOUT_ID": } } ``` -3. ⚠️ Use [DuckDuckGo's JSON Beautifier tool](https://duckduckgo.com/?t=ffab&q=format+json&ia=answer) (indent with 2 spaces) to beautify & validate the JSON files. +5. ⚠️ Use [DuckDuckGo's JSON Beautifier tool](https://duckduckgo.com/?t=ffab&q=format+json&ia=answer) (indent with 2 spaces) to beautify & validate the JSON files. Copy the result and paste it back into the layout file. -4. Create a pull request including the screenshot of the layout. Chrome/Edge has a built-in screenshot feature: +6. Create a pull request including the screenshot of the layout. Chrome/Edge has a built-in screenshot feature: Screenshot 2024-03-10 at 10 39 49 -5. Done! That's the basic of it. I'll update with more details later. \ No newline at end of file +7. Done! That's the basic of it. I'll update with more details later. \ No newline at end of file